- 小程序可以使用apng格式动图么?
求助求助 小程序中能否使用apng格式动图么?能用的话要怎么使用呢 小程序原生image不支持apng格式的
08-06 - 小程序加固code_obfuscation_config有详细的配置介绍文档吗?想对项目全代码进行加
小程序加固code_obfuscation_config有详细的配置介绍文档吗?想对项目全代码进行加
2023-11-06 - 加固插件已激活,加固前,加固配置内没有合法的js文件
最近,微信开发工具的代码加固秃然用不了了。每次预览时都会提示 加固插件已激活,加固前,加固配置内没有合法的js文件,请检查路径 [图片] 尝试了把加固插件卸载重装、开发工具升级最新版、基础库切换到最新版本依然无法解决问题。社区中也有人6月份反馈类似问题:https://developers.weixin.qq.com/community/develop/doc/0000cc339300d0c325ef9570b56c00 配置其实都是正确的,这个提示真是让人一头雾水。 没办法啊,只能自己继续摸索 尝试把开发工具的授权全部清除,这样在预览时加固插件会先请求授权,但是授权的弹窗提示让我觉得有些奇怪: [图片] null extension description。。。这是插件没有安装成功吗? 然后在工具的输出栏可以看到加固插件(appid是wxext871b2e053677418)运行日志,无意间发现插件的安装目录其实是在C:\Users\Yunfay\AppData\Local\微信开发者工具\User Data\,这个目录因为之前因为占用空间太大,已经达到了15G,C盘告警,所以我有更换过储存目录,然后用mklink建了一个软链,这个方法很早前官方人员也有在社区中提及过,这个是帖子链接 https://developers.weixin.qq.com/community/develop/doc/000e8eed8a4448555dc9c877f5b400 最后把软链删除,并将之前移走的文件挪回原来目录,代码加固插件也就恢复正常了。。。 现在只能把开发工具卸载重装,不然C盘的占用空间有些夸张。 不清楚加固插件里面的处理逻辑或者说是mklink有什么副作用(欢迎知道原理的大佬评论指点一下),这里简单把这个问题记录一下,希望那些还在被这个问题困扰的小伙伴也能有所启发。 [图片]
2023-09-17 - 快速生成代码加固配置文件 code_obfuscation_config.json
背景 大概在 2022 年 7 月份,微信开发者工具上线了代码加固插件,可以对代码进行混淆加固,具体使用方法可以查阅 官方文档。 出于安全考虑,部分小程序可能会有代码加固的需要,但由于官方没有提供快速批量加固的功能(可能我看漏了文档,如果有的话请告知),如果手动编写 [代码]code_obfuscation_config.json[代码] 文件需要耗费大量时间,毕竟有些小程序可能包含几十个甚至上百个页面,再加上组件,工作量会非常巨大。 刚好我公司就有好几个小程序项目需要进行代码加固,如果纯手写的话工作量太大了,而且还会有可能有纰漏,想想就觉得头痛,所以顺手写了这个小插件,如果同样有这样需求的可以使用一下。 插件:weapp-obfuscate 安装 [代码]npm install weapp-obfuscate -D [代码] 使用 编辑 [代码]package.json[代码] 文件 [代码]scripts[代码]: [代码]{ "scripts": { "obfuscate": "weapp-obfuscate" } } [代码] 或者执行 [代码]npm pkg set scripts.obfuscate="weapp-obfuscate" [代码] 然后执行 [代码]npm run obfuscate [代码] 即可生成相应的 [代码]code_obfuscation_config.json[代码] 文件。 详细配置信息可以查看 README.md
2022-11-29 - 一文掌握uni-app小程序包大小优化绝技
背景在开发微信小程序的过程中,随着业务逻辑日渐庞大之后,突显了一些问题。 首先我们发现在 dev mode 时,本地包大小已经达到了 4m+,这种情况下,已经无法在 dev mode 使用真机调试了。 其次此时,小程序 build 后也有 1.8M 左右。而且后续还有相当多的业务需求需要开发,包大小肯定会更大。 这时候就想要优化小程序包大小。下面分享一下我的定位过程和解决思路。尽管我们使用 uni-app 开发,但思路是通用的,希望能给大家一些帮助吧。 如何减小包大小代码分析首先分析包大在哪儿了。 打开本地代码目录查看文件大小。可以发现 common/vendor.js 和 page,components 中 js 占了大部分。 在 build 编译模式下,代码压缩已经启用了,需要思考别的优化方式。这时候可以使用[代码]webpack-bundle-analyzer[代码]插件。它可以帮助分析 vendor.js 中都有哪些 js 模块,哪些模块比较大,以便我们进一步优化代码 通过这个插件,发现了下面两个问题。 问题一: uni-app 自定义组件模式编译 tree shaking 无效如果不是使用 uni-app 开发可以跳过这一段 通过代码分析发现有些模块应该被 tree shaking 但却被打包进来了。基本确定是 tree shaking 没有生效。 同样是 webpack4 + babel7。在不使用 uni-app,直接使用 vue-cli create 项目的前提下,tree shaking 是没有问题的。而使用 uni-app 去新建项目,tree shaking 却无效。 排查 babel 配置时发现是由于 uni-app 在创建项目的时候,设置了 modules: 'commonjs'导致。修改后,demo 的 tree shaking ok。但是回到项目里一编译,又出错了。继续定位发现是 uni-app 自定义组件模式编译问题。目前uni-app已经修复了我提的bug,虽然还未正式发布。 当然你不使用 uni-app 自定义组件模式编译也可以解决,uni-app 还支持[代码]template模板模式[代码],但是会有一些开发差异和性能差距,有兴趣可以看下这篇文章 问题二:部分库不支持 tree shaking有些库(比如 lodash)本身并没有使用 import/export,所以 webpack 并不能对它们 tree shaking。这些库我们可以分情况优化。 首先可以找下网上是否有库对应的 esm 版本可以替代,如 lodash-es。 其次可以从代码分析中看出,如果库的每个模块都在不同文件中,入口文件只是一个统一入口,那么我们就可以通过修改写法按需加载,如 import add from "lodash/add"; import Button from 'ant-design-vue/lib/button'; 我们也可以使用[代码]babel-plugin-import[代码]插件针对那些库统一实现按需加载,它的本质是在编译时统一按配置修改加载路径,不需要自己手动去修改代码。 最后如果都不行,那要么接受,要么自己重写为社区做贡献~ 规范模块开发为了免除无法 tree shaking 的烦恼,我们在开发 npm 模块的时候也需要遵循一定的规范,从而减少模块打包后的大小。 同时支持 commonjs 和 es module我们的模块需要同时支持 commonjs 和 es module。这样才能既满足 commonjs 开发的用户,又支持 tree shaking。 如何实现呢?如果你的代码是 typescript,以@sentry/browser 为例,可以在编译时编译 cjs 和 esm 两种规范代码,如下 // package.json"build": "run-s build:dist build:esm build:bundle","build:bundle": "rollup --config","build:dist": "tsc -p tsconfig.build.json","build:esm": "tsc -p tsconfig.esm.json", 然后在 package.json 中指定两个入口以及无副作用标识 "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, 这样当 webpack 解析模块(解析规则),就会按需优先解析 esm 目录。并且当识别到无副作用时进行 tree shaking。 如果你的代码本身就是 es6,你也可以这样 "module": "src/index.js", 第三方自定义组件如果使用了第三方微信自定义组件,由于引用是在 json 文件,所以 webpack 在编译时并不能通过 entry 分析到相关文件,因此不会对其进行编译、压缩等。这时候就需要我们自己处理。而且由于 webpack 不处理,tree shaking 自然也无法支持,因此建议尽量避免这种方式引用组件。 分包小程序分包也是一种常规的优化方案。 通过分析后,可以将一些较大的页面划分为子包。如果有单页依赖第三方自定义组件,而且第三方组件还挺大,也可以考虑将该页面划分为子包。也因此尽量避免将第三方自定义组件放在 globalStyle,不然没法将它放到子包去。 大图不要打包小程序中的大图,尽量避免打包进来,应该放到 CDN 通过 url 加载。我们的做法是在开发时加载本地图片,在 CI/CD 环节自动化发布图片,并改写地址。 如何解决真机调试问题首先还是查看编译后的文件,发现[代码]common/vendor.js[代码]巨大,足有 1.5M。其次[代码]pages[代码]和[代码]components[代码]也有 1.4M,而这其中占了 js 的大小又占了绝大部分。 为什么 js 文件这么大呢?主要是因为在 dev mode 默认并没有压缩,当然也没有 tree shaking。 我的选择是修改编译配置,在 dev mode 压缩 js 代码。本地代码减少到了 2M。预览大小则是减少到了 1.4M。参考配置如下: // vue.config.js configureWebpack: () => { if (isDev && isMp) { return { optimization: { minimize: true, }, } } } 这看上去并不是个好方案,但确实简单有效。也考虑过分包,但分包并不能解决 common/vendor.js 巨大的问题,预览时包还是很大。如果有其它好的办法也欢迎留言~
03-26 - 为何wx.downloadFile下载文件后结尾总是.bin格式?
wx.downloadFile下载文件后结尾总是.bin格式,由于后端给的文件是多种多样的,因此content-type指定了application/octet-stream,没有办法指定特定的文件mime类型,为何这个下载的api这么难用?
05-08 - wx.downloadFile下载mp4视频ios返回bin后缀保存失败?安卓可以正常下载保存
wx.downloadFile({ url: "xxxxxxx.mp4", header: { 'content-type': 'video/mp4' }, success (ress) { if (ress.statusCode === 200) { wx.saveVideoToPhotosAlbum({ //保存到相册 filePath: ress.tempFilePath, success(res) { wx.showToast({ title: '保存成功', icon: 'none', duration: 2000 }) }, fail (err) { wx.showToast({ title: '保存失败', icon: 'none', duration: 2000 }) } }) } } })
2022-02-23 - “仅在企业微信运行”运行环境选项上线
一、新增“仅在企业微信运行”选项 小程序在提交审核时,增加了,“仅在企业微信运行”运行环境选项: [图片] 适用情况 若开发有面向企业的小程序,它们主要应用在企业微信中,不涉及在微信环境中使用,即仅在企业微信运行的小程序。此类小程序开发者,可在提交小程序审核时,选择“仅在企业微信运行”的设置项。 主要变化 选择"仅在企业微信运行"后,将有以下变化: 仅能在企业微信中打开将由企业微信团队进行审核微信环境使用受限(无法在微信中打开、在微信中无法被搜索出来等)部分接口使用受限(如果微信运动、收货地址) 二、“仅在企业微信运行”的小程序审核注意事项 提审材料 五张以上主要界面运行截图;主要场景的使用录屏;版本描述中,需说明: 小程序简介、本次提交主要变化、相关企业微信的企业全称及corpID;若小服务商小程序,请在版本描述中备注说明:“本小程序为服务商小程序”。 注:以上均为必须提交的审核材料,若有遗漏可能带来审核拒绝。 审核规范 同样将按照微信平台的规范进行审核 详见微信小程序平台常见拒绝情形 可查阅 详情文档 或 联系企业微信客服了解更多。
2021-05-24 - 微信认证发票抬头、类型及信息如何修改?
1、如何更换发票类型、修改发票资料(包括邮寄地址) 1)如果勾选“普通发票”,微信认证资料提交成功后,发票信息不再支持修改; 2)如果勾选“专用发票”,认证审核中提示的发票资料未审核通过被驳回之后,可以修改发票资料及发票类型。 温馨提示: 1)若是“专用发票”资料审核成功,发票信息不支持修改; 2)名称默认拉取主体信息,普通发票没有抬头。 2、发票抬头主体名称是否可以更换? 发票抬头主体名称不支持修改,系统会自动拉取数据,若您的主体名称在工商局发生了变更,请将相关的证明材料提交给第三方审核公司。
2020-04-23 - 如何实现加入购物车的抛物线效果
一、场景分析 在一些如商城、点餐小程序中实现购物车抛物线效果可以提升界面趣味性增加小程序用户体验。 二、效果预览 效果图压缩后速度有点快,请下载代码片段预览 [图片] 三、实现原理 当用户点击物品时记录当前触摸点,根据触摸点计算抛物线运动的顶点位置,通过触摸点、顶点、购物车的位置计算出抛物线运动轨迹,然后控制 icon 运动。 计算购物车在当前手机内的位置 [代码]/** 设置购物车的坐标位置 **/ wx.getSystemInfo({ success: (res) => { let busPos = {} // x y 坐标分别取屏幕百分之八十的位置 busPos['x'] = res.windowWidth * 0.8 busPos['y'] = res.windowHeight * 0.8 this.setData({ busPos }) } }) [代码] 商品点击事件的处理 点击物品后记录点击的位置,然后根据点击位置计算出抛物线的顶点位置,计算方式为点击位置的上方+150,右边+150(需要根据点击位置是否在购物左边还是右边进行判断)。 根据点击,顶点,购物车三个位置计算出抛物线运动轨迹 以3个控制点为例,点A、B、C、AB 上设置点 D、BC 上设置点 E、DE 连线上设置点 F,则最终的贝塞尔曲线是点F的坐标轨迹; 计算相邻控制点间距; 根据完成时间,计算每次执行时 D 在AB方向上移动的距离,E 在 BC 方向上移动的距离; 时间每递增 100ms,则 D、E 在指定方向上发生位移,F 在 DE 上的位移则可通过 AD/AB = DF/DE 得出; 根据 DE 的正余弦值和 DE 的值计算出F的坐标。 开启定时器,依次按照贝塞尔曲线位置做动画位移 使用定时器将抛物线运动轨迹做动画位移。 定时器执行完动画后将购物车角标+1 老规矩,结尾放代码片段 https://developers.weixin.qq.com/s/PnYfitmG7Hxv
2022-03-04 - wx.addPhoneCalendar 异常
wx.authorize({ scope: "scope.addPhoneCalendar", success() { // 用户已授权,调用添加日程 API wx.addPhoneCalendar({ title: title, // 日程标题,必填项 startTime: new Date(startTime).getTime() / 1000, // 日程开始时间,必填项 notes: notes, // 日程备注,非必填项 success(res) { console.log(res); // 日程添加成功的回调函数 toastError("添加日程成功"); }, fail(res) { console.log(res); // 日程添加失败的回调函数 toastError("添加日程失败"); } }); }, fail() { // 用户拒绝授权,提示用户授权 toastError("请授权日历权限"); wx.openAppAuthorizeSetting(); } }); addPhoneCalendar:fail can only be invoked by user TAP gesture
08-15 - wx.addPhoneCalendar 回调异常!?
wx.addPhoneCalendar 唤起日历后如果取消, IOS 执行 fail , 安卓执行 success https://developers.weixin.qq.com/s/aXq7Lzmz7Ko3
2021-03-05 - addPhoneRepeatCalendar,往系统日历写入事件,提示授权拒绝?
失败回调提示这个:addPhoneRepeatCalendar:fail authorization refuesed,打印的微信授权列表scope.addPhoneCalendar 已授权,隐私协议也添加了日历权限,所以到底是什么原因导致调用失败?? [图片]
04-30 - 调用wx.addPhoneCalendar时,alarmOffset设置了但无效?
在华为P30 PRO 中,调试wx.addPhoneCalendar时,设置了alarmOffset,但调试时没有效果: wx.addPhoneCalendar({ title:'增加日程测试' , startTime:(new Date()).getTime() / 1000, description:"这是日程内容", alarm:'true', alarmOffset:3000, success:()=>{ console.log('addCalendar is ok') }, fail:(res)=>{ console.log(res) }, complete:(res)=>{ console.log(res) } }) 调试如下图,设置的alarmOffset没有生效,请问是什么原因呢? [图片]
2021-02-26 - wx.addPhoneCalendar日历接口只能添加, 不能编辑和删除啊?
业务需求, 需要添加, 删除 和编辑, 现在貌似只有添加, 后期会完善该功能吗
2021-07-07 - wx.addPhoneCalendar,调用成功,但是我点击返回,没有添加日历,如何监听到呢?
[图片]
2022-08-16 - 小程序webview打开H5个别用户出现白屏现象?
问题:小程序webview打开h5,个别用户出现白屏现象,多次重新进入小程序仍然没有变化,多次排查没有发现问题,开发者工具以及多台手机测试没成功复现问题
04-17 - 微信小程序加载内嵌网页h5白屏?
微信小程序加载网页h5,新发布网页后,会出现部分机型(小米、华为)加载网页白屏,过一段时间(一天左右),才会加载成功,每次新发布,都会出现白屏情况,这是什么原因,有解决办法吗
2020-12-04 - 支付有礼-商家券立即使用跳转不了?
使用支付有礼发放商家券的时候,支付完后跳转商家券“立即使用”反馈页面空白(如视频)。后检查商家券在微信卡包显示为是领券成功,且商家券“点胶机立即使用”是正常无误,跳转到相应页面,请同事帮忙了解,谢谢。 [图片][图片][图片]
2021-05-22 - 小程序web-view无法打开,显示白屏
- 当前 Bug 的表现(可附上截图) 小程序体验版打不开,一直显示白屏;业务域名都设置了还是不行,但是在开发工具上就能打开,很奇怪? [图片] - 预期表现 - 复现路径 - 提供一个最简复现 Demo <web-view src="https://carmat.huizesoft.net/WXManage/WeiXinHome/Index"></web-view>
2018-07-31 - 小程序 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 - 关于page-container,返回键被锁死?
关于page-container。这个组件其实没有什么问题。 就是有时候用手机测试的时候,page-container所在这一个页面的返回键有时候会被锁死。 只要页面不打开page-container就没事儿,打开了有时候左上角返回键和手机返回键都没有反应,被锁死。安卓苹果都有这种状况。
2021-05-07 - wx.navigateBack()出现fail:navigateBack intercepted?
[图片] 使用wx.navigateBack()返回一次后,再次调用wx.navigateBack()会出现fail:navigateBack intercepted的错误,但是再次调用前打印出页面栈是有页面的。
2022-11-23 - IOS scroll-view中的自定义组件fixed问题
这个是正常现象,因为 iOS 下加了 -webkit-overflow-scrolling: touch,这个会产生滚动惯性,体验更好,但会改变 fixed 的行为,建议不在 scroll-view 里有 fixed 元素
2020-04-23