知晓程序员，专注微信小程序开发的程序员！ 一、判断小程序版本号 小程序的API是不断更新的，你可能使用某个API时，文档里会说明，此API在1.x.x版本开始支持，需要自己做兼容处理。 如果你使用小程序版本号做兼容，就必须了解小程序的基础库版本号规则，在这里介绍一下。 小程序基础库版本号使用 semver 规范，格式为 Major.Minor.Patch，Major、Minor、Patch 均为整数，1.9.901、2.44.322、10.32.44 都是符合 semver 风格的版本号。 以下是官方提供的兼容代码： [图片] 二、设置仅发起者可转发 有些场景，需要仅发起者可转发，参与者不能转发。比如老师上课点名签到，老师如果把签到小程序分享到群内，只希望现场的同学可以正常签到，即使其他同学想分享，也没有权限。 方法一：禁止显示分享按钮 小程序中有个API，wx.hideShareMenu，如下： [图片] 在page.js中，正常写入onShareAppMessage，然后判断用户是否为发起者，如果是发起者，调用wx.showShareMenu，如果不是发起者，调用wx.hideShareMenu。 方法二：单独做一个分享后的页面 这个办法比较low，但也能实现。思路是在onShareAppMessage里面的写入一个默认path，打开之后就是一个提示界面。如果是发起者，就把path修改成正常的路径~ [图片] 三、swiper禁止手动滑动 最简单的方式，在swiper上面加一个透明的蒙层~ 四、使用switchTab跳转后页面不刷新的问题 方法一：通过getCurrentPages获取获取当前的页面栈，调用对应的方法 [图片] switchTab成功跳转后调用success，此时可以拿到跳转后页面的page对象，从而调用页面onLoad方法重载页面; 方法二：把还tab的页面，代码逻辑放在onShow里面 [图片] 五、e.target和e.currentTarget的区别 简单的说，e.currentTarge是指注册了事件监听器的对象，e.target是指对象里的子对象，实际触发这个事件的对象。 [图片] 小程序开发过程中，如果通过event未获取到值时，或许是你自己用错了。 六、图片设置为圆角，会快速从方形闪烁一下 解决方法：给父元素设置圆角，或者给图片添加透明边框 七、input中使用手写输入法的坑 之前总有“报名工具”的小程序用户反馈，说是报名内容都输入完整了，但是保存不完整。 经排查，发现所有使用手写输入法的用户，都会遇到这现象。排查代码发现绑定的input事件，用户如果不点击手写输入法上的确认键，就不会触发bindinput。 这种情况下，有两种解决方式： 1、改用event.detail.value的形式来获取form表单数据； 2、再添加一个bindblur事件，保证事件能够正常执行； 因报名工具小程序中，有用户自定义字段，所以不确定用户会添加多少个字段，使用event获取的话，需要给每个input添加一个name属性，相对比较费劲，我改用了第二种方案。 [图片] 八、IOS下用户授权后，头像和昵称显示问题 这个问题其实是图片src是一个data中的变量，然后这个变量又发生了变化。但是在IOS设备上，就是没办法显示更改后的图片。（或者编辑图文投票时，也会有这现象） 解决办法：通过wx:if和wx:else判断，展示不同的image组件 [图片] 九、一键退出（隐藏）小程序 首先要说，这个需求不合理，右上角有退出按钮，但既然有同学问这问题，我也自己折腾了一下，基本可以实现一键退出。 先在每个page中添加隐藏page的方法： [图片] 有退出button的页面，对应的JS添加方法： [图片] 虽然可以实现，但也很low，其实就是隐藏了所有的page而已~

知晓程序员，专注微信小程序开发的程序员！ 一、登录实现 小程序登录的实现，官方建议自己保存用户登录状态，不要频繁调用wx.login，否则会限制登录。 这里连胜老师说一下自己实现登录的逻辑，无代码，实现逻辑看下图： [图片] 二、小程序中日历实现 日历实现的比较简单，主要实现了下面这几点： 1、当前月份的最大天数 2、每月1号对应的是周几 3、实现上月和下月点击功能 js代码： [图片] wxml代码： [图片] 最终效果： [图片] 三、IOS下禁止页面回弹效果 有些小程序，会把navigationBar颜色和page的颜色设置成一样，这时就不希望IOS用户能够有页面回弹效果，我们看一下如何处理。 可以在page.json里，设置enablePullDownRefresh和disableScroll的值： [图片] 四、防止多次点击 比如用户提交表单数据，点击submit按钮，需要调用保存数据的API，如果不做误点击处理，用户可能会多次点击submit，这样就会保存冗余数据。 可以提取公用方法到util.js中，如下： [图片] wxml: [图片] js: [图片] 500毫秒以内的点击都只会处理一次，时间长短自己可以调整~ 《END》 欢迎交流小程序技术问题： [图片]

