記一次小程序項目的開發心得

前言：這段時間一直負責公司的小程序的開發，總結了一些小程序的開發心得，方便本身之後的查閱也方便同仁少踩點坑。文章底部的技巧類小程序的識別小程序二維碼功能，小程序的高斯模糊，都是本身填的坑。歡迎交流。

1、 框架類

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

2、 通訊類

若是說數據是汽車的話，傳遞的通道或方式就是汽車要行駛的道路。因此，數據驅動型的框架，咱們少不了要學習如何建設這條"道路"，讓"汽車"高速行駛。

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.其它方法封裝(若是有更好的方法，歡迎交流)

• 小程序的識別小程序二維碼功能

• 二次封裝保存圖片到相冊(button-opeansetting的用法)

• 小程序的高斯模糊

• 解決小程序的遮罩層滾動穿透

that's all, 以上就是我目前全部的關於小程序項目的經驗總結。以爲對你開發有幫助的能夠點贊收藏一波，若是我哪裏寫錯了，但願能指點出來。若是你有更好的想法或者建議，能夠提出來與我交流。你們一塊兒進步，共同成長。感謝[鞠躬]。

一塊兒交流

• 我的的github倉庫，有興趣能夠star一下[撒花]
• 你有好的想法能夠一塊兒交流，訂閱微信公衆號yhzg_gz(點擊複製，在微信中添加公衆號粘貼便可)，追求代碼質量，高效率編程是咱們共同的目標。

ps: 提升本身，遇到志不一樣道也和的人.