資訊專欄INFORMATION COLUMN
摘要：前言這段時間一直負責公司的小程序的開發，總結了一些小程序的開發心得，方便自己以后的查閱也方便同仁少踩點坑。文章底部的技巧類小程序的識別小程序二維碼功能，小程序的高斯模糊，都是自己填的坑。
前言：這段時間一直負責公司的小程序的開發，總結了一些小程序的開發心得，方便自己以后的查閱也方便同仁少踩點坑。文章底部的技巧類小程序的識別小程序二維碼功能，小程序的高斯模糊，都是自己填的坑。歡迎交流。一、 框架類 1.Template引入與component構造器引入，應該選擇哪一個？
只是展示用，建議使用template，組件中涉及到較多的邏輯，建議使用component。
因為template沒有自己的js文件，所以在列表中涉及到列表子項獨立的操作，建議將列表子項寫成component。
示例代碼：
page文件
2.wxs文件的使用
Wxs更多的是作為一個過濾器使用，.wxs?文件可以被其他的?.wxs?文件 或 WXML 中的?
.wxs模塊中引用其他?wxs?文件模塊，可以使用?require?函數。
示例代碼
page文件--類似過濾器效果
3.生命周期{{phone.phone(AddressInfo.phone)}}
/**
* 生命周期函數--監聽頁面隱藏
*/
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對象接收
頁面
Page({ data: { page: "父親pages" } })
組件
父親pages
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事件監聽傳遞過來的數據。
頁面
Page({ // 監聽myevent事件 onMyEvent: function (e) { console.log("接收a組件傳遞的內容:", e.detail) // "我是a組件" } })
組件
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
...
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.頁面與模板之間的通信頁面
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: 提高自己，遇到志不同道也和的人。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95878.html
摘要：執行構造函數執行析構函數第一次完畢第二次完畢執行輸出執行構造函數第一次完畢執行構造函數執行析構函數第二次完畢執行析構函數終于逮到你了。。。這就導致了先執行構造函數，然后再執行析構函數。 class Test { protected $client; protected static $name; public function __construct() { ...
摘要：問題分析隨著回滾版本的放量，主端崩潰逐漸回歸正常，進一步坐實了新版本存在問題。內容非常多但都是重復的，看起來進程沒有啟動，導致連接端一直在進行重連。背景公司的主打產品是一款跨平臺的 App，我的部門負責為它提供底層的 sdk 用于數據傳輸，我負責的是 Adnroid 端的 sdk 開發。sdk 并不直接加載在 App 主進程，而是隔離在一個多帶帶進程中，然后兩個進程通過 tcp 連接進行通信...
閱讀 1589·2023-04-26 01:54
閱讀 1621·2021-09-30 09:55
閱讀 2645·2021-09-22 16:05
閱讀 1856·2021-07-25 21:37
閱讀 2620·2019-08-29 18:45
閱讀 1886·2019-08-29 16:44
閱讀 1882·2019-08-29 12:34
閱讀 1346·2019-08-23 14:02
