- 05.适配 wx.getUserProfile 的一点简单想法
先看官方的最新通知 周知:getUserInfo 开发版和体验版 已对齐 getUserInfo 匿名表现,正式版将于 4月13日 正式对齐 getUserInfo 匿名表现。 请开发者使用 getUserProfile 获取用户信息。 小程序登录、用户信息相关接口调整说明:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801 原先的getUserInfo能力 原先的 getUserInfo 的能力,具体看这里:https://developers.weixin.qq.com/community/develop/doc/000c2424654c40bd9c960e71e5b009?highline=getUserInfo [图片] [图片] 我对 getUserInfo 的理解 我们一般开发者,会用 wx.getUserInfo 来实现 openId 和 用户信息的获取,是非常的便捷的。 并且还能通过 wx.getSetting 获取 "scope.userInfo" 判断用户用户是否已经授权。 wx.getSetting + wx.getUserInfo 能近似完美解决用户登陆授权场景 华丽的分割线 2021-02-04 官方要对小程序登录、用户信息相关接口调整说,具体链接:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?blockType=1 这样我们开发者会面临的用户登陆授权的调整,会比较痛,但也必须要去改,因为没办法。 怎么改呢 先不要着急去适配 getUserProfile,先要弄清楚自己的小程序用 getUserInfo 获取那些能力?实现哪些能力? 我的理解,如果是用 wx.getSetting + wx.getUserInfo 来实现获取用户的openId(unioinId) 和用户头像昵称信息的话,可以这样去调整? wx.login 可以拿到用户的 openId,流程如下: [图片] 如果绑定了开发平台,还可以通过 wx.login 静默获取用户的 uninonId [图片] 这个过程是静默的,不需要用户参与。 然后对于需要用户头像信息的时候,在使用 wx.getUserProfile 能力即可。 小结 1.wx.login + wx.getUserProfile 能实现 wx.getUserInfo 的能力,也能满足我们的业务场景。 2.看到官方的调整,先不要着急去调整,先弄清楚要我们的业务场景使用了那些API获取那些能力 3.关于wx.getSetting 返回 "scope.userInfo" 为 undefined。我记得社区有人提问了,等官方回复就好,其实我们可以不依赖这个,原因留给你 4.用户头像更新不及时的问题,我们看看微信聊天记录,当你好友更新头像,当你不点击时,有时候展示的还是老头像,当你点击时,会显示新头像(我们何不借鉴一下,提供给用户更新的能力即可)
2021-04-09 - 小程序预览模式下白屏是什么问题?
在电脑端开发工具上编译后正常显示并且各项功能正常使用。通过开发工具连接手机进行真机调试也能正常显示功能正常。 但是,通过预览和上传代码后在体验版中使用,打开页面均为白屏。 这是什么问题?? 之前用老版本的开发工具编译是可以正常显示的。 今天用最新的1905051版本编译就不行了,出现上面的问题。 到底什么问题???是开发工具的问题吗??
2019-09-10 - 官方能不能开放一下wx.chooseAddress中的省市区完整数据?
商城小程序,用户填写收货地址的时候,用的是小程序的wx.chooseAddress接口, 然后服务器端后台这边,有个运费模板的配置,不同城市的邮费是不同的, 可是网上找来的省市区地址库,和微信的都有所区别,希望官方能开放一下微信里『我的地址』中的省市区数据。
2020-07-08 - wx.getUserProfile 修改方案
最近微信关于用户头像、昵称授权又做了调整。 点击查看原文 解决方案思路如下: 1、在util.js里写一个通用函数,函数的功能是,用户授权成功,将头像昵称,存入服务器,同时,在本地缓存设置标记用户授权成功。 [代码]// util.js function getUserProfile() { wx.getUserProfile({ desc: '用于完善个人资料', success: function(res) { var userInfo = res.userInfo // console.log('userInfo==>', userInfo) wx.setStorageSync('storage_info', 1);//本地标记 //下面将userInfo存入服务器中的用户个人资料 //... }, fail() { console.log("用户拒绝授权") } }) } [代码] 2、在需要用户授权时,做判断,如果本地已经授权,直接执行正常业务逻辑。如果未授权,则提示授权。 [代码] chooseTap: function(e) { //如果未授权,就提示授权,如果授权了,就执行正常的业务逻辑 if (!wx.getStorageSync('storage_info')) { util.getUserProfile() return } //下面是正常业务逻辑 //... } [代码] 3、在用户进入小程序时,从服务器获取用户信息(如果已授权,就有之前存入的头像,昵称),在页面展示用户信息。 完成以上3步,就全部完成了。 说明:把授权状态存入缓存的好处是:因为wx.getUserProfile每次都会弹授权框,如果每次都让用户授权,体验不好。如果只授权一次,存入服务器,以后都展示的是这个用户信息。在用户微信改名,改头像后,服务器储存的用户信息还是以前的。 所以,把授权状态存入缓存,起码在用户更换手机,或者删除过小程序,又进来时,会弹出授权提示,可以让用户重新授权,将服务器里用户的信息进行一次更新。
2021-04-11 - authSetting['scope.userInfo']又没有了吗?
[图片]
2021-04-06 - 登录接口又双叕变了,三行代码挑战全网最少修改工作量
小程序登录、用户信息样关接口又双叕变了。 https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801 几家悲伤几家愁。。。 微信的一小步,人猿的一大步。。。 没办法,改吧。。。 翻出以前小程序这部分的代码,惊喜地发现,只需要三行代码,就能平滑过渡; 感谢我以前看似丑陋却很省事的登录代码逻辑!!! 登录逻辑如下: 1、判断库里有用户的信息没有,没有,则wx.navigateTo一个专门的授权页面:auth 2、授权成功后获得userInfo,保存到库里; auth页代码修改如下: auth.wxml: 修改一行代码 <button style='margin:15px;font-size:16px' type='primary' size="mini" bindtap='getUserProfile'>授权微信头像和昵称</button> auth.js: 修改两行代码 //原wx.getUserInfo接口 getUserInfo: function (e) { let userInfo = e.detail.userInfo if (userInfo) this.onSaveUserInfo(userInfo) }, //新增wx.getUserProfile接口 getUserProfile: function (e) { wx.getUserProfile({ desc: '业务需要', success: res => this.onSaveUserInfo(res.userInfo) }) }, //保存userInfo到DB onSaveUserInfo:function(userInfo){ console.log(app.globalData.userInfo = userInfo) db.collection('user') .where({ _id: this.openid }) .count() .then(res => { if (res.total > 0) { //doc.update db.collection('user').doc(this.openid).update({ data: userInfo }).then(res => console.log(res)) } else { //doc.add db.collection('user').doc(this.openid).add({ data: userInfo }).then(res => console.log(res)) } }) wx.navigateBack() }, 以下是判断用户信息是否存在的代码: xxxx.js: onSubmit:async function () { if (await app.hasUserInfo()) { } else return //其他代码 }, app.js: hasUserInfo: async function () { if (this.globalData.userInfo && this.globalData.userInfo.nickName && this.globalData.userInfo.avatarUrl) return true let res = await wx.cloud.database().collection('user').doc(this.openid).get().catch(err => console.log(err)) if (res && res.data && res.data.nickName && res.data.avatarUrl) { this.globalData.userInfo = res.data return true } else { wx.navigateTo({ url: '/base/auth/auth' }) return false } }, 关于用户信息自动更新: 我们一直以来的方法如下: 1、留给用户手动授权的入口,用户更换头像后,发现自己的头像不显示,则需要手动授权刷新userInfo; 2、一般会在这个页面:我的--个人信息--授权微信头像和昵称,用户点击后,wx.navigateTo到授权页。 笔者团队认为:用户信息自动更新其实是个伪需求。理由如下: 假设某用户修改了头像: 1、用户自己打开小程序,发现头像和昵称怎么没有改过来,那么手动更新一下。用户体验没毛病,没必要非要自动更新; 2、用户如果后来不再进入小程序,别人看到的都是一张碎的头像,那么此时,自动更新也毫无作用,因为该用户都不打开小程序。 3、微信团队肯定考虑过自动更新这种要求,但他们宁愿千夫所指,也依然坚持推出新的登录接口,那就肯定是已经经过了中国最牛逼团队的全面考衡了。 补充: 登录和授权其实是两码事,可以毫无关系这么说,以上的内容主要都是关于授权微信用户信息的,下面补充一下登录的内容: 登录其实就是获取用户的openid,我们一直采用云函数来获取openid。方案如下: 在每个页面:page.js: onLoad: async function (options) { this.openid = await app.getOpenid() }, 在app.js: getOpenid: async function () { if (this.openid) return this.openid let res = await this.globalData.cloud.callFunction({ name: 'login' }) console.log(res) return this.openid = res.result.FROM_OPENID||res.result.OPENID },
2021-04-07 - 微信小程序wx.request接口请求封装,入门级附源码
接口统一配置文件,http.js const fetch=require("./fetch") // 引入封装的wx,request请求 //确认开发环境 // "http://192.168.2.11:81", // 开发环境 // "http://192.168.2.11:81", // 测试环境 // "http://192.168.2.11:81" // 生产环境 let baseURL='http://192.168.2.11:81'; // 公共部分统一 function shopList(data){ // 查询房源列表 return fetch(baseURL + '/Shared/Rental/List', "GET", data) } function needShopList(data){ // 查询求租列表 return fetch(baseURL + '/Shared/AskRent/List', "POST", data) } module.exports={ shopList, needShopList } 接口封装文件,fetch.js //封装wx.request()网络模块 module.exports = (url, methods, datas) => { let p = new Promise((resolve, reject) => { let type; let data; let method; if (methods === 'POST_F') { // 表单提交,这里可以对请求的数据进行封装,普通post不需要这步操作 type = 'multipart/form-data; boundary=XXX'; let result = '' for (let name of Object.keys(datas)) { let value = datas[name]; result += '\r\n--XXX' + '\r\nContent-Disposition: form-data; name=\"' + name + '\"' + '\r\n' + '\r\n' + value } result += '\r\n--XXX--' data = result; method = 'POST'; } else { type = 'application/json'; data = datas; method = methods; } wx.request({ url, method, data, header: { token:wx.getStorageSync('token') || "",// 登录后获取的token 'content-type': type // 默认值 }, success(res) { let data = res.data.biz // 这里返回数据自定义返回需要的部分就可以了 if (data.code === '401') { // 这里可以对请求的状态进行判断,做出相应的动作,登录过期,去登陆 wx.removeStorageSync('token') return wx.showModal({ title: '温馨提示', content: '您当前还未登录,为了更好的体验请先登录!', showCancel: true, success: function (res) { if (res.confirm) { return wx.navigateTo({ url: '/pages/login/login', // 点击确定去登陆 }) } } }) } resolve(data) }, fail(err) { // 请求失败后判断状态码,如果是登录问题就去登录 console.log(err, '请求失败1!') debugger; reject(err) } }) }) return p; } 在app.js文件引入封装好的wx.request const http = require('./api/http.js') App({ http, // 引入http })
2021-06-23