[视频] [图片] 安卓手机点击输入框，弹出键盘的一瞬间会出现上个页面的内容，性能差的手机比较明显

[图片] textarea标签设置了fixed 吸底，点击软键盘弹出的时候 在键盘与 标签之间 出现了 上个页面的内容 ，！！！！是上个页面的 不上当前页的内容！！

复现问题的步骤如下： 步骤1：将输入框设置为了定位在手机最下面（fixed，bottom:0）,这样做当输入框聚焦时弹出键盘，键盘把输入框向上推，视觉上输入框与键盘紧挨着 步骤2：切换键盘的输入方式，比如由拼音切换为手写，或者半手写或者笔画等等，这样切换的目的是 键盘的高度在不同的输入方式下不一样高（拼音的很高，但是半手写的比较矮），这时候可能会复现出现两个问题了；1，如果当前页面是有上一个页面路由跳转之后的页面，那么键盘由拼音切换到半手写，高度变化差的位置透视出了上一个页面相同位置上的内容；2：键盘高度变高之后，可能遮挡住了输入框，没有自动把输入框往上推 步骤3：如果步骤二未复现问题，那么把键盘隐退（再次点击输入框，弹出键盘，键盘的输入方式会记住上一次切换的最后结果；比如上一次将键盘输入方式切换为手写），再次点击输入框，弹出键盘，然后在切换键盘的输入方式（拼音/手写/笔画等等），就会复现 [图片][图片][图片][图片] 备注：我试了将输入框 正常放在页面的顶端位置，键盘弹出即使再切换输入方式，也不会出现透出上一页面内容的问题；

[图片]

把input的cursor-spacing值设置大一点，部分手机（目前vivo xplay5,华为）能看到上个页面内容。[图片]

