「輕算帳」小程序實踐筆記

這篇文章主要記錄我作小程序「輕算帳」過程當中遇到的一些問題和解決方案，就當是作個總結，也但願其中有可以幫助到他人的信息。

需求

勤儉節約（貧窮）如我，常常會和他人一塊兒拼單點外賣或者購物，然而因爲你們購買的商品價值不一樣，用上了各類優惠券或者參與滿減活動以後，錢就很差算了。
舉個例子：同事有一張滿 100 減 50 的購書優惠券，然而她想買的書才達到 80 元，這時候她問你有沒有想買的書，你挑了一本 20 元的書，結帳後大家一共花了 50 元，這個時候你須要給同事多少錢？最合理的方式固然是按照大家購買的商品價值 4:1(80:20) 平分那張優惠券，也就是說你能夠優惠 50*(1/5)=10 元，最後你須要給你的同事 20-10=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 開發文檔

Touch WX是一套徹底免費的微信小程序開發框架，擴展了小程序的能力。

iconfont

圖標資源

碼雲

存放項目相關資源

launchaco

製做 logo 不求人！

videosmaller

視頻壓縮（手機錄製的操做視頻須要進行壓縮）

小程序開發文檔

文章

基於後端雲微信小程序開發 (文不對題，你們看文章內容就好)

總結了小程序開發中常見的一些問題（小程序 API 異步方案…），看一遍就能夠對開發小程序有一個大體的瞭解！

【微信小程序】自定義組件

很棒的文章，看完就基本知道怎麼寫小程序的自定義組件了~

小程序開發技巧總結

很棒的文章，解答了不少小程序開發過程當中會遇到的問題，值得參考！（引入 iconfont，使用 less，動態設置 data 中某個值、上拉加載和下拉刷新、上傳圖片、async/await）
setData 操做是同步的，能立刻獲取剛剛設置的屬性；可是頁面渲染則是異步進行的。

我與小程序的故事以及小程序框架選型

小程序、wepy、mpvue、taro……
我以爲仍是使用原生開發比較穩定（缺點：無自動構建、無數據流管理）

微信小程序仿APP section header 懸停效果

也許之後會用到……

【微信小程序】性能優化

很是棒的文章，乾貨滿滿！
小程序啓動加載性能
1.控制代碼包的大小
2.分包加載
3.首屏體驗（預請求，利用緩存，避免白屏，及時反饋)
小程序渲染性能
1.避免不當的使用setData
2.合理利用事件通訊
3.避免不當的使用onPageScroll
4.優化視圖節點
5.使用自定義組件

小程序登陸態控制探索全過程

作用戶登陸相關邏輯時能夠參考！

小程序入門總結篇

有問題能夠看看這裏有沒有解決方案，過一遍就大概知道怎麼開發小程序了。

mini-programm-template

推薦！有一些不錯的解決方案：Promise 封裝、封裝 wx API、跨頁面事件通信 event、 監聽數據變化 watch...

開發 | 如何在微信小程序的頁面間傳遞數據？

須要時能夠快速過一遍。

微信小程序：回調，Promise，async，await 的使用例子

供參考~