小程序是一種新的開(kāi)放能力，開(kāi)發(fā)者可以快速地開(kāi)發(fā)一個(gè)小程序。小程序可以在微信內(nèi)被便
捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)。對(duì)于微信小程序，前端開(kāi)發(fā)應(yīng)該不陌生，目前也
是非常火，很多公司都會(huì)進(jìn)行開(kāi)發(fā)。對(duì)于小程序的優(yōu)點(diǎn)我就不到這過(guò)多描述了，今天我是想來(lái)
總結(jié)下微信小程序頁(yè)面和組件傳值。
微信小程序目錄結(jié)構(gòu)
1.頁(yè)面與頁(yè)面?zhèn)髦?跳轉(zhuǎn)的url帶參傳值
微信小程序頁(yè)面直接傳值我們經(jīng)常用到的是頁(yè)面URL跳轉(zhuǎn)傳值，跳轉(zhuǎn)到的頁(yè)面通過(guò)到生命周
期onLoad里面接收。
//A頁(yè)面
Page({
data:{
},
linkTo:function(){//頁(yè)面事件綁定方法
let data = 'hello world';
wx.navigateTo({
url: '/pages/my/index?name=' + data,
})
}
}）
//B頁(yè)面
Page({
data:{
name:' '
},
onLoad:function(option){//接收數(shù)據(jù)
this.setData({
name: option.name
})
}
}）
如果頁(yè)面有多個(gè)值要傳，直接用&符合鏈接起來(lái)就可以了。
比如'/pages/my/index?name=' + data1+'&number='+data2;2.頁(yè)面與頁(yè)面?zhèn)髦?全局globalData傳值
//App.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: {
name:'hello world'
}
})
//A頁(yè)面
const app = getApp();//獲取全局對(duì)象
Page({
data:{
},
onLoad:function(){
let name = app.globalData.name;
console.log(name);//hello world
}
}）全局?jǐn)?shù)據(jù)的拿去是通過(guò)拿去globalData對(duì)象，再到其他頁(yè)面獲取，當(dāng)然你也可以
修改全局對(duì)象里面數(shù)據(jù)其他頁(yè)面從新去獲取。
//A頁(yè)面
const app = getApp();//獲取全局對(duì)象
Page({
data:{
},
onLoad:function(){
app.globalData.name='微信小程序'; //修改全局?jǐn)?shù)據(jù)
}
}）
//B頁(yè)面
const app = getApp();//獲取全局對(duì)象
Page({
data:{
},
onLoad:function(){
let name = app.globalData.name;
console.log(name);//微信小程序
}
}）2.頁(yè)面與頁(yè)面?zhèn)髦?頁(yè)面數(shù)據(jù)緩存wx.setStorageSync(KEY,DATA)
//A頁(yè)面
Page({
data:{
},
onLoad:function(){
wx.setStorage({
key:"name",
data:"hello world"
})
}
}）
//B頁(yè)面
Page({
data:{
},
onLoad:function(){
var value = wx.getStorageSync('name')；
console.log(value);// hello world
}
}）
此處緩存數(shù)據(jù)要用同步wx.setStorageSync(),因?yàn)楫惒接锌赡軘?shù)據(jù)或者有可能會(huì)獲取不到下面我們來(lái)說(shuō)說(shuō) 微信小程序組件之前傳值
組件間通信
組件間的基本通信方式有以下幾種。
WXML 數(shù)據(jù)綁定：用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)，僅能設(shè)置 JSON 兼容數(shù)據(jù)
（自基礎(chǔ)庫(kù)版本 2.0.9 開(kāi)始，還可以在數(shù)據(jù)中包含函數(shù)）。具體在 組件模板和樣式 章節(jié)中介紹。
事件：用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)。
如果以上兩種方式不足以滿足需要，父組件還可以通過(guò) this.selectComponent 方法獲取子組件實(shí)例對(duì)象，這樣就可以直接訪問(wèn)組件的任意數(shù)據(jù)和方法。
說(shuō)到組件，這里我們先了解組件的使用，組件的js、json文件和頁(yè)面不一樣。
Component構(gòu)造器
Component({
behaviors: [],
properties: {
myProperty: { // 屬性名
type: String,
value: ''
},
myProperty2: String // 簡(jiǎn)化的定義方式
},
data: {}, // 私有數(shù)據(jù)，可用于模板渲染
lifetimes: {
// 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在methods段中定義的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在methods段中定義的方法名
attached: function () { }, // 此處attached的聲明會(huì)被lifetimes字段中的聲明覆蓋
ready: function() { },
pageLifetimes: {
// 組件所在頁(yè)面的生命周期函數(shù)
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新屬性和數(shù)據(jù)的方法與更新頁(yè)面數(shù)據(jù)的方法類似
})
},
// 內(nèi)部方法建議以下劃線開(kāi)頭
_myPrivateMethod: function(){
// 這里將 data.A[0].B 設(shè)為 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
使用 Component 構(gòu)造器構(gòu)造頁(yè)面
{
"component": true,//這里是它把定義成組件，要不然引入到頁(yè)面會(huì)報(bào)錯(cuò)
}引入組件
//A頁(yè)面 json
{
"usingComponents": {
"myComponents": "../../components/myComponents/index",//引入組件
},
}
//A頁(yè)面 WXML
<myComponent name="hello world"></myComponent>
//myComponent接收數(shù)據(jù)
Component({
properties: {
name:{
value: "",
type: String //此處設(shè)置數(shù)據(jù)類型 這樣 組件就能接收到數(shù)據(jù)
}
},
methods: {
}
})組件間通信與事件
監(jiān)聽(tīng)事件
事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件，引用組件的頁(yè)面可以監(jiān)聽(tīng)這些事件。監(jiān)聽(tīng)自定義組件事件的方法與監(jiān)聽(tīng)基礎(chǔ)組件事件的方法完全一致：
<!-- 當(dāng)自定義組件觸發(fā)“myevent”事件時(shí)，調(diào)用“onMyEvent”方法 -->
<myComponent bindmyevent="onMyEvent"></myComponent>
<!-- 或者可以寫成 -->
<myComponent bind:myevent="onMyEvent"></myComponent>
Page({
onMyEvent: function(e){
e.detail // 自定義組件觸發(fā)事件時(shí)提供的detail對(duì)象
}
})觸發(fā)事件
自定義組件觸發(fā)事件時(shí)，需要使用 triggerEvent 方法，指定事件名、detail對(duì)象和事件選項(xiàng)
<!-- 在自定義myComponent組件中 -->
<button bindtap="onTap">點(diǎn)擊這個(gè)按鈕將觸發(fā)“myevent”事件</button>
Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = {} // detail對(duì)象，提供給事件監(jiān)聽(tīng)函數(shù)
var myEventOption = {} // 觸發(fā)事件的選項(xiàng)
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})