个人做法是直接删除了controls属性，虽然在开发者工具上展现有误，但是在真机上测试无误，个人经历，仅作参考，折磨了两个钟头，痛苦。

提到ios系统的橡皮筋效果，作为开发者是又爱又恨，有想要这个效果又有不想要的，无奈的是却没有一个简单的开关来设置这个效果是否开启。 最近在开发小程序时也遇到有关于ios橡皮筋回弹的问题，这里分两部分（取消橡皮筋回弹效果和因为这个效果遇到的坑）和大家分享一下。   取消IOS橡皮筋回弹效果的解决方案 1) 页面无滚动区域时，可通过页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。 [代码]{ "disableScroll":true } [代码] 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo1   2) 页面有滚动区域，滚动区域通过view模拟实现，然后在页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。 [代码]json文件配置 { "disableScroll":true } view元素模拟实现滚动样式 { height: calc(100vh - 120rpx); //高度必须是固定的值 overflow-y: auto; } [代码] 不足之处在于view元素模拟的滚动区域滚动时不够连贯，没有scroll-view那种原生丝滑般的感觉。 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo2   3) 页面有滚动区域，滚动区域使用scroll-view,这时通过disableScroll则无法实现，尝试设置一下scroll-view的scroll-y="{{false}}"，上拉或下拉时居然不再触发橡皮筋的回弹啦，当然滚动区域也不能滚动。 小脑袋动一动，解决方法有啦！ 通过设置一个变量scrollY动态控制滚动区域的滚动从而阻止回弹。 监听bindscrolltoupper\bindscrolltolower当scroll-view区域滚动到顶部或底部时候设置scrollY:false来关闭页面滚动，从而阻止回弹。 监听bindtouchstart\bindtouchmove 当用户反方向滑动的时候设置scrollY:true，再次开启页面滚动。 [代码]wxml滚动区域属性和事件处理，具体实现请点击测试代码链接 <scroll-view scroll-y="{{scrollY}}" class="list" upper-threshold="5" lower-threshold="5" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" bindtouchstart="touchstart" bindtouchmove="touchmove"> <view class="list-item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </scroll-view> [代码] 相对view模拟实现滚动区域，scroll-view滚动更丝滑，不过每次滚动到底部或顶部的时候，再反向滑动时由于再次开启scroll-view滚动会有操作卡顿的感觉，暂时没想到好的解决方法，有解决的大佬希望提供一下想法，一起学习下。 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3   IOS橡皮筋效果遇到的坑 1) 操作左滑删除组件时上下移动，会触发橡皮筋效果导致页面抖动的问题 这个坑的严重程度看设计师的意愿了，反正我们团队目前是需要解决的，方案类似取消橡皮筋解决方案的第三种 在左滑的时候关闭scroll-view的滚动，取消时再次开启滚动   2) 如果页面顶部有置顶的横向滚动区域scroll-view，当页面滚动到底部时继续上拉会导致置顶头部消失，松开回弹后头部又会出现。 坑是社区里的朋友提出来的，我借了个iphone x 一预览，我嚓，还是真是个奇坑！ 微信官方回复已复现正在解决中… 不想继续等下去的，暂时解决方法是 监听页面的滚动区域，当滚动到底部时设置顶部横向滚动scroll-view的scroll-x=false来解决。   写在最后 以上便是我在小程序开发中有关于ios橡皮筋回弹效果的分享，示例代码已上传github,可自行下载体验。 https://github.com/YuniorZen/minicode-debug/tree/master/minicode01 目前微信官方虽说已经着手解决(已两年)此类bug，但哪吒说 我命由我不由天，所以还是我们开发者多分享些解决方案自救来的快。 分享方案如有问题还望不吝指出，没有涉及到的坑也欢迎评论提出，一起学习和解决，后续也会基于此篇不断更新总结。

[图片] 老版本的订阅消息在2020年1月10日就下线了，相信不少人在接入新版本订阅系统的时候，或多或少会遇到一些问题，这里智库君跟大家介绍下新版订阅的机制和不需要node/后端的情况下 独立完成功能开发。 一、新版订阅的机制 其实开发过程不难，但是要理清楚它里面的机制，智库君还是花了一些时间的，也踩了不少坑 先来看下官方介绍： [图片] 可以设置多个订阅选项 感叹号里面可以看到详情 有个默认不被选中的“总是”选项 这些就是新不同的地方，智库君在开发的时候也有很多疑问，点了“总是”再点“取消”按钮会怎样？部分选择订阅会怎样？下面为大家一一梳理 （1）部分选中 [图片] 比如现在有三个选项 A,B,C，用户**“部分选中”**返回的情况： [图片] 这里用真机调试可以看到，有个返回值状态为“reject”。 如果我们反复几点点击同一个订阅后，这些值是如何计算的呢？ 举例： [图片] 从这里看出，微信系统会自动记录用户点击的次数，并且做累加记录，如果用户只允许2次发送，而开发者发送了3次，最后一次将会被拒绝。 （2）点击“总是保持以上选择，不再询问”的情况 [图片] 当用户点击“总是”之后，同一个类型的订阅将不再弹出，那如果有多个订阅选项呢？ 举例 订阅AAA 三个订阅模板为 X Y Z 订阅BBB 二个订阅模板为 Y W 这时候如果“订阅AAA”按钮选择了“总是”，那么再点击“订阅BBB”按钮，将只会弹出一个选项“W”,不会有 “Y” 的模板，因为在之前 “订阅AAA” 按钮中已经包含了。 [代码]wx.requestSubscribeMessage({ tmplIds: ["MECDDOdhbC3SrQmMY5XrfqiIGbMTzpEN8Z7ScXJfcd0", "iSb2NIlNnnO60wlI-8Wx5Pe82jR7TRdwjotSXtM1-ww"], success(res) { console.log(res); } }) [代码] 显示内容仅一个选项： [图片] 这里需要注意，“总是”选项是全局有效，不区分页面，选中“总是”的 W,X,Y,Z的模板，在全局任意页面中再次调用，再次调用将不再会显示！ [图片] 返回值无提示用户是否选中“总是”。 （3）用户点击“总是”后，获取状态 [图片] [代码]wx.getSetting({ withSubscriptions: true, success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.subscribeMessage": true // } console.log(res.subscriptionsSetting) // res.subscriptionsSetting = { // SYS_MSG_TYPE_INTERACTIVE: 'accept', // SYS_MSG_TYPE_RANK: 'accept', // zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'reject', // ke_OZC_66gZxALLcsuI7ilCJSP2OJ2vWo2ooUPpkWrw: 'ban', // } } }); [代码] [图片] 这里可以调用wx.getSetting方法，但是需要注意：如果用户第一次选“总是”后点击“取消”按钮或者订阅模板全部是未选中/reject的，那将获取不到状态（这里可能是BUG，期待官方未来修复）。 （4）用户点击“总是”后，让用户手动修改 前面说到用户点击“总是”后，系统将不再弹窗，但是我们可以通过**“wx.openSetting”**引导用户手动修改。 [代码]wx.openSetting({ success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.userLocation": true // } } }) [代码] [图片] [图片] 当然用户自己也可以修改 [图片] 总结 【重点】选择“总是”，很多人认为就可无限发送订阅消息，这个是错误的，勾选和不勾选唯一的区别就是每次触发订阅的时候会不会弹授权窗口！！！ 用户点击次数系统会自动累加，直接影响后台发送通知的次数。 用户选择“总是”后，小程序界面不再弹窗，但仍然有回调/callback。 任意订阅模板在用户选中“总是”（包括接受/拒绝2个状态）后，全局有效，就算其他订阅包含“此模板”也不再显示/弹出 当用户选择“总是”中“accept/选中/接受”的状态后，可以在wx.getSetting查询到用户是否选择“总是”。 当用户选择“总是”中“reject/未选中/拒绝”的状态后，返回值“无感知”（这里可能是BUG） 二、功能开发 使用微信自带的云开发，可以在没有node/后端开发支持下，完成整个订阅流程的开发。 （1）微信后台设置订阅模板和获取模板ID 1、打开小程序后台，找到订阅消息设置 [图片] 2、在公共模板库找模板或者自己申请新模板，建议能用现成模板用现成的，因为申请周期可能较长，且容易被拒 [图片] 3、选好模板后，点击详情 [图片] 4、查看模板内容和发送DATA的结构 [图片] 5、复制模板ID （2）配置云函数 [图片] [图片] 1、新建getOpenId云函数，用于获取用户的openID [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } } [代码] 2、新建订阅推送通知云函数 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() //订阅推送通知 exports.main = async (event, context) => { try { const result = await cloud.openapi.subscribeMessage.send({ touser: event.openid, //接收用户的openId page: 'pages/my/index', //订阅通知 需要跳转的页面 data: { //设置通知的内容 thing1: { value: '小程序订阅填坑' }, thing2: { value: '智库方程式' }, thing3: { value: '一起学习，一起进步' } }, templateId: '5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac' //模板id }) console.log(result) return result } catch (err) { console.log(err) return err } } [代码] 写完云函数记得右键部署下！！！ （3）小程序代码部分 [代码]<!------------html -------------> <button bindtap="getOpenId" type='primary'>获取openId</button> <view class="subBtn" catch:tap="sub">订阅AAA</view> <view class="subBtn" catch:tap="send">订阅推送测试</view> <view class="subBtn" catch:tap="setting">设置“总是”后，跳转修改</view> [代码] [代码]//JS 部分 //获取用户的openid getOpenId() { wx.cloud.callFunction({ name: "getOpenId" }).then(res => { let openid = res.result.openid console.log("获取openid成功", openid) }).catch(res => { console.log("获取openid失败", res) }) }, //发送模板消息给指定的openId用户 send(openid){ wx.cloud.callFunction({ name: "sendSub", data: { openid: openid } }).then(res => { console.log("发送通知成功", res) }).catch(res => { console.log("发送通知失败", res) }); }, //消息订阅 sub: function () { wx.requestSubscribeMessage({ tmplIds: ["5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac"], success(res) { console.log("订阅授权成功："+res); }, fail(res){ console.log("订阅授权失败：" + res); } }) }, //帮助用户跳转修改订阅状态 setting:function(){ wx.openSetting({ success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.userLocation": true // } } }) }, [代码] （4）测试流程 点击发送通知后，获得这样的效果： [图片] [图片] 获得对应返回值： [图片] 当errCode为0时，即发送通知成功。 当errCode为43101，说明用户只授权了一次，但是你发送了2次，超过用户授权次数。 [图片] 三、进阶与思考 1、当你有多个订阅模板同时需要用户选择时，你可以通过以下代码记录，用户哪些选了，哪些没选。 [代码]wx.requestSubscribeMessage({ tmplIds: ["5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac", "OBB_Z10eh_Inm9p8EU6Ml_NS_mijXgTz3T07cxgKvX0","5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac"], success(res) { //console.log(res); if (res.errMsg == "requestSubscribeMessage:ok") { let acceptArray = []; //用户授权模板列表 for (let i = 0; i < tmplIds.length; i++) { const element = tmplIds[i]; if (res[element] == "accept") { acceptArray.push(element); } }; console.log(acceptArray); if (acceptArray.length > 0) { //执行下一步函数 } } } }) [代码] 2、一个关于是否需要记录用户对某个“订阅模板授权的次数”，以控制后台“发送的次数”，智库君在实战中认为，其实没有必要，顶多就是你发送返回一个错误码，微信之所有记录用户授权次数，也是为了保护用户不被骚扰。 3、你只需要记录用户点击了哪些需要授权的模板就行，为了是用户点击订阅后，改变按钮的状态，避免订阅按钮反复弹窗的问题，同时当检测到用户点错“总是”按钮后，可以自动跳转到“设置”界面。 4、这次智库君主要给大家简单介绍了下订阅全流程。后面大家可以根据自己的需要，添加和改进这些代码。比如： 配置云函数中的node函数，实现定时发送 配置云函数中的数据库，实现内容的自定义发送 最后，希望这篇文章能帮助到大家，一起学习，一起进步！ （官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html） 往期回顾： [打怪升级]小程序自定义头部导航栏“完美”解决方案 [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

消息通知有两种： 一、A的动作后，发消息给A自己，这种容易解决，不多说明； 二、A动作后，发消息给B（比如管理员、店家、楼主），如何保证B收到消息？这种是本方案要解决的问题。 一张图片一眼告诉你什么是订阅消息，产品经理的设计UI居然让人一眼就知道订阅消息是什么玩意。 [图片] 用户 B （管理员、商家、组长、楼主）在知道订阅数不足后，打开小程序来续订阅数，否则没法收到订阅消息。 [图片] 补充一： 关于勾选按钮，请注意话述是：“总是保持以上选择，不再询问”，而不是：“总是同意接收订阅消息”，不要幻想就成了永久性订阅消息； 相当于你打电话订外卖，对店家说“老样子”，店家只会马上送一次外卖，而不是会以后每天自动给你送外卖了。 勾选和不勾选的区别是什么呢？ 区别仅仅是：不勾选时，必须点击订阅10次，弹窗10次；勾选后，仍然必须点击订阅10次，但是不弹窗。无论如何“订阅”这个点击n次的动作少不了。 补充二： 一旦勾选后，就不可逆了，没有任何办法恢复或取消勾选了，除非你小程序MP后台换一次消息模板号(删除模板，重新添加一次)。 补充三： 关于如何保存订阅数。 保存在数据库中，笔者用的是云开发，数据库表user结构如下： { _id:'openid1', nickName:'老张', msg:{ "tempId1":5, "tempId2":7, } } 补充四： 关于如何获取订阅数。两种方式： 一、wx.requestSubscribeMessage的回调success里获取； 二、消息推送机制获取；https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html

文案更新，不定时更新。 不同时间段文案，不同节日文案，随机心情文案，经典文案等。

老规矩，直奔主题，三步走： Step 1： Ctrl+Shift+X 打开扩展 - 搜索 easy Less 并安装 Step 2： Ctrl+ 逗号 打开设置 - 搜索 easy Less config 并选择 点在setings.json中编辑 把下面配置粘贴进去（注意配置项间隔的逗号不要漏了） [代码]"less.compile": { // "compress": true, // 是否删除多余空白字符 // "sourceMap": true, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件 "outExt": ".wxss" // 输出文件的后缀,默认为.css } [代码] Step 3： 在你的wxml同级目录下新建一个 文件名.less 书写less语法的css并保存，同级目录下就会自动生成一个 文件名.wxss的文件 好了，这次分享到这里就结束了。如果你觉得对你有帮助，请给我点个赞并留言告诉我，让我为你开心下😊。