网站建设伍金手指下拉2,强化 门户网站建设,wordpress调用tag,带空间二字的韩国视频网站文章目录#x1f31f;前言#x1f31f;小程序登录#x1f31f;unionid 和 openid#x1f31f;关键Api#x1f31f;登录流程设计#x1f31f;利用现有登录体系#x1f31f;利用OpenId 创建用户体系#x1f31f;利用 Unionid 创建用户体系#x1f31f;授权获取用户信息流…
文章目录前言小程序登录unionid 和 openid关键Api登录流程设计利用现有登录体系利用OpenId 创建用户体系利用 Unionid 创建用户体系授权获取用户信息流程先授权获取用户信息再 login 会发生什么图片导出基本原理如何优雅实现小程序的一些注意事项结语前言
哈喽小伙伴们上一期为大家讲解了一下小程序的架构之【视图层】篇。今天为大家总结几个微信小程序比较常见的面试题和问题吧希望可以填补大家的知识空缺。好了让我们一起来看看吧
小程序登录
unionid 和 openid 了解小程序登陆之前我们写了解下小程序/公众号登录涉及到两个最关键的用户标识 OpenId 是一个用户对于一个小程序公众号的标识开发者可以通过这个标识识别出用户。UnionId 是一个用户对于同主体微信小程序公众号APP的标识开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId实现多个小程序、公众号、甚至APP 之间的数据互通了。
关键Api
wx.login 官方提供的登录能力wx.checkSession校验用户当前的session_key是否有效wx.authorize 提前向用户发起授权请求wx.getUserInfo 获取用户基本信息wx.getUserProfile 新增获取用户基本信息
小程序登录、用户信息相关接口调整说明官方
登录流程设计
利用现有登录体系 直接复用现有系统的登录体系只需要在小程序端设计用户名密码/验证码输入页面便可以简便的实现登录只需要保持良好的用户体验即可 利用OpenId 创建用户体系 OpenId 是一个小程序对于一个用户的标识利用这一点我们可以轻松的实现一套基于小程序的用户体系值得一提的是这种用户体系对用户的打扰最低可以实现静默登录。具体步骤如下 小程序客户端通过 wx.login 获取 code传递 code 向服务端服务端拿到 code 调用微信登录凭证校验接口微信服务器返回 openid 和会话密钥 session_key 此时开发者服务端便可以利用 openid 生成用户入库再向小程序客户端返回自定义登录态小程序客户端缓存 通过storage自定义登录态token后续调用接口时携带该登录态作为用户身份标识即可。
利用 Unionid 创建用户体系 如果想实现多个小程序公众号已有登录系统的数据互通可以通过获取到用户 unionid 的方式建立用户体系。因为 unionid 在同一开放平台下的所所有应用都是相同的通过 unionid 建立的用户体系即可实现全平台数据的互通更方便的接入原有的功能那如何获取 unionid 呢有以下两种方式 如果户关注了某个相同主体公众号或曾经在某个相同主体App、公众号上进行过微信登录授权通过 wx.login 可以直接获取 到 unionid结合 wx.getUserInfo 和 button open-typegetUserInfobutton/ 这两种方式引导用户主动授权主动授权后通过返回的信息和服务端交互 (这里有一步需要服务端解密数据的过程很简单微信提供了示例代码) 即可拿到 unionid 建立用户体系 然后由服务端返回登录态本地记录即可实现登录附上微信提供的最佳实践 调用 wx.login 获取 code然后从微信后端换取到 session_key用于解密 getUserInfo 返回的敏感数据使用 wx.getSetting 获取用户的授权情况 如果用户已经授权直接调用 API wx.getUserInfo 获取用户最新的信息用户未授权在界面中显示一个按钮提示用户登入当用户点击并授权后就获取到用户的最新信息。 获取到用户数据后可以进行展示或者发送给自己的后端。 注意事项 需要获取 unionid 形式的登录体系在以前18年4月之前是通过以下这种方式来实现但后续微信做了调整因为一进入小程序主动弹起各种授权弹窗的这种形式比较容易导致用户流失调整为必须使用按钮引导用户主动授权的方式这次调整对开发者影响较大开发者需要注意遵守微信的规则并及时和业务方沟通业务形式不要存在侥幸心理以防造成小程序不过审等情况; wx.login(获取code) wx.getUserInfo(用户授权) 获取 unionid因为小程序不存在 cookie 的概念 登录态必须缓存在本地因此强烈建议为登录态设置过期时间;值得一提的是如果需要支持风控安全校验多平台登录等功能可能需要加入一些公共参数例如platformchanneldeviceParam等参数。在和服务端确定方案时作为前端同学应该及时提出这些合理的建议设计合理的系统;openid unionid 不要在接口中明文传输这是一种危险的行为同时也很不专业。 授权获取用户信息流程 session_key 有有效期有效期并没有被告知开发者只知道用户越频繁使用小程序session_key 有效期越长;在调用 wx.login 时会直接更新 session_key导致旧 session_key 失效;小程序内先调用 wx.checkSession 检查登录态并保证没有过期的 session_key 不会被更新再调用 wx.login 获取 code。接着用户授权小程序获取用户信息小程序拿到加密后的用户数据把加密数据和 code 传给后端服务。后端通过 code 拿到 session_key 并解密数据将解密后的用户信息返回给小程序。
先授权获取用户信息再 login 会发生什么 用户授权时开放平台使用旧的 session_key 对用户信息进行加密。调用 wx.login 重新登录会刷新 session_key这时后端服务从开放平台获取到新 session_key但是无法对老 session_key 加密过的数据解密用户信息获取失败在用户信息授权之前先调用 wx.checkSession 呢wx.checkSession 检查登录态并且保证 wx.login 不会刷新 session_key从而让后端服务正确解密数据。但是这里存在一个问题如果小程序较长时间不用导致 session_key 过期则 wx.login 必定会重新生成 session_key从而再一次导致用户信息解密失败。
图片导出 这是一种常见的引流方式一般同时会在图片中附加一个小程序二维码。 基本原理
**借助canvas 元素将需要导出的样式首先在 canvas 画布上绘制出来 api基本和h5保持一致但有轻微差异使用时注意即可;**借助微信提供的 canvasToTempFilePath 导出图片最后再使用 saveImageToPhotosAlbum 需要授权保存图片到本地。
如何优雅实现
绘制出需要的样式这一步是省略不掉的。但是我们可以封装一个绘制库包含常见图形的绘制例如矩形圆角矩形圆 扇形 三角形 文字图片减少绘制代码只需要提炼出样式信息便可以轻松的绘制最后导出图片存入相册。笔者觉得以下这种方式绘制更为优雅清晰一些其实也可以使用加入一个type参数来指定绘制类型传入的一个是样式数组实现绘制。结合上一步的实现如果对于同一类型的卡片有多次导出需求的场景也可以使用自定义组件的方式封装同一类型的卡片为一个通用组件在需要导出图片功能的地方引入该组件即可。
class CanvasKit {constructor() {}drawImg(option {}) {...return this}drawRect(option {}) {return this}drawText(option {}) {...return this}static exportImg(option {}) {...}}let drawer new CanvasKit(canvasId).drawImg(styleObj1).drawText(styleObj2)drawer.exportImg()注意事项 : 小程序中无法绘制网络图片到canvas上需要通过downLoadFile 先下载图片到本地临时文件才可以绘制通常需要绘制二维码到导出的图片上有一种方式导出二维码时需要携带的参数必须做编码而且有具体的长度32可见字符限制可以借助服务端生成 短链接 的方式来解决。 小程序的一些注意事项
小程序仍然使用 WebView 渲染并非原生渲染。部分原生服务端接口返回的头无法执行比如Set-Cookie依赖浏览器环境的 JS库不能使用不能使用 npm但是可以自搭构建工具或者使用 mpvue。未来官方有计划支持不能使用 ES7可以自己用babelwebpack自搭或者使用 mpvue不支持使用自己的字体未来官方计划支持可以用 base64 的方式来使用 iconfont小程序不能发朋友圈可以通过保存图片到本地发图片到朋友前。二维码可以使用B接口获取二维码/小程序接口的限制程序推送只能使用“服务通知” 而且需要用户主动触发提交 formIdformId 只有7天有效期。现在的做法是在每个页面都放入form并且隐藏以此获取更多的 formId。后端使用原则为优先使用有效期最短的小程序大小限制 2M分包总计不超过 8M转发分享小程序不能拿到成功结果原来可以。链接小游戏造的孽拿到相同的 unionId 必须绑在同一个开放平台下。开放平台绑定限制 50个移动应用10个网站50个同主体公众号5个不同主体公众号50个同主体小程序5个不同主体小程序 公众号关联小程序 所有公众号都可以关联小程序一个公众号可关联10个同主体的小程序3个不同主体的小程序一个小程序可关联500个公众号公众号一个月可新增关联小程序13次小程序一个月可新增关联500次。 一个公众号关联的10个同主体小程序和3个非同主体小程序可以互相跳转品牌搜索不支持金融、医疗小程序授权需要用户主动点击小程序不提供测试 access_token安卓系统下小程序授权获取用户信息之后删除小程序再重新获取并重新授权得到旧签名导致第一次授权失败开发者工具上授权获取用户信息之后如果清缓存选择全部清除则即使使用了wx.checkSession并且在session_key有效期内授权获取用户信息也会得到新的session_key。
结语
这篇为小伙伴们讲解了一些小程序的问题水滴石穿积少成多。各位小伙伴让我们 let’s be prepared at all times ✨原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富