一、微信小程序审核未通过，怎么办？  小程序审核不通过的原因很多,微信会给出相应审核不通过 的原因。今天连胜老师给大家介绍一下审核不通过之后,该 如何补救?  a、修改小程序服务类别 当审核不通过时,可以搜索一下类似的小程序,看看 他们选择的服务类别是什么,然后修改成和他们一样, 再次提交 b、重新申请一个小程序 还有一部分小程序是因为首次提交,都被拒绝了,再 次提交时,微信官方人员会查看上次审核未通过的原 因,所以,也有可能再次被拒。那干脆就重新申请一 个小程序吧,然后再提交代码~ c、终极方案 需要详细了解的同学，私聊~    威信：  mianhuabingbei 二、wx.setStorageSync报错 这个问题，之前的文章里面也提到过，今天再说一下。 感觉是微信官方API实现有问题，有一定概率会报错，调用越频繁，报错就越多，大家可以登录小程序后台查看详细报错~ 解决办法，添加try catch，能解决90%的报错情况。 [图片] 三、发新版代码后，如何让所有用户都获取最新代码？ 了解小程序的同学，就应该知道小程序是有缓存的，就是说用户打开小程序时，如果本地有缓存，默认会先从缓存中读取资源，是不是有点像浏览器缓存静态资源的机制？ 问题是，用户也没办法强制刷新，只能默默的等着微信把小程序代码更新（当然，你可以主动删除小程序，再重新搜索 & 打开，这对小白用户来说，成本太高了）。 办法总是有的，连胜老师想到了打开调试的api，如下： [图片] 每次打开或关闭调试面版时，小程序会自动关闭，然后重新打开后，代码肯定是最新的。 尝试在用户点击某个button时，或者直接在onHide里面先开启调试，再关闭。测试IOS下比安卓上的效果要好，但都不是特别完美~ 四、自定义弹出框如何阻止页面滚动事件 有同学需要做自定义的弹出框，但是在弹框后不想让页面可以滑动，这个其实也好解决~ 小程序里面绑定事件有bind和catch两种(比如bindtap, catchtap)，我们可以给弹出框的蒙层添加catchtouchstart事件，里面随便写一行代码，然后他的父节点就不会收到事件冒泡，这样就实现了我们要的效果。 《END》 欢迎讨论小程序技术问题（满了之后，可以勾搭连胜老师  mianhuabingbei）： [图片]

知晓程序员，专注微信小程序开发的程序员！ 一、小程序不同页面之间的传值方式 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 或者直接加群： [图片]

一、获取formId 相信使用过小程序的同学，多少都收到过小程序的通过消息，如下： [图片] [图片] 这类通知消息，是和好友消息一样展示在微信的聊天列表中，所以，点击率还是比较高的。想实现这种小程序的模板消息，就必须要获取用户的formid才可以（如何发消息，请仔细查阅小程序官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html） 我们来说一下如何获取formId： a、必须通过form组件提交才能获取到formId; b、给form组件设置report-submit="true"属性; c、给form组件添加bindsubmit事件绑定，携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}; d、必须用户手动触发提交表单，不能JS模拟提交，所以，页面上必须要有提交按钮; 看一下示例代码： <form report-submit='true' bindsubmit='userSubmit'>  <button class='button' bindtap='copy'          form-type='submit'>复制</button> </form>以上示例就可以在userSubmit里获取到formId了： userSubmit: function (e) { console.log(e.detail.formId); },需要注意一点，开发工具里面是没办法查看到真实的formId的，会是这样一句提示"the formId is a mock one"，提交给服务端就可以拿到了~ 二、客服button样式 其实button样式没什么好说的，最近有几个同学在群内讨论，说是客服按钮太小，想改一下样式，没办法实现。 这里我提供个思路：先按设计稿实现界面，联系客服如果样式和官方给的不一样，那就用position: absolute，定位一个button到你想要的位置，透明度设置为0即可，同时给button设置属性open-type="contact"就ok了~ 注： 1、这里要注意button的open-type属性是在基础库1.1.0开始支持的，自己要做一下兼容处理~ 2、button也可以改成其他样式，有些同学为了获取formId，就把页面所有可点击区域都用button按钮来实现了~ 三、区分转发的是群聊还是好友这个其实就是场景值的判断，先看一张图： 上图可以看出，从好友聊天窗口和群聊窗口点击小程序卡片后，场景值是不一样的，分别是1007和1008，所以，我们可以在app的onLuanch或者onShow方法中去获取到scene值，这样就能知道用户是通过哪种方式进入小程序的~ 四、小程序组件化开发 小程序官方提供的组件化文案，这里不细说，大家直接去github查看吧： https://github.com/Tencent/wepy 《END》

