小程序开发遇到的一些问题和吐槽

2018-08-19

小程序在微信这个超级平台的带动下，这两年着实是越来越火。刚出来那一阵，翻了翻文档简单的看了看，没有组件、没有wsx(虽然现在也很难用，有总比没有强)还有无穷无尽的坑。一直没有深入去学习去了解。期间美团开源了一个mpvue，一个基于Vue的小程序开发框架。上手没什么成本，自己写了一个极其简单简陋查询快递的小程序–快递去哪儿咯。最近工作上来了小程序的需求，组内交流之后打算用小程序原生的那一套搞。现学现搞all in了两周小程序。这里记录一下遇到的一些小问题或者坑吧。

吐槽

那我们就从吐槽开始

（很喜欢的一部电影）

繁琐过时的API
在网页端开发web，说道处理请求相比axios、fetch已经成了主流，链式调用try···catch处理错误。但是小程序却用着过时的ES3风格的API(wx.request)。这样在使用起来很不优雅，在使用了调用的时候很容易造成回调地狱。
想要使用promise这种链式调用的实行。我们不得不去封装一个HTTP类。下面是自己封装的一个HTTP类


export class HTTP {
  request({ url, data={}, method="GET" }) {
    return new Promise((resolve, reject) => {
      this._request(url, resolve, reject, data, method)
    })
  }

  _request(url, resolve, reject, data={}, method="GET") {
    wx.request({
      url: config.api_base_url + url,
      method,
      data,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
				const code = res.statusCode.toString()
				// 判断状态码
        if (code.startsWith('2')) {
          resolve(res.data)
        } else {
          reject()
        }
      },
      fail: (err) => {
        reject()
      }
    })
  }

}

面向JSON编程
接着API设计的过时，不得不吐槽这种面向JSON编程的方式。开发一个小程序需要app.json去配置全局的应用配置、路由配置还有全局UI配置。每个页面，每个组件也有相应json文件去配置。
wxs真的很难用
作为页面的脚本语言，微信这边自己现成的JS不用，自己搞了一套嵌入式脚本语言，里面只能写ES3的语法不说（还不是完整版的ES3语法）没有 Array, Object 对象；或遇到引入 lodash 会报错 TypeError: Cannot read property ‘prototype’ of undefined
js页面中无法使用绝对路径
wxss 里的注释只能用 /…/ 写法，不能用 //…
component组件中与支持onShow这个生命周期

遇到的一些问题

在开发横向滑动图片的组件的时候，自然而然想到在sroll-view组件上添加scroll-x属性，但是依然划不动。

解决：父级在设置宽高的同时必须设white-space: nowrap; 子级要用display: inline-block;用浮动都不行

页面配置背景色可使用 backgroundColor,模拟器里并没有生效。最后发现backgroundColor 是指窗体背景颜色，而不是页面背景色。
textarea组件是原生组件，placeholder-style 目前只支持设置 fontSize、fontWeight、color 属性
map、textarea 为原生组件，页面层级最高，就算设置了z-index也无法被覆盖。（这个是真的坑）
text组件，看名字我们自然而然想到这个是不是和网页中的span标签一样。但是两个text标签放在一起会出现高度不一致的问题，以及类似网页中的pre标签，会保留文本中的空格和换行符号（开发的时候发现怎么换行了，一个劲的调样式，结果发现=。=真的是无语）

解决: 索性全换成view组件了

发消息模版时需要获得提交表单时的 formId，通过 form 及键盘右下角完成提交事件对象 e.detail 获取不到 formId，只能通过 form button 来获取。
component在处理数据变化的时候可以使用properties中设置的observe或者页面中写wxs,wxs其实相当于vue里面的过滤器。这两个可以结合情况使用
wx:if 和hidden结合实际情况适用。hidden不能直接赋值在自定义组件上，需要放在组件里的最外层的view上。用过传参的形式使用

以上

小程序的开发怎么说真的是又爱又恨，很是微妙。这两周的开发学习感觉又回到了当时研究RN的时候，当效果、成果做出来的时候很有成就感。同时小程序也蛮适合自己瞎搞的，最近在搞的一个repo
Teemo,除此之外这两天小程序官方有公测了serverless，感觉发挥的空间更大了。最近自己还真有个好点子，等搞完这个尝试一波（自娱自乐）