小程序是一種新的開放能力，開發者可以快速地開發一個小程序。小程序可以在微信內被便

捷地獲取和傳播，同時具有出色的使用體驗。對于微信小程序，前端開發應該不陌生，目前也

是非?；?，很多公司都會進行開發。對于小程序的優點我就不到這過多描述了，今天我是想來

總結下微信小程序頁面和組件傳值。

微信小程序目錄結構

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)
 }
 }
})