知晓程序员，一个专注于微信小程序开发的程序员~1、wx.setStorageSync和wx.getStorageSync报错问题 为什么说这个问题，是因为这个API确实会报错，并且调用越频繁，报错会越多，先看一下截图： [图片] 所以，怀疑微信官方API也有出错的机率，这里没有根治的办法，只能做一些缓解报错次数的办法：减少调用频次，不要在公用方法里面去频繁调用set和get本地缓存；添加try catch，出错之后，可以再调用一次或多次，减少报错的可能性~ 2、picker下拉列表为什么获取不到长度  [图片] 如上图，如果是设置了key的数组，会发现，此时的array的length是0，这可能是小程序的一个bug，length只能自己处理了~ 3、如何获取音频文件的长度 如果调用的是新API，wx.createInnerAudioContext可以直接获取duration；如果是低版本，调用wx.startRecord方法时，只能自己写个计数器来处理duration了。 4、如何获取微信群名称？ 小程序中是没办法直接获取到微信群名称的，只有一种方法获取open-gid，然后再通过open-data组件来显示群名称： [代码]<open-data type="groupName" open-gid="xxxxxx"></open-data>[代码]open-gid的获取方法： 用户把小程序分享到微信群，会在分享成功后返回shareTickets(因为可以分享到多个群，所以这里是一个数组); 如果用户是从群内点击的小程序卡片，会在小程序的app.onshow里面获取了shareTicket。拿到shareTicket后，再到服务端解密，就可以拿到open-gid~

知晓程序员，一个专注于微信小程序开发的程序员~1、域名必须是HTTPS非HTTPS的域名不被微信小程序允许 2、input组件placeholder字体颜色写在placeholder-class里面的color并不生效，需要写在placeholder-style里面就可以了 3、wx.navigateTo无法跳转到带tabbar的页面带有tabbar的页面，必须使用wx.switchTab进行跳转 4、tabbar在切换时页面数据无法刷新tabbar的实现可能是显示和隐藏view，所以，不会一直调用page.onLoad()方法，可以尝试把代码逻辑写在page.onShow()里面 5、如何获取shareTickets获取shareTickets需要在app.onLaunch或者app.onShow里面才能获取到，而不是page.onShow，请一定要注意。 注：建议在app.onShow里面去获取，app.onLaunch不是一直会执行 6、getPhoneNumber获取手机号目前该接口针对非个人开发者，且完成了认证的小程序开放。个人开发者是没办法调用这个API的 7、wx.previewImage图片预览预览的图片URL必须是HTTPS开头，不能是本地图片 8、wx.playVoice音频播放必须保证音频文件已经在本地，比如在wx.startRecord后，可以获取到filePath。或者提前调用wx.downloadFile来下载资源文件，然后再播放 9、API老版本兼容可以用wx.canIUse或者wx.getSystemInfoSync来进行判断，老版本给出相应提示即可 10、获取系统信息wx.getSystemInfo，可得到系统语言、屏幕宽高、微信版本号、操作系统、设备像素比、客户端甚础库版本等信息 11、如何去掉自定义button灰色的圆角边框主要是button的伪元素设置了样式，去掉即可： button::after{ display: none;} 12、回到页面顶部回到页面顶部，有两种方式： 1、使用scroll-view设置为纵向滚动，然后设置scroll-top值； 2、使用wx.pageScrollTo方法，此方法是1.4.0开始支持，所以要做低版本兼容； 13、input textarea是APP的原生组件，z-index层级最高有做过搜索框的同学，可能会遇到IOS下面，设置icon的z-index后，依然无法显示。建议做显示隐藏效果：点击之前是一个view，点击之后隐藏view，显示input~ 14、小程序如何冷启动小程序的机制，是在退出五分钟内进入，就会显示的是退出前的页面，如果你希望进入小程序都相当于冷启动的方式，直接进入主页面。你可以在page的onUnload里面里面set一个值，然后在app的onShow的时候判断这个值，然后决定是否跳到首页~ 15、一段文字如何换行小程序中唯一可以实现换行的标签组件是text 注：text中不支持<br>，只能使用\n进行换行 16、设置最外层标签的margin-bottom在IOS下不生效margin-bottom在安卓和开发工具里面都正常，就是在IOS下不起效，建议改成padding-bottom 17、小程序中canvas的图片不支持base64格式base64格式图片，在开发工具里面可以正常显示，真机上没有显示。建议修改成带https开头的url形式 待续。。。

