「輕算賬」小程式實踐筆記
這篇文章主要記錄我做小程式「輕算賬」過程中遇到的一些問題和解決方案，就當是做個總結，也希望其中有能夠幫助到他人的資訊。
需求
勤儉節約（貧窮）如我，經常會和他人一起拼單點外賣或者購物，然而由於大家購買的商品價值不同，用上了各種優惠券或者參與滿減活動之後，錢就不好算了。
舉個例子：同事有一張滿 100 減 50 的購書優惠券，然而她想買的書才達到 80 元，這時候她問你有沒有想買的書，你挑了一本 20 元的書，結賬後你們一共花了 50 元，這個時候你需要給同事多少錢？最合理的方式當然是按照你們購買的商品價值 4:1(80:20) 平分那張優惠券，也就是說你可以優惠 50*(1/5)=10
以上例子中的商品價格比較好算，但實際情況中這種計算特別麻煩，因此我開發了這款能夠協助你輕鬆算出拼單個人實際支出的小程式。（PS: 如果想快速知道如何使用，建議看一下視訊版的使用說明）
準備
- 頁面樣式
逛 Dribbble，找到喜歡的頁面設計，參考它的樣式配色等。（我知道做得不好看，但總歸過了我自己這關了……）
- 小程式框架
之前使用過 mpvue，條條框框有點多，所以這次不打算用，覺得寫起來會更靈活些。 我還查看了多個小程式元件庫：贊元件庫演示、WeUI元件庫演示、MinUI元件庫、Vant元件庫演示、AntUI元件庫、ZANE元件庫、TouchUI元件庫
等（可以用關鍵詞‘元件’搜尋小程式，會有一系列的元件庫示例）。 看了那麼多元件庫，我覺得最滿意的是 TouchUI 元件庫，裡面元件很多，我想要的都有，可以少寫不少程式碼。 選擇使用 TouchUI 元件庫後，我發現它不僅是元件庫，還是一個輕量的開發框架，最突出的一點是編寫程式碼時將原本小程式一個頁面分四個檔案的方式改為了單檔案方式，具體見 Touch WX 開發文件。
程式碼
遇到的問題：
#1：可以在小程式裡使用 emoji 嗎？
可以，我是用在複製賬單資訊這裡，覺得加上 emoji 更有趣味性。具體實現是：我直接在這個網站複製需要的 emoji，貼上到程式碼中，結合賬單資訊拼接出所需字串，利用 API
wx.setClipboardData(Object object)將內容設定到剪貼簿上，貼上的時候就能看到 emoji 了~
#2：如何優化效能？
最耗費渲染效能的一句程式碼就是
this.setData()了，實際編寫程式碼過程中，但凡未被繫結到 wxml 頁面上的資料，我都歸納到 this._data 欄位下，與 this.data 徹底區分開來，沒有必要的欄位堅決不使用this.setData()進行更新，示例如下：
Page({
_data: {
priceValue: ''
},
data: {
...
},
bindPriceInput(e) {
// 在使用 input 元件的過程中我將其值暫存在 this._data 中
this._data.priceValue = e.detail.value.trim();
},
confirmPriceInput() {
// 需要的時候獲取即可，無需使用到 this.setData() 函式
let priceValue = this._data.priceValue;
...
}
})
複製程式碼#3：如何實現清空 input 功能？
// wxml
<input class="input" value="{{someValue}}"/>
// js
Page({
data: {
someValue: ''
},
clearInput() {
this.setData({
someValue: ''
})
}
})
複製程式碼#4：如何引用 iconfont？
我知道的有兩種方式，一種是將 iconfont 的 ttf 檔案轉為 base64，詳細的使用說明可以檢視這裡；還有一種是引用 iconfont 的線上連結，詳細說明可以檢視這篇文章。 大家可以根據自己的需求選擇其中一種，區別就是一個資源在本地，一個託管在 alicdn。我個人偏向於使用後一種，這樣就不用每次更新 iconfont 都去轉換 ttf 檔案了……
#5：如何實現 input 自動聚焦功能？
實現自動聚焦功能並沒有什麼難度，但是在我的使用場景中我遇到了問題：我的 input 元件放置在一個彈框元件中，我希望在彈框出現後 input 能夠自動聚焦，彈框關閉後重置控制聚焦的值，程式碼如下：
// .wxml
<ui-popup bindshow="focusInput" bindhide="blurInput">
<input focus="{{inputFocus}}"/>
</ui-popup>
// .js
focusInput() {
setTimeout(() => {
this.setData({
inputFocus: true
})
}, 300) // 300ms 是 ui-popup 元件出現時的動畫時長
},
blurInput() {
this.setData({
inputFocus: false
})
}
複製程式碼嘗試多次後我發現 css 動畫執行時自動聚焦無法實現，我需要在動畫結束後再將 inputFocus 的值設定為 true。
#6：如何獲取打賞？
個人開發者總是希望使用者能夠認可自己花時間打造出來的工具，不管怎樣，研究一下如何獲取讚賞又沒有什麼壞處。 我參考了這篇文章和一些資料，得知可以使用讚賞碼獲取打賞，但是小程式的 image 元件中二維碼/小程式碼圖片不支援長按識別，僅在 wx.previewImage 中支援長按識別。 所以最後我的方案就是：
// 儲存了自己的讚賞碼，託管在碼雲上，點選某個按鈕後直接進入圖片預覽，此時讚賞碼長按可識別
handleLikeButton() {
wx.previewImage({
current: '', // 讚賞碼圖片的 http 連結
urls: [] // 需要預覽的圖片 http 連結列表
})
}
複製程式碼#7：如何在其他專案中使用 touchui 的元件？
我很喜歡 touchui 的元件，節省了我很多時間。我在不使用任何框架的小程式專案中也想用它的元件，稍微嘗試後我的總結如下：
// 當你基於 touchui 構建了一個專案，啟動開發服務後（執行 `tui dev` 命令）
// 可以在專案中使用它的任意元件（直接使用，不需要任何引入）
// 儲存程式碼後，框架會將修改後的 .wx 檔案
// 編譯成 index.html、index.js、index.json、index.wxss 至對應 dist 目錄中
// 同時，使用到的元件也將被編譯到 dist/packages/touchui-wx-components
// 這些編譯過後的程式碼就是小程式能夠使用的元件程式碼
// 可以直接將相應的資料夾複製到自己的專案中使用
//（如果有缺少什麼依賴的 util 檔案，根據需要都複製過去就好了）
// pages/home/index.wx
<ui-popup>
...
</ui-popup>
複製程式碼#8：如何收集意見反饋？
最直觀的方式當然是提供一個意見反饋的表單頁面，但我想指出的是微信官方也提供了用於收集意見反饋的元件，可以直接使用（button
open-type="feedback"）。
嘮叨
在開發其他小程式專案時，我沒有使用任何框架，因為如果專案到了其他人手裡，會產生一定的維護成本，選用原生開發最為妥當。 但是，我必須強調一下 touchui 單檔案編輯這個特性，非常適合個人專案開發（使用原生開發時每個頁面都有 4 個檔案，我切換檔案都快瘋了……）。
資源
Touch WX是一套完全免費的微信小程式開發框架，擴充套件了小程式的能力。
圖示資源
存放專案相關資源
製作 logo 不求人！
視訊壓縮（手機錄製的操作視訊需要進行壓縮）
文章
基於後端雲微信小程式開發 (文不對題，大家看文章內容就好)
總結了小程式開發中常見的一些問題（小程式 API 非同步方案…），看一遍就可以對開發小程式有一個大致的瞭解！
很棒的文章，看完就基本知道怎麼寫小程式的自定義元件了~
很棒的文章，解答了很多小程式開發過程中會遇到的問題，值得參考！（引入 iconfont，使用 less，動態設定 data 中某個值、上拉載入和下拉重新整理、上傳圖片、async/await） (閱讀筆記：setData 操作是同步的，能馬上獲取剛剛設定的屬性；但是頁面渲染則是非同步進行的。)
小程式、wepy、mpvue、taro…… 我覺得還是使用原生開發比較穩定（缺點：無自動構建、無資料流管理）
也許以後會用到……
非常棒的文章，乾貨滿滿！
小程式啟動載入效能
- 控制程式碼包的大小
- 分包載入
- 首屏體驗（預請求，利用快取，避免白屏，及時反饋)
小程式渲染效能
- 避免不當的使用setData
- 合理利用事件通訊
- 避免不當的使用onPageScroll
- 優化檢視節點
- 使用自定義元件
做使用者登入相關邏輯時可以參考！
有問題可以看看這裡有沒有解決方案，過一遍就大概知道怎麼開發小程式了。
推薦！有一些不錯的解決方案：Promise 封裝、封裝 wx API、跨頁面事件通訊 event、 監聽資料變化 watch...
需要時可以快速過一遍。
微信小程式：回撥，Promise，async，await 的使用例子
供參考~