1. 小程序简介 AI Pocket 是一款能在微信小程序端运行 TensorFlow 模型的小程序，支持包括但不限于文本分类（计划中）、语音识别（计划中）、图像识别等领域的模型。 1.1 小程序特点 在需要使用机器学习算法（尤其涉及到神经网络模型时），通常的做法是前端（比如小程序）采集数据，通过网络调用后台提供的 API，从而实现模型预测。 AI Pocket 采用的是非主流做法： 1. 对训练得到的模型进行压缩，得到一个体积相对小、准确率尚可的模型； 2. 将模型缓存在 CDN 服务商的服务器上； 3. 在进行模型预测前，通过网络把模型下载到本机，然后在本地实时预测。 2. 开发故事 2.1 导火索 某一天，大佬和我聊到 Tfjs，问我有没可能搬到小程序上，说是没准可以做个爆款。 经过一番魔改，我成功把 tfjs 移植到了微信小程序上。然而，由于小程序 API 诸多的不完善，以及没有办法优雅地用上 webgl，模型预测速度实在太慢，就没有了爆款的下文。 附：tfjs 移植到微信小程序 2.2 首次开源 过了几个月，有人看到我写的一篇关于魔改 tfjs 的文章，留言表示很有兴趣，希望能开源。然后，我就整理了下旧代码并开源在了 GitHub 上。 附：TensorFlowJS 移植微信小程序再次尝试 2.3 改良优化 又过了几个月，同事给我分享了一篇文章，里面有提到 TensorFlow 官方对小程序的支持插件。我掐指一算，感觉可以继续搞搞。 我连夜瞄了 tfjs 最近的更新和小程序插件的代码，发现 tfjs 开始考虑对多平台的支持，而且小程序也开放了更多有利的 API。 于是，我就把之前开源的 Demo 再完善了下，用上了 webgl 加速，预测速度飞起，便有了现在的 AI Pocket。 附：AI Pocket —— 能跑深度模型的小程序 2.4 把 AI 装进口袋 我希望把更多的 AI 模型装到 AI Pocket 上，在小程序上就可以跑机器学习/深度学习模型，打造一个「流弊」的 AI 口袋。 3. 代码开源 目前，代码开源并托管在 HunterXuan/wx-tfjs-demo 仓库中，欢迎各位大佬提建议 or 贡献代码！ [图片]

简介 本文主要分享个人平时开发微信小程序时登录设计的思路，目前微信小程序的登录机制与以前的小程序登录机制或网页的登录机制不一样 一. 静默登录 小程序目前的登录方式采用的是静默登录的形式，即用户不需要进行任何相关授权或其他操作就可以很流畅的体验整个应用，不像以前的小程序应用很多功能都需要手动去判断用户是否已经登录过再去开放某些入口或功能（当然目前也有不少小程序改成绑定手机号的形式去搞这种需求） 静默登录目前有以下几点好处： 不需要特意去增加一个登录界面或者登录弹窗去实现登录功能 减少前端对一些特定按钮进行登录状态判断的工作量 用户不需要进行额外登录操作才能完美体验整个小程序 更好的保障用户隐私安全，当然这是对 TX 有好处（毕竟很多小程序喜欢采用强制登录来获取用户信息） 二. 静默登录流程 前端调用 [代码]wx.login[代码] 这个 [代码]api[代码] 获取临时登录凭证（[代码]code[代码]） 前端调用服务端登录接口传递 [代码]code[代码] 给服务端 服务端通过小程序 [代码]appId[代码] 和小程序秘钥向微信服务器获取 [代码]openId[代码] 和 [代码]session_key[代码] 服务端将 [代码]openId[代码] 和 [代码]session_key[代码] 进行关联同时产生一个带有默认名称和默认头像的新用户 服务端将自定义登录的信息返回给前端，下次请求服务端接口时把登录信息带上 三. 静默登录设计思路 前端调用 [代码]wx.login[代码] 是不需要进行任何相关操作的，所以触发登录完全是由前端去决定的，而进行登录不能以指定页面作为参考点，需要考虑到用户分享从其他页面进入的情况 现在需要一种，目前个人思考出有两种方案： 每个页面都套用一个 [代码]layout[代码] 自定义组件，在该组件的生命周期进行登录触发，然后触发完毕后在组件抛出一个登录后的回调函数，接着页面接收这个回调函数然后在这个函数调用业务 [代码]api[代码] 在每次请求服务端 [代码]api[代码] 之前，先进行登录，等待登录处理完毕之后再进行请求服务端 两者比较之后目前是采用第二种方式去进行登录流程设计，因为静默登录完全跟用户没有任何关系，只是单纯与服务端进行交流，所以不应该与页面有关系，应该是跟请求服务端 [代码]api[代码] 有关系 四. 静默登录设计实现 由于采用 [代码]api[代码] 拦截方式实现登录设计，登录的代码都放在 [代码]api[代码] 请求模块去实现，以下是实现思路： 在页面中调用服务端 [代码]api[代码]，首先判断是否已经登录过，如果没有登录则先触发登录再请求服务端 [代码]api[代码]，如果登录则直接请求 考虑到一个页面可能会同时调用多个服务端 [代码]api[代码]，需要避免同时触发多次登录 [代码]// 登录后的信息 const token = { // ... } // 请求封装 const _request = <T = unknown>(apiLink: string, params?: Record<string, any>): Promise<T | null> => { return new Promise((resolve, reject) => { wx.request({ url: apiLink, data: params, success: (res) => { resolve(res.data) }, fail: (err) => { reject(null) } }) }) } // 记录登录状态 let _loginRecord: any = null // 请求拦截 const apiRequest = async <T = unknown>(apiLink: string, params?: Record<string, any>): Promise<T | null> => { // 如果一个页面同时触发多个 api 请求，那么只公用一个登录的 Promise 状态，这样就不会多次触发登录 if (!_loginRecord) { _loginRecord = _request('xxxxx/login', { code: 'xxxx' }) } const loginResult = await _loginRecord /** * 这里根据业务需求去定制登录报错时的情况，我目前是 * 先弹窗提示，然后用户确认后再重新请求 api * if (!loginResult) { _loginRecord = null return null } return await _request(apiLink, params) } export default apiRequest [代码] 五. 最后 以上是我个人常用的微信小程序静默登录设计思路，如果有小伙伴有更好的设计思路，希望能够分享出来学习一下