小程序项目入坑实践

作者: Mondo

原文链接:https://segmentfault.com/a/1190000015280771

公司由于小程序原开发需求变动，产品决定重新开始设计新的小程序，人员紧张，导致我接了这个坑~。原开发时准备使用 mpvue 来开发，前篇文章介绍了一些关于mpvue的写法，后来在我将简易框架搭建后，发现mpvue的组件分发支持不是很友好，所以弃用，还是用原生来开发程序。

基本使用可能各大教程都已说的明明白白，这里就不啰嗦，改篇主要是记录下本人开发过程中所遇到的一些问题。

不能使用 async await语法糖

小程序还是不支持这类语法糖，本人解决办法就是在使用该语法代码中引用了regeneratorRuntime

引入图片时，请先压缩图片，小程序大小限制2M多一点

尽量少引用本地图片，能放服务器的图片还是放在服务器上，毕竟程序大小有限制，本人在没注意图片压缩时，上传代码突然报了个程序代码限制在2M内。

input输入数字

一般项目可能都会碰到金额的输入限制，这里小程序input组件，可利用type = 'digit'，来控制输入只能是数值和小数点。

textarea组件键盘遮挡问题

这个可能大部分都可预见，各机型对textarea组件输入可能都有问题，本人开发遇见的是安卓机，尤其是华为，当聚焦输入时键盘挡住输入，并没有如预期页面向上滚动输入，暂时的兼容解决办法

在页面的底部增加元素，当聚焦输入时，给其高度，让页面滚动到键盘不可遮住的位置。

<!--控制textarea键盘遮挡  --> <view style='height: {{pageScrollHeight}}px'></view>

当我们使用组件的聚焦，失焦来处理后，发现在换行时都会触发textarea的聚焦事件，所以我们的具体代码：

// Textarea 获取键盘高度   focusTextarea: function(e) {     const _this = this;     let height = e.detail.height; // 键盘高度     _this.setData({       pageScrollHeight: (height - 60)     })     this.pageScrollToBottom();   }, // 换行时   changTextarea: function (e) {     this.setData({       hasFocus: false     })   },   // 失去焦点   blurTextarea: function (e) {     const _this = this;     _this.setData({       pageScrollHeight: 0,       hasFocus: true     })   },  // 页面滚动到底部   pageScrollToBottom: function () {     if (this.data.hasFocus) {       wx.createSelectorQuery().select('#page-scroll').boundingClientRect(function (rect) {         // 使页面滚动到底部         wx.pageScrollTo({           scrollTop: rect.height         })       }).exec()     }   },

ios9报Can't find variable: setCssToHead 错误

这个在小程序社区里出现过，原因好像是微信小程序的wxs所引起的，原贴说是由于wxs文件使用了es6，但是本人代码特别注意了，没有使用，还是一样报出这个错误，当我把这类文件删除后，程序就可正常运行。所以本人建议：还是尽量不要使用wxs了，可到小程序完全兼容后再尝试。

总结
整个开发过程中还是流畅的，毕竟没有用小程序里面很多的API，所遇到的坑和兼容问题都不是很多，本人把项目主要代码删除了，小程序开源地址，里面只有一些程序的结构，和项目的公用代码，欢迎大家交流指点，原文地址。