小程序项目入坑实践

公司因为小程序原开发需求变更，产品决定从新开始设计新的小程序，人员紧张，致使我接了这个坑~。原开发时准备使用 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，所遇到的坑和兼容问题都不是不少，本人把项目主要代码删除了，小程序开源地址，里面只有一些程序的结构，和项目的公用代码，欢迎你们交流指点，原文地址。