小程序踩坑日记

小程序踩坑日记

小程序学习+实战一个月了，趁着第一个小程序刚刚提测，写一写踩到的坑。
一般的坑我就不写了，也没有先后顺序，就觉得自己遇到的比较困难的写一下。
背景：JS 0经验、小程序 0经验，大佬请绕行

1、数据绑定

小程序的数据绑定是通过page.js里面的data进行，绑定方式（如果想实现动态绑定——js里的值变化wxml里相应改变）

this.setData({
	title:"value"
})

如果不要求前端同样显示，可以采用：

this.data.title = "value";

由于大佬已经搭好基础环境，引入了mobx.js（！），重新封装了app.page{},用rxData来代替data，采用=也可以实现动态绑定。

this.rxData.title = "value";

2、异步问题

小程序中有很多接口都是异步操作，所以有时在onload() onluanch()会出现调用顺序错误的状态，因此需要引入Promise（链接: Promise阮一峰.）。
登录逻辑为例：onluanch里面判断是否用户信息授权（授权方式需要button点击才能实现）

login.js  
let app = null；//封装的方法，需要从前端传递
login(app_){
 app = app_;
 wx.getSetting({
    success(res) {
      if (res.authSetting['scope.userInfo']) {
        console.log("用户已经授权");
        /*auth.init中调用后端接口获取登录态、更新app.globalData中的全局变量
		  由于auth.init中需要调用app，但页面还未初始化完成可能会造成getApp()=null的情况
		  所以需要传参app_，在app.js中的写法是
		  const login= require('./services/login');
		  login.login(this);
		*/
        auth.init(app).then((res) => {
          console.log("用户信息已更新", res);
        });
      } else {
        console.log("用户没有授权");
        wx.navigateTo("登录页");
      }
    },
    fail(e) {
      console.log("获取用户授权信息失败", e);
      wx.showToast({
        title: "获取用户授权信息失败请重新授权",
        icon: 'none',
        duration: 2000,
      });
      wx.navigateTo("登录页");
    }
  });}
 

3、关于小程序退出

由于小程序js无法直接操作wxml里的bind操作，如何实现表单提交成功后自动退出小程序？

<navigator open-type="exit" target="miniProgram" >退出</navigator>

设置样式透明度100%，遮住提交成功反馈。。。

4、mobx.js的坑

由于大佬引入mobx(又是它)，导致所有在rxData中的数据类型都变成可观察的（为了动态绑定），例如array=>observable arrays，就会导致一些问题：
如果所需类型必须是array？

 wx.previewImage({
        current: current,
        urls: this.data.list
      });

还有如何赋值observable object来 保持动态绑定？你需要这样写:mobx

 mobx.set(thing, key, value);//或者 
 mobx.set(thing, { key: value });

5、其他

小程序的文档推荐使用w3c 小程序，不要用官方的啊！！！实在是不知道去哪找。
另外如果是新手，一定要边学边做，可以下载几个样例拷贝到本地，这样就可以有对照着写了。
1、微信官方样例
2、组件框架vant weapp样例

哎呀，一不小心就到下班时间了（22：00），改bug的时间过的太快了。。。溜了溜了（另外，华为加油！）