微信小程序自定義組件，這里列舉了一個常用的提示自定義組件，調用自定義組件中的方法和字段。僅供參考和學習。

編寫組件：

在根目錄下添加“components”目錄，然后像添加Page頁面一樣添加自定義組件"tips"

文件結構跟page一樣，有自己的js邏輯，json配置文件，標簽wxml，樣式文件wxss。這里使用的是weui的樣式庫。

tips.wxml：

<view class="weui-toptips weui-toptips_warn" hidden="{{showTopTips}}">{{msg}}</view>

tips.js

// components/tips/tips.js Component({/*** 組件的屬性列表*/properties: {},/*** 組件的初始數據*/data: {showTopTips: true,msg: '提示'},/*** 組件的方法列表*/methods: {showDialog(msg) {wx.showModal({title: '提示',content: msg,})},showTopTip: function(msg) {let that = this;that.setData({showTopTips: false,msg: msg});setTimeout(function() {that.setData({showTopTips: true});}, 1500);}} })

tips.wxss

/* components/tips/tips.wxss *//*在組件wxss中不應使用ID選擇器、屬性選擇器和標簽名選擇器。*/.inner {color: red; }.weui-toptips_warn {background-color: #e64340; }.weui-toptips {position: fixed;-webkit-transform: translateZ(0);transform: translateZ(0);top: 0;left: 0;right: 0;padding: 5px;font-size: 14px;text-align: center;color: #fff;z-index: 5000;word-wrap: break-word;word-break: break-all; } View Code

下面做一個測試頁調用

/pages/test頁進行測試

1、首先test.json配置中引用tips自定義組件：

{"usingComponents": {"mytips": "/components/tips/tips","dialog": "/components/dialog/dialog"} }

2、test.wxml 中添加自定義組件標簽

<mytips id='mytips'></mytips> <view class='container'><button type='primary' size='default' bindtap='showTip'>提示</button> </view>

3、test.js 調用自定義組件中的方法和字段賦值

// pages/test/test.js var tips ; Page({/*** 頁面的初始數據*/data: {com_data:'',showTopTips:false,msg:'' },/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {this.setData({com_data:'test 設置屬性值'})},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {//獲得mytips組件tips = this.selectComponent("#mytips")//獲得dialog組件//this.dialog = this.selectComponent("#dialog"); },showTip: function () {//tips.showDialog('jbbbbbbbb');//returntips.showTopTip('提示內容。。。');},showDialog() {this.dialog.showDialog('顯示的內容');},//取消事件 _cancelEvent() {console.log('你點擊了取消');this.dialog.hideDialog();},//確認事件 _confirmEvent() {console.log('你點擊了確定');this.dialog.hideDialog();} }) View Code

?

到此自定義組件的定義和使用已經告一段落。

效果顯示：在頁面頂端顯示提示內容。

?

轉載于:https://www.cnblogs.com/tongyi/p/10899893.html

總結

以上是生活随笔為你收集整理的微信小程序自定义组件，提示组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。