React –> 微信小程序开发

因工作需要，这一段时间将进行小程序的开发工作

大概写了大半年的React，回想起来还真是挺长的。一直都想找机会了解更多的项目内容，小程序就是一直想去了解的。不过，就算是更换了工作内容，我还是很喜欢开源技术的。对于React的关注也一直没有停止，打心底的喜欢React这一个充满活力的库。
除了小程序外，Vue的开发有空会去了解并去写一些简单的Demo。额，这一篇内容还是记录一下小程序的踩坑过程。

小程序基本概况

小程序的理念就是用完就走，不用多停留。从小程序面世到现在也过了几年了吧，在我注册一个个人开发者账号到写下第一行代码这个过程，比我想象中还是顺利的多。这得益于还是挺清晰的官方文档，里面也包含了一些基本的Demo。
槽点：官方文档访问体验很差，难道是我电脑问题，搜索一个api有很大的几率拿不到正确返回。希望后面能有一个畅快的阅读文档体验。

小程序生态

在github的repo搜索“小程序”，最多star的是awesome-wechat-weapp。这个repo起到一个导航作用，在github带awesome开头的一般都是以收集数据为主的仓库。可以得到的信息是，看起来小程序的开发生态很不错，但认真点进每一个仓库的链接，会发现并没有想象中那么多。这个应该是我被React的生态惯坏了。没关系，先看看小程序开发有哪些比较知名的repo吧。

  • WePY ★10k+ - 支持组件化的小程序开发框架
  • mpvue ★8.7k - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
    槽点：原本打算用WePy做生产环境的开发，但是看到众多人吐槽bug我就吓退了。整体而言，小程序的生态还没有我想象中那么好。

开发体验

  • 在Windows下使用官方小程序开发工具，可以快速搭建小程序结构，提供实时预览，以及小程序可以在手机可以进行实时运行。开发过程中出现有如预览和手机上的样式不一致等的问题。
  • 自带开发工具的控制台在调试样式选取元素的体验上很差。我选不到元素，只好从Wxml上按代码筛查需要改的选择器再进行修改。
  • 类似于MVVM的开发体验。一个页面对应一个page，页面以及app的生命周期分明。
  • 大部分的api都采取回调的方式返回内容，整体结构很清晰。
  • 路由跳转很轻松。
  • 很像React的一点就是state的存在方式，在小程序上就是Data。每个page都可以设置属于这个页面的数据。
  • 有类似与Vue的语法糖
  • 很多组件官方都封装好了，使用起来很方便。

目前踩的坑

  • wx.getUserInfo()这个接口在我刚入门小程序的这段时间被砍了。对我影响不大，但是对开发而言这种底层的api的改动影响还是很大的。
    default
  • 高度适配上没考虑好问题，所以有那么一点时间是花在适配如iphoneX上。
  • 如何去掉小程序按钮的边框？ 
    selector::after{
border: none;
}
  • 怎么修改checkbox的大小？ 
    .checkbox {
transform: scale(0.6, 0.6);
}

    后语

目前还没对接数据接口，不知道会有什么坑等着我。而且如果后期需要封装组件的话，还不知道会发生什么问题呢。也很希望官方多为开发者着想下，不要轻易动底层api，不然又要多熬几天夜的人就不少了。再接再厉，好好学习。