這篇文章主要記錄我做小程序「輕算賬」過程中遇到的一些問題和解決方案，就當(dāng)是做個總結(jié)焚鲜，也希望其中有能夠幫助到他人的信息厦章。
需求
勤儉節(jié)約（貧窮）如我今野，經(jīng)常會和他人一起拼單點外賣或者購物，然而由于大家購買的商品價值不同饺鹃，用上了各種優(yōu)惠券或者參與滿減活動之后莫秆，錢就不好算了。
舉個例子：同事有一張滿 100 減 50 的購書優(yōu)惠券悔详，然而她想買的書才達到 80 元镊屎，這時候她問你有沒有想買的書，你挑了一本 20 元的書茄螃，結(jié)賬后你們一共花了 50 元缝驳，這個時候你需要給同事多少錢？最合理的方式當(dāng)然是按照你們購買的商品價值 4:1(80:20) 平分那張優(yōu)惠券归苍，也就是說你可以優(yōu)惠 50*(1/5)=10 元用狱，最后你需要給你的同事 20-10=10 元！
以上例子中的商品價格比較好算拼弃，但實際情況中這種計算特別麻煩夏伊，因此我開發(fā)了這款能夠協(xié)助你輕松算出拼單個人實際支出的小程序。（PS: 如果想快速知道如何使用吻氧，建議看一下視頻版的使用說明）
準備
- 頁面樣式
逛 Dribbble溺忧，找到喜歡的頁面設(shè)計，參考它的樣式配色等医男。（我知道做得不好看砸狞，但總歸過了我自己這關(guān)了……）
- 小程序框架
之前使用過 mpvue，條條框框有點多镀梭，所以這次不打算用刀森，覺得寫起來會更靈活些。
我還查看了多個小程序組件庫：贊組件庫演示报账、WeUI組件庫演示研底、MinUI組件庫、Vant組件庫演示透罢、AntUI組件庫榜晦、ZANE組件庫、TouchUI組件庫等（可以用關(guān)鍵詞‘組件’搜索小程序羽圃，會有一系列的組件庫示例）乾胶。
看了那么多組件庫，我覺得最滿意的是 TouchUI 組件庫，里面組件很多识窿，我想要的都有斩郎，可以少寫不少代碼。
選擇使用 TouchUI 組件庫后喻频，我發(fā)現(xiàn)它不僅是組件庫缩宜，還是一個輕量的開發(fā)框架，最突出的一點是編寫代碼時將原本小程序一個頁面分四個文件的方式改為了單文件方式甥温，具體見 Touch WX 開發(fā)文檔锻煌。
代碼
遇到的問題：
#1：可以在小程序里使用 emoji 嗎？
可以姻蚓，我是用在復(fù)制賬單信息這里宋梧，覺得加上 emoji 更有趣味性。具體實現(xiàn)是：我直接在這個網(wǎng)站復(fù)制需要的 emoji史简，粘貼到代碼中乃秀，結(jié)合賬單信息拼接出所需字符串，利用 API
wx.setClipboardData(Object object)將內(nèi)容設(shè)置到剪貼板上圆兵，粘貼的時候就能看到 emoji 了~
#2：如何優(yōu)化性能跺讯？
最耗費渲染性能的一句代碼就是
this.setData()了，實際編寫代碼過程中殉农，但凡未被綁定到 wxml 頁面上的數(shù)據(jù)刀脏，我都歸納到 this._data 字段下，與 this.data 徹底區(qū)分開來超凳，沒有必要的字段堅決不使用this.setData()進行更新愈污，示例如下：
Page({
_data: {
priceValue: ''
},
data: {
...
},
bindPriceInput(e) {
// 在使用 input 組件的過程中我將其值暫存在 this._data 中
this._data.priceValue = e.detail.value.trim();
},
confirmPriceInput() {
// 需要的時候獲取即可，無需使用到 this.setData() 函數(shù)
let priceValue = this._data.priceValue;
...
}
})
#3：如何實現(xiàn)清空 input 功能轮傍？
// wxml
<input class="input" value="{{someValue}}"/>
// js
Page({
data: {
someValue: ''
},
clearInput() {
this.setData({
someValue: ''
})
}
})
#4：如何引用 iconfont暂雹？
我知道的有兩種方式，一種是將 iconfont 的 ttf 文件轉(zhuǎn)為 base64创夜，詳細的使用說明可以查看這里杭跪；還有一種是引用 iconfont 的在線鏈接，詳細說明可以查看這篇文章驰吓。
大家可以根據(jù)自己的需求選擇其中一種涧尿，區(qū)別就是一個資源在本地，一個托管在 alicdn檬贰。我個人偏向于使用后一種姑廉，這樣就不用每次更新 iconfont 都去轉(zhuǎn)換 ttf 文件了……
#5：如何實現(xiàn) input 自動聚焦功能？
實現(xiàn)自動聚焦功能并沒有什么難度翁涤，但是在我的使用場景中我遇到了問題：我的 input 組件放置在一個彈框組件中桥言，我希望在彈框出現(xiàn)后 input 能夠自動聚焦萌踱，彈框關(guān)閉后重置控制聚焦的值，代碼如下：
// .wxml
<ui-popup bindshow="focusInput" bindhide="blurInput">
<input focus="{{inputFocus}}"/>
</ui-popup>
// .js
focusInput() {
setTimeout(() => {
this.setData({
inputFocus: true
})
}, 300) // 300ms 是 ui-popup 組件出現(xiàn)時的動畫時長
},
blurInput() {
this.setData({
inputFocus: false
})
}
嘗試多次后我發(fā)現(xiàn) css 動畫執(zhí)行時自動聚焦無法實現(xiàn)限书，我需要在動畫結(jié)束后再將 inputFocus 的值設(shè)置為 true虫蝶。
#6：如何獲取打賞？
個人開發(fā)者總是希望用戶能夠認可自己花時間打造出來的工具倦西，不管怎樣，研究一下如何獲取贊賞又沒有什么壞處赁严。
我參考了這篇文章和一些資料扰柠，得知可以使用贊賞碼獲取打賞，但是小程序的 image 組件中二維碼/小程序碼圖片不支持長按識別疼约，僅在 wx.previewImage 中支持長按識別卤档。
所以最后我的方案就是：
// 保存了自己的贊賞碼，托管在碼云上程剥，點擊某個按鈕后直接進入圖片預(yù)覽劝枣，此時贊賞碼長按可識別
handleLikeButton() {
wx.previewImage({
current: '', // 贊賞碼圖片的 http 鏈接
urls: [] // 需要預(yù)覽的圖片 http 鏈接列表
})
}
#7：如何在其他項目中使用 touchui 的組件？
我很喜歡 touchui 的組件织鲸，節(jié)省了我很多時間舔腾。我在不使用任何框架的小程序項目中也想用它的組件，稍微嘗試后我的總結(jié)如下：
// 當(dāng)你基于 touchui 構(gòu)建了一個項目搂擦，啟動開發(fā)服務(wù)后（執(zhí)行 `tui dev` 命令）
// 可以在項目中使用它的任意組件（直接使用稳诚，不需要任何引入）
// 保存代碼后，框架會將修改后的 .wx 文件
// 編譯成 index.html瀑踢、index.js扳还、index.json、index.wxss 至對應(yīng) dist 目錄中
// 同時橱夭，使用到的組件也將被編譯到 dist/packages/touchui-wx-components
// 這些編譯過后的代碼就是小程序能夠使用的組件代碼
// 可以直接將相應(yīng)的文件夾復(fù)制到自己的項目中使用
//（如果有缺少什么依賴的 util 文件氨距，根據(jù)需要都復(fù)制過去就好了）
// pages/home/index.wx
<ui-popup>
...
</ui-popup>
#8：如何收集意見反饋？
最直觀的方式當(dāng)然是提供一個意見反饋的表單頁面棘劣，但我想指出的是微信官方也提供了用于收集意見反饋的組件俏让，可以直接使用（button
open-type="feedback"）。
嘮叨
在開發(fā)其他小程序項目時呈础，我沒有使用任何框架舆驶，因為如果項目到了其他人手里，會產(chǎn)生一定的維護成本而钞，選用原生開發(fā)最為妥當(dāng)沙廉。
但是，我必須強調(diào)一下 touchui 單文件編輯這個特性臼节，非常適合個人項目開發(fā)（使用原生開發(fā)時每個頁面都有 4 個文件撬陵，我切換文件都快瘋了……）琳拨。
資源
Touch WX是一套完全免費的微信小程序開發(fā)框架，擴展了小程序的能力信姓。
圖標資源
存放項目相關(guān)資源
制作 logo 不求人培他！
視頻壓縮（手機錄制的操作視頻需要進行壓縮）
文章
基于后端云微信小程序開發(fā) (文不對題，大家看文章內(nèi)容就好)
總結(jié)了小程序開發(fā)中常見的一些問題（小程序 API 異步方案…）草添，看一遍就可以對開發(fā)小程序有一個大致的了解驶兜！
很棒的文章，看完就基本知道怎么寫小程序的自定義組件了~
很棒的文章远寸，解答了很多小程序開發(fā)過程中會遇到的問題抄淑，值得參考！（引入 iconfont驰后，使用 less肆资，動態(tài)設(shè)置 data 中某個值、上拉加載和下拉刷新灶芝、上傳圖片郑原、async/await）
setData 操作是同步的，能馬上獲取剛剛設(shè)置的屬性夜涕；但是頁面渲染則是異步進行的犯犁。
小程序、wepy钠乏、mpvue栖秕、taro……
我覺得還是使用原生開發(fā)比較穩(wěn)定（缺點：無自動構(gòu)建、無數(shù)據(jù)流管理）
也許以后會用到……
非常棒的文章晓避，干貨滿滿簇捍！
小程序啟動加載性能
1.控制代碼包的大小
2.分包加載
3.首屏體驗（預(yù)請求，利用緩存俏拱，避免白屏暑塑，及時反饋)
小程序渲染性能
1.避免不當(dāng)?shù)氖褂胹etData
2.合理利用事件通信
3.避免不當(dāng)?shù)氖褂胦nPageScroll
4.優(yōu)化視圖節(jié)點
5.使用自定義組件
做用戶登錄相關(guān)邏輯時可以參考！
有問題可以看看這里有沒有解決方案锅必，過一遍就大概知道怎么開發(fā)小程序了事格。
推薦！有一些不錯的解決方案：Promise 封裝搞隐、封裝 wx API驹愚、跨頁面事件通訊 event、 監(jiān)聽數(shù)據(jù)變化 watch...
開發(fā) | 如何在微信小程序的頁面間傳遞數(shù)據(jù)劣纲？
需要時可以快速過一遍逢捺。
微信小程序：回調(diào)，Promise癞季，async劫瞳，await 的使用例子
供參考~
