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

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

吐槽

那我们就从吐槽开始

（很喜欢的一部电影）

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

  export class HTTP { request({ url,data={},method="GET" }) { return new Promise((resolve,reject) => { this._request(url,resolve,reject,data,method) }) } _request(url,116);">"GET") { wx.request({ url: config.api_base_url + url, method,255);"> data,255);"> header: { 'content-type': 'application/json' },255);"> 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，感觉发挥的空间更大了。最近自己还真有个好点子，等搞完这个尝试一波（自娱自乐）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!