如何自定義組件化?假設(shè)我們要開發(fā)一個模態(tài)框組件,需要定制彈出消息和按鈕,如何開發(fā)? 在`.json`中`usingComponents`為該文件引用的組件的相對路徑配置。 { "component": true, "usingComponents": {} } ... //.wxml <view class='wx_dialog_container' hidden="{{!isShow}}"> <view class='wx-mask'></view> <view class='wx-dialog'> <view class='wx-dialog-title'>{{ title }}</view> <view class='wx-dialog-content'>{{ content }}</view> <view class='wx-dialog-footer'> <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view> <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view> </view> </view> </view> ... //.js Component({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, /** * 組件的屬性列表 * 用于組件自定義設(shè)置 */ properties: { // 彈窗標(biāo)題 title: { // 屬性名 type: String, // 類型(必填),目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型) value: '標(biāo)題' // 屬性初始值(可選),如果未指定則會根據(jù)類型選擇一個 }, // 彈窗內(nèi)容 content: { type: String, value: '彈窗內(nèi)容' }, // 彈窗取消按鈕文字 cancelText: { type: String, value: '取消' }, // 彈窗確認(rèn)按鈕文字 confirmText: { type: String, value: '確定' } }, /** * 私有數(shù)據(jù),組件的初始數(shù)據(jù) * 可用于模版渲染 */ data: { // 彈窗顯示控制 isShow: false }, /** * 組件的方法列表 * 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似 */ methods: { //隱藏彈框 hideDialog() { this.setData({ isShow: !this.data.isShow }) }, //展示彈框 showDialog() { this.setData({ isShow: !this.data.isShow }) }, /* */ _cancelEvent() { //觸發(fā)取消回調(diào) this.triggerEvent("cancelEvent") }, _confirmEvent() { //觸發(fā)成功回調(diào) this.triggerEvent("confirmEvent"); } } })
<!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> //在 index.wxml 中引用了 item.wxml,就可以使用item模板: <import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/>import有作用域的概念,即只會import目標(biāo)文件內(nèi)定義的template 父組件如何調(diào)用子組件中的方法?組件定義完之后,在頁面值引入需要在.josn中配置使用的組件 { "usingComponents": { "dialog": "/components/Dialog/dialog" } } //... .wxml <view class="container"> <dialog id='dialog' title='我是標(biāo)題' content='恭喜你,學(xué)會了小程序組件' cancelText='知道了' confirm='謝謝你' bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"> </dialog> <button type="primary" bindtap="showDialog"> ClickMe! </button> </view> 當(dāng)我們需要操作組件中的方法是需要在自定義組件中加上一個 id,然后在 js 代碼中使用如下方法:
/** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { //獲得dialog組件 this.dialog = this.selectComponent("#dialog"); }, //... showDialog() { this.dialog.showDialog(); }, //取消事件 _cancelEvent() { console.log('你點擊了取消'); this.dialog.hideDialog(); }, //確認(rèn)事件 _confirmEvent() { console.log('你點擊了確定'); this.dialog.hideDialog(); } 子組件中如何調(diào)用父組件的方法?在父組件定義一個 bindcustomevent="pageEventListener" 在子組件中調(diào)用triggerEvent this.triggerEvent('customevent',data)
路由跳轉(zhuǎn)如何傳值?模板綁定 data-id點擊跳轉(zhuǎn)路由傳遞id,不同的是id 在currentTarget.dataset對象中 tapBanner: function (e) { if (e.currentTarget.dataset.id != 0) { console.log(e) wx.navigateTo({ url: "../detail/detail?id=" + e.currentTarget.dataset.id }) } } 是否支持模塊化開發(fā)?我們可以將一些公共的代碼抽離成為一個單獨的js文件,作為一個模塊。模塊只有通過module.exports或者 exports才能對外暴露接口。 // common.js function sayHello(name) { console.log('Hello ${name} !') } module.exports.sayHello = sayHello var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') } 頁面間如何傳遞數(shù)據(jù)?
const pages = getCurrentPages() const prevPage = pages[pages.length - 2] console.log(prevPage)
如何進(jìn)行數(shù)據(jù)分析?小程序提供小訪問規(guī)模、來源、頻次、時長、深度、留存以及頁面詳情等數(shù)據(jù),具體分析用戶新增、活躍和留存情況,提供小程序的用戶畫像數(shù)據(jù),包括用戶年齡、性別、地區(qū)、終端及機(jī)型分布 并且如果需要把數(shù)據(jù)接入到自己的服務(wù)中,也可以通過調(diào)用微信接口的方式拿到數(shù)據(jù):如果需要自定義數(shù)據(jù),我們可以在小程序中調(diào)用方法: wx.reportAnalytics(eventName, data) 不過在使用前,需要在小程序管理后臺自定義分析中新建事件,配置好事件名與字段。另外自定義事件的數(shù)據(jù)無法通過接口獲得。 小程序能否運(yùn)行在瀏覽器中?目前美團(tuán)開源了一套自己的方案:mpvue ,使用 vue 的形式來編寫小程序。并且可以通過改變打包配置的方式,讓同一套代碼可以同時運(yùn)行在小程序和瀏覽器中。 小程序如何兼容?小程序的功能不斷的增加,但是舊版本的微信客戶端并不支持新功能,所以在使用這些新能力的時候需要做兼容。 如果希望用戶在最新版本的客戶端上體驗?zāi)男〕绦?,可以這樣子提示 if (wx.openBluetoothAdapter) { wx.openBluetoothAdapter() } else { wx.showModal({ title: '提示', content: '當(dāng)前微信版本過低,無法使用該功能,請升級到最新微信版本后重試。' }) } |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)