微信小程序踩坑

5/16/2018 小程序

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,不然又要多熬几天夜的人就不少了。再接再厉,好好学习。