小程序是一種新的開(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)
 }
 }
})