小程序踩坑日记（一）

1.修改数据不成功

page({ data:{ a:&＃39;&＃39; } })

如果你想在methods里面调用你定义的a。应该用this.data.a &＃xff1b;

如果你想改变a 必须要用this.setData

this.setData({ a:b })

2.wx.request的post请求不成功

post请求一定要将&＃39;content-type&＃39; 改为 application/x-www-form-urlencoded。

此处官方解释为&＃xff1a;最终发送给服务器的数据是 String 类型&＃xff0c;如果传入的 data 不是 String 类型&＃xff0c;会被转换成 String 。转换规则如下&＃xff1a;

对于 header[&＃39;content-type&＃39;] 为 &＃39;application/json&＃39; 的数据&＃xff0c;会对数据进行 JSON 序列化

对于 header[&＃39;content-type&＃39;] 为 &＃39;application/x-www-form-urlencoded&＃39; 的数据&＃xff0c;会将数据转换成 query string &＃xff08;encodeURIComponent(k)&＃61;encodeURIComponent(v)&encodeURIComponent(k)&＃61;encodeURIComponent(v)...&＃xff09;

3.获取openid

openid 作为用户的唯一标示在小程序中扮演很重要的角色&＃xff0c;当然我也在这个地方跳进了一个大坑&＃xff1b;

一开始看网上的文章都是用‘https://api.weixin.qq.com/sns/jscode2session?appid&＃61;APPID&secret&＃61;SECRET&js_code&＃61;&＃39;&＃43; code &＃43;&＃39;&grant_type&＃61;authorization_code’这个接口请求的&＃xff0c;而且4个参数都很好获取&＃xff0c;appid 和 密钥都是你自己知道的&＃xff0c;code是在wx.login里面返回的&＃xff0c;这个接口在本地开发的阶段是可以用的&＃xff0c;但必须要不验证域名&＃xff0c;做法是点击微信小程序右上方详情按钮&＃xff0c;勾选不校验&＃39;&＃39;合法域名项"&＃xff1b;我的问题是项目在做完后真机测试获取不到openid,后来才知道线上环境因为安全问题小程序不允许前端请求“https://api.weixin.qq.com”这个域名&＃xff0c;所以必须要实现自己后台与微信后台的通信&＃xff0c;就是你让你的后台去请求“https://api.weixin.qq.com”这个接口拿到openid&＃xff0c;你去请求自己后台拿到openid&＃xff0c;这样就是安全的啦。

4.冒泡事件

正常我们在标签中绑定事件用bindtap,微信给我们提供阻止事件冒泡的方法是用catchtap代替bindtap

5.wx.getUserInfo获取用户信息

这一部分当你初始化小程序的时候在app.js中就会有一段 wx.getSetting({}),在这个API里面调用wx.authorize(OBJECT),wx.authorize(OBJECT)用于提前向用户发起授权&＃xff0c;调用后会立刻弹窗询问用户是否同意小程序使用某项功能或获取用户的某些数据;根据小程序服务内容不同&＃xff0c;需要获得用户授权的内容就不同&＃xff0c;官方提供了5中需要获得用户授权的功能

言归正传&＃xff0c;到底怎么获取的用户信息呢&＃xff1f;代码如下&＃xff0c;这个也是借鉴网上的写法&＃xff0c;原文&＃xff0c;在跟自己的比较后还是觉得这个比较简洁&＃xff0c;逻辑完整&＃xff1b;

wx.getSetting({success: res &＃61;> {if (res.authSetting[&＃39;scope.userInfo&＃39;]) {console.log(&＃39;已经授权&＃39;)// 已经授权&＃xff0c;可以直接调用 getUserInfo wx.getUserInfo({success: res &＃61;> {console.log(&＃39;app.js执行 getUserInfo&＃39;)// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo &＃61; res.userInfo// 由于 getUserInfo 是网络请求&＃xff0c;可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}else{wx.getUserInfo({success: res &＃61;> {console.log(&＃39;app.js执行 getUserInfo2&＃39;)// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo &＃61; res.userInfo// 由于 getUserInfo 是网络请求&＃xff0c;可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}
})


6.wx.uploadfile()上传多张图片

官方提供的wx.uploadFile 只能一次上传一张图片&＃xff0c;项目如果需要上传多张图片怎么办呢&＃xff0c;这是我在网上找的解决方法uploadFile上传多张图片. 我的项目还涉及了打开手机相册选取图片&＃xff0c;图片预览等需求&＃xff0c;这里用到的两个API 是wx.chooseImage()和wx.previewImage()&＃xff1b;这里建议大家可以看一下weui提供的写法&＃xff0c;weui是一个很靠近微信设计的UI库&＃xff0c;下载地址;我的用法是下载.zip到本地后解压&＃xff0c;然后将dist目录作为项目的根目录进行浏览就可以了

7.下拉刷新

下拉刷新无效&＃xff0c;这时你要在app.json 中添加一个配置

需要刷新的页面的配置中也需要添加&＃xff0c;例如index.js中要用到刷新&＃xff0c;你可以在index.json 中配置

这样基本就可以实现下拉刷新了

onPullDownRefresh: function () {wx.stopPullDownRefresh();wx.request({url: &＃39;https://......&＃39;,success: function (res) {}});
}


onPullDownRefresh监听下拉刷新&＃xff0c;你会发现下拉后一直出现刷新动画&＃xff0c;这时只要添加wx.stopPullDownRefresh()就可以停止刷新动画了&＃xff0c;刷新处理数据的逻辑写在wx.stopPullDownRefresh()下方

自己写到这里先告一段落&＃xff0c;以后还会继续开发小程序&＃xff0c;以后遇到的问题也会总结出来跟大家分享交流&＃xff0c;自己写这篇文章的初衷是给在开发过程中遇到和我一样问题的你提供一些参考&＃xff0c;很多都是借鉴别人的方法&＃xff0c;我在文章中也添加了原文地址&＃xff0c;勿喷。如果有错误可以指出&＃xff0c;我会重新改正的。