以下代码不一定都是本人原创，很多都是借鉴参考的（模仿是第一生产力嘛），有些已忘记出处了。以下分享给大家，供学习参考！欢迎收藏补充，说不定哪天你就用上了！ 一、第一种效果 [图片] [代码]//index.wxml <view class="zr"> <view class='user_box'> <view class='userInfo'> <open-data type="userAvatarUrl"></open-data> </view> <view class='userInfo_name'> <open-data type="userNickName"></open-data> , 欢迎您 </view> </view> <view class="water"> <view class="water-c"> <view class="water-1"> </view> <view class="water-2"> </view> </view> </view> </view> //index.wxss .zr { color: white; background: #4cb4e7; /*#0396FF*/ width: 100%; height: 100px; position: relative; } .water { position: absolute; left: 0; bottom: -10px; height: 30px; width: 100%; z-index: 1; } .water-c { position: relative; } .water-1 { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-1 3.5s infinite linear; animation: wave-animation-1 3.5s infinite linear; } .water-2 { top: 5px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlkPSJQYXRoLTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-2 6s infinite linear; animation: wave-animation-2 6s infinite linear; } .water-1, .water-2 { position: absolute; width: 100%; height: 60px; } .back-white { background: #fff; } @keyframes wave-animation-1 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } @keyframes wave-animation-2 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } .user_box { display: flex; z-index: 10000 !important; opacity: 0; /* 透明度*/ animation: love 1.5s ease-in-out; animation-fill-mode: forwards; } .userInfo_name { flex: 1; vertical-align: middle; width: 100%; margin-left: 5%; margin-top: 5%; font-size: 42rpx; } .userInfo { flex: 1; width: 100%; border-radius: 50%; overflow: hidden; max-height: 50px; max-width: 50px; margin-left: 5%; margin-top: 5%; border: 2px solid #fff; } [代码] 二、第二种效果 [图片] [代码]//index.wxml <view class="waveWrapper waveAnimation"> <view class="waveWrapperInner bgTop"> <view class="wave waveTop" style="background-image: url('https://s2.ax1x.com/2019/09/26/um8g7n.png')"></view> </view> <view class="waveWrapperInner bgMiddle"> <view class="wave waveMiddle" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGZ38.png')"></view> </view> <view class="waveWrapperInner bgBottom"> <view class="wave waveBottom" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGuuQ.png')"></view> </view> </view> //index.wxss .waveWrapper { overflow: hidden; position: absolute; left: 0; right: 0; height: 300px; top: 0; margin: auto; } .waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 100%; bottom: -1px; background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); } .bgTop { z-index: 15; opacity: 0.5; } .bgMiddle { z-index: 10; opacity: 0.75; } .bgBottom { z-index: 5; } .wave { position: absolute; left: 0; width: 500%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; } .waveTop { background-size: 50% 100px; } .waveAnimation .waveTop { animation: move-wave 3s; -webkit-animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s; } .waveMiddle { background-size: 50% 120px; } .waveAnimation .waveMiddle { animation: move_wave 10s linear infinite; } .waveBottom { background-size: 50% 100px; } .waveAnimation .waveBottom { animation: move_wave 15s linear infinite; } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } } [代码] 三、第三种效果 [图片] [代码]//index.wxml <view class="container"> <image class="title" src="https://ftp.bmp.ovh/imgs/2019/09/74bada9c4143786a.png"></image> <view class="content"> <view class="hd" style="transform:rotateZ({{angle}}deg);"> <image class="logo" src="https://ftp.bmp.ovh/imgs/2019/09/d31b8fcf19ee48dc.png"></image> <image class="wave" src="wave.png" mode="aspectFill"></image> <image class="wave wave-bg" src="wave.png" mode="aspectFill"></image> </view> <view class="bd" style="height: 100rpx;"> </view> </view> </view> //index.wxss image{ max-width:none; } .container { background: #7acfa6; align-items: stretch; padding: 0; height: 100%; overflow: hidden; } .content{ flex: 1; display: flex; position: relative; z-index: 10; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; height: 100%; padding-bottom: 450rpx; background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); opacity: 0; transform: translate3d(0,100%,0); animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards; } @keyframes rise{ 0% {opacity: 0;transform: translate3d(0,100%,0);} 50% {opacity: 1;} 100% {opacity: 1;transform: translate3d(0,450rpx,0);} } .title{ position: absolute; top: 30rpx; left: 50%; width: 600rpx; height: 200rpx; margin-left: -300rpx; opacity: 0; animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards; } @keyframes show{ 0% {opacity: 0;} 100% {opacity: .95;} } .hd { position: absolute; top: 0; left: 50%; width: 1000rpx; margin-left: -500rpx; height: 200rpx; transition: all .35s ease; } .logo { position: absolute; z-index: 2; left: 50%; bottom: 200rpx; width: 160rpx; height: 160rpx; margin-left: -80rpx; border-radius: 160rpx; animation: sway 10s ease-in-out infinite; opacity: .95; } @keyframes sway{ 0% {transform: translate3d(0,20rpx,0) rotate(-15deg); } 17% {transform: translate3d(0,0rpx,0) rotate(25deg); } 34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); } 50% {transform: translate3d(0,-10rpx,0) rotate(15deg); } 67% {transform: translate3d(0,10rpx,0) rotate(-25deg); } 84% {transform: translate3d(0,15rpx,0) rotate(15deg); } 100% {transform: translate3d(0,20rpx,0) rotate(-15deg); } } .wave { position: absolute; z-index: 3; right: 0; bottom: 0; opacity: 0.725; height: 260rpx; width: 2250rpx; animation: wave 10s linear infinite; } .wave-bg { z-index: 1; animation: wave-bg 10.25s linear infinite; } @keyframes wave{ from {transform: translate3d(125rpx,0,0);} to {transform: translate3d(1125rpx,0,0);} } @keyframes wave-bg{ from {transform: translate3d(375rpx,0,0);} to {transform: translate3d(1375rpx,0,0);} } .bd { position: relative; flex: 1; display: flex; flex-direction: column; align-items: stretch; animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards; opacity: 0; } @keyframes bd-rise{ from {opacity: 0; transform: translate3d(0,60rpx,0); } to {opacity: 1; transform: translate3d(0,0,0); } } [代码] wave.png（可下载到本地） [图片] 在这个基础上，再加上js的代码，即可实现根据手机倾向，水波晃动的效果 wx.onAccelerometerChange(function callback) 监听加速度数据事件。 [图片] [代码]//index.js Page({ onReady: function () { var _this = this; wx.onAccelerometerChange(function (res) { var angle = -(res.x * 30).toFixed(1); if (angle > 14) { angle = 14; } else if (angle < -14) { angle = -14; } if (_this.data.angle !== angle) { _this.setData({ angle: angle }); } }); }, }); [代码] 四、第四种效果 [图片] [代码]//index.wxml <view class='page__bd'> <view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;"> <view class="cu-bar"> <view class="content text-bold text-white"> 悦拍屋 </view> </view> </view> <view class="shadow-blur"> <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image> </view> </view> //index.wxss @import "colorui.wxss"; .gif-black { display: block; border: none; mix-blend-mode: screen; } [代码] 本效果需要引入ColorUI组件库

wx.getLocation(Object object)这个API，之前发帖问过，解释是返回的缓存数据， 但一直有用户反馈，获取位置时，返回的不准，有的用户是20公里外的位置(用户开车经过)，有点无法接受了， 获取当前位置，已经加了权限，用户也同意了，为什么不能返回实时位置呢？ 费电？用户需要这个功能，费电用户是接受的，我和很多用户沟通过，不然都不会用这个功能。 之前官方说要上onLocationChange的API，还能有希望吗？迫切需要..... 还原用户质询： 用户：你看，这个位置离我20公里、那个位置离我30公里... 我：微信有缓存，实在没办法，不好意思耽误您使用了，请尝试多点几次重新定位 用户：点了好几次了，还是这样啊... 我：.....

