暂不支持

萌新求助，是否可以将B站src嵌入到小程序视频组件中，直接从小程序端点击进行播放？ 请问如何操作，感谢！

你好， 视频号中的视频链接地址复制后， 经测试在浏览器中可以正常播放。想确认一下，这个视频链接地址可以小程序中正常打开播放吗？

[图片] 老版本的订阅消息在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生成海报（二）

[图片] 首先，根据官网文档可以知道 只有非个人 的小程序才可以使用web-view组件，如果你的个人开发者，可以跳过这篇文章。 [图片] 一、使用web-view以及它的好处 1、己方账号（第三方）与小程序openId/UnionId的关联绑定，实现免登陆 比如你是某门户网站S，你要识别自己小程序上的用户与网站用户的关系，你可以通过三种方法绑定关系，公众号，小程序源生，小程序web-view内嵌跳转三种方法 2、内嵌H5的富文本，减少重复开发 比如你是门户网站，社区，以往有大量的新闻和帖子，里面带了各种css样式的富文本，小程序源生是无法直接读取的，需要大量转化，这时候直接内嵌这些H5新闻，大大降低开发成本 3、热更新，减少发布审核 某些需要经常更新的内容、公告、活动页，内嵌H5可以减少频繁提交小程序审核 二、小程序功能赋权 为H5提供各种小程序才有的功能，比如录音，扫一扫等。 注意事项 多场景判断，建议使用官方API： wx.miniProgram.getEnv H5唤醒一些小程序API有一定的延时，0.3~1秒 请调用小程序专用的JSSDK，同一个jssdk，但是webview的功能收到限制，和之前微信打开H5有所不同 小程序自动获取加载H5的title H5中iframe的url必须也是业务域名 web-view一定是撑满全屏的，自定义顶部菜单，悬浮的都没用 三、小程序和H5之前的互相通讯 1、 从小程序 ==>> h5 小程序控制H5，可以直接用src路径传参的形式，比如 [代码]<!-- 小程序端 HTML --> <web-view src="//URL?a=param1&b=param2"></web-view> [代码] 避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。 2、 从 H5 ==>> 小程序 [图片] 这里我们知道bindmessage是小程序用来监听H5的推送的内容，但是这里不大不小的坑！就是它的三个出发场景： 小程序后退：使用接口名 wx.miniProgram.navigateTo，wx.miniProgram.navigateBack，wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会出发 分享：这个就是当你点分享小程序的时候，会接受到H5之前发送的postMessage 组件销毁，web-view组件销毁，类似 wx.miniProgram.redirectTo 都会触发。 [代码]<!-- 小程序端 HTML --> <web-view bindmessage="handleGetMessage" src="{{openUrl}}"></web-view> [代码] [代码]// 小程序端 JS --> Page({ /** * 页面的初始数据 */ data: { openUrl: "", }, /** * 获取请求数据 */ handleGetMessage: function (e) { console.log(e.detail.data); } }, }) [代码] [代码]<!-- h5端 HTML和JS --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> wx.miniProgram.postMessage({ data: { link: "//test.com", title: "一起学习，一起进步" } }); //wx.miniProgram.redirectTo({ // url:"/pages/inner/index?source=123" //}) wx.miniProgram.navigateBack({delta: 1}) </script> [代码] 注意事项 那些H5控制小程序的跳转路径必须是“/”开头，如 “/pages/xxx/xxx”，且路径必须在app.json里有，地址错误的话，有时不报错。 postMessage的json必须是data开始，不然接收不到数据。 [图片] 四、bindmessage接收到消息有3个重要特性(重点) 接收可以是H5之前几分钟前发送postMessage，不一定是即刻发出的。 之前发出的 postMessage的DATA信息会累加，当触发bindmessage接收的时候是一个数组。 [图片] 当bindmessage 再次 接收到数据，之前发送的数据不会被清空，将累加一起返回，获取时要判断好数组的角标 [图片] 五、Tips 1、在IDE工具中如何调试H5 [图片] 可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。 2、内嵌H5缓存问题 web-view加载的H5具有很重的缓存，如果需要调试，可以通过在url后面加时间戳的方式解决。 3、小程序关闭，H5背景音乐仍然在播放问题 小程序已经关闭，但是H5自带的背景音乐仍然在手机后台播放的问题。这里可以利用一个属性： visibilitychange：页面可见性状态 简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。 [代码]var statusBeforeHide = true; //初始化页面的状态 var music = document.getElementById("xxx"); // 更改音乐播放状态 function setChangeMusic() { if (document[hiddenProperty]) { // 页面隐藏 if (statusBeforeHide) { music.pause(); // 暂停 } } else { // 页面显示 if (statusBeforeHide) { music.play() //如果statusBeforeHide是true, 继续播放 } } } let hiddenProperty = ('hidden' in document) ? 'hidden' : ('webkitHidden' in document) ? 'webkitHidden' : ('mozHidden' in document) ? 'mozHidden' : null; if (hiddenProperty) { let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); let onVisibilityChange = () => { //console.log('visibilityChange'); setChangeMusic(); }; document.addEventListener(visibilityChangeEvent, onVisibilityChange); } else { console.log("不支持这个api"); } [代码] 总结，web-view还是非常实用的组件，且用且珍惜~ 往期回顾： 小程序自定义头部导航栏“完美”解决方案 小程序Canvas生成海报（一） 小程序新版订阅消息+云开发实战与跳坑

the permission value is offline verifying这个错误是因为config没有正确执行，或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查： 确认config正确通过。 如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。 确认config的jsApiList参数包含了这个JSAPI。 可参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#%E9%99%84%E5%BD%951-JS-SDK%E4%BD%BF%E7%94%A8%E6%9D%83%E9%99%90%E7%AD%BE%E5%90%8D%E7%AE%97%E6%B3%95

开发工具上在web-view页面内点击鼠标右键有个调试的选项 需要在真机上调试需要自行引入vconsole：https://github.com/Tencent/vConsole/blob/dev/README_CN.md

现在的策略是允许公众号文章内嵌iframe，对于第三方的iframe会检查业务域名。可理解为： 1、打开公众号文章，文章内嵌iframe含有腾讯视频这种情况就是支持的。 2、打开开发者自己的业务域名，网页内嵌iframe含有腾讯视频这种情况就是不支持的。

每个小程序可跳转的其他小程序数量限制为不超过10个，在web-view中打开的小程序也包含在这个限制中。 从 基础库2.4.0 版本以及指定日期（参考公告）开始，开发者提交新版小程序代码时，如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过 10 个，否则将无法通过审核。该名单可在发布新版时更新，不支持动态修改。配置方法详见 小程序全局配置。

目前没有这个功能。小程序web-view只支持跳转到开发者自己的页面。

请开发者先自查出现404异常的资源响应头部，检查content-length是否小于2048， 如果小于2048，建议在出现404异常的html 末尾增加一个隐藏的 div标签，display设置为none： <div> this is padding data: xxxx 填充整个页面content-length到2048字节以上即可 </div> 以上是暂时的解决策略，我们会在后续的版本解决。

[图片]

为进一步规范开发者的用户个人信息处理行为，保障用户合法权益，小程序、插件中涉及处理用户个人信息的开发者，无论是通过调用涉及用户个人信息的相关接口，还是自行收集用户个人信息，在提交代码版本前，均需补充相应用户隐私保护指引，具体如下： 一、 如小程序、插件有涉及收集用户个人信息（包含通过接口形式收集、通过非接口的形式收集）开发者需在【小程序管理后台-设置-功能设置-用户隐私保护指引】（如果是第三方开发者代开发小程序可通过接口进行配置）/【小程序管理后台-功能-小程序插件-基本设置-用户隐私保护说明】针对具体使用目的与用途进行说明填写，并补充完整隐私指引内容。 二、针对隐私指引说明内容，有如下要求： 1、隐私指引说明内容需与代码包内引用相关接口一致； 2、隐私指引说明内容文字表述需清晰、完整、告知用户处理相应信息的目的与用途； 3、在代码提审环节将对以上要求进行核验，如未满足相应要求，则无法通过代码版本审核，将影响开发者后续版本提审。 平台预计于11月1日对相关接口进行隐私指引说明审核，请开发者及时补充完善隐私指引说明，避免影响相关服务及用户体验。 微信团队 2021年10月29日

