小程式初探 —— 使用Taro開發BMI體質計算器

luffyZhou發表於2018-06-18

說實話，一直想搞搞小程式，一方面是平時沒時間，閒下來的時間太少；另一方面是沒有好的idea，所以也不知道開發一個啥（因為我並不想就簡單的寫一個hello world頁面，然後就說開發了一個小程式）!當然，還有最主要的一個原因 —— 沒有合適的框架。
為什麼說沒有合適的框架呢？一方面，平時主要使用react框架進行開發，因為閒暇時間比較少，所以不願意從頭學習小程式框架；原本美團出了個'沒朋友' —— mpvue框架，一套基於Vue的小程式開發框架，正好最近的plan裡有Vue的學習計劃，就打算連學帶練一起搞了。但是，計劃沒有變化快，我剛把mpvue框架搭好，Taro框架就出來了，二話沒說就用它搞了一個小程式，因為剛上手，所以沒打算用很複雜的功能，正好哥哥是醫生，想做一個簡單的體質計算器，所以就利用端午假期做了，只當成是初體驗。

BMI體脂計算器

程式很簡單，就是輸入身高體重，然後根據計算公式生成結果資料，最後為了分享方便還加了一個長按儲存圖片的功能。總體來說就兩個頁面：

小程式初探 —— 使用Taro開發BMI體質計算器

小程式初探 —— 使用Taro開發BMI體質計算器

關於Taro

Taro是京東凹凸實驗室開源的一套框架，地址Taro，因為不是技術牛人，細節不做過多評論，大家自己使用體會就好了。
首先，Taro是基於React語法的，我們基本完全可以按照編寫react的方式與習慣來編寫小程式，至於編寫完成之後的工作，就交給Taro強大的編譯功能去完成吧。 這裡覺得taro的編譯做的還真的挺不錯的，美中不足的是控制檯經常報一個scope的錯誤，但是無關痛癢，重新儲存就沒事了。 其次，Taro的元件生命週期也基本上與React一致，元件生命週期與小程式生命週期對應關係，官網也有，除此之外因為是微信端，還增加了一些其他的生命週期。

元件生命週期：

小程式初探 —— 使用Taro開發BMI體質計算器
小程式專屬事件：

小程式初探 —— 使用Taro開發BMI體質計算器
最後，因為全家桶我還沒有使用，因為臨時興起開發的小程式，也不復雜，就沒用路由和redux狀態管理，這一部分我覺得可能會有坑，後續如果遇到再細聊！

BMI體脂計算器開發思路

設計

在這裡談設計說實話有點不好意思，完全兩個門外漢，O(∩_∩)O哈哈~，哥哥是醫生，恰巧對網際網路有一些自己的看法，認為現在的醫學工具老百姓不太容易用，所以希望做一些老百姓能看懂的。當然，這個體質指數不是很複雜的公式，因為開發第一個，所以先拿很簡單的試試，雖然很簡單，但是還是用心設計的！

開發

框架 —— Taro

UI —— 小程式內建元件

原本想使用iview新出的小程式UI的，但是發現就兩個頁面，沒必要引入一個新框架，所以以後有機會再說！

技術 —— canvas繪圖生成圖片儲存到手機

這個小程式唯一一點讓我學到的一點東西，那就是小程式裡不能使用dom操作，原本長按儲存圖片我是想按照平時的實現方式： html2canvas + canvas2image。結果小程式沒有dom，最後發現小程式官方提供API，wx.canvasToTempFilePath()，可以將canvas轉換成圖片，那麼canvas從哪來的？沒錯，就是自己畫出來的。這個實現過程，再次讓我認識到了數學的重要性，還有膜拜那些canvas大牛用canvas畫出的特效頁面，佩服佩服！

使用的一些坑

  • 使用導航跳轉頁面攜帶引數不知道在新頁面如何獲取...（原諒我蠢）

  • 使用一些混合標籤會導致插值顯示不出來以及無法觸發事件。
    例如，你在div 標籤裡放一個 onClick事件，點選沒有反應，而你如果把div換成 View就可以出發click事件，具體機制是啥我不清楚，只是在這裡簡單記錄。

  • style的使用不夠人性化

    Taro的模板語法確實很像React，但是還真不是那麼一樣，比如react的style他就沒有很好的實現，它用的依然是普通html頁面的style方式，這也導致插值不是很容易的放到style裡。（也就是控制一些元素動態出現消失的時候）

  • 沒有完全重寫微信小程式的api，導致頁面出現Taro和wx的API混用的情況。

    比如，我想做一個canvas儲存圖片到相簿的功能，OK，繪圖API嘛，Taro官網是這樣的：

小程式初探 —— 使用Taro開發BMI體質計算器
看到這個我就預設的以為這不完事了嗎？我畫完圖，然後呼叫canvasToTempFilePath就可以了，但是等到我畫完圖呼叫的時候，發現，Taro裡並沒有這個function，也就是說你需要用wx.canvasToTempFilePath()。

  • 微信的canvas轉換成圖片有一定的限制 第一、wx.canvasToTempFilePath()需要在canvas.draw()的回撥裡呼叫才可以。
    //...生成canvas的程式碼
ctx.draw(false, setTimeout(()=>{
    wx.canvasTotempFilePath()
}, 1000);
複製程式碼

    這裡加上定時器的原因是避免還沒畫完就出圖片，那樣會出一張透明圖。 第二、如果想生成圖片儲存到手機裡，需要配合wx.saveImageToPhotosAlbum()實現。

    ctx.draw(false, setTimeout(() => {
     wx.canvasToTempFilePath({
       canvasId: 'shareImg',
       width: windowWidth,
       height: windowHeight,
       destWidth: windowWidth * pixelRatio,
       destHeight: windowHeight * pixelRatio,
       success: (res) => {
         console.log(res.tempFilePath);
         wx.saveImageToPhotosAlbum({
           filePath: res.tempFilePath,
           success: (result) => {
             Taro.showToast({
               title: '已儲存到相簿'
             });
           }
         });
       }
     });
   }, 500));
複製程式碼

總結

這篇文章真的沒什麼幹東西，因為確實沒什麼技術性的東西，對不起看完的各位了~總而言之，Taro還是很方便的為react使用者提供了一個開發小程式的手段，期待後續會更加完善！ 歡迎掃碼測試一下你是否健康：

小程式初探 —— 使用Taro開發BMI體質計算器

相關文章