VM5956:1 Failed to load local image resource，图片显示正常，但是在控制面板中会有报错，求解！！！[图片]

因为 image 控件的图片拉取本质上是 web 上的 backgroundImage，很多时候是由于图片不规范(content-type / length / 是否302跳转等 )导致拉取不成功，最终表现为加载不出图片。关于这一块我们在持续优化中

textarea自带的表情键盘消失了，之前弹出键盘与完成在同一栏的表情按钮，突然发现都不见了，请问一下是微信改版了，还是其他什么问题啊

小程序开发中需要在内容中添加表情符，然后保存到数据库

- 需求的场景描述（希望解决的问题） 在开发者工具可以显示商品，但在手机预览的时候却没有，数据都是通过https的，域名信息也配置了，不检验合法域名也关闭了，没有报错，但就是在手机上预览商品的时候直接不显示wx:for的模块或者就是全部白屏，啥都不显示     手机打开调试器显示dom limit exceeded,please check if there's any mistake you've made.（超过dom限制，请检查是否有错误。），我看本地代码才358kb啊 - 希望提供的能力 求前辈指点一下！！！！急，懵逼的我毫无头绪[图片] [图片] [图片] [图片]

rich-text如何控制nodes里面img标签的宽度，对外层设置宽度p标签有效，但img标签无效

- [代码]<official-account></official-account>[代码]

<rich-text>富文本组件，如果我的富文本中包含了<img>标签，怎么控制图片大小，目前设置css没有作用

小程序支持webview以后，我们开发的好多h5页面，就可以直接在小程序里使用了，比如我们开发的微信商城，文章详情页，商品详情页，就可以开发一套，多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。 老规矩先看效果。 因为这里涉及的东西比较多，录gif太多，没法上传，我就录制了一段视频出来。 https://v.qq.com/x/page/t0913iprnay.html 原理 先说下实现原理吧，实现原理就是我们在webview的h5页面里实现下单功能，然后点击支付按钮，我们点击支付按钮的时候会跳转到小程序页面，把订单号，订单总金额，传递到小程序里，然后小程序里使用订单号和订单金额去调起微信支付，实现付款，付款成功或者失败时都会有回调。我们再把对应的回调传递给webview，刷新webview里的订单和支付状态。 一，定义webview显示h5页面 关于webview的使用，我就不做讲解了，官方文档里写的很清楚，用起来也很简单。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html [图片] webview很简单，就是用一个webview组件，显示我们的网页。 二，定义h5页面 我这里启动一个本地服务器，用来展示一个简单的h5页面。 [图片] 上图是我在浏览器里显示的效果。 接下来我们在小程序的webview里显示这个页面，也很简单，只需要把我们的src定义为我们的本地网页链接就可以了。 [图片] 这里有一点需要注意 因为我们是本地链接，我们需要到开发者工具里把这一项给勾选。 [图片] 三，来看下h5页面代码 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小程序内嵌webview</title> <style> .btn { font-size: 70px; color: red; } </style> </head> <body> <h1>我是webview里的h5页面</h1> <a id="desc" class="btn" onclick="jumpPay()">点击支付</a> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> console.log(location.href); let payOk = getQueryVariable("payOk"); console.log("payOk", payOk) if(payOk){//支付成功 document.getElementById('desc').innerText="支持成功" document.getElementById('desc').style.color="green" }else{ document.getElementById('desc').innerText="点击支付" } //获取url里携带的参数 function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } function jumpPay() { let orderId = Date.now();//这里用当前时间戳做订单号（后面使用你自己真实的订单号） let money = 1;//订单总金额（单位分） let payData = {orderId: orderId, money: money}; let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序，所以这里需要转为字符串 const url = `../wePay/wePay?payDataStr=${payDataStr}`; wx.miniProgram.navigateTo({ url: url }); // console.log("点击了去支付", url) console.log("点击了去支付") } </script> </body> </html> [代码] h5代码这里不做具体讲解，只简单说下。我们就是在点击支付按钮时，用当前时间戳做为订单号（因为订单号要保证唯一），然后传一个订单金额（单位分），这里节约起见，就传1分钱吧，花的是自己的钱，心疼。。。。 关键点说一下 1， 必须引入jweixin，才可以实现h5跳转小程序。 <script type=“text/javascript” src=“https://res.wx.qq.com/open/js/jweixin-1.3.2.js”></script> 2，跳转到小程序页面的方法 [代码]const url = `../wePay/wePay?payDataStr=${payDataStr}`; wx.miniProgram.navigateTo({ url: url }); [代码] 这里要和你小程序的页面保持一致。payDataStr是我们携带的参数 [图片] 四，小程序支付页 来看下我们的小程序支付页 [图片] 小程序支付页功能很简单，就是来接收我们h5传过订单号和订单金额。然后去调起微信支付，实现支付。支付成功和支付失败都有对应的回调。 [图片] 支付我们这里实用的小程序云开发来实现的支付，核心代码只有10行。由于支付不是本节的重点，所以这里不做具体讲解。感兴趣的同学可以去看我写的文章和我录的视频 小程序支付文章：https://www.jianshu.com/p/2b391df055a9 小程序支付视频：https://edu.csdn.net/course/play/25701/310742 下面把小程序接收参数和支付的完整代码贴出来给大家 [代码]Page({ //h5传过来的参数 onLoad: function(options) { console.log("webview传过来的参数", options) //字符串转对象 let payData = JSON.parse(options.payDataStr) console.log("orderId", payData.orderId) let that = this; wx.cloud.callFunction({ name: "pay", data: { orderId: payData.orderId, money: payData.money }, success(res) { console.log("获取成功", res) that.goPay(res.result); }, fail(err) { console.log("获取失败", err) } }) }, //微信支付 goPay(payData) { wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, signType: 'MD5', paySign: payData.paySign, success(res) { console.log("支付成功", res) //你可以在这里支付成功以后，再跳会webview页，并把支付成功状态传回去 wx.navigateTo({ url: '../webview/webview?payOk=true', }) }, fail(res) { console.log("支付失败", res) } }) } }) [代码] 代码里注释很清楚，这里有一点，就是我们支付成功后，需要告诉h5我们支付成功了，通知h5去刷新订单或者支付状态。 到这里我们就完整的实现了小程序webview展示h5页面，并且做到了h5和小程序的交互，实现了小程序webview的支付功能。 是不是很简单呢。 源码地址 1，关注“编程小石头”公号，回复“webview”即可获取源码 2，也可以到我github下载源码 https://github.com/qiushi123/xiaochengxu_demos [图片]

