- wx.getUserInfo 获得的信息,该如何确定用户身份?
比如我的小程序只是一个类似问卷的内容 不需要什么敏感信息,但需要用户来登录再操作 wx.getUserInfo 所获得的信息 该如何确认这个用户是否登陆过 以便来保存以前的信息呢?
2020-08-20 - 【优化】小程序优化-代码篇
本文主要是从代码方面跟大家分享我自己在开发小程序的一些做法,希望能帮到一些同学。 前言 不知道大家有没有这种体会,刚到公司时,领导要你维护之前别人写的代码,你看着别人写的代码陷入了深深的思考:“这谁写的代码,这么残忍” [图片] 俗话说“不怕自己写代码,就怕改别人的代码”,一言不和就改到你吐血,所以为了别人好,也为了自己好,代码规范,从我做起。 项目目录结构 在开发之前,首先要明确你要做什么,不要一上来就是干,咱们先把项目结构搭好。一般来说,开发工具初始化的项目基本可以满足需求,如果你的项目比较复杂又有一定的结构的话就要考虑分好目录结构了,我的做法如下图: [图片] component文件夹是放自定义组件的 pages放页面 public放公共资源如样式表和公共图标 units放各种公共api文件和封装的一些js文件 config.js是配置文件 这么分已经足以满足我的需求,你可以根据自己的项目灵活拆分。 配置文件 我的项目中有个config.js,这个文件是用来配置项目中要用到的一些接口和其它私有字段,我们知道在开发时通常会有测试环境和正式环境,而测试环境跟正式环境的域名可能会不一样,如果不做好配置的话直接写死接口那等到上线的时候一个个改会非常麻烦,所以做好配置是必需的,文件大致如下: [图片] 首先是定义域名,然后在config对象里定义接口名称,getAPI(key)是获取接口方法,最后通过module暴露出去就可以了.引用的时候只要在页面引入 import domain from ‘…/…/config’;,然后wx.request的时候url的获取方式是domain.getAPI(’’) 代码健壮性、容错性 例子 代码的健壮性、容错性也是我们应该要考虑的一点,移动端的项目不像pc端的网络那么稳定,很多时候网络一不稳定就决定我们的项目是否能正常运行,而一个好的项目就一定要有良好的容错性,就是说在网络异常或其它因素导致我们的项目不能运行时程序要有一个友好的反馈,下面是一个网络请求的例子: [图片] 相信多数人请求的方式是这样,包括我以前刚接触小程序的时候也是这样写,这样写不是说不好,而是不太严谨,如果能够正常获取数据那还好,但是一旦请求出现错误那程序可以到此就没法运行下去了,有些比较好的会加上faill失败回调,但也只是请求失败时的判断,在请求成功到获取数据的这段流程内其实是还有一些需要我们判断的,一般我的做法是这样: [图片] 在请求成功后小程序会进行如下判断: 判断是否返回200,是则进行一下步操作,否则抛出错误 判断数据结构是否完整,是则进行一下步操作,否则抛出错误 然后就可以在页面根据情况进行相应的操作了。 定制错误提示码 可以看到上面的截图的错误打印后面会带一个gde0或gde1的英文代码,这个代码是干嘛用的呢,其实是用来报障的,当我们的小程序上线后可能会遇到一些用户发来的报障,一般是通过截图发给我们,之前没有做错误提示码的时候可能只是根据一句错误提示来定位错误,但是很多时候误提示语都是一样的,我们根本不知道是哪里错了,这样一来就不能很快的定位的错误,所以加上这样一个提示码,到时用户一发截图来,我们只要根据这个错误码就能很快的定位错误并解决了,错误提示码建议命名如下: 不宜过长,3个字母左右 唯一性 意义明确 像上面gde表示获取草稿失败,后面加上数字表示是哪一步出错。 模块化 我们组内的大神说过, 模块化的意义在义分治,不在于复用。 之前我以为模块化只是为了可以复用,其实不然,无论模块多么小也是可以模块化,哪怕只是一个简单的样式也一样,并是不为了复用,而是管理起来方便。 很多同学经常将一些公共的样式事js放在app.wxss和app.js里以便调用,这样做其实有一个坏处,就是维护性比较差,如果是比较小的项目还好,项目一大问题就来了。而且项目是会迭代的,不可能总是一个人开发,可能后面会交接给其他人开发,所以会造成的问题就是: app.wxss和app.js里的内容只会越来越多,因为别人不确定哪些是没用的也不敢删,只能往里加东西,造成文件臃肿,不利于维护。 app.wxss和app.js对于每个页面都有效,可读性方面比较差。 所以模块化的意义就出来了,将公共的部分进行模块化统一管理,也便于维护。 样式模块化 公共样式根据上面的目录结构我是放在public里的css里,每个文件命名好说明是哪个部分的模块化,比如下面这个就表示一个按钮的模块化 [图片] 前面说过模块化不在于大小,就算只是一个简单的样式也可以进行模块化,只要在用到的地方import一下就行了,就知道哪里有用到,哪里没有用到,清晰明了。 js模块化 js模块化这里分为两个部分的模块化,一部分是公共js的模块化,另一部分是页面js的模块化即业务与数据的拆分。 公共js模块化 比较常用的公共js有微信登录,弹窗,请求等,一般我是放在units文件夹里,这里经微信弹窗api为例: [图片] 如图是在小程序中经常会用到的弹窗提示,这里进行封装,定义变量,只要在页面中引入就能直接调用了,不用每次都写一大串。比如在请求的时候是这样用的 [图片] toast()就是封装的弹窗api,这样看起来是不是清爽多了! 业务与数据模块化 业务与数据模块化就是指业务和数据分开,互不影响,业务只负责业务,数据只负责数据,可以看到页面会比普通的页面多了一个api.js [图片] 这个文件主要就是用来获取数据的,而index.js主要用来处理数据,这样分工明确,相比以往获取数据和处理数据都在一个页面要好很多,而且我这里获取数据是返回一个promise对象的,也方便处理一些异步操作。 组件化 组件化相信大家都不陌生了,自从小程序支持自定义组件,可以说是大大地提高了开发效率,我们可以将一些公共的部分进行组件化,这部分就不详细介绍,大家可以去看文档。组件化对于我们的项目来说有很大的好处,而且组件化的可移植性强,从一个项目复用到另一个项目基本不需要做什么改动。 总结 这篇文章通过我自己的一些经验来给大家介绍如何优化自己的代码,主要有以下几点 分好项目目录结构 做好接口配置文件 代码健壮性、容错性的处理 定制错误提示码方便定位错误 样式模块化和js模块化 组件化 最后放上项目目录结构的代码片段,大家可以研究一下,有问题一起探讨:https://developers.weixin.qq.com/s/1uVHRDmT7j6l
2019-03-07 - 场景接入指引
线下场所接入支付线下场所泛指商超、便利店、餐饮、医院、学校、电影院和旅游景区等具有明确经营地址的实体场所。线下场所接入微信支付后,可以通过付款码支付或JSAPI支付,自行开发完成收款需求,或通过开通微信收款商业版(免开发)快速接入微信支付。 我有线下场所 公众号接入支付 微信支付支持在公众平台注册并完成微信认证的服务号,政府或媒体订阅号接入支付功能。公众号接入支付后,可以通过JSAPI支付产品来完成在公众号、朋友圈、聊天窗口等微信内的收款需求。 我有公众号 小程序接入支付微信支付支持在公众平台注册并完成微信认证的小程序接入支付功能。小程序接入支付后,可以通过小程序支付产品来完成在小程序内销售商品或内容时的收款需求。 我有小程序 PC网站接入支付 微信支付支持完成域名ICP备案的网站接入支付功能。PC网站接入支付后,可以通过JSAPI支付或Native支付,自行开发生成二维码,用户使用微信“扫一扫”来完成支付。 我有PC网站 APP接入支付微信支付支持在开放平台注册并完成认证的移动端应用APP接入支付功能。APP接入支付后,商户通过微信提供的SDK调用微信支付模块完成收款需求。目前微信支付支持手机系统有:IOS(苹果)、Android(安卓)和WP(Windows Phone)。 我有APP
2018-12-19 - 社区每周 | 上周社区问题反馈以及功能优化更新(11.12-11.16)
各位微信开发者: 大家下午好。 对于未更新版本的小程序,将在11月22日起限制可跳转小程序的数量不超过10个。详情可查看《小程序跳小程序》 以下是上周我们在社区收到的问题反馈、需求的处理进度,希望同大家一同打造小程序生态。 上周问题反馈和处理进度(11.12-11.16)修复中的问题分享完成拿到 shareTicket 为 undefined 的问题 查看反馈 工具中 2.4.0 video 组件使用 setData 设置 src 无效的问题 查看反馈 开发者工具无法输入中文的问题 查看反馈 开发工具编辑器复制粘贴和输入错位的问题 查看反馈 安卓 cover-view 点击触摸系列事件无法触发的问题 查看反馈 wx.chooseLocation 直接点击确定返回时地址不完整的问题 查看反馈 movable-view 位置被 movable-area属性影响的问题 查看反馈 工具上 swiper 自动轮播时候会导致CPU暴涨的问题 查看反馈 开发者工具黑屏的问题 查看反馈 iOS input 组件动态修改 password 属性无效的问题 查看反馈 安卓手机锁屏后再解锁,小程序白屏的问题 查看反馈 videoContext.requestFullScreen 某些情况下无法生效的问题 查看反馈 安卓input组件某些情况下位置计算错误的问题 查看反馈 iOS tabBar 文字未居中,过于靠下的问题 查看反馈 BackgroundAudioManager.onCanplay 时有可能无法获取 duration 的问题 查看反馈 map 组件 bindregionchange 事件派发问题 查看反馈 工具中 video 组件 requestFullScreen 无效的问题 查看反馈 iOS 上 cover-view的 border-radius 属性失效的问题 查看反馈 wx.compressImage 各端压缩结果不一致的问题 查看反馈 swiper-item 高度超过屏幕时 onPageScroll 派发不一致的问题 查看反馈 当 input 设置 hidden 时,仍可以通过动态修改 focus 来调起键盘的问题 查看反馈 iOS 下 input placeholder 部分被截断的问题 查看反馈 安卓 BackgroundAudioManager 播放完后设置同一 src 无法播放的问题 查看反馈 安卓删除开发版小程序无法清空授权信息的问题 查看反馈 代码片段分享出来之后乱码的问题 查看反馈 iOS 系统中 cover-view 设置 scroll-top 后 overflow: scroll 无效的问题 查看反馈 android 调用 createAnimation 出现卡顿的问题 查看反馈 安卓小程序可以默认横屏,应该不支持的问题 查看反馈 iOS video seek 精度应为 ms 的问题 查看反馈 安卓 wss 连接失败的问题 查看反馈 安卓 tabBar 中有相同页面时,点击后图标变化错位的问题 查看反馈 iOS 6.7.3 chooseVideo 不会引起小程序 onHide 和 onShow 的问题 查看反馈 开发者工具抖动的问题 查看反馈 iOS web-view 组件的 userAgent 里面没有 miniProgram 字样的问题 查看反馈 module.export 为 falsy 值时 require 返回undefined 的问题 查看反馈 picker 改为不可循环选择的问题 查看反馈 罗盘接口返回精度值跳变的问题 查看反馈 工具中小程序分包预下载后被直接注入运行的问题 查看反馈 工具中 input 组件 bindinput 的 detail 没有 keyCode 值的问题 查看反馈 工具上 live-pusher 出现两次录音授权弹窗的问题 查看反馈 已修复的问题关于navigateToMiniProgramAppIdList 的问题 查看反馈 体验评分开启后报错 redefine property 的问题 查看反馈 11.14 版本,工具调试窗口 rpx 全部变成了px 的问题 查看反馈 msgSecCheck 耗时上涨返回失败的问题 查看反馈 安卓真机调试白的问题 查看反馈 工具上传文件时部分文件被忽略的问题 查看反馈 扫码体验版进入小程序不显示公众号组件的问题 查看反馈 page 的配置中没加上 functionalPage,导致低版本基础库不能正常识别的问题 查看反馈 iOS CSS 动画闪烁的问题 查看反馈 安卓扫码返回小程序的时候界面闪烁的问题 查看反馈 发票文档描述不清晰的问题 查看反馈 修复完成,待客户端版本上线iPhoneXs Max 获取手机型号 unknown 的问题 查看反馈 安卓小程序跳小游戏后返回场景值不是1038 的问题 查看反馈 安卓某些情况下原生组件相互覆盖问题的问题 查看反馈 2.4.0 未更新 canIUse 的问题 查看反馈 需求反馈跟进迭代中wx.chooseFile 接口的需求 查看反馈 工具深色模式的需求 查看反馈 工具中 module.exports 里面的对外接口自动补全的需求 查看反馈 小程序的自动化测试框架的需求 查看反馈 小程序支持 WebGL 的需求 查看反馈 独立分包中获取场景值的需求 查看反馈 工具支持返回上一步的需求 查看反馈 需求评估中chooseImage 最多只能选择 9 张的限制的需求 查看反馈 工具支持页面截图的需求 查看反馈 swiper 组件支持自定义过渡动画的需求 查看反馈 音频支持 PCM 格式的需求 查看反馈 真正的自定义底图的需求 查看反馈 video 组件播放控件显示隐藏的监听事件的需求 查看反馈 开发工具详情面板中显示AppID 对应的小程序管理后台登录帐号的需求 查看反馈 wxs 支持遍历对象的需求 查看反馈 wx.getImageInfo 支持获取更多的 EXIF 信息的需求 查看反馈 批量删除编译模式的需求 查看反馈 微信团队 2018.11.21
2018-11-30 - 云开发调用云函数出错
已安装node.js 8.9.0 并安装wx-server-sdk,已创建云函数并上传云平台,访问云函数时报错 WACloud.js:1 Uncaught (in promise) Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail cloud function service error code -501005, error message Environment not found; at cloud.callFunction api; 调用代码: onLoad(){ wx.cloud.init({ env: 'text' }) wx.cloud.callFunction({ name:'add', data:{ a:12, b:19 } }).then(console.log) }
2018-09-19 - 云开发,你想知道的都在这
对小程序有关注开发者,应该都会记得,在去年开发者工具推出 1.0 版本的时候,和腾讯云一起同步推出了一个云的解决方案,通过授权的方式可以便捷的进行小程序的服务端开发。经过一年的实践和思考,我们觉得小程序的云服务,我们可以做的更进一步,云能力应该是小程序的 基础能力,和 API、组件一样,是每个小程序都所拥有的,所以有了现在的 小程序·云开发 。一言概之:基础能力用或者不用,小程序云服务都在那里,不多不少。 云开发正式开放的这几天,从我们的数据来看,有非常非常多的开发者都参与了进来,在社区上也收到了大家发来的许多疑问、吐槽。我们整理了下,大约有以下几类 开通的问题1. 工具中没有云服务图标或新建项目的时候没有云开发 QuickStart 选项 原因可能是: 工具版本旧:点此 下载最新版工具 使用了 测试号 或游客模式:使用其他 AppID 2. 开通时候云控制台报错的问题 在开放云开发的时候没有想到大家这么热情,资源一时准备不足导致开通失败,现已恢复正常,大家重试就好。另外还有少部分一些历史帐号的问题,也基本已经解决。 3. 调试器中报错提示 fail invalid scope 这个报错是因为云服务尚未开通,需要先在工具栏上点击左侧的 “云开发” 按钮开通云服务 数据库的问题1. 导入数据失败或一直处于等待状态 之前导入有 bug 可能会造成一些失败,现已修复,可重试;还有大部分问题是导入的数据格式的不对,可以参见文档中 数据库导入 的部分,另外我们会尽快的加上数据格式的前端校验。 2. 控制台数据库报错 /wx/database?action=creatFreeDb 请求失败: 100008, Db Resource Amount Over Limit 问题已解决,重试即可 3. 云开发数据库操作失败报错 Database Authorization Not Found:l5 get route fail: not found 问题已解决,重试即可 存储管理的问题上传文件后无法下载或引用 和上面提到的开通失败的原因是一样的,CDN 资源一时准备不足,现已恢复正常,大家重试即可 配额使用的问题大家如果对资源的配额有相关疑问可以查看 文档 中关于配额的说明,对于其中一些概念也在最下方的脚注做了更详细的解释。目前提供的资源配额是基础版的配额,如果需要提升上限,可以按文档中的说明(在配额文档的表格下方)发邮件到相应邮箱申请。 QuickStart 的问题1. 小游戏云开发 QuickStart 云函数 [代码]uploadScore[代码] 报错提示找不到 [代码]wx-server-sdk[代码] 需要打开终端进入到云函数 [代码]uploadScore[代码] 的目录执行命令 [代码]npm install[代码] 安装 Node.js 依赖并上传,注意需先安装好 [代码]Node.js[代码],并保证 [代码]node[代码] 和 [代码]npm[代码] 在环境变量中 2. 调试器报错提示 fail invalid scope 在上面的云服务开通中也提到了,需要先开通云服务 其他问题1. 使用云开发是否不能使用其他云服务 不是的,云开发作为基础能力,同开发者现有的服务端能力是不冲突的,可以一起去使用。 2. 小游戏是否可以使用云开发 可以的 3. 如何快捷的调用微信的开放接口,比如发送模板消息、微信支付等等 相关功能我们已经在开发中,会尽快给到大家 4. 如何在小程序插件中使用云开发 插件相关功能和需求包括小程序插件是否有插件自己的云开发,插件是否可以调用寄主的云开发能力等等正在规划和开发中,会尽快给到大家 5. 配额套餐的问题 前面也提到我们有提供一套基础版的套餐,它的配额可以满足大部分基础小程序的需求,我们也会尽快推出更高阶的方案,满足不同的小程序开发者。 6. 云开发管理端 API 开放的问题 获取管理端统计数据、管理数据库等等管理端的 API 会尽快支持上
2018-09-25 - 微信小程序开发常见问题(四)
一、小程序不同页面之间的传值方式 a、URL传值 这种方式最常用,比如: wx.navigateTo({ url: '../detail/detail?cid='+cid+'&access_token='+access_token }) 这里面直接通过跳转页面的URL进行传值,然后在另一个页面进行接收: onLoad: function (opt) { console.log('cid =' + opt.cid); console.log('access_token =' + opt.access_token); } 这种传值方式只适合值比较少的时候使用,传值比较多的时候,还是建议写本地缓存~ b、本地缓存 小程序API提供了本地缓存数据的API,默认可以缓存10M的数据,如下: wx.setStorageSync('checkin', checkin); checkin是一个object,在需要的页面直接调用wx.getStorageSync即可获取,这样就解决了传值较少的问题了。 c、全局APP 其实还有第三种方式,就是全局APP变量。app.js和app.wxss中的代码都是全局生效的,所以我们可以利用这一点儿,在不同页面之间进行传值。 App({ onLaunch: function () { }, globalData: { host: 'https://api-xcx-qunsou.weiyoubot.cn/xcx', // 版本升级时这里的version加1并替换versionFeature的文案即可 version: 2, versionFeature: '更新说明' } }) 也可以在其他JS里面动态修改globalData,如getApp().globalData.host = 'XXX'; 二、textarea的键盘BUG有同学可能会遇到这个问题:show-confirm-bar='false'设置不生效,导致键盘还带有“完成”按钮,预期效果是没有“完成”button~ 这个值如果要设置为true的话随便输入就可以了,但是如果是要设置false的话就需要设置变量或者留空: show-confirm-bar='' 或者 show-confirm-bar='{{showConfirm}}' 三、小程序中如何生成分享小程序码 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html (微信小程序官方文档不支持搜索,这真是太TM坑人了~) 文档大家自己去看吧,我们需要注意以下几点: 1、通过该接口,仅能生成已发布的小程序的二维码。 2、可以在开发者工具预览时生成开发版的带参二维码。 3、接口A加上接口C,总共生成的码数量限制为100,000,请谨慎调用。 4、POST 参数需要转成 json 字符串,不支持 form 表单提交。 5、auto_color line_color 参数仅对小程序码生效。 《END》 欢迎交流小程序技术问题~ 威信 mianhuabingbei [图片]
2018-01-25 - 小程序如何返回刷新
A页面 点击navigateTo 跳转到B页面 B页面调用了一个列表组件(使用component编写的),点击组件中的每一项回跳转到C页面 C页面执行完成后,返回B页面,(使用navigateBack进行返回),返回后,点击B页面左上角的回退按钮 发现,得点击2次,才能返回到A页面。 我在C页面做了一些数据更改的操作,操作完成后,我希望回退到B页面,B页面能自己重新刷新一下,这样才能看到我刚才的更改。但是,B页面其实是个组件模版页面。我在onshow里面,没法重新调用数据请求,因为数据都是分装在组件模版页中的,我不知道该怎么办呢?谁能帮帮我。 B页面: wxml: <listTag key-word="{{keyword}}" search-type="{{searchType}}" user-account="{{userInfo.userAccount}}" res-key="{{resKey}}"></listTag> json: { "usingComponents": { "listTag": "/components/list/listTag" }, "navigationBarTitleText": "" } js: // pages/crm/myCreatedAll.js var app = getApp(); Page({ /** * 页面的初始数据 */ data: { searchType:'', resKey:'crmWorkRecord', userInfo: {}, wmStyle:'', count:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("--11111-----"); //NO.1 获取已注册用户的微信信息 this._getUserInfo(); //NO.2 根据获取到的信息判断用户是否登录 let isRelogin = this._isReLogin(); if (isRelogin) { return; } let title=""; switch (options.searchType){ case "registerAll": title ="我登记的全部工作记录"; break; case "registerChecking": title ='我登记的批示中的工作记录'; break; case "registerChecked": title = '我登记的批示完成的工作记录'; break; case "checkAll": title = '我审核的全部工作记录'; break; case "checking": title = '待我审核的工作记录'; break; case 'checked': title = "我审核过的工作记录"; break; default: title="根据编号、主题、客户搜索" } wx.setNavigationBarTitle({ title: title }) this.setData({ searchType: options.searchType, keyword:options.keyword?options.keyword:"" }); }, _getUserInfo: function () {//获取登录权限 let that = this; if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo }) } else { app.getUserInfo(function (userInfo) { that.setData({//更新数据 userInfo: userInfo }); }); } }, _isReLogin: function () {//是否需要重新登录 var account = this.data.userInfo.userAccount; if (!account) { app.alertMsg("无法识别当前登录用户,请重新登录", function () { wx.redirectTo({ url: '/pages/login/index', }) }); return true; } return false; }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
2018-07-31 - (4)获取用户信息
背景 我们发现大部分小程序都会使用 [代码]wx.getUserInfo[代码] 接口,来获取用户信息。原本设计这个接口时,我们希望开发者在真正需要用户信息的情况下才去调取这个接口,但很多开发者会直接调用这个接口,导致用户在使用小程序的时候产生困扰,归结起来有几点: 开发者在小程序首页直接调用 [代码]wx.getUserInfo[代码] 进行授权,弹框获取用户信息,会使得一部分用户点击“拒绝”按钮。 在开发者没有处理用户拒绝弹框的情况下,用户必须授权头像昵称等信息才能继续使用小程序,会导致某些用户放弃使用该小程序。 用户没有很好的方式重新授权,尽管我们增加了[代码]设置[代码]页面,可以让用户选择重新授权,但很多用户并不知道可以这么操作。 此外,我们发现开发者默认将 [代码]wx.login[代码] 和 [代码]wx.getUserInfo[代码] 绑定使用,这个是由于我们一开始的设计缺陷和实例代码导致的([代码]wx.getUserInfo[代码] 必须通过 [代码]wx.login[代码] 在后台生成 [代码]session_key[代码]后才能调用)。同时,我们收到开发者的反馈,希望用户进入小程序首页便能获取到用户的 [代码]unionId[代码],以便识别到用户是否以前关注了同主体公众号或使用过同主体的App 。 为了解决以上问题,针对获取用户信息我们更新了三个能力: 1.使用组件来获取用户信息 2.若用户满足一定条件,则可以用[代码]wx.login[代码] 获取到的[代码]code[代码]直接换到[代码]unionId[代码] 3.[代码]wx.getUserInfo[代码] 不需要依赖 [代码]wx.login[代码] 就能调用得到数据 获取用户信息组件介绍 [代码][代码] 组件变化: [代码]open-type [代码]属性增加 [代码]getUserInfo[代码] :用户点击时候会触发 [代码]bindgetuserinfo[代码] 事件。 新增事件 [代码]bindgetuserinfo[代码] :当 [代码]open-type[代码]为 [代码]getUserInfo[代码] 时,用户点击会触发。可以从事件返回参数的 [代码]detail[代码] 字段中获取到和 [代码]wx.getUserInfo[代码] 返回参数相同的数据。 示例: [代码]<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> Click me button>[代码]和 [代码]wx.getUserInfo[代码] 不同之处在于: 1.API [代码]wx.getUserInfo[代码] 只会弹一次框,用户拒绝授权之后,再次调用将不会弹框; 2.组件 [代码][代码][代码][代码] 由于是用户主动触发,不受弹框次数限制,只要用户没有授权,都会再次弹框。 通过获取用户信息的组件,就可以解决用户再次授权的问题。 直接获取unionId开发者申请 [代码]userinfo[代码] 授权主要为了获取 [代码]unionid[代码],我们鼓励开发者在不骚扰用户的情况下合理获得[代码]unionid[代码],而仅在必要时才向用户弹窗申请使用昵称头像。为此,凡使用“获取用户信息组件”获取用户昵称头像的小程序,在满足以下全部条件时,将可以静默获得 [代码]unionid[代码]: 1.在微信开放平台下存在同主体的App、公众号、小程序。 2.用户关注了某个相同主体公众号,或曾经在某个相同主体App、公众号上进行过微信登录授权。 这样可让其他同主体的App、公众号、小程序的开发者快速获得已有用户的数据。 不依赖登录的用户信息获取某些工具类的轻量小程序不需要登录行为,但是也想获取用户信息,那么就可以在 [代码]wx.getUserInfo[代码] 的时候加一个参数 [代码]withCredentials: false[代码] 直接获取到用户信息,可以少一次网络请求。 这样可以在不给用户弹窗授权的情况下直接展示用户的信息。 最佳实践 1.调用 [代码]wx.login[代码] 获取 [代码]code[代码],然后从微信后端换取到 [代码]session_key[代码],用于解密 [代码]getUserInfo[代码]返回的敏感数据。 2.使用 [代码]wx.getSetting[代码] 获取用户的授权情况 1) 如果用户已经授权,直接调用 API [代码]wx.getUserInfo[代码] 获取用户最新的信息; 2) 用户未授权,在界面中显示一个按钮提示用户登入,当用户点击并授权后就获取到用户的最新信息。 3.获取到用户数据后可以进行展示或者发送给自己的后端。 One More Thing 除了获取用户方案介绍之外,再聊一聊很多初次接触微信小程序的开发者所不容易理解的一些概念: 1.关于OpenId和UnionId [代码]OpenId[代码] 是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户。 [代码]UnionId[代码] 是一个用户对于同主体微信小程序/公众号/APP的标识,开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过[代码]UnionId[代码],实现多个小程序、公众号、甚至APP 之间的数据互通了。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的,就算用户删了小程序,下次用户进入小程序,开发者依旧可以通过后台的记录标识出来。 2.关于 getUserInfo 和 login 很多开发者会把 [代码]login[代码] 和 [代码]getUserInfo[代码] 捆绑调用当成登录使用,其实 [代码]login[代码] 已经可以完成登录,[代码]getUserInfo[代码] 只是获取额外的用户信息。 在 [代码]login[代码] 获取到 [代码]code[代码] 后,会发送到开发者后端,开发者后端通过接口去微信后端换取到 [代码]openid[代码] 和[代码]sessionKey[代码](现在会将 [代码]unionid[代码] 也一并返回)后,把自定义登录态 [代码]3rd_session[代码]返回给前端,就已经完成登录行为了。而 [代码]login[代码] 行为是静默,不必授权的,用户不会察觉。 [代码]getUserInfo[代码] 只是为了提供更优质的服务而存在,比如展示头像昵称,判断性别,开发者可通过 [代码]unionId[代码] 和其他公众号上已有的用户画像结合来提供历史数据。因此开发者不必在用户刚刚进入小程序的时候就强制要求授权。 可以在官方的文档中看到 [代码]login[代码] 的最佳实践: [图片] Q & A Q1: 为什么 login 的时候不直接返回 openid,而是要用这么复杂的方式来经过后台好几层处理之后才能拿到? A: 为了防止坏人在网络链路上做手脚,所以小程序端请求开发者服务器的的请求都需要二次验证才是可信的。因为我们采取了小程序端只给 [代码]code[代码] ,由服务器端拿着 [代码]code[代码] 和 [代码]AppSecrect[代码] 去微信服务器请求的方式,才会给到开发者对应的[代码]openId[代码] 和用于加解密的 [代码]session_key。[代码] Q2: 既然用户的[代码]openId[代码] 是永远不变的,那么开发者可以使用[代码]openId[代码] 作为用户的登录态么? A: 不行,这是非常危险的行为。因为 [代码]openId[代码] 是不变的,如果有坏人拿着别人的 [代码]openId[代码] 来进行请求,那么就会出现冒充的情况。所以我们建议开发者可以自己在后台生成一个拥有有效期的 [代码]第三方session[代码] 来做登录态,用户每隔一段时间都需要进行更新以保障数据的安全性。 Q3: 是不是用户每次打开小程序都需要重新[代码]login[代码]? A: 不必,可以将登录态存入[代码]storage[代码]中,用户再次登录就可以拿[代码]storage[代码] 里的登录态做正常的业务请求,只有当登录态过期了之后才需要重新[代码]login[代码] 。这样子做一则可以减少用户等待时间,二则可以减少网络带宽。 目前微信的[代码]session_key[代码] 有效期是三天,所以建议开发者设置的登录态有效期要小于这个值。
2018-08-17