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