作者: 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,所遇到的坑和兼容问题都不是很多,本人把项目主要代码删除了,小程序开源地址,里面只有一些程序的结构,和项目的公用代码,欢迎大家交流指点,原文地址。