说实话，一直想搞搞小程序，一方面是平时没时间，闲下来的时间太少；另一方面是没有好的idea，所以也不知道开发一个啥（因为我并不想就简单的写一个hello world页面，然后就说开发了一个小程序）!当然，还有最主要的一个原因 —— 没有合适的框架。
为什么说没有合适的框架呢？一方面，平时主要使用react框架进行开发，因为闲暇时间比较少，所以不愿意从头学习小程序框架；原本美团出了个'没朋友' —— mpvue框架，一套基于Vue的小程序开发框架，正好最近的plan里有Vue的学习计划，就打算连学带练一起搞了。但是，计划没有变化快，我刚把mpvue框架搭好，Taro框架就出来了，二话没说就用它搞了一个小程序，因为刚上手，所以没打算用很复杂的功能，正好哥哥是医生，想做一个简单的体质计算器，所以就利用端午假期做了，只当成是初体验。BMI体脂计算器
程序很简单，就是输入身高体重，然后根据计算公式生成结果数据，最后为了分享方便还加了一个长按保存图片的功能。总体来说就两个页面：
关于Taro
Taro是京东凹凸实验室开源的一套框架，地址，因为不是技术牛人，细节不做过多评论，大家自己使用体会就好了。
首先，Taro是基于React语法的，我们基本完全可以按照编写react的方式与习惯来编写小程序，至于编写完成之后的工作，就交给Taro强大的编译功能去完成吧。 这里觉得taro的编译做的还真的挺不错的，美中不足的是控制台经常报一个scope的错误，但是无关痛痒，重新保存就没事了。 其次，Taro的组件生命周期也基本上与React一致，组件生命周期与小程序生命周期对应关系，官网也有，除此之外因为是微信端，还增加了一些其他的生命周期。
组件生命周期：
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官网是这样的：
- 微信的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使用者提供了一个开发小程序的手段，期待后续会更加完善！ 欢迎扫码测试一下你是否健康：