前言：這段時間一直負責公司的小程式的開發，總結了一些小程式的開發心得，方便自己以後的查閱也方便同仁少踩點坑。文章底部的技巧類小程式的識別小程式二維碼功能，小程式的高斯模糊，都是自己填的坑。歡迎交流。
一、 框架類
1.Template引入與component構造器引入，應該選擇哪一個？
只是展示用，建議使用template，元件中涉及到較多的邏輯，建議使用component。 因為template沒有自己的js檔案，所以在列表中涉及到列表子項獨立的操作，建議將列表子項寫成component。
示例程式碼： page檔案
<!--Wxml-->
<!--引用-->
<import src="goodlist.wxml"/>
<!--使用 goodList為page傳入的資料-->
<template is="statement-goodlist" data="{{goodList}}"/>
複製程式碼2.wxs檔案的使用
Wxs更多的是作為一個過濾器使用，.wxs 檔案可以被其他的 .wxs 檔案 或 WXML 中的 標籤引用。 .wxs模組中引用其他 wxs 檔案模組，可以使用 require 函式。
示例程式碼 page檔案--類似過濾器效果
<!--wxml-->
<!--引用-->
<wxs src="../../assets/wxs/phonenum.wxs" module="phone" />
<!--使用-->
<text class='statement-adress-cellphone'>{{phone.phone(AddressInfo.phone)}}</text>
複製程式碼3.生命週期
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
// 前進-跳轉到其他頁面的時候
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
// 後退-點選當前頁面返回的時候
}
複製程式碼利用這兩個生命週期可以解決的問題： 防止使用者快速切換頁面（A->B）。導致動態設定導航欄中的文字顯示出現錯誤 快速切換頁面可能導致A頁面中的非同步資料還未返回，致使當切換到B頁面的時候A資料才返回，使得導航欄顯示的文字為A頁面的導航欄標題。（即：A頁面的導航欄標題為hello，B頁面的導航欄標題為world,當快速由A->B,此時雖然在B頁面，但是導航欄標題顯示的是hello，而不是world）
參考連結: 小程式中的生命週期onHide和onUnload
二、 通訊類
如果說資料是汽車的話，傳遞的通道或方式就是汽車要行駛的道路。所以，資料驅動型的框架，我們少不了要學習如何建設這條"道路"，讓"汽車"高速行駛。
1.頁面與元件通訊
1-1.頁面傳遞內容給元件
page為頁面的屬性名
components 為元件的外部屬性名, 用properties物件接收
頁面
<!-- Wxml -->
<components-a components="{{page}}"></components-a>
<!-- Js -->
Page({
data: {
page: '父親pages'
}
})
複製程式碼元件
父親pages
<!-- Wxml -->
<!-- Js -->
Component({
/**
* 元件的屬性列表
*/
properties: {
components: { // 屬性名
type: String
}
},
/**
* 元件的方法列表
*/
methods: {
onTap: function () {
let page = this.data.components
console.log(page) // 我是父親pages
}
}
})
複製程式碼1-2.元件傳遞內容給頁面
給元件設定myevent事件，通過this.triggerEvent('myevent', myEventDetail) 觸發該myevent事件並傳遞內容，在頁面用onMyEventshi事件監聽傳遞過來的資料。
頁面
<!-- Wxml -->
<components-a bind:myevent="onMyEvent"></components-a>
<!-- Js -->
Page({
// 監聽myevent事件
onMyEvent: function (e) {
console.log('接收a元件傳遞的內容:', e.detail) // '我是a元件'
}
})
複製程式碼元件
<!-- Wxml -->
<!-- 在自定義元件"components-a"中 -->
<button bindtap="onTap">點選</button>
<!-- Js -->
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = '我是a元件'
this.triggerEvent('myevent', myEventDetail) // 觸發元件上的“myevent”事件
}
}
})
複製程式碼2.元件與元件通訊
兩個無任何關聯的元件：通過全域性變數或本地快取傳遞資料
兩個有關聯的元件(同一個父頁面下)： 通過上面的方法，用元件 => 頁面 => 元件的方式傳遞資料。
3.頁面之間的通訊
3-1.使用全域性變數 app.globalData
3-2.使用本地快取 wx.setStorageSync
3-3.url傳遞
// A頁面-傳遞資料
// 需要注意的是，wx.switchTab 中的 url 不能傳引數。
wx.navigateTo({
url: '../pageD/pageD?name=raymond&gender=male'
})
// B頁面-接收資料
// 通過onLoad的option
<!-- JS -->
...
Page({
onLoad: function(option){
console.log(option.name + 'is' + option.gender) // raymond is male
this.setData({
option: option
})
}
})
複製程式碼3-4.後一級頁面對前一級頁面的資料的管理(通過獲取到頁面物件進行資料操作)
這個方法的精髓，是通過獲取到其他頁面的物件原型，然後通過原型方法 setData 對當前物件管理的 data 進行修改，
示例如下：
// pageE.js
Page({
data: {
index: 1
}
})
複製程式碼當跳轉到下一個頁面 F 之後，假定在 F 中有操作需要對 E 中的資料有修改，則可以使用以下方法：
// pageF.js
...
Page({
changeIndexInE: function(){
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.setData({
index: 0
})
}
})
複製程式碼這個方法可以操作頁面堆疊裡面的頁面的資料，可以做到讓後一級頁面對上級頁面群的資料管理。
參考連結：愛範兒-頁面之間的資料傳遞
4.頁面與模板之間的通訊
頁面
<!-- Wxml -->
<template is="msgItem" data="{{...item}}"/>
<!-- JS -->
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
複製程式碼傳入模板的除了變數，還可以是事件方法物件。例如，模板中的點選事件，可以傳遞到使用模板的元素中。
三 、技巧類
1. 索引是變數，修改陣列的值
根據文件，採用'array[0].text':'changed data'的格式。但是我們實際應用中需要改變的索引值往往是動態的，所以，改裝一下如下：
示例程式碼：
// 修改某個陣列的動態的值 --- 提前將陣列物件準備好
// 索引index是變數， value是變數
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})
複製程式碼2.其它方法封裝(如果有更好的方法，歡迎交流)
that's all, 以上就是我目前所有的關於小程式專案的經驗總結。覺得對你開發有幫助的可以點贊收藏一波，如果我哪裡寫錯了，希望能指點出來。如果你有更好的想法或者建議，可以提出來與我交流。大家一起進步，共同成長。感謝[鞠躬]。
一起交流
- 個人的github倉庫，有興趣可以star一下[撒花]
- 你有好的想法可以一起交流，訂閱微信公眾號yhzg_gz(點選複製，在微信中新增公眾號貼上即可)，追求程式碼質量，高效率程式設計是我們共同的目標。
ps: 提高自己，遇到志不同道也和的人.