中秋快乐，帮社区里的小伙伴写的选图效果，仿造的微信朋友圈选图，长按拖动排序主要是用交互监听来实现的。还有几个需要处理的地方。另外在真机上的动画速度总感觉快那么一丢丢。没做预览图，详情见代码片段咯。安卓机效果没试过。。 今天是9月23，这两天接受定制改动~ 第一次发经验分享。。轻点喷。。 哦，对了，这里 wx.createSelectorQuery 有个bug。。如果选择的基础库版本在2.0.9以上，第一次打开开发者工具，要先直接点一次编译，不然会出错。。真机上没问题 代码片段：wechatide://minicode/RFLmzDmL7I2a 有小伙伴反馈，在片段上面增加内容会乱位，是因为没计算顶部偏移量，方便懒人，完善了下 新的片段：wechatide://minicode/fOTEM3mI7l3B 终于拿到安卓机器试了，果然卡得很。。要控制频率。这很尴尬，太频繁的话，安卓会卡，太不频繁呢，刚开始移动那阵子会卡。。有同学反馈，说点快了会出问题，于是又加了点击频率的限制 现在的代码片段：wechatide://minicode/xBDdCom17R3c（要重新拿安卓机测试了再看看。。） 附上gif： [图片]

[图片] 效果如上图，下面是关键代码： 1. 页面 onLoad 方法中读取缓存 [代码]  [代码]// 读取相缓存数据 [代码]  [代码][代码]onLoad: [代码][代码]function[代码][代码]() {[代码][代码]    [代码][代码]const searchRecord = wx.getStorageSync([代码][代码]'searchRecord'[代码][代码]) || [][代码][代码]    [代码][代码]this[代码][代码].setData({[代码][代码]      [代码][代码]searchRecord: searchRecord[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]}[代码] [代码] [代码] 2. 搜索提交事件中，保存历史记录到缓存 [代码] // 判断是否是搜索框提交事件[代码][代码] [代码][代码]if[代码] [代码](that.data.fromSearch) {[代码][代码]           [代码][代码]let searchRecord = that.data.searchRecord[代码][代码]           [代码][代码]let keyword = that.data.keyword;[代码][代码]           [代码][代码]// 如果记录已存在，直接返回[代码][代码]           [代码][代码]for[代码] [代码](let i = 0; i < searchRecord.length; i++) {[代码][代码]             [代码][代码]if[代码] [代码](keyword == searchRecord[i].value) [代码][代码]return[代码][代码]           [代码][代码]}[代码][代码]           [代码][代码]if[代码] [代码](searchRecord.length >= 8)[代码][代码]             [代码][代码]searchRecord.pop() [代码][代码]// 删除最早的一条记录[代码][代码]           [代码][代码]searchRecord.unshift({[代码][代码]             [代码][代码]value: that.data.keyword,[代码][代码]           [代码][代码]})[代码][代码]           [代码][代码]// 将历史记录添加到缓存中[代码][代码]           [代码][代码]wx.setStorage({[代码][代码]             [代码][代码]key: [代码][代码]'searchRecord'[代码][代码],[代码][代码]             [代码][代码]data: searchRecord,[代码][代码]             [代码][代码]success: [代码][代码]function[代码][代码](res) {[代码][代码]               [代码][代码]that.setData({[代码][代码]                 [代码][代码]searchRecord: searchRecord,[代码][代码]                 [代码][代码]fromSearch: [代码][代码]false[代码][代码]               [代码][代码]})[代码][代码]             [代码][代码]}[代码][代码]           [代码][代码]})[代码][代码] [代码][代码]}[代码] 注意这里用的 wx.setStorage 异步调用，貌似使用 wx.setStorageSync 在线上版本会报错。 咕咕盘搜，是我的第一个小程序作品，大家可以体验一下。 [图片]

