小程序初探 —— 使用Taro开发BMI体质计算器

说实话，一直想搞搞小程序，一方面是平时没时间，闲下来的时间太少；另一方面是没有好的idea，所以也不知道开发一个啥（因为我并不想就简单的写一个hello world页面，然后就说开发了一个小程序）!当然，还有最主要的一个原因 —— 没有合适的框架。
为什么说没有合适的框架呢？一方面，平时主要使用react框架进行开发，因为闲暇时间比较少，所以不愿意从头学习小程序框架；原本美团出了个'没朋友' —— mpvue框架，一套基于Vue的小程序开发框架，正好最近的plan里有Vue的学习计划，就打算连学带练一起搞了。但是，计划没有变化快，我刚把mpvue框架搭好，Taro框架就出来了，二话没说就用它搞了一个小程序，因为刚上手，所以没打算用很复杂的功能，正好哥哥是医生，想做一个简单的体质计算器，所以就利用端午假期做了，只当成是初体验。

BMI体脂计算器

程序很简单，就是输入身高体重，然后根据计算公式生成结果数据，最后为了分享方便还加了一个长按保存图片的功能。总体来说就两个页面：

关于Taro

Taro是京东凹凸实验室开源的一套框架，地址Taro，因为不是技术牛人，细节不做过多评论，大家自己使用体会就好了。
首先，Taro是基于React语法的，我们基本完全可以按照编写react的方式与习惯来编写小程序，至于编写完成之后的工作，就交给Taro强大的编译功能去完成吧。 这里觉得taro的编译做的还真的挺不错的，美中不足的是控制台经常报一个scope的错误，但是无关痛痒，重新保存就没事了。 其次，Taro的组件生命周期也基本上与React一致，组件生命周期与小程序生命周期对应关系，官网也有，除此之外因为是微信端，还增加了一些其他的生命周期。

组件生命周期：

小程序专属事件：

最后，因为全家桶我还没有使用，因为临时兴起开发的小程序，也不复杂，就没用路由和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官网是这样的：

看到这个我就默认的以为这不完事了吗？我画完图，然后调用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使用者提供了一个开发小程序的手段，期待后续会更加完善！ 欢迎扫码测试一下你是否健康：