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