- 需求的场景描述（希望解决的问题）： 在小程序中实现 视频播放时候，如何让用户自己选择视频画质清晰度，如下图最近发现腾讯视频小程序有了这个功能。 小程序官方视频开发文档，好像也没提到这个，请教下如何实现小程序中播放视频选择不同视频画质？？？ https://developers.weixin.qq.com/miniprogram/dev/component/video.html - 希望提供的能力：小程序端视频播放支持选择视频画质。 [图片]

背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。 如何改变底层解决该问题呢？ 不成熟方案： 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。 成熟方案 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。） page-meta组件： 通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] wx.setPageStyle方法： 调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // ‘auto’ } }) [代码] 老规矩，结尾放代码片段： https://developers.weixin.qq.com/s/U6ItgQmP7upQ 拓展 支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。

已上线的小程序，出现了大面积登录失败。测试发现与微信版本有关，微信8.0.7必现，老版本不会出现。错误代码-41003

你想反馈一个 Bug Bug：在分包加载时，子包的titleText设置失效 * Bug 表现是什么？预期表现是什么？ * 如何复现？ 子包下的任意页面的index.json中设置  navigationBarTitleText [图片] [图片] 以上两种代码均无法实现更换顶部title的功能

SimpleCrop全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端的全平台图片裁剪组件。 Github 地址：https://github.com/newbieYoung/Simple-Crop 特性及优势和目前流行的图片裁剪组件相比，其优势在于以下几点： 裁剪图片支持任意角度旋转；支持 Script 标签、微信小程序、React、Vue；支持移动和 PC 设备；支持边界判断、当裁剪框里出现空白时，图片自动吸附至完全填满裁剪框；移动端缩放以双指中心为基准点；交互体验媲美原生客户端。示例微信小程序示例[图片] 移动端示例[图片] 左侧是 IOS 系统相册中原生的图片裁剪功能，右侧为 SimpleCrop 移动端示例。 可以扫描二维码体验： [图片] 或者访问以下链接： https://newbieyoung.github.io/Simple-Crop/examples/test-2.html PC 示例[图片] 链接如下： https://newbieyoung.github.io/Simple-Crop/examples/test-1.html 安装npm install simple-crop 用法Script 用法微信小程序用法React 用法Vue 用法开源许可协议MIT License. 原理及实现[代码]全平台（Vue、React、微信小程序）任意角度旋转 图片裁剪组件[代码] https://newbieweb.lione.me/2019/05/16/simple-crop/

