小程序踩坑日记
小程序学习+实战一个月了,趁着第一个小程序刚刚提测,写一写踩到的坑。
一般的坑我就不写了,也没有先后顺序,就觉得自己遇到的比较困难的写一下。
背景: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的时间过的太快了。。。溜了溜了(另外,华为加油!)