我这边目前有个公众号的页面模板： https://mp.weixin.qq.com/mp/homepage?__biz=MzU1Nzg5MDE0Ng==&hid=1&sn=5bab9c3d89fbe22e546a8526375d101c 希望能够在webview上面展现出来，但目前一直会提示：不支持打开非业务域名，请重新配置。 [图片] 目前官方是支持打开图文消息，所以请问官方webview何时能支持配置页面模板呢，这样公众号跟小程序也能有更好的兼容。

小程序要解析富文本数据，后端返回的是<p><span style="color: rgb(255, 192, 0);"><strong>活动奖励</strong></span></p>这样的，前端是否能通过rich-text接管样式，还是需要引入wxParse

- 从后台查出来的富文本数据，使用 rich-text 进行展示时，其中的图片过大，超出屏幕。 该数据因为要适应PC段和手机APP和微信小程序，图片大小不能在编辑时进行设置，要在不同的终端进行不同的大小设置。 [图片] - 能够提供对图片大小的配置

从后台查出来的富文本数据，使用 rich-text 进行展示时，其中的图片过大，超出屏幕。 [图片] [图片] [图片] 真的是一点效果都没有，我都要急疯了，大佬们救救我把，

前言 在开发小程序的过程中，很多时候会需要使用富文本内容，然而现有的方案都有着或多或少的缺陷，如何更好的显示富文本将是一个值得继续探索的问题。 [图片] 现有方案 WxParse [代码]WxParse[代码] 作为一个应用最为应用最广泛的富文本插件，在很多时候是大家的首选，但其也明显的存在许多问题。 格式不正确时标签会被原样显示 很多人可能都见到过这种情况，当标签里的内容出现格式上的错误（如冒号不匹配等），在[代码]WxParse[代码]中都会被认为是文本内容而原样输出，例如：[代码]<span style="font-family:"宋体"">Hello World!</span> [代码] 这是由于[代码]WxParse[代码]的解析脚本中，是通过正则匹配的方式进行解析，一旦格式不正确，就将导致无法匹配而被直接认为是文本[代码]//WxParse的匹配模式 var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/, endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/, attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; [代码] 然而，[代码]html[代码] 对于格式的要求并不严格，一些诸如冒号不匹配之类的问题是可以被浏览器接受的，因此需要在解析脚本的层面上提高容错性。 超过限定层数时无法显示 这也是一个让许多人十分苦恼的问题，[代码]WxParse[代码] 通过 [代码]template[代码] 迭代的方式进行显示，当节点的层数大于设定的 [代码]template[代码] 数时就会无法显示，自行增加过多的层数又会大大增加空间大小，因此对于 [代码]wxml[代码] 的渲染方式也需要改进。 对于表格、列表等复杂内容支持性差 [代码]WxParse[代码] 对于 [代码]table[代码]、[代码]ol[代码]、[代码]ul[代码] 等支持性较差，类似于表格单元格合并，有序列表，多层列表等都无法渲染 rich-text [代码]rich-text[代码] 组件作为官方的富文本组件，也是很多人选择的方案，但也存在着一些不足之处 一些常用标签不支持 [代码]rich-text[代码] 支持的标签较少，一些常用的标签（比如 [代码]section[代码]）等都不支持，导致其很难直接用于显示富文本内容 ps：最新的 2.7.1 基础库已经增加支持了许多语义化标签，但还是要考虑低版本兼容问题 不能实现图片和链接的点击 [代码]rich-text[代码] 组件中会屏蔽所有结点事件，这导致无法实现图片点击预览，链接点击效果等操作，较影响体验 不支持音视频 音频和视频作为富文本的重要内容，在 [代码]rich-text[代码] 中却不被支持，这也严重影响了使用体验 共同问题 不支持解析 [代码]style[代码] 标签 现有的方案中都不支持对 [代码]style[代码] 标签中的内容进行解析和匹配，这将导致一些标签样式的不正确 [图片] 方案构建 因此要解决上述问题，就得构建一个新的方案来实现 渲染方式 对于该节点下没有图片、视频、链接等的，直接使用 [代码]rich-text[代码] 显示（可以减少标签数，提高渲染效果），否则则继续进行深入迭代，例如： [图片] 对于迭代的方式，有以下两种方案： 方案一 像 [代码]WxParse[代码] 那样通过 [代码]template[代码] 进行迭代，对于小于 20 层的内容，通过 [代码]template[代码] 迭代的方式进行显示，超过 20 层时，用 [代码]rich-text[代码] 组件兜底，避免无法显示，这也是一开始采用的方案[代码]<!--超过20层直接使用rich-text--> <template name='rich-text-floor20'> <block wx:for='{{nodes}}' wx:key> <rich-text nodes="{{item}}" /> </block> </template> [代码] 方案二 添加一个辅助组件 [代码]trees[代码]，通过组件递归的方式显示，该方式实现了没有层数的限制，且避免了多个重复性的 [代码]template[代码] 占用空间，也是最终采取的方案[代码]<!--继续递归--> <trees wx:else id="node" class="{{item.name}}" style="{{item.attrs.style}}" nodes="{{item.children}}" controls="{{controls}}" /> [代码] 解析脚本 从 [代码]htmlparser2[代码] 包进行改写，其通过状态机的方式取代了正则匹配，有效的解决了容错性问题，且大大提升了解析效率 [代码]//不同状态各通过一个函数进行判断和状态跳转 for (; this._index < this._buffer.length; this._index++) this[this._state](this._buffer[this._index]); [代码] 兼容 [代码]rich-text[代码] 为了解析结果能同时在 [代码]rich-text[代码] 组件上显示，需要对一些 [代码]rich-text[代码]不支持的组件进行转换[代码]//以u标签为例 case 'u': name = 'span'; attrs.style = 'text-decoration:underline;' + attrs.style; break; [代码] 适配渲染需要 在渲染过程中，需要对节点下含有图片、视频、链接等不能由 [代码]rich-text[代码]直接显示的节点继续迭代，否则直接使用 [代码]rich-text[代码] 组件显示；因此需要在解析过程中进行标记，遇到 [代码]img[代码]、[代码]video[代码]、[代码]a[代码] 等标签时，对其所有上级节点设置一个 [代码]continue[代码] 属性用于区分[代码]case 'a': attrs.style = 'color:#366092;display:inline;word-break:break-all;overflow:auto;' + attrs.style; element.continue = true; //冒泡：对上级节点设置continue属性 this._bubbling(); break; [代码] 处理style标签 解析方式 方案一 正则匹配[代码]var classes = style.match(/[^\{\}]+?\{([^\{\}]*?({[\s\S]*?})*)*?\}/g); [代码] 缺陷： 当 [代码]style[代码] 字符串较长时，可能出现栈溢出的问题 对于一些复杂的情况，可能出现匹配失败的问题 方案二 状态机的方式，类似于 [代码]html[代码] 字符串的处理方式，对于 [代码]css[代码] 的规则进行了调整和适配，也是目前采取的方案 匹配方式 方案一 将 [代码]style[代码] 标签解析为一个形如 [代码]{key:content}[代码] 的结构体，对于每个标签，通过访问结构体的相应属性即可知晓是否匹配成功[代码]if (this._style[name]) attrs.style += (';' + this._style[name]); if (this._style['.' + attrs.class]) attrs.style += (';' + this._style['.' + attrs.class]); if (this._style['#' + attrs.id]) attrs.style += (';' + this._style['#' + attrs.id]); [代码] 优点：匹配效率高，适合前端对于时间和空间的要求 缺点：对于多层选择器等复杂情况无法处理 因此在前端组件包中采取的是这种方式进行匹配 方案二 将 [代码]style[代码] 标签解析为一个数组，每个元素是形如 [代码]{key,list,content,index}[代码] 的结构体，主要用于多层选择器的匹配，内置了一个数组 [代码]list[代码] 存储各个层级的选择器，[代码]index[代码] 用于记录当前的层数，匹配成功时，[代码]index++[代码]，匹配成功的标签出栈时，[代码]index--[代码]；通过这样的方式可以匹配多层选择器等更加复杂的情况，但匹配过程比起方案一要复杂的多。 [图片] 遇到的问题 [代码]rich-text[代码] 组件整体的显示问题 在显示过程中，需要把 [代码]rich-text[代码] 作为整体的一部分，在一些情况下会出现问题，例如： [代码]Hello <rich-text nodes="<div style='display:inline-block'>World!</div>"/> [代码] 在这种情况下，虽然对 [代码]rich-text[代码] 中的顶层 [代码]div[代码] 设置了 [代码]display:inline-block[代码]，但没有对 [代码]rich-text[代码] 本身进行设置的情况下，无法实现行内元素的效果，类似的还有 [代码]float[代码]、[代码]width[代码](设置为百分比时)等情况 解决方案 方案一 用一个 [代码]view[代码] 包裹在 [代码]rich-text[代码] 外面，替代最外层的标签[代码]<view style="{{item.attrs.style}}"> <rich-text nodes="{{item.children}}" /> </view> [代码] 缺陷：当该标签为 [代码]table[代码]、[代码]ol[代码] 等功能性标签时，会导致错误 方案二 对 [代码]rich-text[代码] 组件使用最外层标签的样式[代码]<rich-text nodes="{{item}}" style="{{item.attrs.style}}" /> [代码] 缺陷：当该标签的 [代码]style[代码] 中含有 [代码]margin[代码]、[代码]padding[代码] 等内容时会被缩进两次 方案三 通过 [代码]wxs[代码] 脚本将顶层标签的 [代码]display[代码]、[代码]float[代码]、[代码]width[代码] 等样式提取出来放在 [代码]rich-text[代码] 组件的 [代码]style[代码] 中，最终解决了这个问题[代码]var res = ""; var reg = getRegExp("float\s*:\s*[^;]*", "i"); if (reg.test(style)) res += reg.exec(style)[0]; reg = getRegExp("display\s*:\s*([^;]*)", "i"); if (reg.test(style)) { var info = reg.exec(style); res += (';' + info[0]); display = info[1]; } else res += (';display:' + display); reg = getRegExp("[^;\s]*width\s*:\s*[^;]*", "ig"); var width = reg.exec(style); while (width) { res += (';' + width[0]); width = reg.exec(style); } return res; [代码] 图片显示的问题 在 [代码]html[代码] 中，若 [代码]img[代码] 标签没有设置宽高，则会按照原大小显示；设置了宽或高，则按比例进行缩放；同时设置了宽高，则按设置的宽高进行显示；在小程序中，若通过 [代码]image[代码] 组件模拟，需要通过 [代码]bindload[代码] 来获取图片宽高，再进行 [代码]setData[代码]，当图片数量较大时，会大大降低性能；另外，许多图片的宽度会超出屏幕宽度，需要加以限制 解决方案 用 [代码]rich-text[代码] 中的 [代码]img[代码] 替代 [代码]image[代码] 组件，实现更加贴近 [代码]html[代码] 的方式 ；对 [代码]img[代码] 组件设置默认的效果 [代码]max-width:100%;[代码] 视频显示的问题 当一个页面出现过多的视频时，同时进行加载可能导致页面卡死 解决方案 在解析过程中进行计数，若视频数量超过3个，则用一个 [代码]wxss[代码] 绘制的图片替代 [代码]video[代码] 组件，当受到点击时，再切换到 [代码]video[代码] 组件并设置 [代码]autoplay[代码] 以模拟正常效果，实现了一个类似懒加载的功能 [代码]<!--视频--> <view wx:if="{{item.attrs.id>'media3'&&!controls[item.attrs.id].play}}" class="video" data-id="{{item.attrs.id}}" bindtap="_loadVideo"> <view class="triangle_border_right"></view> </view> <video wx:else src='{{controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index]:item.attrs.src}}' id="{{item.attrs.id}}" autoplay="{{item.attrs.autoplay||controls[item.attrs.id].play}}" /> [代码] 文本复制的问题 小程序中只有 [代码]text[代码] 组件可以通过设置 [代码]selectable[代码] 属性来实现长按复制，在富文本组件中实现这一功能就存在困难 解决方案 在顶层标签上加上 [代码]user-select:text;-webkit-user-select[代码] [图片] 实现更加丰富的功能 在此基础上，还可以实现更多有用的功能 自动设置页面标题 在浏览器中，会将 [代码]title[代码] 标签中的内容设置到页面标题上，在小程序中也同样可以实现这样的功能[代码]if (res.title) { wx.setNavigationBarTitle({ title: res.title }) } [代码] 多资源加载 由于平台差异，一些媒体文件在不同平台可能兼容性有差异，在浏览器中，可以通过 [代码]source[代码] 标签设置多个源，当一个源加载失败时，用下一个源进行加载和播放，在本插件中同样可以实现这样的功能[代码]errorEvent(e) { //尝试加载其他源 if (!this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > 1) { this.data.controls[e.currentTarget.dataset.id] = { play: false, index: 1 } } else if (this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > (this.data.controls[e.currentTarget.dataset.id].index + 1)) { this.data.controls[e.currentTarget.dataset.id].index++; } this.setData({ controls: this.data.controls }) this.triggerEvent('error', { target: e.currentTarget, message: e.detail.errMsg }, { bubbles: true, composed: true }); }, [代码] 添加加载提示 可以在组件的插槽中放入加载提示信息或动画，在加载完成后会将 [代码]slot[代码] 的内容渐隐，将富文本内容渐显，提高用户体验，避免在加载过程中一片空白。 最终效果 经过一个多月的改进，目前实现了这个功能丰富，无层数限制，渲染效果好，轻量化（30.0KB），效率高，前后端通用的富文本插件，体验小程序的用户数已经突破1k啦，欢迎使用和体验 [图片] github 地址 npm 地址 总结 以上就是我在开发这样一个富文本插件的过程大致介绍，希望对大家有所帮助；本人在校学生，水平所限，不足之处欢迎提意见啦！ [图片]