通常，scroll 事件，resize 事件、鼠标事件（比如 mousemove、mouseover 等）、键盘事件（keyup、keydown 等）都存在被频繁触发的风险。频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。 无论是公司项目，还是个人项目，往往会遇到这样的一些造成回调开销加大的问题，比如重复提交、快速点击、高频事件等。 为了规避这种情况，我们需要一些手段来控制事件被触发的频率。然而，节流（throttle）与防抖（debounce）是我们在日常开发中常用的优质代码片段，能够给我们的项目带来性能的提升。 问题 小程序端以答题考试知识库项目为例，存在的问题： 1）重复提交 单位时间内，多次请求，造成的后台重复录入现象。 2）快速点击 单位时间内，快速点击查询或者答题，触发异步事件，造成数据与ui混乱的现象。 3）高频事件 单位时间内，触发的各类事件，且响应速度低于请求，造成的卡顿或其他混乱现象。 节能知识竞赛-提交答卷： [图片] 考研知识库-模糊查询： [图片] 人物评选投票-精准搜索： [图片] 解决方案一般在项目中比较常见用的方式是事件或函数的节流（throttle）与防抖（debounce）。 节流（throttle）与防抖（debounce）的本质这两个东西都以闭包的形式存在。 它们通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用 setTimeout 来控制事件的触发频率。 节流（throttle）节流：每间隔某个时间去执行某函数。 节流（throttle） 的中心思想在于：在某段时间内，不管你触发了多少次回调，我都只认第一次，并在计时结束时给予响应。 function throttle(fn: Function, delay: number) { let timer: any = null; return function () { if (timer) return;//如果定时器还在，说明上一次延迟执行还没有完成，则不再执行 timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, delay); }; } 防抖（debounce）防抖：将几次操作合并为一次操作进行。 防抖（debounce）的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。 function debounce(fn: Function, delay: number) { let timer: any = null; return function () { if (timer) { clearTimeout(timer);//如果方法多次触发，则把上次记录的延迟执行代码清掉，重新开始 } timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, delay); }; } 总结防止事件频繁触发回调函数的方法有很多，其中防抖和节流是现在比较主流的处理方式。 节流和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。

第一步： 前端点击分享按钮，会生成一个链接，链接里包含了一个后台获取分享链接的请求地址。 [图片] [图片] 第二步：点击这个链接地址，会进入到后台，然后后台进行一个重定向跳转 [图片] 重定向的地址是： https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2c0e3244be2bec38&redirect_uri=http%3A%2F%2Fwww.fengtx.com%2Fwx%2Flogin/index?app_id=1_2_1_11081_/wechatHtml/index.html/Blurb/11141/9351?id=11151!skuId=9351&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 但是到前端链接地址就变成了，也就是回调地址，少了参数了 http://www.fengtx.com/wx/login/index?%20%20app_id=1_2_1_11081_/wechatHtml/index.html/Blurb/11151/9351?id=11151!skuId=9351&code=071cGygs1lZMek0AzEks1c7Fgs1cGygj&state=STATE 这个是什么原因？回调域名也配置过了 [图片]

习惯于 VUE 或其他一些框架的同学们可能会经常使用它们的 [代码]computed[代码] 和 [代码]watch[代码] 。 小程序框架本身并没有提供这个功能，但我们基于现有的特性，做了一个 npm 模块来提供 [代码]computed[代码] 和 [代码]watch[代码] 功能。 先来个 GitHub 链接：https://github.com/wechat-miniprogram/computed 如何使用？ 安装 npm 模块 [代码]npm install --save miniprogram-computed [代码] 示例代码 [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { return data.a + data.b }, }, }) [代码] [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, sum: 2, }, watch: { 'a, b': function(a, b) { this.setData({ sum: a + b }) }, }, }) [代码] 怎么在页面中使用？ 其实上面的示例不仅在自定义组件中可以使用，在页面中也是可以的——因为小程序的页面也可用 [代码]Component[代码] 构造器来创建！ 如果你已经有一个这样的页面： [代码]Page({ data: { a: 1, b: 1, }, onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }) [代码] 可以先把它改成： [代码]Component({ data: { a: 1, b: 1, }, methods: { onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }, }) [代码] 然后就可以用了： [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { return data.a + data.b }, }, methods: { onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }, }) [代码] 应该使用 [代码]computed[代码] 还是 [代码]watch[代码] ？ 看起来 [代码]computed[代码] 和 [代码]watch[代码] 具有类似的功能，应该使用哪个呢？ 一个简单的原则： [代码]computed[代码] 只有 [代码]data[代码] 可以访问，不能访问组件的 [代码]methods[代码] （但可以访问组件外的通用函数）。如果满足这个需要，使用 [代码]computed[代码] ，否则使用 [代码]watch[代码] 。 想知道原理？ [代码]computed[代码] 和 [代码]watch[代码] 主要基于两个自定义组件特性： 数据监听器 和 自定义组件扩展 。其中，数据监听器 [代码]observers[代码] 可以用来监听数据被 [代码]setData[代码] 操作。 对于 [代码]computed[代码] ，每次执行 [代码]computed[代码] 函数时，记录下有哪些 data 中的字段被依赖。如果下一次 [代码]setData[代码] 后这些字段被改变了，就重新执行这个 [代码]computed[代码] 函数。 对于 [代码]watch[代码] ，它和 [代码]observers[代码] 的区别不大。区别在于，如果一个 data 中的字段被设置但未被改变，普通的 [代码]observers[代码] 会触发，但 [代码]watch[代码] 不会。 如果遇到问题或者有好的建议，可以在 GitHub 提 issue 。

场景： 在小程序中大家应该都有这样的场景，在onLaunch里用wx.login静默登录拿到code，再用code去发送请求获取token、用户信息等，整个过程都是异步的，然后我们在业务页面里onLoad去用的时候异步请求还没回来，导致没拿到想要的数据，以往要么监听是否拿到，要么自己封装一套回调，总之都挺麻烦，每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案，公司内部已接入两年很稳定： 1.可完美解决异步问题 2.不污染原生生命周期，与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现，接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景，以下有部分是伪代码，请勿直接粘贴使用，具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = {   // 是否已拿到token   token: '',   // 用户信息   userInfo: {     userId: '',     head: ''   } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({  'Login':{     name:'Login',     watchKey: 'token',     onUpdate(token){       //有token则触发此钩子       return !!token;     }   },  'User':{     name:'User',     watchKey: 'userInfo',     onUpdate(user){       //获取到userinfo里的userId则触发此钩子       return !!user.userId;     }   } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }） //关键点来了 //Page.js，业务页面使用 Page({   onLoadLogin() { //拿到token啦，可以使用token发起请求了 const token = getApp().globalData.token },   onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo },   onReadyUser() { //页面初次渲染完毕 && 拿到用户信息，可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) },   onShowUser() { //页面每次显示 && 拿到用户信息，我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github：https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快，记得star哦

[图片] 你是否纠结过底层业务逻辑（登陆、获取用户信息等）到底是放app.js的onLaunch还是page的onLoad里比较好，或者因为异步问题被迫放在了onload，我们来分析一下优劣 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - 分析 onLaunch处理 优点：底层业务逻辑集中并且只需写一次，比较好维护 缺点：目前没有一个理想的方案来解决onLaunch和onLoad的异步问题，包括注册回调、重写onLoad、请求拦截等。 onLoad处理 优点：因为不涉及跨页面通知，因此异步逻辑比较好处理 缺点：每个页面都得写一次底层业务逻辑，非常繁琐，而且既然是公用的底层业务逻辑，分散在每个页面的onLoad里，好像也不大对劲。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - 抉择 按照高内聚低耦合的原则，那逻辑和数据放onLaunch里肯定的，不应该和普通page逻辑耦合在一起，通用的数据和逻辑应该在入口去处理，执行一次到处使用，就像vue的main.js一样，会注册一些技术层的基础设施（路由、状态管理等插件），那业务层的基础设施不就是token、用户信息、所在位置等逻辑吗？ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - 想象中的最佳实践 那我们的目标就是如何满足两者的优点，避免两者的缺点，做到真正的“高内聚低耦合” 1.保持底层业务逻辑写在入口app.js，避免耦合page里的逻辑 2.能在任何page里第一时间拿到globalData数据 3.使用方便，做到在业务开发中无感知，不需要写额外的调用、通知等代码 4.无任何副作用，不会影响其他功能，比如重写阻塞onLoad 5.灵活可配，适用以后此类任何业务 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 梦想成真先看一段代码 ⬇️ // page.js export default { name: 'Home', onLoadLogin(){ //登录成功（拿到token） && 页面初始化完成 //Tips：适用于某页面发送的请求依赖token的场景 }, onLoadUser(){ //页面初始化完成 && 获取用户信息完成 //Tips：适用于页面初始化时需要用到用户信息去做判断再走页面逻辑的场景 }, onReadyUser(){ //dom渲染完成 && 获取用户信息完成 //Tips：适用于首次进入页面需要在canvas上渲染头像的类似场景 }, onReadyShow(){ //小程序内页面渲染完成 && 页面显示 //Tips：适用于需要获取小程序组件或者dom，并且每次页面显示都会执行的场景 }, } 应该懂什么意思了吧？是不是你理想中的样子，使用起来跟没有似的 ⬆️ 这段示例代码满足了上面的第2、3、4条目标 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 再来看一段 ⬇️ // app.js // 配置自定义钩子，所有钩子都可以随意组合搭配使用，执行机制类似于Promise.all（但不是用Promise实现的） CustomHook.install({  'Login':{ // 自定义钩子名称、必须大写字母开头     name:'Login',     watchKey: 'token',     onUpdate(token){       //有token则触发此钩子       return !!token;     }   },  'User':{ // 自定义钩子名称     name:'User',     watchKey: 'userInfo',     onUpdate(user){       //获取到userinfo里的userId则触发此钩子       return !!user.userId;     }   } //依赖globalData中数据 }, globalData) 怎么样，是不是很棒，依赖globalData，名字可配，连触发规则都可配，而且还附加了可随意组合的功能（意外还解决了页面内逻辑执行时机问题，在下篇讲） ⬆️ 这段示例代码满足了上面的第1、5条目标。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -我是分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 是不是跃跃欲试了，那就赶紧试试，好用回来告诉我！ ⬇️（公司内部已接入两年了很稳定） GitHub：https://github.com/1977474741/spa-custom-hooks [图片]

在小程序中，常常有些数据需要在几个页面或组件中共享。对于这样的数据，在 web 开发中，有些朋友使用过 redux 、 vuex 之类的 状态管理 框架。在小程序开发中，也有不少朋友喜欢用 MobX ，说明这类框架在实际开发中非常实用。 小程序团队近期也开源了 MobX 的辅助模块，使用 MobX 也更加方便。那么，在这篇文章中就来介绍一下 MobX 在小程序中的一个简单用例！ 在小程序中引入 MobX 在小程序项目中，可以通过 npm 的方式引入 MobX 。如果你还没有在小程序中使用过 npm ，那先在小程序目录中执行命令： [代码]npm init -y [代码] 引入 MobX ： [代码]npm install --save mobx-miniprogram mobx-miniprogram-bindings [代码] （这里用到了 mobx-miniprogram-bindings 模块，模块说明在这里： https://developers.weixin.qq.com/miniprogram/dev/extended/functional/mobx.html 。） npm 命令执行完后，记得在开发者工具的项目中点一下菜单栏中的 [代码]工具[代码] - [代码]构建 npm[代码] 。 MobX 有什么用呢？ 试想这样一个场景：制作一个天气预报资讯小程序，首页是列表，点击列表中的项目可以进入到详情页。 首页如下： [图片] 详情页如下： [图片] 每次进入首页时，需要使用 [代码]wx.request[代码] 获取天气列表数据，之后将数据使用 setData 应用到界面上。进入详情页之后，再次获取指定日期的天气详情数据，展示在详情页中。 这样做的坏处是，进入了详情页之后需要再次通过网络获取一次数据，等待网络返回后才能将数据展示出来。 事实上，可以在首页获取天气列表数据时，就一并将所有的天气详情数据一同获取回来，存放在一个 数据仓库 中，需要的时候从仓库中取出来就可以了。这样，只需要进入首页时获取一次网络数据就可以了。 MobX 可以帮助我们很方便地建立数据仓库。接下来就讲解一下具体怎么建立和使用 MobX 数据仓库。 建立数据仓库 数据仓库通常专门写在一个独立的 js 文件中。 [代码]import { observable, action } from 'mobx-miniprogram' // 数据仓库 export const store = observable({ list: [], // 天气数据（包含列表和详情） // 设置天气列表，从网络上获取到数据之后调用 setList: action(function (list) { this.list = list }), }) [代码] 在上面数据仓库中，包含有数据 [代码]list[代码] （即天气数据），还包括了一个名为 [代码]setList[代码] 的 action ，用于更改数据仓库中的数据。 在首页中使用数据仓库 如果需要在页面中使用数据仓库里的数据，需要调用 [代码]createStoreBindings[代码] 来将仓库中的数据绑定到页面数据中，然后就可以在页面中直接使用仓库数据了。 [代码]import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from './store' Page({ onLoad() { // 绑定 MobX store this.storeBindings = createStoreBindings(this, { store, // 需要绑定的数据仓库 fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据 actions: ['setList'], // 将 this.setList 绑定为仓库中的 setList action }) // 从服务器端读取数据 wx.showLoading() wx.request({ // 请求网络数据 // ... success: (data) => { wx.hideLoading() // 调用 setList action ，将数据写入 store this.setList(data) } }) }, onUnload() { // 解绑 this.storeBindings.destroyStoreBindings() }, }) [代码] 这样，可以在 wxml 中直接使用 list ： [代码]<view class="item" wx:for="{{list}}" wx:key="date" data-index="{{index}}"> <!-- 这里可以使用 list 中的数据了！ --> <view class="title">{{item.date}} {{item.summary}}</view> <view class="abstract">{{item.temperature}}</view> </view> [代码] 在详情页中使用数据仓库 在详情页中，同样可以使用 [代码]createStoreBindings[代码] 来将仓库中的数据绑定到页面数据中： [代码]import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from './store' Page({ onLoad(args) { // 绑定 MobX store this.storeBindings = createStoreBindings(this, { store, // 需要绑定的数据仓库 fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据 }) // 页面参数 `index` 表示要展示哪一条天气详情数据，将它用 setData 设置到界面上 this.setData({ index: args.index }) }, onUnload() { // 解绑 this.storeBindings.destroyStoreBindings() }, }) [代码] 这样，这个页面 wxml 中也可以直接使用 list ： [代码]<view class="title">{{list[index].date}}</view> <view class="content">温度 {{list[index].temperature}}</view> <view class="content">天气 {{list[index].weather}}</view> <view class="content">空气质量 {{list[index].airQuality}}</view> <view class="content">{{list[index].details}}</view> [代码] 完整示例 完整例子可以在这个代码片段中体验： https://developers.weixin.qq.com/s/YhfvpxmN7HcV 这个就是 MobX 在小程序中最基础的玩法了。相关的 npm 模块文档可参考 mobx-miniprogram-bindings 和 mobx-miniprogram 。 MobX 在实际使用时还有很多好的实践经验，感兴趣的话，可以阅读一些其他相关的文章。

H5页面在浏览器可以正常调用起高德地图，但是在微信里无法唤起本地高德地图，是因为做了什么限制吗？有没有途径可以唤起成功的

微信里面的h5页面点击按钮能直接唤起高德地图app或者腾讯地图app吗，现在是要跳转到高德或者腾讯地图第三方的web页面才能唤起app，能在自己的微信h5页面直接唤起高德或者腾讯地图的app吗

小程序可以通过wx.openChannelsActivity接口跳转到指定视频号的视频页，但是H5页面似乎没有这样的API。

H5页面怎么给微信小程序传参

小程序是用webview嵌套的H5页面，在H5页面中点击获取用户授权（头像、昵称），然后把参数传给“我的”H5页面，请问可以实现吗？

使用webview 如何在小程序端接收到webview里面某个元素点击时传过来的参数？

1.小程序webview组件使用vant ui上传方法是多文件上传图片时出现直接跳转到图片选择界面，没有跳转到文件选择界面 2.因为直接跳转图片选择界面导致小程序多图片上传在部分安卓机上出现bug，文件上传无法再次调用的情况 3.同样的操作同样的方法在微信内置浏览器打开链接时会弹出拍照和从相册选择的弹窗。 4.请问小程序的webview组件方法是否在监听到了多图图片上传时直接执行了跳转方法，没有唤起弹窗，与小程序内核浏览器方法存在差异 5.下图是微信内核浏览器调用多图上传时弹出的弹窗，但是在小程序的webview组件中没有弹出，并且直接跳转图片文件选择界面，导致部分安卓机型出现无法上传图片的情况 [图片]

web-view跳转H5链接问号后面的参数在h5页面中无法获取，当前href只能获取到问号前的链接

用户分享时可获取当前web-view的URL，即在onShareAppMessage回调中返回webViewUrl参数。 示例代码https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 这个方法无法获取webViewUrl中的拼接参数？

小程序内进入webview嵌套的H5页面，点击右上角三个圆点分享小程序出去，其他用户通过分享的卡片进入 偶发出现首次进入时嵌套的H5链接参数丢失问题，第二次点击同一个卡片进入，参数又出现了 如果分享小程序时，参数就丢失了，应该每次进入都没有参数，但同一个分享卡片，第二次进来就有参数，首次进入时，时有时不有

前言 今天有个朋友问我，想把自己游戏的微信游戏圈详情页放在公众号菜单里面。于是有了这篇教程。 步骤 找到小程序AppID 查看小程序详情 [图片] 复制AppID [图片] 复制小程序路径 找到插入小程序 [图片] 输入AppID，点击下一步 [图片] 点击「获取更多页面路径」 [图片] 输入自己的微信号，即可找到相关页面，点击右下角「复制小程序路径」 [图片] 注意事项 复制出来的小程序路径会自带「.html」，如果你是公众号菜单跳转就需要去掉.html，然后就大功告成了！

本次分享的经历是我在上海从2013-2018年的工作过程记录，这 5年是我成长最快速的阶段。 初入职场 <2013-2014> 在去上海找工作之前，我加了很多技术交流群，问过里面参加工作的人，面试的常见问题，还请在里面关系不错的给我做了模拟面试。 2013年6月，我从长沙到上海来的时候，面试的情况还算比较不错，用了 3 天面试 7 家公司，拿到了4个offer。 我选择了一家小型公司，当是做语音助手App，那个时候的我就是一心想把做更多的事情，因为只有做了更多，自己成长才能快。所以每次负责人安排的任务，我都提前完成并且做完后还会主动找负责人领取更多的任务。 当我每次遇到不会的时候我都会请教负责人，负责人不会直接告诉我答案。而是每次就告诉我一个方向，比如Android中的异步请求，他说你去看看AsyncTask。然后让我养成了自主学习的能力，自己根据关键词找到这个技术点学习并且使用。 我认为，在这个阶段有三点对我的成长帮助很大。 提前准备，技术QQ群，通过关键字就能查到很多，找同行提前了解。这让我更快的找到了第一份工作；初入职场想要成长的更快的方式就是积极主动的做更多的事情，这个阶段缺的就是实践经验。这让我学习到更多技术的实践经验；还有就是当时负责人对我的指导方式，让我有了独立开发的能力。这让我拥有了自己解决问题的能力。 [图片] 成为小组负责人 <2014-2015> 因为我一直在小型公司，挺喜欢研究技术，但是通常来说你在小组中技术不错，态度积极主动就会被提拔成小组长。 刚被提拔上来的时候，还是保持着之前的风格，做事情快而且喜欢多做，做完了就帮别人做。但是这个时候就出现问题了。 我把别人不会的事情都做完了，小组成员没有成长，然后还养成了小组成员依赖的情况，不会做就让我来做。随着团队人员的不断增加（从最初3个人到5个人），自己变得非常忙。 后来通过自己的反思和调整，把业务开发的功能都分配出去了，自己写了一些底层基础模块，如：网络请求，公共工具包，等。要是遇到不会的就给予思路，观察过程，要求给予反馈，保证不会影响到项目进度。 这样小组成员每个人都能独当一面了，然后基础库也比较稳定了，自己也越来越轻松了，自己的时间也越来越多了。 于是开始想着帮助其他小组，因为当时iOS小组人员比较不稳定，开发人员较少，进度也相对滞后。于是我就自费购买了一台 macbook（花了1w多，还了几个月）学习了下OC，然后就去帮iOS小组开发。 最后上级看我Android小组负责的不错，然后还会iOS开发就让我做了移动端负责人。我清晰的记得，那天是2015年4月1号愚人节。 我认为，在这个阶段有两点对我成长帮助很大。 角色转化，从原来的技术开发到小组负责人，工作内容和思维方式要及时变化。这让我学会了，要培养小组成员能力，一个人的时间和精力都是有限的。这个时候应该是做更重要的事情，而不是做更多的事情；稳定Android团队后，自费购买设备学习iOS，帮助公司解决iOS进度慢的问题，因为当时看到了团队的问题，每次都是Android端先上线，然后iOS进度晚半个月，所以想帮助公司把这个问题解决。这让我学会了，解决上级的问题，上级自然后给予你更多。 [图片] 成为技术负责人 <2015-2018> 由于上家公司经营不善，打算从上海搬家到成都去，我不想去成都，所以我选择了跳槽。出去面了很多家，拿到了还不错的offer，于是我提出了离职。 当时我所在公司的CTO首先挽留我聊了很多，知道留不住之后，他推荐我去了一家他认为还不错的创业公司。那个时候公司一共就30多人，一个开发也没有，大部分都是销售，业务是做高端婚礼会馆，老板想做自己的系统，觉得系统能赋能业务。我的想法就是试一试，大不了重新找工作，于是拿着身份证就办理了入职手续。 当时办公场地在南京步行街和公司租的婚礼场地在一个地方，于是老板随便找了一个小办公室，搞了网线，我自带了电脑。这就是我的办公场所了。 初期最难的是招人，最开始就是叫朋友过来看看聊一聊，前几个人都是朋友叫朋友的，开发圈子里面都有些熟人。花了一个多月团队也初步成型，移动端，后端，设计都有1-2人了（早期只做App所以没有招聘前端人员）。 由于没有产品经理就自己每天和老板沟通需求，自己找了个原型图绘制软件把想法画出来，然后不断的和老板探讨。开始开发，由于团队刚开始磨合花了不少时间，所以开发时间也评估少了，只能加班搞。花1个月的时间，做出了系统的第一个版本。上线后天天加班改功能，因为需求只和老板讨论过，而没有和实际使用的业务讨论过，很多功能与业务场景不符合，想法过于美好，考虑不完善。在没有招到产品之前，我承担了产品的角色，前往业务一线天天和业务人员一起讨论，最后也做出了业务人员满意的产品功能。 过了两年后，公司从原来的30多人到了300多人。开发团队也跟着不断扩大，从原来的几个人变成了三十多人，管理难度也大幅度提升了。从原来的几个人都坐在一张桌子上，一起吃饭聊天到现在坐满了一个办公室。这个时候制度就很重要了，所以开始制定了一些制度，还有一些奖惩机制，以及找老板要了每个月都活动经费。这个时候我开始看很多管理方面的书籍、还上了很多管理到课程（线上、线下都有）、以及还请身边带团队的朋友吃饭，请教一些带团队的问题。 老板也给了我了足够大的自由空间，让我搭建了整个研发团队的制度、流程、福利。打破了我固有的技术思维，让我学习了商业思维，带我去上线下管理课。 我认为，在这个阶段有两点对我成长帮助很大。 自己当产品的经历。一定要去了解业务一线，老板看到是方向。业务一线才能提出真实需求。要学会提取符合业务产品的需求然后往老板的方向去做，这样才是对的。否则做出来业务人员不用，就是白做了。思考问题的思维的转化。我的思考维度从“如何做，能不能做？”到“为什么做，带来什么样的价值？”让我从技术人员的思维转换成了管理者思维，带我思考产品的商业价值。 [图片] 总结 这5年，我经历了三次的角色转变，Android开发到Android负责人，再到技术负责人，每一次转变都经历了痛苦，经过自己的反思与适应，不断跳出自己的舒适区。 总结一下 6 点，希望对大家有帮助： 做任何事情都可以提前准备，模拟会让你更加快进入状态。做事情不要想着划不划算，做更多的事情，成长是自己的。做负责人应该思考如何提高将团队战斗力，而不是自己的。站在公司角度去解决问题，就是为自己获得更多发展机会。想要系统赋能于业务，需求必须和业务人员反复讨论才行。所有事情都需要先思考，为什么做，能带来什么样的价值。

相册在日常生活中经常使用到，如手机自带相册、朋友圈、商品展示图、评论贴图等等，都经常用到相册的能力。 👇下面演示 iOS 原生相册、朋友圈等相册使用效果，我们可以看到图片切换非常顺滑，视觉焦点不变。 [图片] 😭 但是在小程序中，页面切换会有明显的切换感。用户焦点会丢失，缺少视觉关联性。 [图片] 共享元素🔥 为了丰富用户交互效果、提升用户体验、增强视觉关联性，小程序支持了页面间的共享元素 下图展示有无共享元素的页面切换效果，可以看出使用共享元素之后，转场动画更灵活 [图片] 共享元素 经常作用在图片上，例如上面示例中的相册效果，是那么共享元素动画要怎么实现呢？ 在页面跳转时，两个页面 key 相同的 share-element 组件则会产生飞跃的过渡效果 [图片] 在上一篇文章中，我们学习了 页面转场动画，共享元素动画跟页面转场动画是类似的，同样是在页面切换间的动画。 动画进度、时间 与 路由进度、时间保持一致（非自定义路由也支持共享元素动画） 在共享元素飞跃的过程中，前后页面图片的裁剪方式（mode） 可能不一致 这种情况下容易导致图片突然跳变，所以我们需要在飞跃的过程中改变图片的大小来保证平滑飞跃 [图片] 在共享元素动画进行的过程中，share-element 可以收到 onFrame 表示动画帧回调 我们可以在帧回调中处理内部元素的显示 例如：我们这里通过在帧回调中改变图片宽高来达到平滑飞跃的效果 // .wxml   // .js // 初始化 attached() {    this.aspectRatio = shared(0)   this.curRect = shared(undefined)   // 绑定 worklet 动画   this.applyAnimatedStyle('.img', () => {     'worklet'     const curRect = this.curRect.value     return {       left: `${curRect.left}px`,       top: `${curRect.top}px`,       width: `${curRect.width}px`,       height: `${curRect.height}px`     }   }) }, // 获取图片初始宽高比 onImageLoad(e) {   const { width, height } = e.detail   this.aspectRatio.value = width / height }, // 动画帧回调，调整图片大小 onFrame(data) {   'worklet'   // 当前帧容器的宽高、进度等信息   const { begin, end, progress, direction } = data      ...   // 根据图片初始宽高比、共享元素容器、动画进度等计算出变化过程中的值   this.curRect.value = {     left = lerp(begin.left, end.left, t),     top = lerp(begin.top, end.top, t),     width = lerp(begin.width, end.width, t),     height = lerp(begin.height, end.height, t),   } } 更多共享元素动画原理请查看 官方文档 手势搭配打开图片之后，我们经常需要用到手势来操作图片，如缩放、移动、双击等等 [图片] 我们上次学过的 手势系统 又派上用场啦 通过监听手势事件配合 worklet 函数即可在小程序实现图片预览效果 👇 下面演示缩放手势的处理，除了缩放之外，相册在手势处理上还有很多复杂的逻辑，包括惯性、边界逻辑判断等 点击查看更多相册相关的手势操作 // .wxml // 绑定缩放手势         let sharedValues = this.sharedValues ?? [] // .js // 绑定缩放 this.applyAnimatedStyle('#image', () => {   'worklet'   // worklet 函数，sharedValues 变化时，函数会立即执行   return {     transform: `scale(${sharedValues[SCALE].value})`   } }) // 监听缩放 onScale(evt) {   'worklet'      // 连续的手势状态 && 双指放缩   if (evt.state === GestureState.ACTIVE && evt.pointerCount === 2) { // 计算出当前真正的缩放值 sharedValues[SCALE].value = evt.scale / sharedValues[TEMP_LAST_SCALE].value sharedValues[TEMP_LAST_SCALE].value = evt.scale   } } 最后，我们来看下小程序实现出来的相册跟原生相册的使用对比，在小程序也可以顺滑的实现类原生的效果啦～ [图片] 目前，同程旅行 已经上线了共享元素结合手势的相册效果，mark这个 相册源码 直接接入到你的小程序吧～ [视频]

前言 只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递，下面我总结了 4 种页面方法。 路径传递 通过在url后面拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’。 案例：A页面带参数跳转到B页面 A页面跳转代码 [代码]goB(){ wx.navigateTo({ url: '/pages/B/index?id=value', }) }, [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', options.id) } [代码] 上面的案例是字符串参数，但是很多情况下需要传递对象，如下方代码。 [代码]Page({ data: { userInfo:{ name:'cym', age:16 } }, goB(){ wx.navigateTo({ url: '/pages/B/index?id='+this.data.userInfo, }) }, }) [代码] 如果使用上面同样的方式结构，输出的结果是：[object Object] 这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递，再到接收页面通过JSON.parse解析使用。 A页面跳转代码 [代码] goB(){ let userStr = JSON.stringify(this.data.userInfo) wx.navigateTo({ url: '/pages/B/index?id='+userStr, }) } [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', JSON.parse(options.id)) } [代码] 全局变量 通过App全局对象存放全局变量。 app.js代码 [代码]App({ // 存放对象的全局变量 globalData:{}, }) [代码] A页面跳转代码 [代码]// 获取App对象 const app = getApp() Page({ /** * 页面的初始数据 */ data: { userInfo: { name: 'cym', age: 16 } }, goB() { app.globalData.userInfo = this.data.userInfo wx.navigateTo({ url: '/pages/B/index', }) }, }) [代码] B页面接收代码 [代码]// 获取全局对象 const app = getApp() Page({ onLoad: function (options) { console.log(app.globalData.userInfo) } }) [代码] 存放在 App 全局变量里面，可以被多个页面使用，直接从 App 对象获取即可。这个数据是保持在内测中，每次小程序销毁就没有了。 数据缓存 通过存储到数据缓存中。 A页面跳转代码 [代码] goB() { wx.setStorageSync('userInfo', this.data.userInfo) wx.navigateTo({ url: '/pages/B/index', }) } [代码] B页面接收代码 [代码] onLoad: function (options) { let userInfo = wx.getStorageSync('userInfo', this.data.userInfo) console.log(userInfo) } [代码] 存放在数据缓存里面，可以被多个页面使用，直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中，除非清楚数据缓存或者删除小程序否则一直存在。 事件通信 通过事件通信通道。 A页面跳转代码 [代码]goB() { wx.navigateTo({ url: '/pages/B/index', success:(res)=>{ // 发送一个事件 res.eventChannel.emit('toB',{ userInfo: this.data.userInfo }) } }) } [代码] B页面接收代码 [代码]onLoad: function (options) { // 获取所有打开的EventChannel事件 const eventChannel = this.getOpenerEventChannel(); // 监听 index页面定义的 toB 事件 eventChannel.on('toB', (res) => { console.log(res.userInfo) }) } [代码] 总结 大家可以针对具体业务场景来进行选择合适自己的传参方式。

接口生成Scheme码，部分安卓手机打开小程序之后获取不到页面携带的参数。

web-view内嵌的h5页面除了使用 url传参外，可以判断出当前页面在哪个小程序里吗？是否有相关的api?

1.小程序webview组件使用vant ui上传方法是多文件上传图片时出现直接跳转到图片选择界面，没有跳转到文件选择界面 2.因为直接跳转图片选择界面导致小程序多图片上传在部分安卓机上出现bug，文件上传无法再次调用的情况 3.同样的操作同样的方法在微信内置浏览器打开链接时会弹出拍照和从相册选择的弹窗。 4.请问小程序的webview组件方法是否在监听到了多图图片上传时直接执行了跳转方法，没有唤起弹窗，与小程序内核浏览器方法存在差异 5.下图是微信内核浏览器调用多图上传时弹出的弹窗，但是在小程序的webview组件中没有弹出，并且直接跳转图片文件选择界面，导致部分安卓机型出现无法上传图片的情况 [图片]

本文适合小白交流，大佬勿喷。把自己遇到的坑，小白解决方案贴出来交流。 坑1：微信跳转与H5跳转，跳转的路径不是一样的。 跟我一样粗心伙伴注意了 官方说明：网页会判断所在的环境来觉得采用哪种跳转方式，如检测到微信客户端内，则免鉴权使用开放标签跳转，如检测到在外部浏览器或 App，则使用 URL Scheme 跳转小程序。区别在于在html代码里面的属于标签跳转，URL Scheme跳转是在云函数里面的。主要问题是没看清文档及不熟悉云开发，以为前台代码的path就是所有跳转的url。html的path=xxx 仅指的是当在微信H5情况下跳转的路径（可带参数） <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace --> <template> <button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button> </template> </wx-open-launch-weapp> 如果想在其他浏览器（非微信H5上做跳转，跳转的路径及参数需要在云函数写） async function getUrlScheme(options) { return cloud.openapi.urlscheme.generate({ jumpWxa: { path: '/page/component/index', // <!-- replace --> query: 'i=aaabbb', }, // 如果想不过期则置为 false，并可以存到数据库 isExpire: true, // 一分钟有效期 expireTime: parseInt(Date.now() / 1000 + 60 其中path是路径，不能带参数(不太确定)，简约如果有参数则写在query里面去，例如 query：'openid=developers' 这样的话微信跳转的路径其实可以与H5跳转路径不一样都没问题，第一个坑解决了。 坑2：哪怕按照上面写了，还是微信能跳，H5不能跳，云函数一直无法上传。 我也查了社区很多贴，没有一个好的解决方案，这个坑主要问题是在基础没有打好的问题，我想部分人应该也是刚接触云开发不久，都是用到这个开发能力才去接触这个开发能力 解决方案： 官方在云函数的地方，告诉我们需要新建一个云函数名字为public，在这个目录下面创建一个js。但是因为这个要用到wx-server-sdk。 打开命令行，定位到public，安装一下所需要的环境，云函数中使用 wx-server-sdk 需在对应云函数目录下安装 wx-server-sdk 依赖（自己理解） npm install --save wx-server-sdk@latesty 这个安装上去的了，你的public目录下就会多一个node_modules目录，云端安装就不说了，这里我是直接全部上传的。 安装好后，上传代码后，基本上H5就可以跳转到浏览器了。（如果你的还行不行，检查一下权限，还有报错，可能还需要按照node_sdk） 【如果还是不行，可以回复本帖，尝试帮忙排查解决】 坑3：路径后自定义传参问题？参数是动态的问题。 因为自己对云函数认识不足，所以用了自己的解决方案。 我当时项目的需求是，动态传参，每个参数都是不一样，如果按官方的文档是固定路径的 我是获取当前h5的url参数，提取自己要的参数出来。然后拼接到 path里面去。拼接的方法有很多，当时为了速度快点就用了最白痴的方法。 需要注意，微信的跳转与h5跳转写法不一样。 //获取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); } //如果你的url是 qq.com/i=88888 ，则getQueryVariable("i") 就是取i的值：88888 var i = getQueryVariable("i"); 微信H5的自定义参数跳转 我把官方的这个代码 <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace --> <template> <button>打开小程序</button> </template> </wx-open-launch-weapp> 改成了（大佬别吐槽，当时为了实现功能） <script type="text/javascript"> document.write("<wx-open-launch-weapp id='launch-btn' username='' path='pages/index/index?i="+i+"'>"); </script>  <template> <button>打开小程序</button> </template> </wx-open-launch-weapp> 其他H5的自定义参数跳转 把代码拉到最下面去，他是通过这个来执行云函数的，然后拿到回传的信息的链接，最后直接js跳转到该链接。  async function openWeapp(onBeforeJump) {     var c = window.c     const res = await c.callFunction({       name: 'public',       data: {         action: 'getUrlScheme',       },     })     console.warn(res)     if (onBeforeJump) {       onBeforeJump()     } location.href = res.result.openlink 所以我们可以把我们的值也传过去。我在data里面加了一个action1  async function openWeapp(onBeforeJump) {     var c = window.c     const res = await c.callFunction({       name: 'public',       data: {         action: 'getUrlScheme', action1: 'i='+i,       },     }) // console.log(i,"8888")     console.warn(res)     if (onBeforeJump) {       onBeforeJump()     } location.href = res.result.openlink 云函数那边我没有用原本那个方法，而是直接改了原本的。（可以按照自己思路来） 最终我的云函数代码就是 // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => {   const wxContext = cloud.getWXContext()   try {     const result = await cloud.openapi.urlscheme.generate({         "jumpWxa": {           "path": 'pages/index/index',           "query": event.action1         },         "isExpire": false,         "expireTime": parseInt(Date.now() / 1000 + 60)       })     return result   } catch (err) {     return err   } } 最后可以实现根据自定义传参到url，h5、微信h5都能自动跳转到微信小程序。 以此文提示自己需努力补前端基础，细心阅开发文档。

微信小程序中通过web-view的src加载自己开发的一个h5页面，地址后面通过&传递的参数，安全性有保障吗？

小程序跳转H5  使用H5页面支付 获取公众号的openid 然后使用 统一下单JSAPI 支付嘛

大家有遇到业务场景是 在给用户推送订阅消息后，需要通过点击订阅消息可以直接跳转到外部【非本小程序】的H5网页链接吗？ 例如下方的订阅消息，用户在点击订阅消息后，可以直接进入外部的H5链接？ [图片] 因为在查看订阅消息的开发文档后发现，对于跳转的控制是限制在【本小程序】才行的，这样是不是意味着不能够完成这个场景？ [图片] 或者大家有其他的能达到相应场景的配置吗？

求助，现在的场景是小程序使用webview嵌套h5，小程序有自己的getLocation方法，微信网页jssdk也有自己的getLocation方法。 请问： 如果小程序里用户拒绝了，h5里的调用还能拿到吗； 如果h5里用户允许了，会影响小程序里定位的授权吗

如题 使用小程序 web-view 跳转现有的vue项目 引入的是百度地图 提示非法域名，但是我这有一个jq项目也是引入的百度地图web-view就不提示非业务域名求大神 解答！！很急！很急！很急！很急！很急！在线等！！！

现在小程序越来越普遍了，从H5网页（要在微信浏览器下打开的）跳转到相应小程序的场景也越来越多。至此微信提供了相应的微信开放标签让网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。 需要注意的是，微信开放标签有最低的微信版本和最低的系统版本要求。 微信版本要求为：7.0.12及以上系统版本要求为：iOS 10.3及以上、Android 5.0及以上 对于符合微信或系统最低版本要求但仍无法使用微信开放标签的场景，将会在下方使用步骤中的[代码]wx.config[代码]权限验证成功后触发[代码]WeixinOpenTagsError[代码]事件告知开发者。仅无法使用微信开发标签，JS-SDK其他功能不受影响。可通过如下方法监听并进行回退兼容： document.addEventListener('WeixinOpenTagsError', function (e) { console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响 }); 根据目前已知的错误场景，回退兼容建议如下： iOS15底层 WebKit 接口发生变更，微信版本8.0.8以下（不包括8.0.8）无法使用开放标签，可引导用户升级最新版本微信；开放标签依赖Web Components方案，极少部分 Android 系统可能由于版本太低而不支持，可引导用户升级系统固件。H5网页跳转小程序有如下步骤： 1.在微信公众号（已认证的服务号）绑定“JS接口安全域名” 如果是公众号身份的网页，需要绑定安全域名。登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 如果是使用小程序云开发静态网站托管的小程序网页，则不需绑定安全域名即可直接使用（即跳过该"步骤一：绑定JS接口安全域名"）。 2.引入JS文件 在需要调用 JS 接口的页面引入如下 JS 文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https） 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https） 备注：支持使用 AMD/CMD 标准模块加载方法加载。 注意：js文件必须使用1.6.0版本以上 3.通过config接口注入权限验证配置并申请所需开放标签 与使用 JS-SDK 配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过[代码]openTagList[代码]字段申请所需要的开放标签，否则将无法使用（同一个 url 仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用。目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。开放标签的申请和 JS 接口的申请相互独立，因此是可以同时申请的。 wx.config({ debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [], // 必填，需要使用的 JS 接口列表 openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] }); 注意：如果使用的是小程序云开发静态网站托管的域名的网页，可以免鉴权直接跳任意合法合规小程序，调用 wx.config 时 appId 需填入非个人主体的已认证小程序，不需计算签名，timestamp、nonceStr、signature 填入非空任意值即可。 4.通过ready接口处理成功验证 wx.ready(function () { // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中 }); 5.通过error接口处理失败验证 wx.error(function (res) { // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名 }); 接口调用说明所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数： success：接口调用成功时执行的回调函数。fail：接口调用失败时执行的回调函数。complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。 以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下： 调用成功时："xxx:ok" ，其中xxx为调用的接口名 用户取消时："xxx:cancel"，其中xxx为调用的接口名 调用失败时：其值为具体错误信息 使用说明 所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过[代码]<script type="text/wxtag-template"></script>或<template></template>[代码]进行包裹。另外，对于具名插槽还需要通过[代码]slot[代码]属性声明插槽名称，下文标签插槽中的 default 插槽为默认插槽，可不声明插槽名称。 对于标签事件，均可通过[代码]event.detail[代码]获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代[代码]event.detail[代码]中的内容。 另外，需要注意以下几点： 页面中与布局和定位相关的样式，如[代码]position: fixed; top -100;[代码]等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；对于有 CSP 要求的页面，需要添加白名单[代码]frame-src https://*.qq.com webcompt:[代码]，才能在页面中正常使用开放标签。（CSP相关内容可查看以下几篇文章：https://zhuanlan.zhihu.com/p/142987601、https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy）开放对象已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。代码 参考：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>H5跳转小程序</title>   <!-- weui 样式 -->   <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css">   <!-- 页面样式 start -->   <style>     /* --------START reset.css------- */     * {       margin: 0;       padding: 0;     }     html,     body {       background-color: #fff;     }     a {       text-decoration: none;     }     a,     button,     input,     span,     div {       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);     }     li {       list-style-type: none;     }     /* --------END reset.css------- */     .hidden {       display: none;     }     .full {       position: absolute;       top: 0;       bottom: 0;       left: 0;       right: 0;     }     .public-web-container,     .wechat-web-container,     .wechat-web-container wx-open-launch-weapp,     .desktop-web-container {       display: flex;       flex-direction: column;       align-items: center;     }     .public-web-container p,     .wechat-web-container p,     .desktop-web-container p {       position: absolute;       top: 40%;     }     .public-web-container a {       position: absolute;       bottom: 40%;     }     .wechat-web-container wx-open-launch-weapp {       position: absolute;       bottom: 40%;       left: 0;       right: 0;     }     .wechat-web-container .open-btn {       display: block;       margin: 0 auto;       padding: 8px 24px;       width: 200px;       height: 45px;       border: none;       border-radius: 4px;       background-color: #07c160;       color: #fff;       font-size: 18px;       text-align: center;     }   </style>   <!-- 页面样式 end --> </head> <body>   <!-- 页面容器 start -->   <div id="h5OpenMiniprogram">     <!-- <template> -->     <!-- 页面内容 start -->     <div class="page full">       <!-- 移动端微信外部浏览器 -->       <div id="public-web-container" class="hidden">         <p>正在打开“小程序名字”</p>         <a href="javascript:" id="public-web-jump-button" class="weui-btn weui-btn_primary weui-btn_loading"           onclick="openWeapp()">           <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent">             <i class="weui-primary-loading__dot"></i>           </span>           打开小程序         </a>       </div>       <!-- 微信内部浏览器 -->       <div id="wechat-web-container" class="hidden">         <p>点击以下按钮打开“小程序名字”</p>         <!--           username：必填，所需跳转的小程序原始id，即小程序对应的以gh_开头的id；           path：非必填，所需跳转的小程序内页面路径及参数（默认小程序的初始页面【即首页】）         -->         <wx-open-launch-weapp id="launch-btn" username="gh_XXX" path="/pages/XXX">           <!-- 第一种: 不适用于Vue.js开发的项目，template标签会冲突 -->           <template>             <style>               .open-btn {                 display: block;                 margin: 0 auto;                 padding: 8px 24px;                 width: 200px;                 height: 45px;                 border: none;                 border-radius: 4px;                 background-color: #07c160;                 color: #fff;                 font-size: 18px;                 text-align: center;               }             </style>             <button class="open-btn">打开小程序</button>           </template>           <!-- 第二种：几乎适用于所有前端框架开发的项目 -->           <!-- <script type="text/wxtag-template">             <style>               .open-btn {                 display: block;                 margin: 0 auto;                 padding: 8px 24px;                 width: 200px;                 height: 45px;                 border: none;                 border-radius: 4px;                 background-color: #07c160;                 color: #fff;                 font-size: 18px;                 text-align: center;               }             </style>             <button class="open-btn">打开小程序</button>           </script> -->         </wx-open-launch-weapp>       </div>       <!-- 桌面端 -->       <div id="desktop-web-container" class="hidden">         <p>请在手机打开网页链接</p>       </div>     </div>     <!-- 页面内容 end -->     <!-- </template> -->   </div>   <!-- 页面容器 end -->   <!-- 引入jQuery -->   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>   <!-- 调试用的移动端 console -->   <script src="https://cdn.jsdelivr.net/npm/eruda"></script>   <script>     eruda.init();   </script>   <!-- 公众号 JSSDK -->   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>   <!-- 云开发 Web SDK -->   <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>   <script>     function docReady(fn) {       document.addEventListener('WeixinOpenTagsError', function (e) {         console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响       });       if (document.readyState === "complete" || document.readyState === "interactive") {         fn();       } else {         document.addEventListener("DOMContentLoaded", fn);       }     }     docReady(async function () {       var ua = navigator.userAgent.toLowerCase();       var isWXWork = ua.match(/wxwork/i) == "wxwork";       var isWeixin = !isWXWork && ua.match(/micromessenger/i) == "micromessenger";       console.log("isWeixin", isWeixin, isWXWork);       var isMobile = false;       var isDesktop = false;       if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {         isMobile = true;       } else {         isDesktop = true;       }       if (isWeixin) {         var containerEl = document.getElementById("wechat-web-container");         containerEl.classList.remove("hidden");         containerEl.classList.add("full", "wechat-web-container");         // 公众号网页需要绑定安全域名         // 获取签名，timestamp、nonceStr、signature         $.ajax({           url: "请求地址",           dataType: "json",           success: function (res) {             console.log("WeChatConfig", res);             if (res.id === 1) {               var data = res.items; // 根据实际情况返还的数据进行赋值               wx.config({                 // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印                 appId: data.appId, // 必填，公众号的唯一标识                 timestamp: data.timestamp, // 必填，生成签名的时间戳                 nonceStr: data.nonceStr, // 必填，生成签名的随机串                 signature: data.signature, // 必填，签名                 jsApiList: ["chooseImage"], // 必填，需要使用的JS接口列表（此处随意一个接口即可）                 openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']               });               /**                * config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后。                * config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。                * 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中                * */               wx.ready(function (res2) {                 console.log("ready", res2);                 var launchBtn = document.getElementById("launch-btn");                 launchBtn.addEventListener("ready", function (e) {                   console.log("开放标签 ready");                 });                 launchBtn.addEventListener("launch", function (e) {                   console.log("开放标签 success");                 });                 launchBtn.addEventListener("error", function (e) {                   console.log("开放标签 fail", e.detail);                 });               });               // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名               wx.error(function (err) {                 console.log("error", err);               });             }           }         })         // 小程序云开发静态网站托管的网页         // var launchBtn = document.getElementById("launch-btn");         // launchBtn.addEventListener("ready", function (e) {         //   console.log("开放标签 ready");         // });         // launchBtn.addEventListener("launch", function (e) {         //   console.log("开放标签 success");         // });         // launchBtn.addEventListener("error", function (e) {         //   console.log("开放标签 fail", e.detail);         // });         // wx.config({         //   // debug: true, // 调试时可开启         //   appId: "", // 非个人主体的已认证的小程序APPID         //   timestamp: 0, // 必填，填任意数字即可         //   nonceStr: "nonceStr", // 必填，填任意非空字符串即可         //   signature: "signature", // 必填，填任意非空字符串即可         //   jsApiList: ["chooseImage"], // 必填，随意一个接口即可         //   openTagList: ["wx-open-launch-weapp"], // 填入打开小程序的开放标签名         // });       } else if (isDesktop) {         // 在 pc 上则给提示引导到手机端打开         var containerEl = document.getElementById("desktop-web-container");         containerEl.classList.remove("hidden");         containerEl.classList.add("full", "desktop-web-container");       } else {         var containerEl = document.getElementById("public-web-container");         containerEl.classList.remove("hidden");         containerEl.classList.add("full", "public-web-container");         // 云函数         // 因未开通云开发环境，此处不做处理         // var c = new cloud.Cloud({         //   identityless: true, // 必填，表示是未登录模式         //   resourceAppid: "小程序 AppID", // 资源方 AppID         //   resourceEnv: '云开发环境 ID', // 资源方环境 ID         // });         // await c.init();         // window.c = c;         // var buttonEl = document.getElementById("public-web-jump-button");         // var buttonLoadingEl = document.getElementById("public-web-jump-button-loading");         // try {         //   await openWeapp(() => {         //     buttonEl.classList.remove("weui-btn_loadin");         //     buttonLoadingEl.classList.add("hidden");         //   })         // } catch (error) {         //   buttonEl.classList.remove("weui-btn_loadin");         //   buttonLoadingEl.classList.add("hidden");         //   throw error;         // }       }     });     async function openWeapp(onBeforeJump) {       console.log("未开通云开发环境", onBeforeJump);       // 因未开通云开发环境，此处不做处理       // var c = window.c;       // const res = await c.callFunction({       //   name: "public",       //   data: {       //     action: "getUrlScheme",       //   },       // });       // console.warn(res);       // if (onBeforeJump) {       //   onBeforeJump();       // }       // location.href = res.result.openlink;     }   </script> </body> </html> 错误提示 （1）没有在“JS接口安全域名”设置 [图片] 成功提示 （1）微信开发者工具 [图片] （2）真机：会有要打开小程序的名字 [图片]

目前有需求是app中嵌入了一个h5的商城项目，然后h5跳转小程序支付，支付完成之后能否可以回到app的h5页面？ 或者说直接回到app？

webview中H5调用微信支付失败，debugger模式则能正常支付

场景：h5页面使用web-view嵌套在小程序中，要在h5页面中拉起微信支付，可以使用JSAPI支付吗？ 代码： WeixinJSBridge.invoke('getBrandWCPayRequest', {           "appId": "wx1111",             "timeStamp": "1647935878",               "nonceStr": "45fgggds",                   "package": "prepay_id=wx0981223",           "signType": "MD5",    //微信签名方式：               "paySign": "455667xxxxx" //微信签名       },

已开发啦h5页面网站且已接入微信公众号支付接口，寻思着在小程序中直接web-view嵌套h5，就不用再次开发前端啦，只需要增加小程序支付参数匹配， 理论上可以再小程序web-view中使用h5调用小程序支付吗？

如题目，公司公众号想与旗下品牌公众号关联

我想实现在一个小程序中点击一个按钮，跳转到另外一个小程序。请问这两个小程序需要子同一个主体下吗？

我有个小程序：“小程序1”，合作伙伴有个小程序：“小程序2” 最近需要在我的小程序中增加一个按钮“按钮1” 需要实现：点击"按钮1"，从“小程序1”跳转到 “小程序2” 这个功能可以实现吗？ 合作伙伴的开发说，小程序有这个限制，不能实现两个小程序之间的跳转

直接使用微信内置的刷新页面也是正确的，使用浏览器打开也是正确的，但是使用转发和复制链接就失败了，访问根目录 就是一个普通的链接，没有使用自定义分享 复现方式一（转发参数丢失） 1、访问http://aboc.agri.cn:8080/ 2、进入页面打开一个资讯http://aboc.agri.cn:8080/#/infoDetail?id=922782776212586496 3、利用微信内置的转发给一个联系人，显示的名字和url都是正确的[图片] 4、但是。。。点击这条消息，直接进入了根目录http://aboc.agri.cn:8080/ 复现方式二（复制链接参数丢失） 1、访问http://aboc.agri.cn:8080/ 2、进入页面打开一个资讯http://aboc.agri.cn:8080/#/infoDetail?id=922782776212586496 3、使用内置的复制链接，复制出来的链接就是根目录http://aboc.agri.cn:8080/没有了后面的参数

小程序使用onShareAppMessage分享webview页面url是带参数的， 分享地址： /index/index?url=https://developers.weixin.qq.com?time=1655437757714&title=分享后参数丢失 但是查看分享页，url的参数不见了，只剩下=》 webview url:  https://developers.weixin.qq.com 代码片段：https://developers.weixin.qq.com/s/6CUrt4my7fA3

已经安装 npm install --save miniprogram-recycle-view json文件里也引入了组件 [代码]{[代码][代码]  [代码][代码]"navigationBarTitleText"[代码][代码]: [代码][代码]"直播间"[代码][代码],[代码][代码]  [代码][代码]"navigationBarBackgroundColor"[代码][代码]: [代码][代码]"#FF7684"[代码][代码],[代码][代码]  [代码][代码]"disableScroll"[代码][代码]: [代码][代码]true[代码][代码],[代码][代码]  [代码][代码]"usingComponents"[代码][代码]: {[代码][代码]    [代码][代码]"page-title"[代码][代码]:[代码][代码]"/component/pageTitle/pageTitle"[代码][代码],[代码][代码]    [代码][代码]"counter"[代码][代码]:[代码][代码]"/component/counter/counter"[代码][代码],[代码][代码]    [代码][代码]"recycle-view"[代码][代码]: [代码][代码]"miniprogram-recycle-view/recycle-view"[代码][代码],[代码][代码]    [代码][代码]"recycle-item"[代码][代码]: [代码][代码]"miniprogram-recycle-view/recycle-item"[代码][代码]  [代码][代码]}[代码][代码]}[代码]js里写了 [代码]const createRecycleContext = require([代码][代码]'miniprogram-recycle-view'[代码][代码])[代码]然后就报错 [代码]Uncaught Error: module [代码][代码]"pages/liveDetails/miniprogram-recycle-view"[代码] [代码]is not defined[代码]这是为什么？‘使用npm模块’我也勾上了

wx.navigateToMiniProgram跳转的小程序有什么要求吗？可以跳转任意小程序吗？

A小程序跳转B小程序 在B小程序一系列操作半个小时后，返回A小程序 A小程序列表数据呈现空白，再返回上一级还是空白 样式数据都不在啦

小程序webview 内是h5 页面 h5 可以调用小程序支付吗？支付可以如何破圈呢？

看了相关的帖子， 1.https://apis.map.qq.com 似乎无法添加到业务域名？ 2.地图api是通过iframe调用的，这个似乎导致，跳到h5页面的时候也会同时直接调用 map的api，所以会报 “不支持打开非业务域名” 3.有的帖子说用map组件，map组件不也是调用api吗？ 有什么解决方式，或者说怎么避免弹出这个 “ 不支持打开非业务域名https://apis.map.qq.com，请重新配置”

排查方式如下 1：小程序和公众号需要进行绑定 2：需要是https请求 3：业务域名设置了不一定参数里就是业务域名的地址，若配置的基本都是公众号文章地址，这里的业务域名是不需要额外设置的 4：参数需要进行encode编码 分享案例 1：若遇到非业务域名问题，请先固定一篇文章进行测试，打印代码 https://mp.weixin.qq.com/s?__biz=xxxxxxxxxx==&mid=xxxxxxxxxx&idx=1&sn=xxxxxxxxxxxx&chksm=c0457762f732fe745f1bf8b1f99fa7a535335772eb6a104c1cf026ea063e16ec157465894b52&token=246279511&lang=zh_CN#rd 2:打开代码片段，放入打印出来的代码，编译查看是否提示参数错误 [图片] 3：把打印出来的代码进行encodeURIComponent转码 https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzkwMDE4MzU5OQ%3D%3D%26mid%3D2247504930%26idx%3D1%26sn%3D8d98cf8616cf11134620508082bdf1eb%26chksm%3Dc0457762f732fe745f1bf8b1f99fa7axxxxxxxxxeb6a104c1cf026ea063e16ec157465894b52%26token%xxxxxxxxxxxxx%26lang%3Dzh_CN%23rd 4:开发者工具-->添加编译模式-->启动参数-->url=encodeURIComponent转码后的请求，然后编译下 [图片] 附上事例中的代码片段：https://developers.weixin.qq.com/s/CdlD8vmP7AxR 欢迎社区开发者留下自己解决非业务域名报错的步骤 ！！！

web-view内嵌H5页面，在调用腾讯地图页时，提示非业务域名https://3gimg.qq.com/

商用小程序调用地图功能是否需要5万每年的那个商业授权费用。盼答复！

小程序端配置业务域名 提示文件校验失败，若已上传文件，可根据指引自查、 小程序外链腾讯地图H5 地图不支持业务域名文件校验，请问一下这个有什么办法实现小程序可以跳转腾讯地图

小程序跳转的目标h5页面中包含了腾讯地图的接口，导致无法访问。 目前各位大佬有什么好的解决方案么？

大佬来一下呗

目前只知道可以长按保存图片，请问还有其他方法吗

小程序调用H5页面 但是页面里用了腾讯地图 需要添加要业务域名 这要怎么添加?

请问大家，小程序非原生开发，而是h5链路套壳，需要在h5页面唤起授权弹窗等，这种支持接入小程序的订阅消息么？

在小程序中使用webView嵌套h5，打开开发调试后，可以调起微信进行支付。关闭了开发调试之后，点击微信支付就无法唤起，请问怎样可以解决？

小程序中使用webview嵌套h5，停留一段时间，操作会导致ios刷新页面，安卓小程序闪退，请问可能是什么原因导致的

小程序webview嵌套的H5网页，在嵌套的H5网页里面可以调起第三方地图导航吗？

组件不支持。可以调第三方，也可以自行计算。

webview 嵌套 h5页面，h5页面的输入框被键盘遮挡，安卓部分机型出现，华为p40 [图片]

因为涉及zf的业务办理，通过不同服务列表跳转到相应的h5页面，服务至少几十个甚至上百个和与之对应的页面，能通过审核吗

微信网页授权 能力是为了优化用户在微信内登录网站应用的体验而设计的。为进一步规范能力使用，保障用户合法权益，平台将对能力进行调整。  当开发者在网页中在不规范使用发起 snsapi_userinfo 网页授权时，微信将默认打开网页快照页模式进行基础浏览。能力调整将于 2022 年 7 月 12 日 24 时生效。 网页快照页模式介绍快照页将会默认对用户屏蔽网页授权弹窗，用户在快照页中仅可进行滑动浏览操作，其他交互将被限制，并提示用户 “该网页需获取个人信息才可使用完整服务，当前仅可浏览部分内容”。用户如需要使用完整网页服务，可轻触右下角 “使用完整服务” 按钮触发授权弹窗，用户确认后进入原网页。 开发者在快照页内所获取的头像、昵称、openId、unionId 均为虚拟账号数据；快照页与正常页面不共用缓存，快照页的缓存会在用户离开快照页时被清理；快照页内也无法使用微信其它 JS-SDK 的能力。 [图片] 微信网页授权规范授权流程需引导清晰、准确：在申请获取用户信息的弹窗出现前，应该清晰、准确地告知用户获取信息的范围及获取信息的目的；必要场景申请：在必须获取用户信息时才申请，而不是用户尚未了解服务前就强制弹窗。如使用医院挂号时才需要获取用户信息；不强制登录：提供游客模式，供用户了解网页提供的基础服务，不强制用户允许网页获取用户信息后才能使用网页服务。 常见的微信网页授权不规范使用案例强制登录：在用户打开网页时立即要求用户授权，用户拒绝后无法使用网页提供的服务；违规收集个人信息：未在网页提前告知使用个人信息的目的、方式和范围；非必要收集：非必要获取用户信息的网页，如文章、视频等，要求用户在浏览内容前登录；差别对待微信用户：同样的网页在浏览器内可以无需登录直接访问，在微信内却要求用户先登录才可访问。 微信团队 2022年5月9日

你好 ，最近有公众号部分用户获取到的昵称为“微信用户”，同时这部分用户微信支付时 显示【下单账户与支付账户不一致】 希望官方大大看看啥原因

[图片] 问题有: 1固定在底部的按钮,被遮住了,按钮是固定定位的; 2底部的其他内容也被遮住了一部分,例如图中"滴滴出行"这个图片,被遮住了一部分; 3在顶部下拉松开时,会卡,是因为有的css写了position:fixed吗? 已解决, 反复测试发现,在引入web-view的页面,对应的在pages.json里把"navigationStyle": "custom"删了就好了...不知道原因,只知道这样可以解决,

微信小程序webview嵌套的h5页面，好多安卓手机第一次进入页面点击h5内的输入框不弹出键盘，退出在进入可以弹出键盘，ios没有这种问题可直接弹出键盘，开始以为是页面引用的h5的vant导致的，注释掉vant的代码，改为原生的input还是弹不出键盘 [图片]

input点击没反应。

本人使用的VUE框架。 代码提示： 1、vue代码； 2、点击事件代码； 3、php代码； 遇到的大坑重要提示： 3、必须是认证服务号； 4、必须是服务号绑定的微信小程序 5、https接口获取服务号的access_token 6、如果你的https接口没有问题，但是你的wx-open-launch-weapp标签没有显示或者点击无反应。有以下原因： 1》、vue代码样式问题，可以根据我的代码写样式，最好写成一样的。 2》、在微信开发者工具没有反应的话，最好在微信客户端试试。 3》、JSSDK版本是1.6.0。 4》、如果框架写上还不行，可以试试在文件main.js中，写上： Vue.config.ignoredElements = [‘wx-open-launch-app’, ‘wx-open-launch-weapp’]; 新增项： 5》、在小程序后台配置上业务域名，域名必须有证书。代码放到服务器上，用业务域名访问。 官方链接参考： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 还是不行的话，下方留言或者私信我。 1、<template> <div class=“cnt”> <div> <button @click=“onClickOpens”>新开页面跳转</button> </div> <div class=“test-position”> <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxx" path=“pages/index/index.html?user=123&action=abc” > <script type=“text/wxtag-template”> <style>.btn {width: 200px; height: 100px;}</style> <button class=“btn”>打开测试小程序</button> </script> </wx-open-launch-weapp> </div> </div> </template> 2、 onClickOpens() { this.$axios({ method: “POST”, url: “https://接口”, data: { url: window.location.href, }, }).then(function (res) { console.log(res); if (res.status == 200) { console.log(res.data.appid); wx.config({ debug: true, appId: res.data.appid, timestamp: res.data.timestamp, nonceStr: res.data.nonce_str, signature: res.data.sign, jsApiList: [“scanQRCode”], openTagList: [“wx-open-launch-weapp”], // 可选，需要使用的开放标签列表，例如[‘wx-open-launch-weapp’] }); wx.error(function (res) { console.log(res); // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 }); } }); }, 3、 [图片]

最近微信公众号（h5页面）使用snsapi_userinfo授权后，无法获取到微信用户头像了是什么原因？前段时间还可以呢

原因是H5用旧的方式申请JSAPI分享权限，后台返回无权限，因此分享的时候不能自定义，建议开发者接入新的分享方式：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html ，使用新的wx.updateAppMessageShareData和wx.updateTimelineShareData接口来设置分享数据。

小程序是内嵌的h5，分享时拼接的参数， 在微信小程序里分享正常， 在企业微信里分享小程序，ios的分享没有拼接的参数，只是当前页面地址

/**分享朋友圈和好友 */     toShareMomentsAndFriends() {       var url = `${window.location.origin}${window.location.pathname}?state=${encodeURI(state)}`       var title = this.pageData.shareTitle       wx.ready(function() {         wx.updateAppMessageShareData({           title: title,           desc: '我在参加童妍记忆银行大咖宝贝挑赞赛，快来帮我点赞哦...',           // link: url,           link: 'https://clientserver.zhongyanimage.com/AlbumsLive/DetailNew?state=6010762_1⊱1⊱43369',           imgUrl: 'https://objstorage.zhongyanimage.com/albumsLive/detailNew/shareImg.jpg',           success: function(res) {             // alert('分享好友')           },           cancel: function(res) {             // alert('取消分享好友')           },           fail: function(res) {             // alert('分享好友失败')           }         })         wx.updateTimelineShareData({           title: title,           desc: '我在参加童妍记忆银行大咖宝贝挑赞赛，快来帮我点赞哦...',           // link: url,           link: 'https://clientserver.zhongyanimage.com/AlbumsLive/DetailNew?state=6010762_1⊱1⊱43369',           imgUrl: 'https://objstorage.zhongyanimage.com/albumsLive/detailNew/shareImg.jpg',           success: function(res) {             // alert('分享到朋友圈成功')           },           cancel: function(res) {             // alert('取消分享到朋友圈')           },           fail: function(res) {             // alert('分享到朋友圈失败')           }         })       })     }, 正确链接 https://clientserver.zhongyanimage.com/albumsLive/detailNew?state=0018170%E2%8A%B11%E2%8A%B133539 在当前手机上分享出去的链接为：https://clientserver.zhongyanimage.com/albumsLive/detailNew 前后对比，参数丢失。 场景：H5页面，VUE（2.6.10） weixin-js-sdk（1.6.0） 代码如上。 目前，XS MAX(15.1) 和红米K30 5G版（MIUI 12.5.7）两台手机微信版本都是8.0.16 可以进行正常的分享，链接参数不会丢失。 之前都没有出现这个问题。 还有一个问题就是正常打开链接后，点击三个点的菜单，然后点击复制链接，复制出来的链接后面也是不带参数的。 需要加急！！！加急！！！加急！！！ 微信日志已经上传，时间大概在 2021年11月28号 18:02:10 左右 上传日志的微信号：lyh_Gerry

微信聊天窗口打开链接分享在iPhone下都出现了分享只有链接，updateAppMessageShareData自定义的标题和图片都没生效，出现问题的均为8.0.16，尝试过低版本8.0.5没有问题。在测试的安卓机器上显示的是外链提示，无法分享。但是通过二维码分享打开的网页分享又是正常的，期间并代码没有任何改动。 复现链接：https://www.vrtuoluo.cn/527988.html 出现问题微信版本：8.0.16 iPhone 8.0.16 [图片][图片] 前者是通过微信聊天窗口打开链接分享，后者是通过网站二维码扫码分享 PS：若是bug请尽快修复，已经影响到我司业务了，谢谢

请问：现在安卓手机的微信H5的audio 不能自动播放了吗？

我来跪舔大佬了，怎么解决ios端微信无法自动播放音频？现在用vue开发的,在index.html写入以下代码，解决不了。急！！！ let audio = document.getElementById(id);         document.addEventListener('WeixinJSBridgeReady',function(){           audio.load();           audio.play();         },false)

版本信息：小米K30s，MIUI 12.5.5，Android11，微信8.0.15 可以使用如下快捷指令关闭强制X5内核(需要发到群里才能正常点击)：debugmm.qq.com/?forcex5=false使用微信官方提供的测试用例中的可自动播放的任意一个如：https://qiyaoyuan.github.io/source/audio/sample12.html可下拉查看当前页面使用浏览器内核，需确认没有X5内核字样，此时首次点击音频播放无声音 如下图所示未使用X5内核，此时点击下面 Create Audio 按钮，则播放无声音，如开启X5内核，则播放正常 [图片]

各位开发者： 微信内网页在不经过用户允许的情况下自动播放音频，会导致用户没有预期、用户体验差等问题。此外，音频自动播放可能会在用户不知情的情况下给用户带来较大的流量消耗。基于此，微信公众平台将对微信内网页自动播放音频能力进行如下调整： 自2020年04月28日起，用户打开微信内网页时将无法自动播放音频。必须在得到用户手动允许（比如触摸屏幕，单击按钮等）的情况下，才能播放音频，开发者可以提前进行适配调试。 具体的适配调试方法如下： 1、下载安装包：http://dldir1.qq.com/weixin/android/wechat_0x27000C70_1620_autoplay.apk 2、扫描二维码安装浏览器内核 [图片] 3、打开网页，点击右上方菜单，第二行最后一项禁止自动播放（注：再点一次可以变回允许自动播放） [图片] 4、退出页面，重新进入即可体验禁止自动播放的效果。 附测试用例：https://docs.qq.com/sheet/DWlduYWxhVEFkRkVa?tab=BB08J2&c=B12A0F0 微信团队 2020年03月30日

想在小程序首页放置视频链接，请问在没有特殊资质的情况下，可以播放哪些渠道的视频？比如微信视频号的视频、第三方链接的视频、腾讯视频等

小程序支持上传本地pdf或者word到服务器吗？

- 需求的场景描述（希望解决的问题）非图片视频类文件上传 - 希望提供的能力 需要上传word,pdf之类的文件如何上传，怎么调起本地选择文件弹框

用的是阿里云的OSS存储。上传的图片可以直接打开预览，但是word和pdf可以直接打开浏览吗？ 现在让软件公司开发的小程序，说是文档不能浏览，也不能直接跳转到浏览器打开。 只能复制文档的地址，然后手动去浏览器里打开，这样实在是太麻烦了。