資訊專欄INFORMATION COLUMN
摘要：前言這段時間一直負責(zé)公司的小程序的開發(fā)，總結(jié)了一些小程序的開發(fā)心得，方便自己以后的查閱也方便同仁少踩點坑。文章底部的技巧類小程序的識別小程序二維碼功能，小程序的高斯模糊，都是自己填的坑。
前言：這段時間一直負責(zé)公司的小程序的開發(fā)，總結(jié)了一些小程序的開發(fā)心得，方便自己以后的查閱也方便同仁少踩點坑。文章底部的技巧類小程序的識別小程序二維碼功能，小程序的高斯模糊，都是自己填的坑。歡迎交流。一、 框架類 1.Template引入與component構(gòu)造器引入，應(yīng)該選擇哪一個？
只是展示用，建議使用template，組件中涉及到較多的邏輯，建議使用component。
因為template沒有自己的js文件，所以在列表中涉及到列表子項獨立的操作，建議將列表子項寫成component。
示例代碼：
page文件
2.wxs文件的使用
Wxs更多的是作為一個過濾器使用，.wxs?文件可以被其他的?.wxs?文件 或 WXML 中的?
.wxs模塊中引用其他?wxs?文件模塊，可以使用?require?函數(shù)。
示例代碼
page文件--類似過濾器效果
3.生命周期{{phone.phone(AddressInfo.phone)}}
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
// 前進-跳轉(zhuǎn)到其他頁面的時候
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
// 后退-點擊當前頁面返回的時候
}
利用這兩個生命周期可以解決的問題：
防止用戶快速切換頁面（A->B）。導(dǎo)致動態(tài)設(shè)置導(dǎo)航欄中的文字顯示出現(xiàn)錯誤
快速切換頁面可能導(dǎo)致A頁面中的異步數(shù)據(jù)還未返回，致使當切換到B頁面的時候A數(shù)據(jù)才返回，使得導(dǎo)航欄顯示的文字為A頁面的導(dǎo)航欄標題。（即：A頁面的導(dǎo)航欄標題為hello，B頁面的導(dǎo)航欄標題為world,當快速由A->B,此時雖然在B頁面，但是導(dǎo)航欄標題顯示的是hello，而不是world）
參考鏈接:
小程序中的生命周期onHide和onUnload
如果說數(shù)據(jù)是汽車的話，傳遞的通道或方式就是汽車要行駛的道路。所以，數(shù)據(jù)驅(qū)動型的框架，我們少不了要學(xué)習(xí)如何建設(shè)這條"道路"，讓"汽車"高速行駛。
1.頁面與組件通信1-1.頁面?zhèn)鬟f內(nèi)容給組件
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.組件傳遞內(nèi)容給頁面
給組件設(shè)置myevent事件，通過this.triggerEvent("myevent", myEventDetail) 觸發(fā)該myevent事件并傳遞內(nèi)容，在頁面用onMyEventshi事件監(jiān)聽傳遞過來的數(shù)據(jù)。
頁面
Page({ // 監(jiān)聽myevent事件 onMyEvent: function (e) { console.log("接收a組件傳遞的內(nèi)容:", e.detail) // "我是a組件" } })
組件
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = "我是a組件"
this.triggerEvent("myevent", myEventDetail) // 觸發(fā)組件上的“myevent”事件
}
}
})
2.組件與組件通信
兩個無任何關(guān)聯(lián)的組件：通過全局變量或本地緩存?zhèn)鬟f數(shù)據(jù)
兩個有關(guān)聯(lián)的組件(同一個父頁面下)： 通過上面的方法，用組件 => 頁面 => 組件的方式傳遞數(shù)據(jù)。
3.頁面之間的通信3-1.使用全局變量 app.globalData
3-2.使用本地緩存 wx.setStorageSync
3-3.url傳遞
// A頁面-傳遞數(shù)據(jù)
// 需要注意的是，wx.switchTab 中的 url 不能傳參數(shù)。
wx.navigateTo({
url: "../pageD/pageD?name=raymond&gender=male"
})
// B頁面-接收數(shù)據(jù)
// 通過onLoad的option
...
Page({
onLoad: function(option){
console.log(option.name + "is" + option.gender) // raymond is male
this.setData({
option: option
})
}
})
3-4.后一級頁面對前一級頁面的數(shù)據(jù)的管理(通過獲取到頁面對象進行數(shù)據(jù)操作)
這個方法的精髓，是通過獲取到其他頁面的對象原型，然后通過原型方法 setData 對當前對象管理的 data 進行修改，
示例如下：
// pageE.js
Page({
data: {
index: 1
}
})
當跳轉(zhuǎn)到下一個頁面 F 之后，假定在 F 中有操作需要對 E 中的數(shù)據(jù)有修改，則可以使用以下方法：
// pageF.js
...
Page({
changeIndexInE: function(){
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.setData({
index: 0
})
}
})
這個方法可以操作頁面堆棧里面的頁面的數(shù)據(jù)，可以做到讓后一級頁面對上級頁面群的數(shù)據(jù)管理。
參考鏈接：愛范兒-頁面之間的數(shù)據(jù)傳遞
4.頁面與模板之間的通信頁面
Page({
data: {
item: {
index: 0,
msg: "this is a template",
time: "2016-09-15"
}
}
})
傳入模板的除了變量，還可以是事件方法對象。例如，模板中的點擊事件，可以傳遞到使用模板的元素中。
三 、技巧類 1. 索引是變量，修改數(shù)組的值根據(jù)文檔，采用"array[0].text":"changed data"的格式。但是我們實際應(yīng)用中需要改變的索引值往往是動態(tài)的，所以，改裝一下如下：
示例代碼：
// 修改某個數(shù)組的動態(tài)的值 --- 提前將數(shù)組對象準備好
// 索引index是變量， value是變量
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})
2.其它方法封裝(如果有更好的方法，歡迎交流)
小程序的識別小程序二維碼功能
二次封裝保存圖片到相冊(button-opeansetting的用法)
小程序的高斯模糊
解決小程序的遮罩層滾動穿透
that"s all, 以上就是我目前所有的關(guān)于小程序項目的經(jīng)驗總結(jié)。覺得對你開發(fā)有幫助的可以點贊收藏一波，如果我哪里寫錯了，希望能指點出來。如果你有更好的想法或者建議，可以提出來與我交流。大家一起進步，共同成長。感謝[鞠躬]。
一起交流個人的github倉庫，有興趣可以star一下[撒花]
你有好的想法可以一起交流，訂閱微信公眾號yhzg_gz(點擊復(fù)制，在微信中添加公眾號粘貼即可)，追求代碼質(zhì)量，高效率編程是我們共同的目標。
ps: 提高自己，遇到志不同道也和的人。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95878.html
摘要：用戶綁定的邏輯主要復(fù)雜在既需要考慮微信本身的接口在不同情況下提供的數(shù)據(jù)不同，另外一方面就是考慮本身用戶模塊的業(yè)務(wù)邏輯問題。針對每一節(jié)課以及每一節(jié)系列課程生成小程序太陽碼主要涉及到幾個細節(jié)問題。 感覺已經(jīng)好久沒寫程序了，最近這段時間，一方面是學(xué)習(xí)了python，然后折騰了scrapy框架，用python寫了下守護進程程序監(jiān)聽任務(wù)以及用redis做隊列任務(wù)通信，并開進程來處理爬蟲任務(wù)。以上...
摘要：執(zhí)行構(gòu)造函數(shù)執(zhí)行析構(gòu)函數(shù)第一次完畢第二次完畢執(zhí)行輸出執(zhí)行構(gòu)造函數(shù)第一次完畢執(zhí)行構(gòu)造函數(shù)執(zhí)行析構(gòu)函數(shù)第二次完畢執(zhí)行析構(gòu)函數(shù)終于逮到你了。。。這就導(dǎo)致了先執(zhí)行構(gòu)造函數(shù)，然后再執(zhí)行析構(gòu)函數(shù)。 class Test { protected $client; protected static $name; public function __construct() { ...
摘要：問題分析隨著回滾版本的放量，主端崩潰逐漸回歸正常，進一步坐實了新版本存在問題。內(nèi)容非常多但都是重復(fù)的，看起來進程沒有啟動，導(dǎo)致連接端一直在進行重連。背景公司的主打產(chǎn)品是一款跨平臺的 App，我的部門負責(zé)為它提供底層的 sdk 用于數(shù)據(jù)傳輸，我負責(zé)的是 Adnroid 端的 sdk 開發(fā)。sdk 并不直接加載在 App 主進程，而是隔離在一個多帶帶進程中，然后兩個進程通過 tcp 連接進行通信...
閱讀 1611·2023-04-26 01:54
閱讀 1639·2021-09-30 09:55
閱讀 2661·2021-09-22 16:05
閱讀 1876·2021-07-25 21:37
閱讀 2636·2019-08-29 18:45
閱讀 1903·2019-08-29 16:44
閱讀 1896·2019-08-29 12:34
閱讀 1363·2019-08-23 14:02
