萌新初探小程序開發(fā)
 小程序目前基礎(chǔ)庫版本2.0.6 如何自定義組件化？假設(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>
/**
* 生命周期函數(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ù)無法通過接口獲得。 小程序能否運行在瀏覽器中？目前美團(tuán)開源了一套自己的方案：mpvue ，使用 vue 的形式來編寫小程序。并且可以通過改變打包配置的方式，讓同一套代碼可以同時運行在小程序和瀏覽器中。 小程序如何兼容？小程序的功能不斷的增加，但是舊版本的微信客戶端并不支持新功能，所以在使用這些新能力的時候需要做兼容。 如果希望用戶在最新版本的客戶端上體驗?zāi)男〕绦?，可以這樣子提示
if (wx.openBluetoothAdapter) {
wx.openBluetoothAdapter()
} else {
wx.showModal({
title: '提示',
content: '當(dāng)前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
})
}
|