在上一篇分享中，给大家分享了启动性能加载的相关实践，详情可戳右方链接：微盟小程序性能优化实践（上） 接下来和大家聊一聊首屏加载的体验建议和渲染性能优化。 二、首屏加载的体验建议 · 提前请求     异步数据请求不需要等待页面渲染完成。 · 利用缓存   利用storage API对异步请求数据进行缓存，二次渲染页面，再进行后台更新。 · 避免白屏   先展示页面骨架和基础内容。 三、渲染性能优化 ·  每次 setData 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关 ·  setData 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互 ·  setData 是小程序开发使用最频繁，也是最容易引发性能问题的 ·  在页面列表中使用懒加载+动态移除非可视区域范围内的内容，让dom小下去 ·  耗时比较长的js做到异步，不要阻塞进程（js属于单线程） ·  少使用scroll-view,这个组件对性能的影响太大，单纯的只是需要一块区域滚动，可以使用view+css的方式实现 ·  在页面频繁滚动触发回调函数，会导致页面卡顿，这时必须和防抖动函数或者节流函数相结合做一些处理 ·  页面中的图片可以使用懒加载的方式（添加lazy-load属性，只针对page与scroll-view下的image有效） ·  页面跳转要做一下限制，如果页面快速点击会出现跳转多次的情况  避免不正当的使用setData · 使用data在方法间共享数据，可能增加setData传输的数据量。data 应该仅仅包含与页面渲染相关的数据 · 使用setData 传输大量的数据，通讯耗时与数据量成正比，导致页面更新延迟 可能造成页面更新开销增加。所以setData 仅传输页面需要的数据,使用setData 的特殊Key 实现局部更新 · 短时间内频繁调用setData  (操作卡顿、交互延迟   阻塞通信、页面渲染延迟)，对连续的setData 调用进行合并 · 后台进行页面setData  (抢占前台页面的渲染资源) 例如 活动定时器 再页面切入后台时应该将关闭 避免不正当的使用onPageScroll · 只在必要的时候监听pageScroll 事件 · 避免在onPageScroll 中执行复杂的逻辑 · 避免在onPageScroll 中频繁调用setData · 避免频繁查询节点信息(SelectQuery) 部分场景建议使用节点布局相交状态 ·  监听( IntersectionObserver) 替代 使用自定义组件 在需要频繁更新的场景下，自定义组件的更新只在组件内部进行，不受页面部分内容的复杂性的影响。 使用体验评分功能 在开发过程中使用体验评分可以测试出代码中一些需要优化的点，准备定位到影响性能的原因，很大程序提高页面的性能。

微盟小程序性能优化要分享的内容分为三部分，启动性能加载、首屏加载的体验建议和渲染性能优化。 今天主要讲启动性能加载的性能优化实践，先看启动加载过程的流程： [图片] · 公共库注入 · 资源准备（基础UI创建，代码包下载） · 业务代码注入和渲染 · 渲染首屏 · 异步请求 优化方案 1、控制代码包大小 · 开启开发者工具中的 “ 上传代码时自动压缩 ” · 及时清理无用代码和资源文件 · 减少代码包中的图片等资源文件的大小和数量 · 将图片等资源文件放到CND中 · 提取公共样式 · 代码压缩，图片格式，压缩，或者外联 · 公共组件提取，代码复用 2、 分包加载 分包加载过程流程 [图片] 在开发小程序分包项目时，会有一个或者多个分包，其中没有分包小程序必须包含一个主包，即放置启动页面或者tabBar页面，以及一些分包都需要用到的公共资源脚本。 在小程序启动时，默认会下载主包并且启动主包内页面，如果用户打开分包内的页面，客户端会把分包下载下来，下载完之后再进行展示。 · 分包加载流程 [图片] 使用分包加载的优点： · 能够增加小程序更大的代码体积，开发更多的功能 · 对于用户，可以更快地打开小程序，同时不影响启动速度 使用分包加载有哪些限制： · 整个小程序所有分包不能超过8M · 单个主包/分包不能超过2M 3、 运行机制优化 · 代码中减少立即执行的代码数量 · 避免高开销和长时间阻塞代码 · 业务代码都写入页面的生命周期中 · 做好缓存策略 4、 数据管理优化 · 首屏请求数量尽量不能超过5个，超过的可以做接口合并（node层，服务端都可以处理） · 对多次提交的数据可以做合并处理 首屏加载的体验建议和渲染性能优化这两部分的内容，将在下次分享给大家。微盟小程序性能优化实践（下）