9月做小程序的一些经验

遥看一天河
302 阅读4分钟

最近这一个月都在做小程序，对小程序的了解又加深了一些，下面是我这一个月做小程序遇到的一些坑或者一些问题的解决方案。

1、小程序UI框架。我所知道的小程序UI框架有三种，分别是 colorui、vant-ui和lin-ui。除colorui之外，其他两个都有比较详细的文档，另外也提供了具有演示功能的小程序，在微信中搜索名称就可以搜到。

vant-ui 在实际项目中用到了tabbar组件，不知是我使用方法不对的原因还是其它的原因，使用vant-ui其它组件的时候遇到了不能显示的问题。然后引入了linui.

2、有赞的vant-ui一开始是把整个框架的代码都下载下来，放到components文件夹内的方式引用的，没有使用npm。后来才改成npm的方式，但是使用npm引入的时候需要注意云开发项目需要在miniprogramm文件夹下面执行 npm init，才会在构建npm的时候不会出错。

还有就是在项目中引入vant-ui和lin-ui后，在稳定版点击预览的时候编译失败，换成最新版的微信开发者工具以后，可以在手机上预览了。

3、在小程序中页面用到的组件都要在页面的json文件中声明引入，目前还不能在全局 json文件中声明引入，我尝试的时候，在手机上预览会出现白屏的情况，真机调试的时候又一切正常，将组件引入方式修改成在页面对应json文件中引入后，恢复正常。

4、关于bind:input 和 bindinput，在测试的时候发现，iPhone 7P 手机 bind:input 无效，不能调起事件回调函数，但是 bindinput 可以。

5、在iPhone手机中，给绝对定位的元素的right 元素设置负值以后，出现了页面在水平方向上可以滑动的事情，设置 overflow-x: hidden; 之后，并没有解决问题，取消负值以后，页面可以左右滑动的问题解决了。这种情况在公司的iPhone手机上都出现了，但是我自己的Android手机和开发者工具上都没有这个问题。

6、在编写复杂的静态页面的时候，还出现了class类名起名难的问题，后来在一些简单的页面里面，一些重复度不高的样式，索性直接写在style属性里面了。

7、在有元素嵌套的情况下，在设置子元素距离父元素顶部的距离的时候，最好给父元素设置padding属性，而不是给子元素设置margin属性，虽然margin是针对子元素设置的样式，但是会发现对父元素生效了。

8、网上一位大佬针对小程序写canvas生成海报图片的时候，代码写起来比较复杂这种情况，开发了一个Painter组件，用就像是布局元素的方法来编写canvas代码，当然这都在Painter组件内部处理了。又有一位大佬开发了一个在线工具，可以生成Painter组件需要的json代码。

9、有时候调用后端API接口，不可避免地会遇到出问题的情况，通常会直接将后端返回数据中的msg字段用一个弹框展示出来，小程序原生的 showModal 和 showToast 有着各种各样的限制。第三方UI框架提供了一些丰富的交互反馈组件，也可以通过方法调用这些组件，不过前提是要在json声明并在wxml文件中使用这些组件。

10、用ES6 Promise 语法封装小程序原生API。

const promisic = function(func){
  return function(params = {}){
    return new Promise((resolve,reject) => {
      const args = Object.assign(params,{
        success: res => resolve(res),
        fail: (err) => reject(err)
      })
      func(args)
    })
  }
}

上面这段代码使用时像下面这样使用，其中params是一个对象，包含小程序原生api中除success和fail属性之外的属性（如果调用的api有的话）。

promisic(wx.getLocation)(params).then().catch()
// async await
await promisic(wx.getLocation)(params)

以上这些就是我这个月做小程序的一些经验，还有一些没有写出来，有待进一步验证。

avatar
文章
阅读
粉丝