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