先上效果图(无图无真相) [图片] 1. 第一步准备表情包素材 我这里用的微博的表情包可以点击下面的链接查看具体JSON格式这里不展示 表情包文件weibo-emotions.js 2. 第二步编写表情组件(基于wepy2.0) 如果不会 wepy 可以先去了解下如果你会vue那非常容易上手 首先我们需要把表情包文件weibo-emotions.js中的JSON文件转换成我们需要的格式 [代码]emojis = [ { id: 编号, value: 表情对应的汉字含义 例如:[偷笑], icon: 表情相对图片路径, url: 表情具体图片路径 } ] [代码] 具体转换方法 [代码]function () { const _emojis = {} for (const key in emotions) { if (emotions.hasOwnProperty(key)) { const ele = emotions[key]; for (const item of ele) { _emojis[item.value] = { id: item.id, value: item.value, icon: item.icon.replace('/', '_'), url: weibo_icon_url + item.icon } } } } return _emojis } [代码] 编写组件的html代码 [代码]<template> <div class="emoji" style="height:{{height}}px;" :hidden="hide"> <scroll-view :scroll-y="true" style="height:{{height}}px;"> <div class="icons"> <div class="img" v-for="img in emojis" :key="img.id" @tap.stop="onTap(img.value)"> <img class="icon-image" :src="img.url" :lazy-load="true" /> </div> </div> <div style="height:148rpx;"></div> </scroll-view> <div class="btn-box"> <div class="btn-del" @tap.stop="onDel"> <div class="icon icon-input-del" /> </div> </div> </div> </template> [代码] html代码中的height变量为键盘的高度，通过props传入 编写组件的css代码 [代码].emoji { position: fixed; bottom: 0px; left: 0px; width: 100%; transition: all 0.3s; z-index: 10005; &::after { content: ' '; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 0.4px solid rgba(235, 237, 245, 0.8); color: rgba(235, 237, 245, 0.8); } .icons { display: flex; flex-wrap: wrap; .img { flex-grow: 1; padding: 20rpx; text-align: left; justify-items: flex-start; .icon-image { width: 48rpx; height: 48rpx; } } } scroll-view { background: #f8f8f8; } .btn-box { right: 0rpx; bottom: 0rpx; position: fixed; background: #f8f8f8; padding: 30rpx; .btn-del { background: #ffffff; padding: 20rpx 30rpx; border-radius: 10rpx; .icon { font-size: 48rpx; } } } .icon-loading { height: 100%; display: flex; justify-content: center; align-items: center; } } [代码] 这里是使用less来编写css样式的,flex布局如果你对flex不是很了解可以看看 这篇文章 组件JS代码比较少 [代码]import { weibo_emojis } from '../common/api'; import wepy from '@wepy/core'; wepy.component({ options: { addGlobalClass: true }, props: { height: Number, hide: Boolean }, data: { emojis: weibo_emojis, }, methods: { onTap(val) { this.$emit('emoji', val); }, onDel() { this.$emit('del'); } } }); [代码] 表情组件基本已经编写完成是不是很简单 那么编写好的组件怎么用呢？ 其实也很简单 第一步把组件引入到页面 [代码]<config> { "usingComponents": { "emoji-input": "../components/input-emoji", } } </config> [代码] 第二步把组件加入到页面html代码中 [代码]<emoji-input :height="boardheight" @emoji="onInputEmoji" @del="onDelEmoji" :hide="bottom === 0" /> [代码] 第三步编写onInputEmoji，onDelEmoji方法 [代码] /** * 选择表情 */ onInputEmoji(val) { let str = this.content.split(''); str.splice(this.cursor, 0, val); this.content = str.join(''); if (this.cursor === -1) { this.cursor += val.length + 1; } else { this.cursor += val.length; } this.canSend(); }, /** * 删除表情 */ onDelEmoji() { let str = this.content.split(''); const leftStr = this.content.substring(0, this.cursor); const leftLen = leftStr.length; const rightStr = this.content.substring(this.cursor); const left_left_Index = leftStr.lastIndexOf('['); const left_right_Index = leftStr.lastIndexOf(']'); const right_right_Index = rightStr.indexOf(']'); const right_left_Index = rightStr.indexOf('['); if ( left_right_Index === leftLen - 1 && leftLen - left_left_Index <= 8 && left_left_Index > -1 ) { // "111[不简单]|23[33]"left_left_Index=3,left_right_Index=7,leftLen=8 const len = left_right_Index - left_left_Index + 1; str.splice(this.cursor - len, len); this.cursor -= len; } else if ( left_left_Index > -1 && right_right_Index > -1 && left_right_Index < left_left_Index && right_right_Index <= 6 ) { // left_left_Index:4,left_right_Index:3,right_right_Index:1,right_left_Index:2 // "111[666][不简|单]"right_right_Index=1,left_left_Index=3,leftLen=6 let len = right_right_Index + 1 + (leftLen - left_left_Index); if (len <= 10) { str.splice(this.cursor - (leftLen - left_left_Index), len); this.cursor -= leftLen - left_left_Index; } else { str.splice(this.cursor, 1); this.cursor -= 1; } } else { str.splice(this.cursor, 1); this.cursor -= 1; } this.content = str.join(''); }, [代码] 好了基本就完成了一个表情组件的编写和调用 如果你想看完整的代码请点击这里 如果你想体验可以扫下面的二维码自己去体验下 [图片] 下篇 我们写写怎么实现一个简单的富文本编辑器

- 需求的场景描述（希望解决的问题）[图片] - 希望提供的能力 聚焦获取键盘高度

复现步骤: 打开微信,访问视频url https://devobs.myun.tv/test_ts/test_bzx2j4.m3u8 已知异常手机型号:三星S9(android ) 小米max 部分华为手机 问题出现于20191231晚上,陆续有客户反馈视频观看异常,手机浏览器打开视频可以正常访问 [图片][图片][图片][图片][图片]

提到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，但哪吒说 我命由我不由天，所以还是我们开发者多分享些解决方案自救来的快。 分享方案如有问题还望不吝指出，没有涉及到的坑也欢迎评论提出，一起学习和解决，后续也会基于此篇不断更新总结。

- 当前 Bug 的表现（可附上截图） 用户反馈在某些页面会黑屏，然后大概2s后闪退，有的时候直接闪退，已经录制了视频，时间在21日18：26分，如果有需要，可以让用户上传微信日志 [视频] 视频见链接 - 预期表现 不闪退、不黑屏 - 复现路径 - 提供一个最简复现 Demo

我们一直在努力

我们压根没换什么社交类目啊[图片] 之前的异常内容已经做处理了  但是最近几次提交都莫名其妙的提示这个 麻烦官方大大看下@

使用wx.setStorageSync缓存token，会被自动清除掉，请问有遇到这种情况的吗，如何解决的？

小程序开发另类小技巧 --用户授权篇 getUserInfo较为特殊，不包含在本文范围内，主要针对需要授权的功能性api，例如：wx.startRecord，wx.saveImageToPhotosAlbum， wx.getLocation 原文地址：https://www.yuque.com/jinxuanzheng/gvhmm5/arexcn 仓库地址：https://github.com/jinxuanzheng01/weapp-auth-demo 背景 小程序内如果要调用部分接口需要用户进行授权，例如获取地理位置信息，收获地址，录音等等，但是小程序对于这些需要授权的接口并不是特别友好，最明显的有两点： 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调， 没有统一的错误信息提示，例如错误码 一般情况而言，每次授权时都应该激活弹窗进行提示，是否进行授权，例如： [图片] 而小程序内只有第一次进行授权时才会主动激活弹窗（微信提供的），其他情况下都会直接走fail回调，微信文档也在句末添加了一句请开发者兼容用户拒绝授权的场景, 这种未做兼容的情况下如果用户想要使用录音功能，第一次点击拒绝授权，那么之后无论如何也无法再次开启录音权限**，很明显不符合我们的预期。 所以我们需要一个可以进行二次授权的解决方案 常见处理方法 官方demo 下面这段代码是微信官方提供的授权代码, 可以看到也并没有兼容拒绝过授权的场景查询是否授权（即无法再次调起授权） [代码]// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope wx.getSetting({ success(res) { if (!res.authSetting['scope.record']) { wx.authorize({ scope: 'scope.record', success () { // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问 wx.startRecord() } }) } } }) [代码] 一般处理方式 那么正常情况下我们该怎么做呢？以地理位置信息授权为例： [代码]wx.getLocation({ success(res) { console.log('success', res); }, fail(err) { // 检查是否是因为未授权引起的错误 wx.getSetting({ success (res) { // 当未授权时直接调用modal窗进行提示 !res.authSetting['scope.userLocation'] && wx.showModal({ content: '您暂未开启权限，是否开启', confirmColor: '#72bd4a', success: res => { // 用户确认授权后，进入设置列表 if (res.confirm) { wx.openSetting({ success(res){ // 查看设置结果 console.log(!!res.authSetting['scope.userLocation'] ? '设置成功' : '设置失败'); }, }); } } }); } }); } }); [代码] 上面代码，有些同学可能会对在fail回调里直接使用wx.getSetting有些疑问，这里主要是因为 微信返回的错误信息没有一个统一code errMsg又在不同平台有不同的表现 从埋点数据得出结论，调用这些api接口出错率基本集中在未授权的状态下 这里为了方便就直接调用权限检查了 ，也可以稍微封装一下，方便扩展和复用，变成： [代码] bindGetLocation(e) { let that = this; wx.getLocation({ success(res) { console.log('success', res); }, fail(err) { that.__authorization('scope.userLocation'); } }); }, bindGetAddress(e) { let that = this; wx.chooseAddress({ success(res) { console.log('success', res); }, fail(err) { that.__authorization('scope.address'); } }); }, __authorization(scope) { /** 为了节省行数，不细写了，可以参考上面的fail回调，大致替换了下变量res.authSetting[scope] **/ } [代码] 看上去好像没有什么问题，fail里只引入了一行代码， 这里如果只针对较少页面的话我认为已经够用了，毕竟**‘如非必要，勿增实体’，但是对于小打卡这个小程序来说可能涉及到的页面，需要调用的场景偏多**，我并不希望每次都人工去调用这些方法，毕竟人总会犯错 梳理目标 上文已经提到了背景和常见的处理方法，那么梳理一下我们的目标，我们到底是为了解决什么问题？列了下大致为下面三点： 兼容用户拒绝授权的场景，即提供二次授权 解决多场景，多页面调用没有统一规范的问题 在底层解决，业务层不需要关心二次授权的问题 扩展wx[funcName]方法 为了节省认知成本和减少出错概率，我希望他是这个api默认携带的功能，也就是说因未授权出现错误时自动调起是否开启授权的弹窗 为了实现这个功能，我们可能需要对wx的原生api进行一层包装了（关于页面的包装可以看：如何基于微信原生构建应用级小程序底层架构） 为wx.getLocation添加自己的方法 这里需要注意的一点是直接使用常见的装饰模式是会出现报错，因为wx这个对象在设置属性时没有设置set方法，这里需要单独处理一下 [代码]// 直接装饰，会报错 Cannot set property getLocation of #<Object> which has only a getter let $getLocation = wx.getLocation; wx.getLocation = function (obj) { $getLocation(obj); }; // 需要做一些小处理 wx = {...wx}; // 对wx对象重新赋值 let $getLocation = wx.getLocation; wx.getLocation = function (obj) { console.log('调用了wx.getLocation'); $getLocation(obj); }; // 再次调用时会在控制台打印出 '调用了wx.getLocation' 字样 wx.getLocation() [代码] 劫持fail方法 第一步我们已经控制了wx.getLocation这个api，接下来就是对于fail方法的劫持，因为我们需要在fail里加入我们自己的授权逻辑 [代码]// 方法劫持 wx.getLocation = function (obj) { let originFail = obj.fail; obj.fail = async function (errMsg) { // 0 => 已授权 1 => 拒绝授权 2 => 授权成功 let authState = await authorization('scope.userLocation'); // 已授权报错说明并不是权限问题引起，所以继续抛出错误 // 拒绝授权，走已有逻辑，继续排除错误 authState !== 2 && originFail(errMsg); }; $getLocation(obj); }; // 定义检查授权方法 function authorization(scope) { return new Promise((resolve, reject) => { wx.getSetting({ success (res) { !res.authSetting[scope] ? wx.showModal({ content: '您暂未开启权限，是否开启', confirmColor: '#72bd4a', success: res => { if (res.confirm) { wx.openSetting({ success(res){ !!res.authSetting[scope] ? resolve(2) : resolve(1) }, }); }else { resolve(1); } } }) : resolve(0); } }) }); } // 业务代码中的调用 bindGetLocation(e) { let that = this; wx.getLocation({ type: 'wgs84', success(res) { console.log('success', res); }, fail(err) { console.warn('fail', err); } }); } [代码] 可以看到现在已实现的功能已经达到了我们最开始的预期，即因授权报错作为了wx.getLocation默认携带的功能，我们在业务代码里再也不需要处理任何再次授权的逻辑 也意味着wx.getLocation这个api不论在任何页面，组件，出现频次如何，**我们都不需要关心它的授权逻辑（**效果本来想贴gif图的，后面发现有图点大，具体效果去git仓库跑一下demo吧） 让我们再优化一波 上面所述大致是整个原理的一个思路，但是应用到实际项目中还需要考虑到整体的扩展性和维护成本，那么就让我们再来优化一波 代码包结构： 本质上只要在app.js这个启动文件内，引用./x-wxx/index文件对原有的wx对象进行覆盖即可 [图片] **简单的代码逻辑： ** [代码]// 大致流程： //app.js wx = require('./x-wxx/index'); // 入口处引入文件 // x-wxx/index const apiExtend = require('./lib/api-extend')； module.exports = (function (wxx) { // 对原有方法进行扩展 wxx = {...wxx}; for (let key in wxx) { !!apiExtend[key] && (()=> { // 缓存原有函数 let originFunc = wxx[key]; // 装饰扩展的函数 wxx[key] = (...args) => apiExtend[key](...args, originFunc); })(); } return wxx; })(wx); // lib/api-extend const Func = require('./Func'); (function (exports) { // 需要扩展的api（类似于config） // 获取权限 exports.authorize = function (opts, done) { // 当调用为"确认授权方法时"直接执行，避免死循环 if (opts.$callee === 'isCheckAuthApiSetting') { console.log('optsopts', opts); done(opts); return; } Func.isCheckAuthApiSetting(opts.scope, () => done(opts)); }; // 选择地址 exports.chooseAddress = function (opts, done) { Func.isCheckAuthApiSetting('scope.address', () => done(opts)); }; // 获取位置信息 exports.getLocation = function (opts, done) { Func.isCheckAuthApiSetting('scope.userLocation', () => done(opts)); }; // 保存到相册 exports.saveImageToPhotosAlbum = function (opts, done) { Func.isCheckAuthApiSetting('scope.writePhotosAlbum', () => done(opts)); } // ...more })(module.exports); [代码] 更多的玩法 可以看到我们无论后续扩展任何的微信api，都只需要在lib/api-extend.js 配置即可，这里不仅仅局限于授权，也可以做一些日志，传参的调整，例如： [代码] // 读取本地缓存(同步) exports.getStorageSync = (key, done) => { let storage = null; try { storage = done(key); } catch (e) { wx.$logger.error('getStorageSync', {msg: e.type}); } return storage; }; [代码] 这样是不是很方便呢，至于Func.isCheckAuthApiSetting这个方法具体实现，为了节省文章行数请自行去git仓库里查看吧 关于音频授权 录音授权略为特殊，以wx.getRecorderManager为例，它并不能直接调起录音授权，所以并不能直接用上述的这种方法，不过我们可以曲线救国，达到类似的效果，还记得我们对于wx.authorize的包装么，本质上我们是可以直接使用它来进行授权的，比如将它用在我们已经封装好的录音管理器的start方法进行校验 [代码]wx.authorize({ scope: 'scope.record' }); [代码] 实际上，为方便统一管理，Func.isCheckAuthApiSetting方法其实都是使用wx.authorize来实现授权的 [代码]exports.isCheckAuthApiSetting = async function(type, cb) { // 简单的类型校验 if(!type && typeof type !== 'string') return; // 声明 let err, result; // 获取本地配置项 [err, result] = await to(getSetting()); // 这里可以做一层缓存，检查缓存的状态，如果已授权可以不必再次走下面的流程，直接return出去即可 if (err) { return cb('fail'); } // 当授权成功时，直接执行 if (result.authSetting[type]) { return cb('success'); } // 调用获取权限 [err, result] = await to(authorize({scope: type, $callee: 'isCheckAuthApiSetting'})); if (!err) { return cb('success'); } } [代码] 关于用户授权 用户授权极为特殊，因为微信将wx.getUserInfo升级了一版，没有办法直接唤起了，详见《公告》，所以需要单独处理，关于这里会拆出单独的一篇文章来写一些有趣的玩法 总结 最后稍微总结下，通过上述的方案，我们解决了最开始目标的同时，也为wx这个对象上的方法提供了统一的装饰接口（lib/api-extend文件），便于后续其他行为的操作比如埋点，日志，参数校验 还是那么一句话吧，小程序不管和web开发有多少不同，本质上都是在js环境上进行开发的，希望小程序的社区环境更加活跃，带来更多有趣的东西

尊敬的开发者，欢迎体验Thor UI！ 该项目主要是一些小程序代码片段的分享，以及基础组件的封装。项目免费开源，源码可在GitHub上下载，会不定期进行更新。 项目可能存在缺陷或者bug，如果您在使用过程中发现问题或者有更好的建议，可反馈给我。您也可以将自己觉得不错的案例分享给我，我会扩展到此项目中。 ThorUI QQ交流群：928308676 扫码体验(一) [图片] 扫码体验(二) [图片] 组件文档地址： http://www.thorui.cn/doc ThorUI uni-app版本GitHub地址： https://github.com/dingyong0214/ThorUI-uniapp ThorUI uni-app版本插件市场地址： https://ext.dcloud.net.cn/plugin?id=556 ThorUI 小程序版本GitHub地址： https://github.com/dingyong0214/ThorUI ThorUI 小程序版本插件市场地址： https://ext.dcloud.net.cn/plugin?id=569 V1.6.5（2021-05-24） 1.tui-validation（表单验证）优化，新增validator自定义验证配置项，具体查看文档。 2.tui-round-progress（圆形进度条）组件优化，修复已知问题。 3.tui-cascade-selection（级联选择器）组件优化，修复已知问题。 4.tui-tabs（标签页）组件优化，选项卡可设置数字角标。 ===================== 【ThorUI示例V1.1.0】更新： 1.tui-org-tree（组织架构树）组件优化，可控制节点内容排版方式、节点选中状态、展开收起子节点，具体查看文档。 2.新增tui-form（表单）组件，主要用于表单验证。 3.新增tui-input（输入框）组件，原生input组件增强。 4.新增tui-textarea（多行输入框）组件。 5.新增tui-label（标签）组件，用来改进表单组件的可用性。 6.新增tui-radio（单项选择器）组件。 7.新增tui-checkbox（多项选择器）组件。 8.新增tui-switch（开关）组件。 9.新增tui-picker（选择器）组件，支持1~3级数据。 10.新增tui-landscape（压屏窗）组件。 11.新增tui-segmented-control（分段器）组件。 12.新增tui-notice-bar（通告栏）组件。 13.新增tui-alerts（警告框）组件。 14.新增tui-request（数据请求）封装，支持Promise，支持请求拦截和响应拦截,支持请求未结束之前阻止重复请求等。 15.tui-utils（工具类）优化，具体查看文档。 16.新增tui-row组件，配合组件tui-col组件使用（24栅格化布局）。 17.新增tui-tree-view（树型菜单）组件。 18.新增tui-charts-column（柱状图-css版）组件。 19.新增tui-charts-bar（横向柱状图-css版）组件。 20.新增tui-charts-line（折线图表-css版）组件。 21.新增tui-charts-pie（饼状图表-css版）组件。 22.tui-lazyload-img（图片懒加载）组件优化，修复已知问题。 23.新增tui-pagination（分页器）组件。 部分功能截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] V1.4.0： 1.新增日期时间选择器组件。 2.H5新增复制文本功能。 3.新增悬浮按钮组件。 4.新增Tabbar组件。 5.新增tabs标签页组件。 6.新增折叠面板组件。 7.新增图片上传组件。 8.NumberBox组件优化调整。 9.Modal组件优化调整。 10.sticky组件优化调整。 11.countdown组件优化调整。 12.商城模板新增购物车、我的、提交订单、支付成功、我的订单、地址列表、新增地址、设置、用户信息等页面。 V1.3.0 1.新增倒计时组件:时分秒倒计时，支持设置大小，颜色等。 2.新增分隔符组件:Divider分隔符，可设置占据高度，线条宽度，颜色等。 3.新增卡片轮播:包含顶部轮播，秒杀商品轮播等。 4.nvue下拉刷新优化。 5.修复已知bug。 V1.2.2 1.新增组件Modal弹框:可设置按钮数，按钮样式，提示文字样式等，还可自定义弹框内容。 2.修复部分已知bug。 ThorUI V1.2.1 1.新增组件Modal弹框:可设置按钮数，按钮样式，提示文字样式等，还可自定义弹框内容。 2.修复已知bug。 3.ThorUI已上线uni-app版本，请移步uni-app插件市场搜索ThorUI。 ThorUI V1.2.0 1.新增组件NumberBox数字框:可设置步长，支持浮点数，支持调整样式(可单独设置)。 2.新增组件Rate评分:可设置星星数，可设置大小颜色。 3.新增聊天模板，包含：消息列表，好友列表，聊天界面等。 4.新增商城模板,包含：商城首页，商城列表，商城详情等。 5.优化部分体验。 ThorUI V1.1.0 1.将基础组件移出扩展，单独出来。 2.扩展改为单独tab bar选项extend。 3.新增滚动消息（extend=>滚动消息）：包括顶部通告栏，滚动新闻，以及搜索框中出现的热搜产品。 4.新增弹层下拉选择（extend=>弹层下拉选择）：包含顶部下拉选择列表、输入框下拉选择以及底部分享弹层。 5.新增ActionSheet操作菜单（extend=>ActionSheet）：可加入提示信息，可单独设置字体样式。 6.新增新闻模板（extend=>新闻模板）:包含新闻列表，新闻详情，评论等。 7.部分功能优化，修复已知bug。 ThorUI V1.0.0 1.【地图】新增拖拽定位功能 2.【扩展】新增基础组件，包括：字体图标，按钮，Grid宫格，List列表，Card卡片… 3.【扩展】新增数字键盘 4.【扩展】新增时间轴 5.完善thor(个人中心)功能，包括：关于Thor UI，模拟登录，GitHub地址复制，赞赏，反馈，更新日志等 6.已知bug修复，以及部分功能优化 商城模板部分截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] 新闻模板部分截图 [图片] [图片] [图片] [图片] [图片] [图片] 聊天模板截图 [图片] [图片] [图片] 组件功能部分截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片]

- 当前 Bug 的表现（可附上截图） [图片] - 预期表现        正常速度切换“首页”，“通讯录”，“发现”，“我的”四个tab键切换至对应内容是没有问题的； - 复现路径     当速度足够快的点击某两个tab键（比如首页和通讯录，可以用两个手指来回快速点击首页和通讯录），页面就开始闪烁抖动，基本100%复现； - 提供一个最简复现 Demo WXML: <view class="flex-row" style="display: flex;"> <view class="{{currentTab==0 ? 'flex-view-item1' : 'flex-view-item'}}" bindtap="tap0">首页</view> <view class="{{currentTab==1 ? 'flex-view-item1' : 'flex-view-item'}}" bindtap="tap1">通讯录</view> <view class="{{currentTab==2 ? 'flex-view-item1' : 'flex-view-item'}}" bindtap="tap2">发现</view> <view class="{{currentTab==3 ? 'flex-view-item1' : 'flex-view-item'}}" bindtap="tap3">我的</view> </view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <!-- 我是哈哈 --> <swiper-item> <view>我是《首页》</view> </swiper-item> <!-- 我是呵呵 --> <swiper-item> <view>我是《通讯录》</view> </swiper-item> <!-- 我是嘿嘿 --> <swiper-item> <view>我是《发现》</view> </swiper-item> <!-- 我是哼哼--> <swiper-item> <view>我是《我的》</view> </swiper-item> </swiper> WXSS: /*按钮所在容器的属性设置*/ .flex-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } /*按钮默认状态下属性*/ .flex-view-item { width: 20%; height: 50px; background-color: #ffa589; text-align: center; } /*按钮选中状态下属性*/ .flex-view-item1 { width: 20%; height: 50px; background-color: #ff5400; text-align: center; } JS: Page({ data:{ currentTab : 0  //初始化currentTab=0 }, //第1个按钮点击事件，修改currentTab值 tap0:function(event){ this.setData({ currentTab: 0 }); }, // 第2个按钮点击事件，修改currentTab值 tap1:function(event){ this.setData({ currentTab: 1 }); }, // 第3个按钮点击事件，修改currentTab值 tap2:function(event){ this.setData({ currentTab: 2 }); }, // 第4个按钮点击事件，修改currentTab值 tap3:function(event){ this.setData({ currentTab: 3 }); }, // swiper滑动事件，修改currentTab值，实现切换tab bindChange: function( e ) {   var that = this;   that.setData( { currentTab: e.detail.current });   }, })

@官方大佬 麻烦看一下   有异常需要回退都不行  快哭了

[图片] 打个硬广(公司的类quora的问答小程序) [图片] [视频]

https://miniprogram.suxcx.com//wecat/video/fbd84eef7f919c98120800bcdae42641.mp4 相同的视频连接 在微信浏览器打开 播放正常 无卡顿 但在小程序视频组件中打卡 会卡顿

1. new Date跨平台兼容性问题在Andriod使用[代码]new Date(“2018-05-30 00:00:00”)[代码]木有问题，但是在ios下面识别不出来。 因为IOS下面不能识别这种格式，需要用[代码]2018/05/30 00:00:00[代码]格式。可以使用正则表达式对做字符串替换，将短横替换为斜杠。[代码]var iosDate= date.replace(/-/g, '/');[代码]。 2. wx.getUserInfo()接口更改问题微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。 解法很长，请参考: 解法1：微信小程序不支持wx.getUserInfo授权的解决方法 解法2：getUserInfo兼容解决方案 3. 只有在调试模式下，才能发送数据到自己的正式服务器其实，只要注意配置合法域名，这个问题就解决了。有的时候，因为一上来就开发，忘记掉去配置域名。后来发现数据没法出去，可能半天没想来忘记配置了！ 4. 无法获取UnionID的问题login获取UID必须满足两个条件： 1、把小程序和公众号都绑定在开放平台； 2、用户必须已经关注公众号。 用wx.getUserInfo获取满足一个条件：把小程序和公众号都绑定在开放平台； 5. wx.getSystemInfoSync获取windowHeight不准确主要原因在于获取是时机，wx.getSystemInfoSync是在页面初始化的时候就计算了，基本上可以理解为是屏幕高度。所以，最好的方法是使用异步接口，并且在onReady函数中调用。 [代码]onReady() {  wx.getSystemInfo({    success({windowHeight}) {      // todo    }  }); }[代码]6. 图片本地资源名称，尽量使用小写命名在解决iPhone X适配时，底部多余部分使用图片时 [代码]<image class='iphonexImg' src="/imgs/iphoneBGT.png" mode="aspectFill">image>[代码] 路径是 [代码]src='imgs/iphoneBGT.png'[代码] 发现在pc IDE上面可以显示出来，但是真机调试时，图片找不到， 然后将图片名称改为iphonex.png真机调试就可以了 [代码]<image class='iphonexImg' src="/imgs/iphonex.png" mode="aspectFill">image>[代码] 写在最后：代码总是有各种bug，像上面列举的问题还是在开发中就可以发现。而代码上线以后呢，测试也不能保证100%没有问题。 在这里，推荐Fundebug的小程序bug监控服务给各位老铁！ 关于Fundebug2017年初，小程序还刚上线，Fundebug就支持小程序错误监控了。做为最早的小程序错误监控服务的拓荒者，累计为数千个小程序提供免费服务，累计处理数千万小程序错误。

video组件是改了吗，今天做个demo发现可以被view覆盖，不是说原生组件不能被覆盖吗，官方能不能说明一下？ 代码片段： https://developers.weixin.qq.com/s/i5YW0wmj7b4l

- 需求的场景描述（希望解决的问题） 有个弹幕view页面全屏，Z最高层，其他页面都在该层下，如何能把事件传递到下面层呢？实现穿透效果， - 希望提供的能力 能点击弹幕层下面的按钮 或者列表

小程序涉及IOS支付方面问题已整改完毕，请求管理员尽快审核，尽快恢复IOS的打开、搜索的功能。

请各位审核员爸爸们，认真回答一下这些问题。 我相信不止我有这些疑问。 也希望能给我们开发者一个公开，公平，公正的环境。 投诉无门，只能通过这里求解一下。 1：你们的审核机制，以及审核顺序是怎样的？ 是否全部为人工审核，还是先机器人审核再人工审核。或者是部分机器人审核，部分人工审核。 2：关于审核时间顺序？ 企业以及个人，是否存在企业优先，或者良好信誉的小程序优先。 PS：我有2个小程序都是个人的，A提交后大约过了2天才审核。 B在A之后提交的，但B过了2小时就审核通过了。 3：关于审核派单顺序？ 是否按提交功能派单还是按提交时间随机分配给审核员。 4：关于小程序代码审核检测？ 是否存在某些关键词检测，比如支付宝/淘宝等。 5：请问是否存在开发者黑名单一说？ 比如这个开发者开发了各种垃圾，恶意小程序。是否存在拉黑或者延缓审核这么一说。 6：还有最后一个疑问。 相同的代码，A提交迟迟不肯审核，过了2，3天才开始审核，并且拒绝。 用相同代码通过B提交，2/3个小时就通过审核了。 请问是审核员失职还是存在黑名单类目？ 这种情况不是一次2次了。

开发工具和iOS测过，android我没测过。。哈哈哈哈哈 https://developers.weixin.qq.com/s/kh8HhjmA7A4D 注释不知道写啥，简单描述了下 [图片]

小程序审核突然没通过，理由如下： [图片] 这个问题开发过程中自己确实遇到过，几率性的，一般第一次不行，第二次肯定可以了，但是不是一开始写小程序就有的，不知道什么时候开始就这样了，验证的逻辑都是按照官方的，从来没有改变过。然后上社区一搜，很多类似的问题，如下图所示。 [图片] 看了下这个问题，第一次验证签名如下： [图片] 小程序端通过wx.login成功后获取的code rawdata，这个我都是同一用户登录，前后信息没啥变化 通过1中的code，后端调用api获得的session data，其中openid肯定同一用户每次也都一样的，session_key如果过期，那么第一次和第二次理论应该是不一样的。（但实际情况前后两次是一致的，具体可参见下图） 小程序端获取到的用户的签名 后端通过session key校验出来的签名。 很明显，4和5不一致，校验失败。接下来是第二次交验： [图片] 还是同样的逻辑顺序。 小程序端通过wx.login成功后获取的code。很明显，code跟第一次是不一样的，另外根据官方文档描述，因为又重新调用了wx.login，会导致session_key过期。（这似乎说明code发生变化也是对的，因为按推测，seesionkey应该也发生了变化，否则怎么叫“被更新”）请看下图官方文档说明：[图片] rawdata，这个我都是同一用户登录，前后信息没啥变化 根据1中的官方描述，奇怪的现象就发生了，在后端根据新的code，获取的session data，很明显session key还是第一次是一样的，也就是说，我重新调用了wx.login, code是变了，但是session key却和第一次保持一致的。 小程序端获取到的用户的签名 后端通过session key校验出来的签名。因为用的是同样的rawdata，同样的session key，所以两次校验的结果是一样的，但是第二次4中，小程序端获取的签名是跟此次校验结果是一致的。 所以问题就来了，这问题到底出在什么地方？似乎官方文档描述的就有问题，还是我本身的逻辑顺序有问题？请官方指教，谢谢。

问题：线上小程序，部分手机打开后，不限授权弹窗，不能执行任何操作，页面白屏，只显示出静态部分，而且CDN的图片也都加载不出来；从用户日志中看到小程序没有执行任何wx的api。 删除小程序，重新搜索，依然是白屏。 <br/> 请问大神们，有遇到过这样的情况吗？ 1. 线上小程序基础版最低版本设置为：1.9.9； 2. 代码内使用了，ES7 async await，上传线上代码是没有勾线ES6转ES5 <br/> 日志： 1. 出现白屏的日志： 2018-11-30 0:47:56 [log] page pages/position/position onLoad have been invoked 2018-11-30 0:47:56 [log] page pages/position/position onShow have been invoked 2018-11-30 0:47:56 [log] page pages/position/position onReady have been invoked 2018-11-30 0:48:3 [log] page pages/position/position onHide have been invoked 2018-11-30 0:48:3 [log] page pages/resume/resume/resume onLoad have been invoked 2018-11-30 0:48:3 [log] page pages/resume/resume/resume onShow have been invoked 2018-11-30 0:48:3 [log] page pages/resume/resume/resume onReady have been invoked 2018-11-30 0:48:4 [log] page pages/resume/resume/resume onHide have been invoked 2018-11-30 0:48:4 [log] page pages/position/position onShow have been invoked 2018-11-30 0:48:9 [log] page pages/position/position onHide have been invoked 2018-11-30 0:48:9 [log] page pages/mine/mine onLoad have been invoked 2018-11-30 0:48:9 [log] page pages/mine/mine onShow have been invoked 2018-11-30 0:48:9 [log] page pages/mine/mine onReady have been invoked 2018-11-30 0:48:11 [log] page pages/mine/mine onHide have been invoked 2018-11-30 0:48:11 [log] page pages/position/position onShow have been invoked 2018-11-30 0:48:20 [log] page pages/position/position onHide have been invoked 2018-11-30 0:48:28 [log] page pages/position/position onShow have been invoked 2018-11-30 0:48:32 [log] page pages/position/position onHide have been invoked 2018-11-30 0:48:32 [log] page pages/resume/resume/resume onShow have been invoked 2018-11-30 0:48:33 [log] page pages/resume/resume/resume onHide have been invoked 2018-11-30 0:48:33 [log] page pages/mine/mine onShow have been invoked 2018-11-30 0:48:36 [log] page pages/mine/mine onHide have been invoked 2. 正常显示的日志： 2018-12-4 12:20:18 [log] wx.getNetworkType api invoke 2018-12-4 12:20:18 [log] wx.getNetworkType success callback with msg getNetworkType:ok 2018-12-4 12:20:18 [log] wx.getSystemInfo api invoke 2018-12-4 12:20:18 [log] wx.getSystemInfo success callback with msg getSystemInfo:ok 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.setStorageSync api invoke 2018-12-4 12:20:18 [log] wx.setStorageSync return 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.setStorageSync api invoke 2018-12-4 12:20:18 [log] wx.setStorageSync return 2018-12-4 12:20:18 [log] wx.setStorageSync api invoke 2018-12-4 12:20:18 [log] wx.setStorageSync return 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.getStorageSync api invoke 2018-12-4 12:20:18 [log] wx.getStorageSync return 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] wx.request api invoke with seq 0 2018-12-4 12:20:18 [log] App onLaunch have been invoked 2018-12-4 12:20:18 [log] App onShow have been invoked 2018-12-4 12:20:18 [log] wx.canIUse api invoke ........ 2018-12-4 12:20:41 [log] wx.request api invoke with seq 0 2018-12-4 12:20:43 [log] wx.request api invoke with seq 0 2018-12-4 12:20:43 [log] wx.navigateTo api invoke 2018-12-4 12:20:43 [log] wx.getStorageSync api invoke 2018-12-4 12:20:43 [log] wx.getStorageSync return 2018-12-4 12:20:43 [log] wx.getStorageSync api invoke 2018-12-4 12:20:43 [log] wx.getStorageSync return 2018-12-4 12:20:43 [log] wx.request api invoke with seq 0 2018-12-4 12:20:43 [log] page pages/login/login onLoad have been invoked 2018-12-4 12:20:43 [log] page pages/login/login onShow have been invoked 2018-12-4 12:20:44 [log] page pages/login/login onReady have been invoked 截图： [图片] [图片]

只有我自己的开发账号才能支付，请问是什么问题？

视频流测试的地址是:http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8 在苹果手机中,video组件无法播放视频,在安卓手机上可以

- 需求的场景描述（希望解决的问题） 和微博小程序一样，在评论微博文章时，手机键盘弹起，评论框会和手机键盘完美挨着 如图： [图片] *******************************************图片分割线 [图片] - 希望提供的能力

页面请求接口后，直接就走到了接口条用失败的函数，所有页面都一样，只要是请求接口就调用接口失败 [图片]