mp-html小程序富文本组件 news欢迎加入 QQ 交流群：699734691示例小程序添加获取组件包功能[图片] 功能介绍 支持在多个平台使用 支持丰富的标签（包括 table、video、svg 等） 支持丰富的事件效果（自动预览图片、链接处理等） 支持锚点跳转、长按复制等丰富功能 支持大部分 html 实体 丰富的插件（关键词搜索、内容编辑等） 效率高、容错性强且轻量化使用方法1. npm 方式 在项目根目录下执行 npm install mp-html 开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件中添加 <mp-html content="{{html}}" /> 在需要使用页面的 js 文件中添加 Page({ onLoad() { this.setData({ html: 'Hello World!'   })  } }) 2. 源码方式 将源码中的代码包（dist/mp-weixin）拷贝到 components 目录下，更名为 mp-html 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "/components/mp-html/index" } } 后续步骤同上 获取github 链接：https://github.com/jin-yufeng/mp-html npm 链接：https://www.npmjs.com/package/mp-html 文档链接：https://jin-yufeng.gitee.io/mp-html

请问，我用那个wxParse插件处理小程序解析html的时候报wxDiscode.strDiscode is not a function这是为什么呀？

[图片] 当用户点了拒绝后，再次发起事件的时候，为什么不会重新弹窗授权？

