資訊專欄INFORMATION COLUMN
摘要：前言這段時間一直負責公司的小程序的開發(fā)，總結(jié)了一些小程序的開發(fā)心得，方便自己以后的查閱也方便同仁少踩點坑。文章底部的技巧類小程序的識別小程序二維碼功能，小程序的高斯模糊，都是自己填的坑。
前言：這段時間一直負責公司的小程序的開發(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）。導致動態(tài)設(shè)置導航欄中的文字顯示出現(xiàn)錯誤
快速切換頁面可能導致A頁面中的異步數(shù)據(jù)還未返回，致使當切換到B頁面的時候A數(shù)據(jù)才返回，使得導航欄顯示的文字為A頁面的導航欄標題。（即：A頁面的導航欄標題為hello，B頁面的導航欄標題為world,當快速由A->B,此時雖然在B頁面，但是導航欄標題顯示的是hello，而不是world）
參考鏈接:
小程序中的生命周期onHide和onUnload
如果說數(shù)據(jù)是汽車的話，傳遞的通道或方式就是汽車要行駛的道路。所以，數(shù)據(jù)驅(qū)動型的框架，我們少不了要學習如何建設(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(點擊復制，在微信中添加公眾號粘貼即可)，追求代碼質(zhì)量，高效率編程是我們共同的目標。
ps: 提高自己，遇到志不同道也和的人。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95878.html
摘要：用戶綁定的邏輯主要復雜在既需要考慮微信本身的接口在不同情況下提供的數(shù)據(jù)不同，另外一方面就是考慮本身用戶模塊的業(yè)務(wù)邏輯問題。針對每一節(jié)課以及每一節(jié)系列課程生成小程序太陽碼主要涉及到幾個細節(jié)問題。 感覺已經(jīng)好久沒寫程序了，最近這段時間，一方面是學習了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ù)終于逮到你了。。。這就導致了先執(zhí)行構(gòu)造函數(shù)，然后再執(zhí)行析構(gòu)函數(shù)。 class Test { protected $client; protected static $name; public function __construct() { ...
摘要：問題分析隨著回滾版本的放量，主端崩潰逐漸回歸正常，進一步坐實了新版本存在問題。內(nèi)容非常多但都是重復的，看起來進程沒有啟動，導致連接端一直在進行重連。背景公司的主打產(chǎn)品是一款跨平臺的 App，我的部門負責為它提供底層的 sdk 用于數(shù)據(jù)傳輸，我負責的是 Adnroid 端的 sdk 開發(fā)。sdk 并不直接加載在 App 主進程，而是隔離在一個多帶帶進程中，然后兩個進程通過 tcp 連接進行通信...
閱讀 1696·2023-04-26 01:54
閱讀 1704·2021-09-30 09:55
閱讀 2721·2021-09-22 16:05
閱讀 1955·2021-07-25 21:37
閱讀 2697·2019-08-29 18:45
閱讀 1951·2019-08-29 16:44
閱讀 1954·2019-08-29 12:34
閱讀 1414·2019-08-23 14:02