小程序中获取微信手机号的前提条件这里贴一个链接，各位同学自己看 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html 主要说说为什么会解密失败，主要有以下两点原因 微信服务器报错 你解密的姿势错了 对于第一点，比较少见，如果出现了，嗯 ，坐着等死就行了 解密失败一般是由于你的 sessionKey 失效导致的，而sessionKey 由 wx.login 这个api先获取code， 再由我们的后台拿这个code向微信服务器请求获得。code有效期五分钟。 上面的链接中有这样一句话 注意 在回调中调用 [代码]wx.login[代码] 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 [代码]login[代码]；或者在回调中先使用 [代码]checkSession[代码] 进行登录态检查，避免 [代码]login[代码] 刷新登录态。 这句话这么理解呢，打个比方，假设你第一次调用wx.login获取的为 sessionKey_1，在它的有效期内，你再去获取一个加密数据 encryptedData_1，这时候你用sessionKey_1去解密encryptedData_1就可以正常解密。 但是在获取encryptedData_1的时候会有个回调函数，如果你在这个回调函数里又调了一次wx.login，获取了 sessionKey_2，这时候登录态可能会被刷新，加密encryptedData_1时使用的sessionKey_1就会失效，再去解密encryptedData_1就会有很高的几率解密失败。至于为什么不会百分百刷新登录态，鬼知道这逻辑是怎么写的。 贴上我的部分代码（只贴获取手机号的部分，其他逻辑请根据自己产品业务酌情参考） [代码][代码] const app = getApp(); [代码][代码] [代码]Page({[代码] [代码]    [代码][代码]data: {[代码][代码]        [代码][代码]code: [代码][代码]""[代码][代码],[代码][代码]    [代码][代码]},[代码] [代码]    [代码][代码]// 获取手机号[代码][代码]    [代码][代码]getPhoneAndLogin: [代码][代码]function[代码][代码](e){[代码][代码]        [代码][代码]let that = [代码][代码]this[代码][代码];[代码][代码]        [代码][代码]// console.log(e);[代码] [代码]        [代码][代码]if[代码] [代码](e.detail.errMsg !== [代码][代码]"getPhoneNumber:ok"[代码][代码]){[代码][代码]            [代码][代码]return[代码][代码];[代码][代码]        [代码][代码]}[代码] [代码]        [代码][代码]wx.showLoading({[代码][代码]            [代码][代码]mask: [代码][代码]true[代码][代码],[代码][代码]        [代码][代码]})[代码] [代码]        [代码][代码]// 检查登录态是否过期[代码][代码]        [代码][代码]wx.checkSession({[代码][代码]            [代码][代码]success(res) {[代码][代码]                [代码][代码]// session_key 未过期，并且在本生命周期一直有效[代码][代码]                [代码][代码]// console.log(res);[代码]  [代码]                [代码][代码]wx.request({[代码][代码]                    [代码][代码]url: app.globalData.apiUrl + [代码][代码]'**********'[代码][代码],[代码][代码]                    [代码][代码]data: {[代码][代码]                        [代码][代码]code: that.data.code,[代码][代码]                        [代码][代码]encryptedData: e.detail.encryptedData,[代码][代码]                        [代码][代码]iv: e.detail.iv,[代码][代码]                    [代码][代码]},[代码][代码]                    [代码][代码]method: [代码][代码]"POST"[代码][代码],[代码][代码]                    [代码][代码]success: res => {[代码][代码]                        [代码][代码]// console.log(res);[代码]                  [代码]                    [代码][代码]},[代码][代码]                    [代码][代码]fail: res => {[代码][代码]                        [代码][代码]                        [代码][代码]wx.showToast({[代码][代码]                            [代码][代码]icon: [代码][代码]"none"[代码][代码],[代码][代码]                            [代码][代码]title: [代码][代码]'服务器繁忙'[代码][代码],[代码][代码]                        [代码][代码]})[代码][代码]                    [代码][代码]},[代码][代码]                    [代码][代码]complete: res => {[代码][代码]                        [代码][代码]wx.hideLoading();[代码][代码]                    [代码][代码]}[代码][代码]                [代码][代码]})[代码][代码]            [代码][代码]},[代码][代码]            [代码][代码]fail(err) {[代码][代码]                [代码][代码]// session_key 已经失效，需要重新执行登录流程[代码]              [代码]                [代码][代码]wx.login({[代码][代码]                    [代码][代码]success: res => {[代码][代码]                        [代码][代码]that.data.code = res.code[代码][代码]                    [代码][代码]}[代码][代码]                [代码][代码]})[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]})[代码][代码]    [代码][代码]},[代码][代码] [代码][代码]    [代码][代码]/**[代码][代码]     [代码][代码]* 生命周期函数--监听页面加载[代码][代码]     [代码][代码]*/[代码][代码]    [代码][代码]onLoad: [代码][代码]function[代码] [代码](options) {[代码][代码]        [代码][代码]let that = [代码][代码]this[代码][代码];[代码][代码]        [代码][代码]// console.log(options);[代码] [代码]        [代码][代码]wx.login({[代码][代码]            [代码][代码]success: res =>{[代码][代码]                [代码][代码]that.data.code = res.code[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]})[代码][代码]    [代码][代码]},[代码] [代码]})[代码]  以上，如果有问题欢迎各位大佬指正