小程序开发另类小技巧 --用户授权篇 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环境上进行开发的，希望小程序的社区环境更加活跃，带来更多有趣的东西

- 当前 Bug 的表现（可附上截图） - 预期表现 - 复现路径 - 提供一个最简复现 Demo wx.showModal({ title: "提示", content: "是否申请？", success: function(s) {     console.log('111111111); } })

小程序顶部banner图在模拟环境中没有问题，但是发布之后，在真机中就一直抖动，如下图 [图片] <scroll-view style="width:100%;height:100%" scroll-y="true" bindscroll="scrollTopFun" scroll-with-animation="true" scroll-top="{{scrollTop}}"> <view class="page-section page-section-spacing" bindtap="goJnh"> <swiper  class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px" bindchange='bindchange' current="{{current}}" style="height:{{imgheights[current]}}rpx;"> <block wx:for="{{background}}" wx:key="*this"> <swiper-item> <image mode="widthFix" src="{{item}}" bindload="imageLoad" data-index='{{index}}' class="slide-image" width="355" height="200" /> </swiper-item> </block> </swiper> <text class="banner-text">国家AAAA级景区———金牛湖旅游度假区</text> </view>

[代码]<[代码][代码]swiper[代码]  [代码]class[代码][代码]=[代码][代码]'swiper-box'[代码] [代码]bindchange[代码][代码]=[代码][代码]"swiperChange"[代码] [代码]wx:if[代码][代码]=[代码][代码]"{{listData.style.template_style == 2}}"[代码] [代码]class[代码][代码]=[代码][代码]'lunbo'[代码] [代码]autoplay[代码][代码]=[代码][代码]'{{true}}'[代码] [代码]interval[代码][代码]=[代码][代码]'{{interval}}'[代码] [代码]indicator-dots[代码][代码]=[代码][代码]'{{listData.style.indicator == "style2"?true:false}}'[代码] [代码]circular[代码][代码]=[代码][代码]"{{true}}"[代码] [代码]indicator-color[代码][代码]=[代码][代码]"rgba(131,145,165,0.4)"[代码] [代码]indicator-active-color[代码][代码]=[代码][代码]"#8391a5"[代码] [代码]style[代码][代码]=[代码][代码]'height:{{lunboHeight}};padding:0 {{listData.style.pmargin}}px;'[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]swiper-item[代码] [代码]class[代码][代码]=[代码][代码]"swiper-item {{img_angle}}"[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{listData.data}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]"{{index}}"[代码] [代码]wx:for-item[代码][代码]=[代码][代码]"item"[代码][代码]>[代码][代码]        [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'swiper-img image-item {{img_style}} {{img_angle}}'[代码] [代码]bindtap[代码][代码]=[代码][代码]"gotoBannerDetail"[代码] [代码]data-url[代码][代码]=[代码][代码]"{{item.link_addr}}"[代码] [代码]style[代码][代码]=[代码][代码]"background-image:url({{item.imgurl}});background-size:{{listData.style.fill}};"[代码][代码]>[代码][代码]          [代码][代码]<[代码][代码]image[代码] [代码]class[代码][代码]=[代码][代码]'swiper-img-item'[代码] [代码]bindload[代码][代码]=[代码][代码]'changeHeight'[代码] [代码]mode[代码][代码]=[代码][代码]'widthFix'[代码] [代码]style[代码][代码]=[代码][代码]'width:100%;'[代码] [代码]src[代码][代码]=[代码][代码]'{{item.imgurl}}'[代码][代码]></[代码][代码]image[代码][代码]>[代码][代码]          [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'swiper-text {{text_angle}}'[代码] [代码]wx:if[代码][代码]=[代码][代码]"{{item.name != ''}}"[代码][代码]>{{item.name}}</[代码][代码]view[代码][代码]>[代码][代码]        [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]      [代码][代码]</[代码][代码]swiper-item[代码][代码]>[代码][代码]    [代码][代码]</[代码][代码]swiper[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]view[代码] [代码]wx:if[代码][代码]=[代码][代码]"{{listData.style.indicator == 'style1' && listData.style.template_style == 2}}"[代码] [代码]class[代码][代码]=[代码][代码]"dots"[代码] [代码]style[代码][代码]=[代码][代码]'padding:0 {{listData.style.pmargin}}px;'[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]block[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{listData.data}}"[代码] [代码]wx:for-index[代码][代码]=[代码][代码]"dotIndex"[代码] [代码]wx:key[代码][代码]=[代码][代码]"{{dotIndex}}"[代码][代码]>[代码][代码]        [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"dot {{dotIndex == swiperCurrent?'actives':''}}"[代码][代码]></[代码][代码]view[代码][代码]>[代码][代码]      [代码][代码]</[代码][代码]block[代码][代码]>[代码][代码]    [代码][代码]</[代码][代码]view[代码][代码]>[代码]- 当前 Bug 的表现（可附上截图） 手机端一开始进去页面轮播正常，退出来再进去就一直左右抖动，我这边的指示器是自定义的，所以不管用户是否操作都要改current，已经有人提过这个问题了，但没有得到具体的解决办法，是只要判断那个source就行了吗,touch和autoplay都要操作current - 预期表现 轮播正常，不抖动 - 复现路径 - 提供一个最简复现 Demo

- 当前 Bug 的表现（可附上截图） 和官方文档里的极端案例差不多，差别在于这个情况下triggerEvent直接失效。用官方的nextTrick可以解决bug。 [图片]

- 想在小程序上做个好友排行，但是翻了下文档没看到这方面的接口，在网上查阅了下这方面的问题貌似是说小游戏才有这方面的接口，不知道近期小程序的更新有开放这类接口了么 - 获取好友信息

最近在做一款答题类的小游戏，应该选择小游戏开发还是小程序开发？？？？

我问的是小程序，不是小游戏，请各位大大看清楚。。谢谢各位解答了先

请教：我看文档里都是小游戏的，小程序可以使用下面的接口吗？ wx.setUserCloudStorage wx.getFriendCloudStorage

现有一需求功能，用户成功分享一次，可获取一定的积分数额。改变后，没法获取success后的数据。有没有大佬帮帮忙想想方法

七月份发布的分享调整公告说微信版本6.7.2将会对分享功能做调整。现在8月30号，安卓、IOS版本也都升到6.7.2了，为何还可以使用微信分享成功回调？ 我司很早就对分享部分做了相应调整，搞得现在很尴尬。 [图片]

小程序 font-family 设置自定义字体 现在 模拟器里有 设置字体成功[图片] 但在真机上无效 [图片] 请问是什么原因？是小程序不支持还是代码问题？ wx.loadFontFace({ family: 'webfont', source: 'url("../../DINCond-Regular.otf")', success(e){ console.log(e) }, fail(e){ console.log(e) } })