- 小程序 sourcemap 文件失效原因排查
前提 1.确保发生错误的小程序版本和下载回来的 sourcemap 版本是一致的。 a. 下载 sourceMap 文件,可在 mp 后台或开发者工具上传成功弹窗下载 2.确保 map 文件和发生错误的 js 文件是对应的。sourcemap 的目录和文件说明 a. APP 是主包,FULL 是整包(仅在不支持分包的低版本微信中使用),其他目录是分包 b. 每个分包下都有对应的 app-service.js.map 文件。 c. 如果是使用了按需注入特性(app.json中配置了lazyCodeLoading),那么每个分包下还会有 appservice.app.js.map(对应分包下非页面的js),和所有页面的 xxx.js.map 以上事情都确保正确之后,还是出现行列号匹配不出来的情况。那就需要进一步排查。 线上运行的小程序 sourcemap 文件是怎么生成的? 处理流程:源码 [ a.js a.js.map b.js b.js.map ] -> 开发者工具(JS转 ES5,压缩)-> 微信后台(合并 js 文件)[ appservice.app.js appservice.app.js.map]。 注意:如果源码在交给工具之前是经过了 webpack 等打包工具的处理,那源码这里需要有 map 文件。否则不需要存在 map 文件。 可以看出,map 文件经过三个步骤的处理,每个步骤都有可能导致出错,因此开发者需要先排查,是否是前两个步骤出错导致的 map 文件失效的。 如何排查前两个步骤产生的 map 文件是否有问题。 1.排查 a.js.map 文件是否有问题。 a. 可以在 a.js 的代码中写一下 throw new Error(‘test sourcemap’)。 b. 使用了 webpack 的情况下,要构建为生产环境的版本。 c. 在开发者工具模拟器中运行对应的页面,看看控制台中的报错,错误行列号是否能正常映射到源文件。 2.排查 开发者工具(JS转 ES5,压缩)步骤是否有问题。 在排查完第一步的基础上,点击预览,用微信上扫码预览,并打开调试 vConsole 功能,检查 vConsole 中是否有报错信息,检查报错信息中的行列号是否能正常映射到源文件。 如何排查 微信后台(合并 js 文件)是否有问题。 a. 一定要先排查完前两个步骤再来排查这一步,一般情况下,这一步是不会出错的。 b. 如果有问题,也只会导致 map 文件中的行号信息出现偏移。比如 Error 信息中显示报错地址是 100: 200,行号是 100。那么你可能直接用 100: 200 在 map 文件中搜索不出信息,但是如果 用 150: 200 就可以搜索出来,说明行号偏移了 50。那其他报错也可以偏移 50 后再进行搜索就找到结果。 c. 怎么排查偏移了多少?可以结合 error.message 的内容,初步判断大概错误的内容是什么。把对应的 map 文件放到这个网站上 source-map-visualization 进行搜索,找出哪些相同列号的地方。再结合 error.message 的内容进行判断。 d. 如果排查到是这一步导致的问题,请在社区上联系我们,我们会在后续版本进行修复。 依旧排查不出原因? 先整理一下按照上述步骤排查的结论,再在社区上联系我们协助
2023-02-10 - 技术选型:关于小程序webview中内嵌H5的重要提示
虽然小程序提供了不少原生能力,但有时我们想在小程序中使用web生态的能力时或者对接第三方活动页面时,会使用webview组件来承载网页,但这里有一些小程序中关于webview的重要提示,在了解之后可以进一步决定某些业务场景下还是否应该使用H5内嵌小程序实现业务。 提示: 1.小程序中的webview中的H5 ,需要添加web-view可信域名,需要在对应的网页的部署根目录中添加相应校验文件,如果对接的是第三方无法添加校验文件的,则无法打开。 2.小程序中的webview如需使用微信相关能力,须配置jssdk,须提供微信公众号账号主体,并按文档进行正确的页面授权和配置(需后端配合)。 3.小程序中的webview有较强的缓存(社区相关问题较多),需要用户手动清除通用存储并删除小程序才可以,如需H5每次部署后,不再有缓存,可寻找后端修改Nginx配置为无缓存 4.小程序中的webview中无论使用原生input拍照或jssdk提供的拍照能力,当IOS内存不足总会出现H5重新加载的情况,当前无解决方案(社区相关问题较多)。 参考JS-SDK说明文档web-view | 微信开放文档微信h5页面,调用拍照后,页面刷新 | 微信开放社区web-view嵌入的h5页面缓存严重,如何清除? | 微信开放社区
2023-11-27 - 「干货」新建项目/代码片段为什么原生导航栏不见了?页面也无法滚动了?
近期我在社区看到有不少网友在提问“顶部标题设置后怎么没有效果?”、“导航栏怎么不见了?”、“页面怎么无法滚动了?”… 我看下了帖子的相关截图,自己也验证了一下,原来近期发布的新版开发者工具,新建项目/代码片段会默认全局开启 Skyline 渲染引擎 。 可以点开[代码]app.json[代码]文件看下里面是否有[代码]"renderer": "skyline"[代码](下图红色框住的)。 [图片] 如果有的话,那就是全局开启了 Skyline 渲染引擎 。 Q1:页面不显示原生导航栏? A1:因为 Skyline 渲染引擎 不支持原生导航栏,所以就没显示原生导航栏了。 Q2:页面无法滚动? A2:因为 Skyline 渲染引擎 不支持页面全局滚动,所以页面就无法滚动了。 如果想用回原生导航栏和页面全局滚动,可以把[代码]app.json[代码]里面的[代码]"renderer": "skyline",[代码]去掉保存,重新编译一下项目就可以了。 关于 Skyline 渲染引擎 ,大家可以到官方文档查看:https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/introduction.html 。
2023-08-06 - 体验版和线上版本不一致?
之前线上的小程序突然 无法获取位置了 但是体验版就正常 请问是有什么规则更改了吗?
2023-06-16 - 小程序发布新版本后,线上始终有部分人使用的旧版本(老版本)
小程序具体更新机制请参考 https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/update-mechanism.html 但有开发者咨询为什么小程序加了强制更新的机制后线上还始终有部分有旧版? 当用户网络较差时,更新新版本失败时用户会打开旧版本,不然他们就会打开失败微信客户端版本较低的版本也会存在更新不及时的情况之前有打开小程序的用户才可能打开旧版本,如果是新用户一定会打开最新版本对这部分用户官方暂时没有提供让他们强制更新的能力,官方在丰富能力让开发者选择是否打开失败还是打开旧版本
2023-11-13 - 微信小程序头像昵称实战篇
2022-08-25 api文档地址: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html 目前的api变更后,得到的地址为 临时地址, 这个是文档没有说明的, 最佳实践,是需要把得到的地址上传到自己的服务器,然后用服务器返回的地址作为 真实头像的永久地址. 核心点说明: //获取到api返回的新地址路径 onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl console.log('e.detail', e.detail) // this.updateUserInfo(); this.uploadFile(); }, /* 上传 头像 转 话格式*/ uploadFile(){ uni.uploadFile({ url: config.webUrl + '/upload/uploadImages',//后台接口 filePath: this.avatarUrl,// 上传图片 url name:'image', // formData: this.formData, header: { 'content-type': 'multipart/form-data', 'token': uni.getStorageSync('token') }, // header 值 success: res => { let obj = JSON.parse(res.data) console.log('obj', obj) if (obj.code == 1) { let imgUrl = obj.data.full_path; this.userImg = imgUrl; this.updateUserInfo(); } else { uni.showToast({ icon: 'none', title: '图片太大,请重新选择!' }); } }, fail: e => { this.$toast('上传失败') } }); }, 这里需要注意, wx.uploadFile 返回的是字符串类型,需要前端自己处理一下数据结构: [图片] 完整代码如下: import config from "@/common/config.js"; import {debounce} from '@/utils/debounce.js' export default { data() { return { defaultAvatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', avatarUrl: '', nick_name: '', userImg: '', } }, onLoad() { let userInfo = uni.getStorageSync('userInfo') || {}; let { nick_name,img_url } = {...userInfo}; this.userImg = img_url; this.nick_name = nick_name; }, methods: { onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl console.log('e.detail', e.detail) // this.updateUserInfo(); this.uploadFile(); }, inputWord: debounce(function(e){ this.nick_name = e.detail.value console.log('this.nick_name.length',this.nick_name.length) let str = this.nick_name.trim(); if(str.length==0){ this.$toast('请输入合法的昵称') return } if((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)){ this.$toast('请输入中英文和数字') return } this.updateUserInfo() }, 1500), /* 上传 头像 转 话格式*/ uploadFile(){ uni.uploadFile({ url: config.webUrl + '/upload/uploadImages',//后台接口 filePath: this.avatarUrl,// 上传图片 url name:'image', // formData: this.formData, header: { 'content-type': 'multipart/form-data', 'token': uni.getStorageSync('token') }, // header 值 success: res => { let obj = JSON.parse(res.data) console.log('obj', obj) if (obj.code == 1) { let imgUrl = obj.data.full_path; this.userImg = imgUrl; this.updateUserInfo(); } else { uni.showToast({ icon: 'none', title: '图片太大,请重新选择!' }); } }, fail: e => { this.$toast('上传失败') } }); }, updateUserInfo(){ let self = this; uni.showLoading({}); let params = { img_url: this.userImg, nick_name: this.nick_name.trim(), } self.$http.post('updateUserInfo', params).then(res => { uni.hideLoading() if (res.data.code == 1) { self.$toast('修改成功!') }else { self.$toast(res.data.msg) } }) }, } } 请一键三连,争取升个级,谢谢各位道友! 补充一下,如果api不生效注意切换一下版本库: 我本地用的2.26.1 [图片] 实际效果图: [图片] [图片]
2022-11-24 - 如何申请设备消息?
设备消息接入指引一、申请类目 1.1 申请工具-设备管理类目登录小程序管理后台mp.weixin.qq.com,左侧最下方“设备”-基本设置-服务类目,添加“工具-设备管理”类目(该类目无需资质。如已有该类目可忽略此流程) [图片] 二、设备接入 2.1 开通设备管理功能进入小程序案例台-功能-硬件设备,阅读设备使用条件和接入流程等,点击“开通”。管理员扫码确认后开通成功,进入设备管理页面。 [图片] 2.2 添加硬件设备 (需审核)进入硬件设备,点击添加设备,按照每个字段对应的说明填写信息,如实填写设备相关信息,否则会导致审核不通过。 [图片] 2.3 获取设备 model_id设备注册成功后,可获得平台分配的 model_id ,model_id 是调用小程序设备能力相关接口的重要凭证。获取 model_id 后,小程序可按照相关文档指引调用「设备消息」等硬件能力。 2.4 申请设备能力(需审核) model_id 获取之后,在设备管理入口,点击右侧“申请设备能力”-“消息能力”。[图片] [图片] (设备消息能力审核通过状态) 三、获取设备消息 「小程序设备消息」能力指的是,只要用户在小程序内订阅通知,开发者就可以将这些事件以订阅消息的形式发送给用户。消息在微信内的产品形态,目前以“服务通知”形式呈现。 申请设备消息必须先完成“二、设备接入”。关于小程序订阅消息的基础介绍可参考文档 3.1 获取模板登录小程序管理后台——功能——订阅消息——公共模板库——长期订阅,查看可选用的设备消息模板。 [图片] 基于设备状态的变化,对于一些需要对用户进行提醒的情况,专门为设备提供了长期订阅消息,会以「服务通知」的形式下发给用户。目前可能用到的场景包括但不限于: 对生命财产可能造成影响的告警:烟雾/水浸/温度/防盗传感器告警、门锁被撬、陌生人闯入等影响到设备正常使用的提前预警:低电量预警、故障提醒、耗材用尽提醒等需要人工介入做进一步操作的提醒:门铃呼叫、洗衣完成等 如现有模板无法满足,需申请新增模板,请加群沟通。「硬件服务」沟通群: [图片] 申请格式如下: 申请事项:申请新增设备模板消息 小程序名称: 小程序主体: APPID: 设备消息场景描述: 所属行业:如:智能家居 设备型号:如:空气净化器 模板框架:如: 标题:空气净化器耗材提醒 提醒时间:mmdd hhmm 所在位置:卧室 提示说明:空气净化器滤网已到达更换时间,请及时更换。 属于哪种情况: 对生命财产可能造成影响的告警影响到设备正常使用的提前预警需要人工介入做进一步操作的提醒其他,请补充具体内容 3.2 获取模板ID选择设备消息模板中需要的关键词,并提交。 注意:设备消息模版的关键词内容由平台生成,为枚举值,开发者不能够自定义内容。 [图片] 提交后,可在“我的模板”中找到对应模板的模板 ID ,每个模板以 template_id 标记。 [图片] 3.3 获取设备票据获取 snTicket 用于「发起订阅」步骤。详见服务端设备票据接口 hardwareDevice.getSnTicket 。 四、触发设备消息4.1 发起用户订阅发起订阅调用 wx.requestSubscribeDeviceMessage 接口会有以下授权弹窗出现,用户同意订阅消息后,才会有设备消息发送至用户的微信会话 呼叫、告警等消息,可引导用户在小程序内完成设备消息订阅,用户需勾选左侧消息,并点击右侧强提醒按钮后提交“允许”。 [图片] (以上为小程序门禁设备长期消息弹窗样式) 示例代码 wx.requestSubscribeDeviceMessage({ sn: 'xxxx', snTicket: 'xxxxx', modelId: 'xxxxx', tmplIds: ['xxxxx'], success(res) { console.log('[wx.requestSubscribeDeviceMessage success]: ', res) // { 'QCpBsp1TGJ1ML-UIwAIMkdXpPGzxSfwJqsKsvMVs3io': 'accept' } }, fail(res) { console.log('[wx.requestSubscribeDeviceMessage fail]: ', res) } }) 接入文档:https://developers.weixin.qq.com/miniprogram/dev/framework/device/device-access.html#_5-%E5%8F%91%E9%80%81%E8%AE%BE%E5%A4%87%E6%B6%88%E6%81%AF 4.2 发送设备消息开发者通过微信服务端接口向用户推送设备消息。详见服务端设备消息发送接口 hardwareDevice.send 注意:开发者需要在小程序的合理场景内,给用户提供长期消息的授权弹窗。如用户实现房屋认证后通过用户操作触发“门禁机呼叫提醒”的订阅弹窗。
2022-10-19 - 为什么 console.log 打印对象显示的和手动点击展开不一样
微信开发者工具的调试器使用的是 chrome devtools-frontend https://github.com/ChromeDevTools/devtools-frontend 在使用 console.log 打印一个 Object 时,直接显示的是对象在调用 console.log 时的快照。如果之后再将打印的 Object 展开,会再次读取当前对象的值进行显示var a = {a: 1}; console.log(a); a.a = 2;[图片] 所以建议 console.log(JSON.stringify(a)); 进行打印 var a = {a: 1}; console.log(JSON.stringify(a)); a.a = 2;
2022-05-17