- wxml 文件编译错误,也没说错误在哪里?
[图片] 这是打开了调试-调试微信开发者工具看到的控制台,也没看明白什么意思 [图片] [图片] 普通控制台一点错误都不报,编译就说wxml出问题
2022-02-15 - 微信字体文件加载,IOS正常,安卓无法正常加载?
wx.loadFontFace({ family:'alimamashuheiti', source:'url("https://file-esurl-cn03.oss-cn-hangzhou.aliyuncs.com/RTD2024/alimamashuheiti.ttf")', success: function(res){ console.log(res,'字体加载成功!'); }, fail: function(err){ console.log(err,'字体加载失败!'); } })
2024-09-24 - unknown file: path.requeueComputedKeyAndDecorators
miniprogram-ci preview 上传代码报错。 报错1: unknown file: path.requeueComputedKeyAndDecorators is not a function at enhance (/usr/local/lib/node_modules/miniprogram-ci/dist/modules/corecompiler/summer/plugins/enhance.js:1:1579) at doTransform (/usr/local/lib/node_modules/miniprogram-ci/dist/modules/corecompiler/summer/plugins/enhance.js:1:1827) at Object.runSummerPluginHook (/usr/local/lib/node_modules/miniprogram-ci/dist/modules/corecompiler/summer/worker.js:1:1225) { code: 10045, path: 'app/components/block-item/index.js' 报错2: { type: 'SummerError', message: 'TypeError: _traverse.visitors.environmentVisitor is not a function', stack: 'TypeError: _traverse.visitors.environmentVisitor is not a function\n' + ' at Object.<anonymous> (/usr/local/bin/global/5/.pnpm/node_modules/@babel/helper-replace-supers/lib/index.js:22:51)\n' + ' at Module._compile (node:internal/modules/cjs/loader:1159:14)\n' + ' at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)\n' + code: 10046, path: 'miniprogram/api/account.ts', plugin: 'summer-typescript', hook: 'load' } 测试了一下npm包的版本均有问题。 miniprogram-ci@2.0.6 miniprogram-ci@2.0.4 miniprogram-ci@1.9.16 miniprogram-ci@1.9.8 配置如下: miniprogram-ci preview \ -v false \ --pp ./dist \ --pkp ./private-key.txt \ --enable-es6 true \ --enable-es7 true \ --enable-minify true \ --enable-allowIgnoreUnusedFiles true \ --enable-autoprefixwxss true \ --uv ***** \ --ud ***** \ --appid ***** \ -r 1 上周五还能用,今天周一我们公司所有的小程序CI全部异常。
2024-07-29 - 小程序手势:让半屏弹窗更顺滑
手势系统:更方便、自然、直观的操作方式,提高用户体验和操作效率 —————— 在小程序页面开发中,我们经常用半屏弹窗来进来内容展示,例如:微信开放社区切换主页、加入购物车的选项页、文章留言区等等。 [图片] 常见的半屏弹窗展示逻辑是这样的: 打开弹窗:点击 “打开弹窗” 按钮展示弹窗关闭弹窗:点击“关闭按钮” or 遮罩层 关闭弹窗当我们想在半屏弹窗加一些交互动画时,可以监听节点的 touch 事件来做一些手势判断,进而处理拖拽事件。但是这种方式实现的滚动动画容易卡顿,出现延迟的情况,效果并不理想。 为了丰富小程序的交互体验,我们内置了一批手势组件,可以帮助开发者更好的实现交互动画的效果。 下图演示使用手势的半屏弹窗下拉效果与普通半屏下拉的对比。 当内部评论列表往下拉到顶部时,变为半屏的下拉,可直接下拉关闭弹窗。 [图片] 我们来看下这种操作是怎么实现的 在上面评论列表的半屏弹窗中会有一个 scroll-view 滚动组件,在 scroll-view 中会有滚动事件,当滚动到顶部时,我们希望有整个半屏的下拉事件。 所以我们需要在半屏的最外层放置一个拖动手势组件 pan-gesture-handler。 由于拖动组件内部的 scroll-view 也是可以滚动的,所以这里需要进行一个手势协商的处理,就是什么条件下由哪个组件来响应手势。 当手势往下 ⬇️ 滚动时,此时判断内部 scroll-view 滚动条的位置: 滚动条处于顶部:外层 pan-gesture-handler 响应滚动,此时半屏往下拖动至关闭半屏;滚动条不处于顶部:内层 scroll-view 响应滚动,此时内部列表往上滚。[图片] 当手势往上 ⬆️ 滚动时,此时判断半屏的位置 半屏不完全打开时:外层 pan-gesture-handler 响应滚动,此时半屏往上拖动至完全打开半屏半屏完全打开时:内层 scroll-view 响应滚动,此时内部列表往下滚[图片] 我们来看一下代码的实现,这里用到的手势组件 pan-gesture-handler(拖动时触发)和 vertical-drag-gesture-handler(纵向滑动时触发),手势组件有以下属性 on-gesture-event:手势回调事件should-response-on-move:是否响应当前手势的 move 阶段simultaneous-handlers:指定需要协商的手势是哪几个,下面演示表示 pan 和 scroll 协同触发。native-view:代理的原生节点,这里 scroll-view(scroll-y) 内有个 vertical-drag 手势,scroll-view 自身无法处理,需要被代理出来 ... 接着,我们看看在页面 js 中怎么处理手势。 在手势处理的回调中因为会改变半屏的状态值,所以这里的回调函数采用 worklet 函数,worklet 函数运行在 UI 线程,使得小程序可以做到类原生动画般的体验。 // page.js // shared 创建的变量为共享变量,可在 UI 线程和 JS 线程间同步 this.transY = wx.worklet.shared(1000) this.scrollTop = wx.worklet.shared(0) this.startPan = wx.worklet.shared(true) // shouldPanResponse 和 shouldScrollViewResponse 用于 pan 手势和 scroll-view 滚动手势的协商 shouldPanResponse() { 'worklet' return this.startPan.value }, shouldScrollViewResponse(pointerEvent) { 'worklet' // transY > 0 说明 pan 手势在移动半屏,此时 scroll-view 滚动不应生效 if (this.transY.value > 0) return false const scrollTop = this.scrollTop.value const { deltaY } = pointerEvent // deltaY > 0 是往上滚动,scrollTop <= 0 是滚动到顶部边界,此时 pan 开始生效,scroll-view 滚动不生效 const result = scrollTop <= 0 && deltaY > 0 this.startPan.value = result return !result }, // pan 手势处理 handlePan(gestureEvent) { 'worklet' if (gestureEvent.state === GestureState.ACTIVE) { const curPosition = this.transY.value const destination = Math.max(0, curPosition + gestureEvent.deltaY) // 改变半屏的位置 this.transY.value = destination } // 其他手势状态的处理,如滚动结束时计算半屏处于打开还是关闭的状态 } 目前,同程旅行 已经上线了手势结合半屏的效果 体验路径:酒店查询 - 选择酒店 - 选择入住人 - 新增入住人 [图片] 普通半屏结合手势代码片段:https://developers.weixin.qq.com/s/lx0RH1mD7rGj 手势除了在普通半屏的应用之外,也可以实现分段式半屏。下面演示的分段式半屏比普通半屏的判断条件更多一些。 判断条件同普通半屏类似,根据手势方向 和 分段式半屏当前的位置来判断是响应分段式半屏还是内部列表,响应分段式半屏是改变到哪一个位置。 [图片] 这里与普通半屏不同的是我们还改变了地图的缩放级别(scale) 因为 worklet 函数是在 UI 线程运行的,当要改变 data 值时,需要通过 wx.worklet.runOnJS 调回 JS 线程。 // page.js // 设置 map scale // 运行在 JS 线程 setMapScale(scale) { this.setData({ scale }) }, // worklet 函数,运行在 UI 线程 scrollTo(toValue) { 'worklet' let scale = 18 if (toValue > screenHeight / 2) { scale = 16 } // 从 UI 线程调回 JS 线程 wx.worklet.runOnJS(this.setMapScale.bind(this))(scale) this.transY.value = timing(toValue, { duration: 200 }) }, // 处理拖动半屏的手势 handlePan(gestureEvent) { 'worklet' // 滚动半屏的位置 if (gestureEvent.state === GestureState.ACTIVE) { // deltaY < 0,往上滑动 this.upward.value = gestureEvent.deltaY < 0 // 当前半屏位置 const curPosition = this.transY.value // 只能在 [statusBarHeight, screenHeight] 之间移动 const destination = clamp(curPosition + gestureEvent.deltaY, statusBarHeight, screenHeight) if (curPosition === destination) return // 改变 transY,来改变半屏的位置 this.transY.value = destination } if (gestureEvent.state === GestureState.END || gestureEvent.state === GestureState.CANCELLED) { if (this.transY.value <= screenHeight / 2) { // 在上面的位置 if (this.upward.value) { this.scrollTo(statusBarHeight) } else { this.scrollTo(screenHeight / 2) } } else if (this.transY.value > screenHeight / 2 && this.transY.value <= this.initTransY.value) { // 在中间位置的时候 if (this.upward.value) { this.scrollTo(screenHeight / 2) } else { this.scrollTo(this.initTransY.value) } } else { // 在最下面的位置 this.scrollTo(this.initTransY.value) } } }, 分段式页面代码片段:https://developers.weixin.qq.com/s/fw0U31mI7bGf 半屏的交互除了在页面内实现,也能跨页面实现,如常见的下沉式半屏交互。其中,半屏效果与上述实现类似,而前一页面的下沉实现需要结合自定义路由。 后面的文章中我们会介绍自定义路由结合手势怎么去实现下沉式半屏效果,不仅如此,还有很多类原生的页面切换效果都能通过自定义路由实现。 [图片]
2023-10-20 - draggable-sheet 组件:快速实现半屏拖拽
在日常应用中,半屏可拖拽交互已经成为了用户体验的重要组成部分。页面内的分段式拖拽、半屏拖拽放大等等,这些常见的场景使用半屏拖拽交互可以很好的提升用户的体验感。 目前,实现半屏拖拽交互可以使用手势协商系统来实现,不过需要理解手势协商系统并编写相关代码。 考虑到半屏拖拽交互比较常见,为了让小程序开发者更加轻松地实现半屏拖拽交互,小程序 Skyline 渲染引擎推出了 draggable-sheet 组件。这个组件自带半屏拖拽交互,可以帮助开发者省去手势协商相关的代码,只需要简单配置容器大小、吸附阈值等参数即可实现半屏拖拽交互。无论是半屏弹窗、分段式半屏还是其他场景,draggable-sheet 组件都能帮助你实现更加出色的用户体验。 快速接入 使用 draggable-sheet 组件的流程如下: Step 1. 配置 draggable-sheet 组件 在页面中引入 draggable-sheet 组件,并且配置 draggable-sheet 组件的参数,包括容器大小、吸附阈值等。 在 draggable-sheet 组件内嵌套 scroll-view 组件,且声明 associative-container="draggable-sheet" 将 scroll-view 组件与 draggable-sheet 组件进行关联即可。 <!-- page.wxml --> <draggable-sheet class="sheet" initial-child-size="0.5" min-child-size="0.2" max-child-size="0.8" snap="{{true}}" snap-sizes="{{[0.4, 0.6]}}" > <scroll-view scroll-y="{{true}}" type="list" associative-container="draggable-sheet" bounces="{{true}}" > <!-- 这里放置半屏内容 --> </scroll-view> </draggable-sheet> Step 2. 使用 DraggableSheetContext 接口控制滚动 使用 createSelectorQuery 方法获取 draggable-sheet 组件的节点,然后通过 node 方法获取 DraggableSheetContext 实例。调用 DraggableSheetContext.scrollTo 即可将 draggable-sheet 组件 滚动到指定位置。 // page.js Page({ onReady() { this.createSelectorQuery().select('.sheet').node().exec(res => { // 使用 sheetContext 控制 draggable-sheet 组件的滚动 const sheetContext = res[0].node sheetContext.scrollTo({ size: 0.7, animated: true, duration: 300, easingFunction: 'ease' }) }); }, }); 使用 draggable-sheet 组件,你可以轻松实现半屏拖拽交互,让用户体验更加自由。同时,使用 DraggableSheetContext 接口,你可以动态控制 draggable-sheet 组件的行为,实现更加灵活的交互效果。 例如,我们这里演示了使用 draggable-sheet 实现的 分享弹窗效果 和 分段式拖拽查看旅游景点列表~ [图片][图片] 与其他组件联动 除了简单的半屏弹窗之外,我们还可以通过 worklet:onsizeupdate 回调,在 draggable-sheet 组件尺寸发生变化时,将 draggable-sheet 组件与其他组件进行动画交互。 例如,我们这里在 draggable-sheet 接近搜索框时,与搜索框衔接为一体,隐藏后面的页面,以此实现更流畅的展示效果。 首先,给 draggable-sheet 配置监听函数 worklet:onsizeupdate="onSizeUpdate" <!-- page.wxml --> <view class="search-wrp"> ... </view> <draggable-sheet class="sheet" ... worklet:onsizeupdate="onSizeUpdate" > 然后,我们在 onSizeUpdate 发生变化时,通过 worklet 函数改变共享变量的值即可 Page({ // 监听 draggable-sheet 尺寸变化去改变 progress onSizeUpdate(e) { 'worklet' const distance = sheetHeight - e.pixels this.progress.value = distance >= 20 ? 1 : distance / 20 }, onLoad(options) { const progress = wx.worklet.shared(1) // 绑定 worklet 动画,progress 变化时改变搜索的背景来显示/隐藏 map this.applyAnimatedStyle('.search-wrp', () => { 'worklet' const t = progress.value return { backgroundColor: `rgb(245, 242, 241, ${1 - t})` } }) ... this.progress = progress }, }) [图片] 如果想要快速了解和实践本文中的案例,可在 PC 端点击 代码片段 进行调试。 注意:draggable-sheet 组件支持页面内的拖拽放大功能,如果需要实现页面返回的功能,可以使用 预设路由 来实现。 总结 draggable-sheet 组件通过拖拽的方式来展开或关闭一个面板,提供更加直观、自然的用户交互体验。不仅能够节省屏幕空间,让用户更加高效地利用界面,适用于展示评论列表、商品列表、展开筛选条件、展示更多信息等场景。对于需要提供更加灵活、自由的用户交互体验的小程序来说,draggable-sheet 组件是一个非常有用的功能。 因此,我们邀请大家尝试将这个能力应用到自己的小程序上,通过这个组件来提升用户体验和交互效果。结合其他组件和功能,打造出更加丰富、多样的小程序~
2024-02-26 - 半屏小程序中,tabBar页面的贴底元素及滚动异常?
API名称:wx.openEmbeddedMiniProgram 机型:仅Android 微信版本:8.0.49 基础库版本:3.4.4 问题描述:在半屏小程序中,从普通页面跳转到tabBar页面,如果tabBar页面的内容大于一屏,则以fixed定位贴底的元素无法显示,并且这一屏的内容无法滚动到底部。此时触发一下onHide和onShow,底部元素出现并且可以滚动到页面底部(容器重新计算了?)。如果直接半屏打开这个tabBar页面则无此问题。仅安卓手机,iOS手机暂未复现。 截图:(按顺序) [图片][图片][图片][图片] 复现代码片段: // 普通页面 wxml <button bind:tap="go">购物车</button> // 普通页面 js Page({ go() { wx.switchTab({ url: '/pages/tabBar/cart/cart', }) }, }) // tabBar页面 wxml <view class="items"> <view wx:for="{{list}}" class="item">{{item}}</view> </view> <view class="placeholder"></view> <view class="bottom">底部模块</view> // tabBar页面 wxss .items { padding: 20rpx 0; } .item { display: flex; align-items: center; justify-content: center; height: 200rpx; background-color: cornflowerblue; color: white; } .item + .item { margin-top: 20rpx; } .placeholder { height: 100rpx; } .bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: center; height: 100rpx; background-color: cornsilk; } // tabBar页面 js Page({ data: { list: [1, 2, 3, 4, 5, 6, 7, 8, 'END'], }, })
2024-05-24 - H5网页跳转小程序
现在小程序越来越普遍了,从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)真机:会有要打开小程序的名字 [图片]
2024-03-06 - WeixinJSBridge.beforeinvoke is not a function?
环境:(env: Windows,mp,1.05.2204250; lib: 2.26.1) 报错:window.WeixinJSBridge.beforeinvoke is not a function 问题:在onLanch里面调用不了wx.request的吗? App({ onLaunch() { wx.login({ success: res => { wx.request({....}) } }) } })
2022-10-09 - input组件,如果页面内容很多的情况下,输入框在iOS系统会抖动,请问怎么解决呢?
input组件,如果页面内容很多的情况下,目前在列表页面使用的,输入框在iOS系统会抖动,请问怎么解决呢?
2023-08-23 - (21)独立分包与分包预下载
在「小程序 · 小故事」的第一期,我们曾和大家一起分享过「分包加载」的故事。随着小程序功能越来越多样,页面也越来越多,但不同页面的访问频率是有一定差异的。 分包加载允许开发者将小程序划分为主包和若干个分包,将较少用到的页面或功能划分到若干个分包中,主包内只保留最频繁使用的页面和公共的代码。小程序启动时默认只加载主包,再按需加载分包。这一机制保证了在小程序包大小增加的情况下,依然能保持良好的启动速度。 为满足小程序承载的功能不断丰富的需要,小程序的代码包大小上限已提高到 8M。随着小程序应用场景和使用范围的扩大,在实践中,我们发现分包加载仍有一定的局限性。尤其是越来越多的 H5 服务迁移到小程序后,对于小程序的启动速度有更高要求。为了更好的提升小程序的加载速度和使用体验,小程序近期开放了「独立分包」和「分包预下载」两个新的能力,进一步丰富了分包加载的功能和使用场景。 01独立分包 1 技术背景 由于技术实现的差异,小程序首次启动时需要进行代码包的下载,因此在启动性能上与网页相比有一定劣势。通过对小程序启动耗时的分析,我们发现代码包大小对小程序启动速度是有最直接的影响。 一方面,代码包越大,下载时间就越长; 另一方面,代码包越大,通常意味着小程序页面结构和代码逻辑复杂,启动时代码注入执行的时间越长。 采用分包加载一定程度上解决了代码包下载耗时过长的问题。但小程序中的某些场景(如广告页、活动页、支付页等),通常功能不是很复杂且相对独立,对启动性能有很高的要求。在现有方案中,启动这一页面需要依赖整个主包的下载,如果页面在分包中,还需等待分包的下载,启动性能有严重的瓶颈。此时如果依赖开发者进行代码重构,重新分包,不仅工作量大,而且会影响其他分包的使用体验。为了解决这一问题,我们提出了「独立分包」方案。 2 功能简介 独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当用户进入普通分包或主包内页面时,主包才会被下载。 开发者可以将部分对启动性能要求很高的页面放到特殊的独立分包中。当小程序从独立分包页面启动时,只需要下载分包就可以直接运行,可以很大程度上提高分包页面的启动速度,实现小程序的秒开。 [图片] 由于小游戏中没有页面的概念,也没有小程序中多种入口的使用场景,因此小游戏目前没有支持独立分包。 3 配置方法 独立分包的配置方法十分简单,只需要在原有分包配置的基础上定义 independent 字段,即可将一个分包设置为独立分包,例如: [图片] 4 使用限制 独立分包虽然属于分包的一种,但其不依赖主包独立使用,因此在加载流程和运行环境上与普通分包相比有一些差异。除了分包本身的限制外,独立分包还有以下限制: ● 独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、模板、wxss、自定义组件等; ● App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为; ● 独立分包中暂时不支持使用插件。 为了小程序有更好的使用体验,我们不建议开发者把过多的小程序逻辑放置到独立分包中,也不建议在小程序中过度的使用独立分包,例如把每个页面都放到一个独立分包中。 关于独立分包的详细内容请参见 独立分包 · 小程序 02 分包预下载 1 技术背景 在使用「分包加载」后,虽然能够显著提升小程序的启动速度,但是当用户在使用小程序过程中跳转到分包内页面时,需要等待分包下载完成后才能进入页面,造成页面切换的延迟,影响小程序的使用体验。分包预下载便是为了解决首次进入分包页面时的延迟问题而设计的。如果能够在用户进入分包页面之前就预先将分包下载完毕,那么进入分包页面的延迟就能够尽可能降低。 此前,小游戏中已经提供了「基于API」的分包预下载能力。在设计小程序分包预下载能力时,我们设计了「基于配置」和「基于API」两种分包预下载形式,「基于配置」的方式使用简单,且便于对预下载的使用情况进行控制,防止开发者滥用;「基于API」的方式使用起来更灵活,能够动态的调整预下载策略。综合考虑用户的使用感受和内测阶段第三方开发者的反馈后,我们最终决定首先推出「基于配置」的分包预下载能力。 2 功能简介 开发者可以预先配置某个页面可能会跳转到的分包(对于独立分包,也可以预下载主包),在进入小程序某个页面时,由基础库在后台自动预下载可能需要的分包。用户在进行页面跳转时,分包通常已经下载完成,不需要额外等待,可以有效提升进入后续分包页面时的启动速度。此外,考虑到用户的流量和存储空间,小程序也会对预下载的大小和网络进行一定的限制。 [图片] 3 配置方法 开发者可以通过在 app.json 中增加 preloadRule 字段,控制进入某个页面时进行预下载的分包,并设置触发预下载的网络环境。 [图片] [图片] 4 使用限制 对于手机用户而言,数据流量和存储空间是非常重要的资源。一方面,分包预下载能够提升小程序用户的使用体验;另一方面,过度的预下载也会破坏分包按需使用的原则,过度的占用用户的存储空间,消耗数据流量。如果开发者每次启动小程序时都将所有分包进行下载,会消耗很多不必要的流量和存储空间。 为了在分包预下载的效果和对用户资源的消耗上取得平衡,我们限制了同一个分包中的页面预下载总大小不得超过2M,并鼓励开发者按需设置分包预下载的网络条件。 关于独分包预下载详细内容请参见 分包预下载 · 小程序 03 小结 独立分包与分包预下载进一步丰富了分包加载的功能,大大拓展了分包加载的使用场景。同时,独立分包和分包预下载是相辅相成的,配合使用可以获得更好的效果。 例如,开发者可以将一个活动推广页放到一个独立分包中,利用独立分包的特性能够提升活动页面的加载速度,提升转化率。在页面中开发者可以引导有需要的用户跳转到小程序其他页面,使用小程序的更丰富的功能。在这一过程中,可以利用分包预下载能力,将主包或相关分包进行预下载,降低页面跳转的延迟,留住更多用户。 开发者在使用这两个新能力的过程中,如果遇到问题或者有什么建议,欢迎在微信开放社区(https://developers.weixin.qq.com)进行反馈,我们会根据开发者的反馈,不断的优化和丰富分包加载功能,减少功能限制,提升小程序的加载性能和使用体验。
2018-10-14 - 分包预下载 preLoadRule 的下载时机和逻辑是什么?
找了下官方文档里面并没有类似的说明,触发预下载的时机是在指定页面渲染时,指定页面渲染后,还是说是会检测页面帧率稳定后再进行下载
2023-11-17 - 使用独立分包和分包预下载(上)
[视频] 你好,我是李艺。 上节课我们学习了按需注入和初始渲染缓存,明确了静态导航页适合使用初始渲染缓存,动态详情页适合使用骨架屏的策略。这节课我们学习分包、独立分包以及分包预下载。 首先我们看一下问题,在冷启动流程中间使用按需注入改良的只是代码注入阶段的性能,如果这个代码包本身它就比较大,那么在第一阶段,也就是资源准备阶段,就会浪费大量的时间,还有如果是代码包过大,它主包超过2MB,在微信开发者工具里面根本也没有办法上传以申请这个版本的审核,为了让这个代码包瘦身,微信开发者工具提供了静态代码依赖分析这个工具,可以帮助开发者找到无依赖文件。 但是有一点我们需要注意,有一些文件它表面上看起来是用不到的,但其实是不能删除的,因为有时候它是在运行时动态加载并使用的,如果这个代码包删除了无依赖的文件以后依然超过了2MB的限制,这时候应该怎么办?小程序又提供了分包以及独立分包的机制,只要单个代码包不超过2MB,总包大小不超过20MB即可。有些开发者可能觉得2MB限制太小了,决定阈值的从来其实都不是规定,而是网络环境和用户群体,国内有很多网民还在使用低端机,包括WiFi以及4G网络环境其实还没有100%的普及,或许等以后5G技术普及以后,限制会进一步的放开,那个时候主包大小或许会进一步的放大,在目前这个阶段,在当下网络环境里面如果要想提升小程序的启动性能以及运行性能,只能在深谙小程序的运行机制以及启动流程的前提之下,在已有的技术框架之下靠精耕细作的精神一个字节 一个字节地去优化。 接下来我们看项目实践。 目前我们的项目已经超过了2MB,必须通过分包分割总代码包的大小。 首先我们看实践一:用户主页分包、创建tab-bar组件。 将用户主页放在分包内,只需要给页面所在的目录添加分包配置就可以了,在app.json全局配置文件里面,我们可以在subpackages这个节点之下添加一个分包设置,root设置为当前页面所在的目录的一个名称,然后再加上pages设置就可以完成用户主页的一个分包设置了。 在小程序里面,如果是使用配置的方式开启tabBar导航,或者是使用这种官方自定义的方式,也就是我们通过在配置文件里面设置tabBar.custom等于true这样的方式实现tabBar导航组件,这个时候tabBar它页面地址只能放在主包里面,为了破除这个限制,我们可以使用自定义的方式实现tabBar的导航。 首先我们需要在app.json配置文件里面将tabBar的配置删掉,我们现在不需要这个配置了,然后我们在components目录下面创建一个tabBar的组件,用它提供全局的导航功能,在组件的JS代码里面会创建一个select方法,它设置哪个链接,当前是选中的状态,这个方法是给外部的代码进行提供的,这个组件的wxml代码很简单,主要是渲染一个list列表,而且这个list的数据还是从原来app.json文件里面复用过来的,wxss样式仅包含自定义组件本身它所需要的样式,这个里边有一个特殊的类样式,就是bar__active。这个是选中的样式,当这个链接与当前这个页面地址一致的时候这个文本它会呈现红色,这个图标也是红色图标,文本的选中颜色还有文本的默认颜色也就是它默认呈现的颜色,与我们原来在app.json配置文件里面的设置是一致的,完全以自定义组件这种方式实现的tabBar导航有哪些优点?我们一起看一下。 首先第一点,页面不再受分包的限制。我们可以将这个页面放到任何一个分包里面去;第二点就是tab-bar组件里边用到的图标,也不再被限制只能放在本地;第三点就是这个代码里面所有的tabBar页面的跳转也不用再单独使用wx.switchTab这样的接口,可以统一使用wx.navigateTo或者是wx.redirectTo这两个接口任何一个都可以,甚至tab-bar组件本身,如果我们愿意的话还可以将它进一步的优化,不放在主包里边,放在分包里面也是可以的。 现在我们开始实践一的代码演示。 在拿到这个源码以后,我们需要在小程序里面进行一个代码的引入,引入方式也很简单,只需要找到对应的目录然后选择,选择以后这个地方AppID要选择我们自己的账号的AppID,这个名称也可以修改,然后单击确定就可以了。我们要实现分包,实现用户主页的一个分包,首先我们看一下app.json这个文件,这个文件里面,目前我们这个地方其实已经有了一个分包设置了,在subpackages下面只需要在这个底下再添加一个新的配置就可以了。这个里面第一个字段要写的是root,它代表的是我们分包的一个地址,这个地方我们写user,因为我们这个项目底下确实有一个user的目录,也就是这个,根目录指定以后,接下来我们要指定pages,也就是这个页面了,这个页面它是我们在分包下面的一个相对地址,我们可以在这个地方复制一个相对路径,然后粘到这个地方,前面这些是不需要的,它只需要从pages下面,也就是从我们目录下面,开始计算路径,这样的话我们分包的一个设置就算是已经完成了。 再往下我们再创建我们的自定义导航按钮,自定义导航的组件在我们的components目录下面,然后去创建这个组件,现在这个目录还没有,可以创建一下目录,然后这个目录下面再创建一个tab_bar这样的子目录,在这个目录下面放tab-bar自定义组件它的一个源码,可以采用一种快速的新建的方式,比如这个地方我们选择新建Component选择这个菜单,然后写入一个index,完成以后,下面所有的四个文件已经全部默认帮我们创建了,下面开始实现这个代码,这个代码我们之前这已经有实现好的,为了快速我们直接复用我们已经实现的代码,这是页面的标签代码,这个标签代码里面我们可以看一下,主要是一个列表渲染,这个地方用了一个wx:for这样一个列表渲染,然后循环渲染这个list里边还有关于image这个地方有一个判断,当前的index是否等于selected就是我们当前选择的索引,如果等于的话,然后去渲染这样的一个图标地址,如果否的话就是选择另外一个图标地址,这是它的样式。 这个地方是我们这个页面的就是文本 一个标题或者说我们页面的一个名称,这个页面的一个跳转是靠我们绑定的一个事件,在这个上面可以看一下,在这个地方有一个tap 一个绑定,nav的方法上面,我们再看一下JS代码,这是我们JS代码,这个JS代码里面nav,这是我们刚才提到的用于页面跳转的一个方法,上面这有一个select它的参数是index就是索引,我们当前选择哪一个,这个方法是对外提供的,在这个页面里面使用这个组件的时候,稍后我们会调用这个方法。 再往上就是data对象了,第一个是一个selected,就是选择的索引,我们当前选择这列表里面哪一项作为选中的页面,它的默认是0,下面这个list这些数据是我们原来的app.json里面的数据,它的一个修改,我们可以看一下我们原来的数据这个地方 这有一个list,我们可以将这个list给它拷贝一下,除了这个list还有两个color,这里有一个color 这有一个color,我们先将这个list给它拷贝一下,然后到tab_bar这个里面,可以放在这个地方对比一下,这两个数据是很像的,它的差别其实只是我们pagePath前面多了一个斜杠,包括iconPath还有selectedIconPath前面多了两个斜杠,其他的其实都是一样的。 当然了我们上面的这种格式是微信它定义的,在app.json里面,如果是要定义tabBar导航的话必须要用这种格式,但下面这种格式是我们自定义的,我们选择这样一种方式定义便于我们和默认的官方配置、保持一致的数据结构,最后我们再看一下样式。这个代码里面只有一项就是component等于true,如果它是个组件的话,在这个json里边它这一项是等于true的样式代码,这是它的一个样式代码,在样式代码里面可以看到这个里面有一个bar__active代表的是选中状态,选中状态下它文本色,这个地方其实是文本,我们可以看到在这个里边这是它的样式,选中以后文本变成这个颜色,d81e06这样的一个样式与我们前面在这个地方看到的样式它俩是一样的,包括我们前面的5151默认的文本颜色跟我们组件里面的样式也是一样的。我们可以看一下,也就是这个颜色,这是它默认的一个颜色,是一样的。这是组件已经准备好了,这个它默认生成的,其实下面那个我们不需要,只需要这一个就可以了,组件已经准备好了。 接下来我们需要在配置文件里面做一个组件的引入,在这个里面也需要写一个usingComponents,然后是tab-bar,一般的话自定义组件的命名方式就使用这样一种单词中间用连字符,因为官方它组件,然后分割单词也是这样一种形式,所以我们就沿用官方的形式就可以了,组件的地址在哪里,这个地方可以复制一下相对地址,然后粘到这个地方再稍做修改这样就可以了,稍做修改,当然后面JS不需要 把这个给去掉,接下来我们就需要在我们的三个页面:用户主页、商品详情页和主页面里面分别添加tar-bar组件的一个使用。 首先我们在user这个里面找到这个标签页wxml这个页面,在它的最下方添加一个tab-bar,再给它一个id,这样一个代码,然后我们还需要在JS里面,在这个页面的onReady的时候onReady,这个地方没有onReady就在这个地方再加一个onReady,在这个地方需要调用这个页面的selectComponent这个地方的参数,我们写#tabBar 井号代表的是id,tabBar是我们刚才定义的id,选择以后再调用它的select方法,要传一个参数,因为我们用户主页居于导航栏的里面的属于它的索引在2这个位置,所以我们这地方要选2。这是用户主页,然后将这个代码复制一下,在另外的两个页面里面,一个是商品详情页,在这个页面最下方也拷贝一份,还有是我们的index主页的最下方也放置一份,这是wxml代码,接着是拷贝我们的选择代码,在主页里面找到onReady,在这个地方可以放在最后面 放在这个位置,这个是主页,数字要设置为1,还有一个是商品详情页,商品详情页在onReady里边添加代码,这个要设置为0,这就是我们的代码,现在已经改造完成了。 单击编译我们看一下运行效果。这个地方有一个问题,就是我们的地址它不应该在subPackages分包内出现这样的一个提示,这个提示是什么意思,看一下我们这个项目的配置文件,现在我们给用户主页实现分包,将这个地址放在了这个地方,当然这个地方多了一个.js,放在这个地方以后,在我们整个文件默认的pages下面,这个地址其实我们就应该给它删掉,它不需要了,一个页面不能同时出现在两个包里,然后这样去处理再编译一下 看看效果。 这个地方也有一个问题,模拟器无法获取这个文件,已经被忽略上传,它这个忽略上传我们暂时不要去理它,只是它自己的一个提示,现在要测试导航组件的一个表现是否正常,选择商品页,商品页现在高亮了对吧,然后选择主页,然后主页高亮了对吧,然后选择我的页面,我的页面也高亮了对吧。这个导航已经实现了它预想的一个功能,现在我们拿我们的商品详情页,就是detail这个页面它作为启动页再测试一下,也没有问题对吧,也显示了这个代码它的作用是良好的。 在这个地方有一点我们需要提示一下,我们这个代码里面是有选择组件,然后再调用其中的方法的代码也就是这个对吧,在主页里面这个地方选择组件然后再调用它的方法,选择这个组件它其实未必是可以选到的,所以如果这个地方我们要避免出错的话我们可以加一个问号,加个问号以后 就是ES6里面的可选链语法,如果是它不是null,然后找到这个组件,调用它的一个方法,这样的一个语法,这是主页,然后在这个商品详情页里面也是一样的一个处理,这个地方加一个问号,还有一个是在用户主页这个地方也加一个,我们再测试一下,没有问题。正常情况下这个页面已经走到了onReady这个地方,按理说它不会出现选择不到的这种情况,但是有一种情况我们稍后可能会遇到,如果是我们当前这个页面,它本身它跟我们的用到的组件,我们现在这个组件tab-bar这个组件是放在我们主包里面,因为它是在app.json里面配置的,如果是我们这个页面是在一个独立分包里面 它是独立的,然后它显示的时候其实主包没有加载,主包里边的组件你也使用不了,这种情况下有可能,这个地方我们要去选择组件的时候,它可能拿到的是一个空值或者是一个undefined,你在一个undefined调用它的方法,显然是不合适的话可能会报错,所以这个地方所有的组件其实都是一样,你如果想万无一失的话,给它加一个问号,这个问题就可以轻松化解了。 这个代码演示就到这里了。
2022-07-14 - 怎么阻止导航栏返回按钮的默认跳转行为?
怎么阻止导航栏返回按钮的默认跳转行为?
2022-01-12 - 小程序底部导航栏跳转之前如何拦截?
用户点击底部导航栏进行tabBar的切换,如何根据权限在跳转前进行限制,并非动态生成
2023-09-05 - 小程序导航栏出现返回首页按钮
目前返回首页按钮出现的条件为(需同时满足): 1. 使用了默认导航栏样式(非 custom) 2. 不是首页或 tabbar 页面(在 app.json 中定义的) 3. 是页面栈最底层页面 如果是开发者自己手写的 tabbar 导致的问题,需要在页面的 onShow 中调用 wx.hideHomeButton() https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.hideHomeButton.html手动隐藏返回首页按钮。
2019-09-27 - 开放工具报错Fatal: unexpected loadSdkSubPackage case?
运行项目时一开始是正常的,然后就遇到工具报错:Error: Fatal: unexpected loadSdkSubPackage case,尝试了更新开发工具、重新拉取代码后依然无效 [图片]
2023-02-04 - 如何解决“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
错误原因: 微信开发者工具从 1.05.2201210 版本开始,对小程序项目新增了无依赖文件过滤能力。 如果某个 js 文件被静态分析显示是无依赖文件,在实际运行时又被其他 js 文件 require 引用了,则会在工具模拟器中报错这个错误。 此时,如果你继续预览或者上传代码,则在真机运行环境中会报 xxx.js is not defined 的错误。 解决方式: 修改依赖引用的代码:可根据控制台中的【代码依赖分析异常】提示进行修改。(推荐)关闭过滤无依赖文件:project.config.json 中 settings 选项添加 ignoreDevUnusedFiles: false , ignoreUploadUnusedFiles: false详细分析: 微信开发者工具的无依赖文件过滤能力,是基于代码静态依赖分析的数据来实现的。 也就是会分析小程序项目中的代码内容,如果发现某个 js / wxml / wxss / json 文件没有被使用到,则会将其列为无依赖文件。 无依赖文件在模拟器运行时会被忽略,在上传时也不会打入代码包中,因此可以有效减少代码包大小。 但由于 js 代码的灵活性,代码静态依赖分析功能在某些情况下,无法准确分析出依赖引用关系(控制台中会有对应的 warning 提示),此时部分 js 文件会被误判为无依赖文件,导致报错。开发者需配合提示信息修改代码,才能继续使用此功能。 导致依赖异常的常见情况: 动态引用的情况,如 var a = 'somefile.js'; require(a);将 require 函数赋值给其他变量的情况,如 var a = require; a('somefile.js');
2022-07-04 - 如何监听滑动页面返回的事件?
在开发小程序过程中如何监听滑动页面返回的事件,使用onBackPress事件没有效果
2023-01-10 - websocket 为什么1分钟自动断开?
服务端使用云托管nodejs环境使用官方示例可以正常连接成功,也可以相互发送消息,但是如果一分钟之内没有交互就会自动断开 code: 1006
2023-04-12 - 2.26.1版本小程序BUG?WE后台频繁报错。
JS分析/错误内容详情 Script error. Script error. Empty stack, maybe muted error. (xweb=false) 报错的全都是基础库2.26.1版本,希望官方协助解决。
2023-04-01 - 小程序违规, 申诉已经通过, getPhoneNumber 功能仍不可用, 麻烦给看看?
这个是违规原因, 该用户微信未绑定手机号, 当使用 getPhoneNumber g功能时, 微信提醒他绑定手机号. 这个弹窗真的是微信getPhoneNumber功能自己的, 我们是无辜的... [图片] [图片] 申诉结果已经通过, 但是线上版本 getPhoneNumber 功能现在仍然是不可用状态, 麻烦官方运营童鞋抓紧给看下 AppID: wx03b265ee61c46412[图片]
2022-08-05 - getPhoneNumber接口调用违规?
[图片] [图片] 违规内容,点击微信快捷登录 调用getPhoneNumber接口获取手机号码进行登录,全局搜索未找到"微信账号还没有绑定手机号",初步怀疑是该用户微信未绑定手机号码,微信官方弹窗,请问这种情况下该如何整改??
2023-05-22 - 小程序如何监听阻止左侧向右滑动返回上一页面?
现在有个需求左侧向右滑动返回上一页面我们先出现我们自己的一个弹框处理一些逻辑,可是现在不知道要如何阻止这个返回呢?
2023-05-08 - 小程序在分包使用某插件,为什么在分包引入后会增大主包代码体积?
QIYUSDK插件 微信最新版 基础库2.27.1 虽然可以在分包内引用插件,但是插件依然占用主包大小,导致不能上传或预览小程序。
2022-11-16 - 小程序引用第三方的小程序插件,这个插件占用小程序的代码包大小吗?
小程序引用第三方的小程序插件,这个插件会占用小程序的代码包大小吗?
2022-11-15 - 小程序链接生成与使用规则调整公告
各位开发者: 为确保小程序链接合理使用,自 2022 年 4 月 11 日起,URL Scheme 和 URL Link (以下统称为 “链接” )接口能力规则将进行以下调整: 每个 URL Scheme 或 URL Link 有效期最长 30 天,均不再支持永久有效的链接、不再区分短期有效链接与长期有效链接;链接生成后,若在微信外打开,用户可以在浏览器页面点击进入小程序。每个独立的链接被用户访问后,仅此用户可以再次访问并打开对应小程序,其他用户无法再次通过相同链接打开该小程序;单个小程序每天生成链接数(URL Scheme 和 URL Link 总数)上限为 50 万条。 对于上述 1,在开发层面,相应的服务端接口 urlscheme.generate 和 urllink.generate 将进行以下调整: is_expire 值固定为 true,可不再传该值,若传值为 false 也与 true 一样会生成到期失效链接;若 expire_type 传值为 0,需注意 expire_time 传值的时间戳不超过 30 天,即该参数最长传值有效期为 30 天;若 expire_type 传值为 1,需注意 expire_interval 传值范围为 [1, 30],即该参数最长传值间隔天数为 30。详细对比见下表: [图片] 已使用该后端接口的开发者可以不进行任何修改,不会出现返回异常。若传值超过新规则合法值,或声明使用永久有效的链接,则均会被赋最长有效期值(30天);需注意以上新规则生效后的有效期和访问规则变化。 在本次规则调整生效前已经生成的链接,也将自动生效以下规则: 如果有效期超过30天或长期会被降级为30天有效,开始时间从调整日期开始计算;在调整生效后,只能被1个用户访问。 当前已使用微信云开发 静态网站H5跳小程序 与 短信跳小程序、微信服务平台短信服务为用户提供链接的功能不受影响,但同样适用以上规则。 微信团队 2022年3月9日 相关QAQ1:每天下发的短信量级超过50万条,不够用怎么办? A1:可将生成 scheme 的时机改为在用户打开 H5 时再生成: [图片]
2023-09-26 - (17)分享功能调整背后的故事
有时候我们使用一个小程序会遇到以下情形: 我们打开一个小程序,就看见提示“分享到5个群,可以获得一张20元的优惠券”,吸引我们去无脑分享到不同的群里; 打开某个小游戏,提示我“一定要分享到xx个群,才能继续玩游戏”; …… 而我们在群里打开这类小程序,仍然是提示我分享的信息,这类功能无疑打断了我们对小程序/小游戏正常的功能使用。 我们收到了很多用户对这类小程序/小游戏的抱怨。这类分享并非是用户主动自发的,而是受到了某类利益的诱惑,或是被迫分享。这样的内容充斥在群里、小程序里,对用户造成了骚扰,是对分享功能的滥用。 在原来的分享接口中,用户发起分享动作之后,可以通过 success 、fail、complete等回调来判断用户是否完成了最后的分享动作。通过这个能力,开发者是可以将产品交互在分享这个能力上做得比较自然和顺畅。但却被上述情形的小程序滥用。在我们权衡了分享功能带来的利弊后,我们打算回收这个能力。调整为:我们将不再支持分享回调参数 success 、fail 、complete 。即开发者无法判断用户最终是否完成了分享动作,也无法获取到分享成功后的回调参数shareTicket 。 接下来将与大家介绍此次分享功能调整后,小程序的调整建议。 对应小程序调整建议 此次调整可能影响到两种分享功能的用法。 第一种:通过判断用户最终是否有分享来做分支逻辑的小程序。 例如,通过判断 success 回调触发,来判断用户是否分享出去了,进而给奖励,如果用户没有分享出去则不给奖励。这类功能是我们平台不倡导的,后续将没有办法实现。 如果是需要在分享完成后变更当前页面的状态,可以适当调整交互方案。例如过去赠送代金券后显示“等待领取”等应用场景,可以改成在分享后继续保留“赠送”按钮,但提示用户一个代金券只能被一人领取,重复赠送无效。 第二种:获取用户分享之后的 shareTicket ,换取群唯一标识 openGId ,进而显示对应群的相关信息的小程序。 例如,部分小程序实现了群内的排行信息,通过分享小程序到某个群里,可以查看该群内成员的排行榜。 此次调整后,用户分享完成后无法立刻显示该群的排行榜信息,但仍可在用户从群消息点击进入小程序时显示该群的排行榜信息。 因此建议适当修改产品流程,在用户分享小程序之时,提示用户可进入群内查看群排行等信息。避免调整策略生效之后带来的交互不完整影响。 调整覆盖范围提示 近期新提交的版本中将会受到此策略的影响。 除此之外,调整策略在即将发布的基础库版本 2.3.0 生效,该基础库版本对应本月即将发布的微信客户端版本(暂定版本号 6.7.2)。即:近期提交审核的小程序版本,在基础库版本 2.3.0 以下的环境中仍不受此策略影响,仅在基础库版本 2.3.0 以上的环境受影响。 开发者需要注意,近期提交审核的版本都需要考虑兼容上述调整带来的影响,请各位开发者及时调整分享能力。
2018-08-17 - 开发者工具总出现routeDone with a webviewId 错误?
routeDone with a webviewId 1070 that is not the current page(env: macOS,mp,1.06.2301040; lib: 2.29.0)
2023-01-15 - 基础库版本2.27.2 突然报错
[图片] 最新版的基础库突然报了 routeDone with a webviewId 206 that is not the current page 这个错,之前从来都没有出现过,但不影响运行,目前不知道是什么原因,求解答
2022-11-16 - 大佬们,这是报的个什么错,自从基础库升级到2.27.2以后?
自从升级到2.27.2基础库以后,每次编译都会报这个错,并且下面的报错中,数字6会随着编译一次增加1,是个什么情况啊? routeDone with a webviewId 6 that is not the current page(env: Windows,mp,1.06.2209190; lib: 2.27.2) [图片]
2022-11-17 - 开发者工具上传代码报错:Error: 系统错误,错误码:80082 ?
经测试剔除掉app.json中的插件引用后恢复正常(该插件有权限,已在后台添加,使用两年了),查查什么原因?
2023-02-16 - 关于补充小程序、插件用户隐私保护指引说明
为进一步规范开发者的用户个人信息处理行为,保障用户合法权益,小程序、插件中涉及处理用户个人信息的开发者,无论是通过调用涉及用户个人信息的相关接口,还是自行收集用户个人信息,在提交代码版本前,均需补充相应用户隐私保护指引,具体如下: 一、 如小程序、插件有涉及收集用户个人信息(包含通过接口形式收集、通过非接口的形式收集)开发者需在【小程序管理后台-设置-功能设置-用户隐私保护指引】(如果是第三方开发者代开发小程序可通过接口进行配置)/【小程序管理后台-功能-小程序插件-基本设置-用户隐私保护说明】针对具体使用目的与用途进行说明填写,并补充完整隐私指引内容。 二、针对隐私指引说明内容,有如下要求: 1、隐私指引说明内容需与代码包内引用相关接口一致; 2、隐私指引说明内容文字表述需清晰、完整、告知用户处理相应信息的目的与用途; 3、在代码提审环节将对以上要求进行核验,如未满足相应要求,则无法通过代码版本审核,将影响开发者后续版本提审。 平台预计于11月1日对相关接口进行隐私指引说明审核,请开发者及时补充完善隐私指引说明,避免影响相关服务及用户体验。 微信团队 2021年10月29日
2023-09-26 - 小程序如何跳转至微信浏览器?
个人开发者不能使用web-view,怎么能实现小程序跳转至微信内置浏览器打开网页呢! 小程序打开关联公众号文章,点击公众号的阅读原文即可打开微信内置浏览器,这儿是怎么实现的,应该在小程序中可以跳转到微信内置浏览器吧?
2022-04-07 - 社区专家用户&2022年度社区突出贡献者颁奖|社区与你 未来可期!
2022 年,社区与各位 “社友” 一起 许下新年愿望,一直 为女性开发者鼓舞,不时吐槽 与产品经理的相爱相杀故事,使用 开发者专属的方式有趣表达爱,分享自己的 开发者专属小故事。成为开发者不是一件容易的事情,但的确是一件值得自豪的事情! 这一年,各位 “社友” 真诚发问、认真回答,让社区充满「提问者认为该回答有用」、「官方认为该回答有用」的认可。每一个回答都是对开发者朋友的支持,每一行代码都是对专业技术的坚守,每一篇文章都是对代码知识的沉淀。 微信开放社区为社区专家用户以及突出贡献者们准备了年度答谢礼物,表彰与感谢他们对同路人的支持、对社区的贡献、对技术的致敬! 2023 年已经悄然而至,新的一年期待有更多的技术突破,更多元的技术交流,更高效的技术开发体验。社区与各位开发者一起码到成功,全年无 Bug!社区与你,未来可期! 社区专家用户 [图片] 2022 年度社区突出贡献者 注:每位个人突出贡献者获得 1 套新年礼包,每位企业突出贡献者获得 2 套新年礼包 青寒、拾忆、Memory、吴川市菜虫网络科技有限公司:2022 年共获得 12 次社区月度突出贡献者(排名不分先后) 社区将为以上 4 位突出贡献者分别颁发专属新年礼包,礼物包括: 微信相框、微信旺盛礼盒、微信旺柴三件套、跳一跳运动套装、语音条抱枕、微信开放社区突出贡献者红包封面 [图片] 进狱系明星经纪人、小黎、Mr.Zhao、上海微盟企业有限公司:2022 年共获得 9 次社区月度突出贡献者(排名不分先后) 社区将为以上 4 位突出贡献者分别颁发专属新年礼包,礼物包括: 好事成双茶具、微信旺盛礼盒、微信旺柴三件套、语音条抱枕、微信开放社区突出贡献者红包封面 [图片] 立十、四哥派、brave、北京热点互动教育科技有限公司:2022 年共获得 6 次及以上社区月度突出贡献者(排名不分先后) 社区将为以上 4 位突出贡献者分别颁发专属新年礼包,礼物包括: 跳一跳运动套装、微信旺盛礼盒、微信旺柴三件套、语音条抱枕、微信开放社区突出贡献者红包封面 [图片] 八九、陈宇明、读书人。、老张、茜茜又困了🐽、圣殿骑士、一笑皆春、Charlie、Hlxuan.、Jianbo、v、杭州起码科技有限公司、临沂维百特网络科技有限公司、上海微喵网络科技有限公司、西安众邦网络科技有限公司、辛集启年网络科技有限公司:2022 年获得过社区月度突出贡献者(排名不分先后) 社区将为以上 16 位突出贡献者分别颁发专属新年礼包,礼物包括: 微信旺柴三件套、微信开放社区突出贡献者红包封面 [图片] 具体实物礼物款式可能有细微调整,以实物为准,预计 1 个月内联系发出。 微信团队 2023年01月16日
2023-01-16 - miniprogram-ci上传小程序经常失败20003 statusCode: 50,什么原因呢?
通过miniprogram-ci 调用preview upload时,经常上传失败。周五失败频率更高。 上传请求如下: request url: https://servicewechat.com/wxa/ci/testSourceURL?codeprotect=0&type=miniProgram&appid=wxffb7d80f8c50ac5c&version=0.0.1&desc=%E5%BC%80%E5%8F%91%E7%89%88-%E5%BC%80%E5%8F%91%E7%89%88&robot=2&path=pages%2Fhome%2Fhome%3Fa%3D1&debugLaunchInfo=%7B%22scene%22%3A1011%2C%22path%22%3A%22pages%2Fhome%2Fhome%22%2C%22query%22%3A%7B%22a%22%3A%221%22%7D%7D 错误日志如下: Error: {"errCode":-1,"errMsg":"inner test source fail statusCode: 503"} at innerUpload (/usr/lib/node_modules/@jd/minici/node_modules/miniprogram-ci/dist/ci/upload.js:1:3517) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async preview (/usr/lib/node_modules/@jd/minici/node_modules/miniprogram-ci/dist/ci/preview.js:1:977) at async Object.preview (/usr/lib/node_modules/@jd/minici/node_modules/miniprogram-ci/dist/utils/report.js:1:1403)
2022-01-07 - 使用wx.request请求接口为什么提示600001?
使用getPhoneNumber组件获取到相关信息后传给后台接口授权,接口提示600001,在真机中才会,在开发工具不会[图片][图片]
2022-08-15 - 关于微信 OpenSDK 适配 iOS 16 系统的说明
背景微信 iOS OpenSDK 通过剪切板在应用和微信间进行数据传递,在用户同意后完成授权登录、分享等功能。具体说明如下: 1、应用通过 OpenSDK 跳转到微信。在应用内,OpenSDK 会将业务数据写入剪切板;然后在拉起微信后,微信从剪切板中读出业务数据,完成相关功能; 2、微信完成相关功能后,微信将相关业务数据(例如授权登录结果、错误信息等)写入剪切板,然后跳转回应用。在应用内,OpenSDK 从剪切板中读出数据,回调给开发者。 在 iOS 16 系统上,读取其它应用写入剪切板的数据时,系统会阻塞调用,弹窗提示,让用户手动选择是否允许读取。如下图所示: [图片] [图片] 为了提升用户体验,微信和 OpenSDK 进行数据传输方式的改造,尽量避免使用剪切板传递数据。具体说明如下: 1、对于一般传输数据的接口,会在 Scheme 或者 Universal Link 中携带相关数据; 2、对因传输数据量较大等原因无法使用上述数据传输方式的接口,保持通过剪切板传递数据。 因此,开发者需要应用升级 OpenSDK,并配合微信客户端 8.0.24 及以上版本使用。 升级指引为了支持在 Scheme 或者 Universal Link 传递数据,微信客户端版本要求 8.0.24 及以上,OpenSDK 版本要求 1.9.6 及以上,需要微信客户端版本和 OpenSDK 版本同时满足要求。 当前 OpenSDK 版本低于 1.8.6若原有集成的 OpenSDK 版本低于 1.8.6,请先参考 OpenSDK 接入指南,完成 Universal Link 跳转方式的接入。然后按照下述内容,继续接入剪切板适配功能。 当前 OpenSDK 版本大于等于 1.8.6更新 OpenSDK 版本后,在 Xcode 中,选择你的工程设置项 -> 选中 “TARGETS” 一栏 -> 找到 “info” 标签栏的 “LSApplicationQueriesSchemes” -> 在原有 weixin 和 weixinULAPI 的基础上,添加 weixinURLParamsAPI。如下图所示: [图片] 新增读取剪切板控制能力集成 1.9.6 及以上版本的 OpenSDK 后,仍需要读取剪切板数据的情况有以下 2 种: 1、旧版本兼容:从版本低于 8.0.24 的微信客户端跳转到应用; 2、因数据量较大等原因无法在 Scheme 或者 Universal Link 传递。 为了提升用户体验,在 iOS 16 系统上,OpenSDK 将在读取剪切板前请求开发者授权,由开发者自行决定是否允许 OpenSDK 读取剪切板中的业务数据以及何时进行剪切板业务数据读取。 WXApiDelegate 接口在原有 WXApiDelegate 协议上,新增 onNeedGrantReadPasteBoardPermissionWithURL:completion 函数,用于 iOS 16 及以上的系统,控制 OpenSDK 剪切板的读取。 示例代码如下: @protocol WXApiDelegate @optional - (void)onReq:(BaseReq*)req; - (void)onResp:(BaseResp*)resp; /* ! @brief 用于在iOS16以及以上系统上,控制OpenSDK是否读取剪切板中微信传递的数据以及读取的时机 * 在iOS16以及以上系统,在SDK需要读取剪切板中微信写入的数据时,会回调该方法。没有实现默认会直接读取微信通过剪切板传递过来的数据 * 注意: * 1. 只在iOS16以及以上的系统版本上回调; * 2. 不实现时,OpenSDK会直接调用读取剪切板接口,读取微信传递过来的数据; * 3. 若实现该方法:开发者需要通过调用completion(), 支持异步,通知SDK允许读取剪切板中微信传递的数据, * 不调用completion()则代表不授权OpenSDK读取剪切板,会导致收不到onReq:, onResp:回调,无法后续业务流程。请谨慎使用 * 4. 不要长时间持有completion不释放,可能会导致内存泄漏。 */ - (void)onNeedGrantReadPasteBoardPermissionWithURL:(nonnull NSURL *)openURL completion: (nonnull WXGrantReadPasteBoardPermissionCompletion)completion; @end 若不实现 onNeedGrantReadPasteBoardPermissionWithURL:completion 函数,OpenSDK 在需要读取剪切板时,直接调用读取剪切板接口,读取微信传递过来的数据,用于回调通知 onReq: 和 onResp:。 若实现 onNeedGrantReadPasteBoardPermissionWithURL:completion 函数,开发者需要通过调用 completion(),通知 SDK 允许读取剪切板中微信传递的数据, 支持异步。 实现函数后,如果不调用 completion() 通知 OpenSDK 读取剪切板,将收不到 onReq: 或者 onResp: 回调,请谨慎操作! 示例代码如下: - (void)onNeedGrantReadPasteBoardPermissionWithURL:(NSURL *)openURL completion: (WXGrantReadPasteBoardPermissionCompletion)completion { //开发者可展示相关UI提示用户 [self showReadPasteBoardNotice]; //允许OpenSDK读取剪切板 dispatch_after(delayTime, dispatch_get_main_queue(), ^{ completion(); }); } 微信团队 2022年7月18日
2022-07-18 - “右滑手势返回”能力调整
各位开发者,大家好。 为了提升用户操作的流畅性,同时让用户在微信内拥有一致的操作体验,“右滑手势返回”将成为基础配置,即所有小程序内都可以从屏幕左侧边缘向右滑动返回上一个界面。 在即将发布的7.0.5客户端版本中,页面配置中的 [代码]disableSwipeBack[代码] 属性将不再生效,请开发者及时调整。
2019-05-31 - 上传时报错,请问是什么原因?Unexpected token o in JSON at positi
message:SyntaxError: Unexpected token o in JSON at position 1 appid: wx************0c80 openid: o6z****************************098AzU ideVersion: 1.06.2204182 osType: win32-x64 time: 2022-04-26 13:03:43
2022-04-26 - 地理位置接口新增与相关流程调整
一、地理位置接口新增说明 由于精确地理位置接口只允许部分类目的小程序申请使用,为了满足开发者在更多场景使用地理位置接口,自 2022 年 7 月 14 日起,新增获取模糊地理位置接口(wx.getFuzzyLocation)。同时为保障用户合法权益,该接口调用前需进行准入开通申请,该接口准入规则与 wx.chooseLocation 一致。 wx.getFuzzyLocation 接口说明: 1、该接口返回的是经过模糊处理的经纬度坐标; 2、该接口支持返回 wgs84 或 gcj02 两种类型的坐标; 3、该接口需要用户授权 scope.userFuzzyLocation。 二、app.json 的配置指引 为了开发者能够正常使用获取模糊地理位置等接口,以及后续对于代码提审环节的优化(见「三、地理位置接口使用流程」),自 2022 年 7 月 14 日起,开发者在使用地理位置相关接口时(共计 8 个,见表1),需要提前在 app.json 中进行配置。 1、需配置的接口列表 [图片] 表1 2、配置规则 1)在代码中使用的地理位置相关接口(共计 8 个,见表1),开发者均需要在 app.json 中 requiredPrivateInfos 配置项中声明,代码格式如下: [图片] 2)表1中模糊位置信息(序号1)和精确位置信息(序号2-5)是互斥的,即声明了模糊位置信息就无法声明精确位置信息。若同时声明模糊位置信息和精确位置信息,则在编译代码时出现错误; 3)注意:自 2022 年 7 月 14 日后发布的小程序,如果未在 app.json 中声明表1中的相关接口,则小程序调用这些接口(表1)时会出现错误,在 2022 年 7 月 14 日之前发布的小程序不受影响; 4)对于第三方开发者,需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口,配置规则和普通小程序的配置规则相同。 三、地理位置接口使用流程 自 2022 年 7 月 14 日起,开发者如需在最新版本发布后使用地理位置相关接口,除需完成接口权限开通外,还需在 app.json(或ext.json)配置环节,具体如下: 1、接口权限开通 以下 8 个接口需完成准入开通流程:wx.getFuzzylocation、wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.choosePoi、wx.chooseLocation、wx.startLocationUpdate、wx.startLocationUpdateBackground 1)普通开发者:需要在 “小程序管理后台 -「开发」-「开发管理」-「接口设置」” 中完成权限申请; 2)第三方开发者:可通过 apply_privacy_interface 接口完成权限申请。 2、app.json(或 ext.json)配置 1)普通开发者:需在 app.json 中声明其需调用的地理位置相关接口,具体配置流程见「二、app.json 的配置指引」; 2)第三方开发者:需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口(配置方式:可通过 commit 接口配置)。 同时,为了提升开发者体验,平台在代码提审环节会协助开发者对地理位置接口进行检测,如检测出代码中包含未完成准入开通的地理位置接口,平台将再次提醒开发者确认是否需使用相关接口。 1)普通开发者:若无需使用,开发者可在提审时确认不使用该接口,即可正常进行代码提审。小程序审核通过且新版本发布完成后,平台将对小程序确认不使用的接口关闭使用权限; 2)第三方开发者:若无需使用,可在提审时通过参数声明不使用该接口(声明方式:可通过 submit_audit 接口配置),即可正常进行代码提审,审核通过后发布上线,将对其声明不使用的接口关闭使用权限。 以上调整将仅对所有小程序生效。 微信团队 2022年6月1日
2023-09-26 - 小程序 request:fail -7:net::ERR_TIMED_OUT 报错 ,有知道原因的?
[图片]
2022-06-18 - skyline 版本的基础库对自定义tabBar支持有问题?
基础库版本:2.24.6-skyline (我不知道为啥会是这个版本) 代码片段:https://developers.weixin.qq.com/s/JJB2UemD77Ad 问题描述:在 custom-tab-bar 组件中引用了其它组件,通过开发预览码扫码进入小程序,首次基本上展示正常,但是通过“重新进入小程序”再次进入,custom-tab-bar 中引入的组件就会渲染异常,后续再打开基本也是异常,截图如下: 首次打开页面展示: [图片] 首次打开 wxml 展示: [图片] 重新进入小程序页面展示: [图片] 重新进入小程序 wxml 展示: [图片] vConsole 报错: [图片] 基础库截图: [图片]
2022-06-23 - 半屏小程序怎么打开目标小程序的分包页面?
怎么使用 wx.openEmbeddedMiniProgram 或者 wx.navigateToMiniProgram 打开目标小程序的分包页面?
2022-03-14 - 交易类小程序纠纷投诉能力处理指引
为进一步保障小程序平台用户的合法权益,督促开发者向用户提供更好的服务,平台将针对小程序交易投诉处理规则做出以下更新: 1、和解环节开发者处理时效由72h改为48h,执行环节开发者处理时效由72h改为48h 2、和解环节开发者超时未处理,平台将判定开发者责任并做出相应处理,包括但不限于采取扣除保证金、先行垫付、扣减交易体验分等措施。 该时效调整将在2024年3月25日正式生效,请开发者及时关注。 一、一、交易类纠纷处理通知机制 1、为便于小程序开发者及时获知小程序交易投诉情况,平台将于每天早上10:00向小程序的管理员及运营者推送通知,通知内容为截至前一天24时该小程序账号内待开发者处理的投诉单详情。 2、通知查看路径: 1)小程序管理后台:右上角「通知」查询通知记录; [图片] 2)微信移动端:通知下发给小程序管理员与运营者,可搜索「微信公众平台」查看通知记录。 [图片] 二、二、交易类投诉处理操作指引 1、登陆小程序管理后台并核实投诉 登录小程序管理后台—功能—交易保障—交易投诉;查看待处理的投诉单,并尽快完成投诉单详情的核实与处理。 [图片] 2、和解环节:同意和解/拒绝和解 核实投诉后,若同意与用户和解,请在时效内上传与用户的沟通说明、物流信息或者退款凭证等,平台将推送和解详情给用户。 核实投诉后,若双方未达成和解,请选择拒绝和解并上传相关凭证,平台将推送不和解详情给用户。 若开发者未在处理时效内作任何处理,纠纷单将自动流转至平台介入处理状态,平台将判定开发者责任并做出相应处理,包括但不限于平台先行垫付,扣除开发者保证金,扣减交易体验分等措施。 [图片] [图片] 注:开发者和解时效为72h。选择同意和解或拒绝和解后,用户会收到确认投诉处理结果的通知,若用户认可开发者的处理结果,投诉将完结;若不同意,用户可申请平台客服协助处理。(2024年3月25日后发起的投诉单和解时效更改为48h) 3、平台处理环节:下发举证&判定责任 若用户不认可开发者投诉处理结果并申请平台介入,平台将根据现有纠纷凭证是否有效,要求开发者/用户补充相关凭证;若平台要求开发者补充纠纷凭证,投诉单状态将流转至【待开发者补充凭证】,处理时效为48h(特殊场景为24h),请务必如实填写并上传沟通说明、物流信息或退款凭证等信息;开发者/用户补充凭证后,平台将根据已有材料与凭证进行判责。 [图片] [图片] 4、开发者执行环节:上传处理凭证 若平台判为开发者责任,投诉单状态流转为【待开发者上传处理凭证】,处理时效为72h(特殊场景为48h),请尽快提交微信支付退款单号、交易流水、转账单号或物流单号等凭证,供平台核实是否已执行平台判责。(2024年3月25日后发起的投诉单处理时效更改为48h) [图片] [图片] 5、平台核实环节 若平台根据开发者上传的处理凭证判断开发者已执行平台判责,该投诉单将完结; 若开发者上传的处理凭证信息不准确,平台无法判断其已执行平台判责/超时未上传处理凭证,平台将根据实际情况对开发者进行交易体验分的扣减,对用户进行先行赔付等措施。 6、商家申诉环节 若平台判定商家责任后,开发者不认可平台的判责结果,可在投诉单完结后的72h内发起申诉,平台会根据申诉环节上传的相关材料进行申诉判定;每个投诉单仅支持一次申诉,申诉超时/申诉失败后不支持再次发起申诉。 若申诉成功,则开发者无需按照《微信小程序交易服务违规管理规则》中的第三章违规处理措施缴纳违约金; 若申诉失败,则开发者仍需按照《微信小程序交易服务违规管理规则》中的第三章违规处理措施缴纳违约金。 [图片] [图片] 三、小程序实物交易纠纷处理规则 平台介入处理争议时,开发者应遵守以下约定: 开发者及用户就订单产生交易争议时,双方可以选择自行协商。如用户向平台提起交易投诉,双方协商未果或开发者未作处理,平台有权根据本规则及相关法律法规介入对争议的处理。 当开发者因自身系统、管理、人力等原因出现异常大量维权或舆情事件,且开发者不具备及时处理能力,为保障双方交易安全,平台可主动介入处理。 平台处理交易争议期间,开发者及用户应当按照平台下发的站内信、模版消息、短信、电话或邮件通知及时提供凭证。 平台处理争议期间,若任何一方无正当理由,未按照举证要求提供凭证的,平台有权按照实际收集到的凭证做出处理。 平台做出判责后,开发者应当按照要求及时履行相应义务。 如开发者行为违反相关法律法规或平台规则,因此而可能产生的用户损失或额外赔偿费用将由开发者自行承担。 详情可查看微信小程序实物交易争议处理规则 四、常见问题 1、用户交易投诉的入口在哪? 小程序—页面右上角“…”—反馈与投诉—交易投诉 [图片] 2、如何更改通知接收者? 目前,交易投诉待处理通知会发送给当前小程序的管理员及运营者。若希望取消或者增加推送成员,可登录微信公众平台—管理—成员管理,更换或添加管理员及运营者。 [图片] 3、上传凭证需要注意什么?如果超时未处理怎么办? 上传前务必确保提交的证据材料的真实性、完整性、及时性和准确性;平台处理争议期间,请按照举证要求的内容提供凭证。 为保障用户的体验,请在规定时间内完成核实和处理;否则,开发者应承担超时未处理、举证超时的后果,平台有权按照实际收集到的凭证做出判责,同时根据平台规则对开发者进行扣减交易体验分等措施。 4、除了在小程序管理后台处理投诉,是否有其他方式处理交易投诉? 若开发者在网页端登陆小程序管理后台处理投诉存在困难,平台提供移动端工作台—小程序助手处理投诉,投诉处理流程与PC端一致;同时平台提供线上接口,开发者可通过接口接入自己内部系统处理投诉。 移动端工作台:微信主页搜索「小程序助手」—登陆小程序—管理功能—交易投诉 [图片] 接口文档:可点击查看交易投诉处理接口文档:投诉信息推送 | 微信开放文档 5、交易体验分是什么?为什么被扣分了?扣分后会受到什么处罚? 为保障小程序平台用户的合法权益,平台将对开发者在其小程序的违规行为进行判定,根据违规行为的严重程度对该小程序扣减不同分值的交易体验分,并在小程序交易体验分扣减至相应节点时,对开发者采取相应违规处理措施。 具体规则与案例解析可点击《微信小程序交易服务违规管理规则》、微信小程序交易体验分常见问题指引查看。 6、申诉需要提供哪些凭证才算有效凭证?哪类申诉不支持通过? 开发者需针对用户投诉问题的有效反驳凭证,建议同时提供相关图片进行佐证。 开发者在投诉单处理环节中,包含和解环节/举证环节/商家执行环节,若任意一环节存在未回复或以话术、无效字符回复的情况,不予申诉通过;用户投诉开发者服务态度问题,被平台判定问题属实,不予申诉通过;用户投诉开发者服务意愿类问题,如强制退款、或未按订单页面承诺进行服务履约(如配送超时,商品无货强制退款等),被平台判定投诉属实,不予申诉通过。 7、为什么要收取违约金? 当开发者存在违反《微信小程序交易服务违规管理规则》的行为,需要按规则3.1缴纳违约金;开发者有申诉的权利,可在投诉单完结后的72h内发起申诉,平台要求缴纳的违约金来源为"已过申诉时效或平台认定申诉不成立的违规投诉单"。 8、不缴纳是否有限制措施? 若开发者未按期足额支付违约金的,平台将采取限制小程序搜索、限制支付能力等处理措施。请参考《微信小程序交易服务违规管理规则》的违规行为及对应处理措施。 9、违约金是否可以开具发票? 小程序mp后台(mp.weixin.qq.com-功能-交易保障-消费者资金保障-违约金)模块,支持对单笔缴纳流水进行发票开具,请开发者仔细阅读开票的注意事项并填写准确信息。
2024-03-22 - “公众号菜单跳转小程序”功能介绍与设置指引
产品简介:微信公众号给小程序提供多个入口,让小程序可以通过更多的途径有效触达用户。 优势:免费多样式的小程序入口。 接入方式:无需开发,公众平台后台设置。 关键词:公众号小程序打通。 [图片] 01 设置小程序关联公众号 设置路径:公众号后台-小程序-小程序管理-添加-关联小程序 由管理员扫码验证后,输入关联小程序appid,在对应小程序后台确认关联即可。 [图片] 02 设置公众号菜单跳转小程序 设置路径:公众号后台-功能-自定义菜单-设置菜单内容为跳转小程序 [图片] (注:公众号后台链接https://mp.weixin.qq.com)
2020-01-14