- 小程序开发新能力解读 - 2022.02
快速知悉 图片编辑接口 wx.editImagemap 组件新增能力 - 新增绘制圆弧 - 限制地图显示范围 - polyline 展示文字接口 - map 组件多边形支持设置虚线 camera 支持镜像模式和录像时长参数 1、图片编辑接口 wx.editImage(Object object) 使用介绍:配合 wx.chooseImage 选择图片,对图片进行编辑。 [图片] 示例代码: wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths wx.editImage({ src: tempFilePaths[0], // 演示本地路径,也支持代码包路径 success(res){ console.log("成功") } }) } }) 2、map 组件新增能力 2.1 新增绘制圆弧 MapContext.addArc(Object object) 使用介绍:弧线是由一组经纬度点和夹角角度绘制而成,在地图上绘制弧线由 Arc 类定义实现。 [图片] 示例代码: //增加圆弧 addArc() { const that = this wx.createSelectorQuery().select('#mapId').context(function(res){ that.mapCtx = res.context// 节点对应的 Context 对象。 }).exec() this.mapCtx.addArc({ id: 0, start: { latitude: 23.099594, longitude: 203.328520, },//起点 pass: { latitude: 53.090994, longitude: 153.324520, },//途径点 end: { latitude: 83.080094, longitude: 213.321520, },//终点 // angle: 30, width: 10, color: '#ff0000', complete(res) { console.log('addArc ', res) } }) }, //删除圆弧 removeArc() { const that = this wx.createSelectorQuery().select('#mapId').context(function(res){ that.mapCtx = res.context// 节点对应的 Context 对象。 }).exec() this.mapCtx.removeArc({ id: 0, complete(res) { console.log('removeArc ', res) } }) }, 2.2 限制地图显示范围 MapContext.setBoundary(Object object) 使用介绍:限制地图的显示范围。此接口同时会限制地图的最小缩放整数级别。 [图片] 示例代码: setBoundary() { const that = this wx.createSelectorQuery().select('#mapId').context(function(res){ that.mapCtx = res.context// 节点对应的 Context 对象。 }).exec() this.mapCtx.setBoundary({ southwest: { latitude: 39.744154, longitude: 116.124115 },//西南角经纬度 northeast: { latitude: 40.104336, longitude: 116.691284, },//东北角经纬度 complete(res) { console.log('setBoundary ', res) } }) }, 2.3 polyline 展示文字接口 使用介绍:在折线线段上面绘制文字,可以用来显示路名。 [图片] 示例代码: textStyle:{ textColor:'#00ff00',//文本颜色 strokeColor:'#00ff00',//描边颜色 fontSize:16//文本大小 }, segmentTexts:[ { name:"第1段",//名称 startIndex:0,//起点 endIndex:1,//终点 }, { name:"第2段",//名称 startIndex:1,//起点 endIndex:2,//终点 }] 官方文档 2.4 map 组件多边形支持设置虚线 使用介绍:[0, 0] 为实线,[10, 10] 表示十个像素的实线和十个像素的空白(如此反复)组成的虚线,默认为 [0, 0] 。 [图片] 示例代码: polygons: [{ points: [{ longitude: 118.082771, latitude: 24.494959 }, { longitude: 118.117447, latitude: 24.486836 },{ longitude: 118.117447, latitude: 24.486836 } ], dashArray:[5,5]//边线虚线(数组类型) }] 官方文档 3、camera 支持镜像模式和录像时长参数 selfieMirror / timeout 3.1镜像模式 使用介绍:拍摄照片或者录像,selfieMirror 设置为 true 时开启镜像。 示例代码: startRecord() {//开始录像 this.ctx = wx.createCameraContext() this.ctx.startRecord({ selfieMirror:true,//开启镜像模式 success: (res) => { console.log('startRecord') } }) }, takePhoto() {//拍摄照片 this.ctx = wx.createCameraContext() this.ctx.takePhoto({ quality: 'high', selfieMirror:true,//开启镜像模式 success: (res) => { this.setData({ src: res.tempImagePath }) } }) }, 3.2 录制时长参数 使用介绍:开始录像,timeout 是录制时长上限。 示例代码: startRecord() { this.ctx = wx.createCameraContext() this.ctx.startRecord({ timeout:30,//录制时长上限 success: (res) => { console.log('startRecord') } })
2022-03-02 - 微信开发者工具系列课程
介绍开发者工具基础功能和实践案例,解决开发过程中遇到的调试问题。使用工具,简单快速上手开发小程序。
2021-11-19 - 社区每周 | 小程序开发能力更新、微信客户端内测、云托管能力更新及上周问题反馈(2.14-2.18)
各位微信开发者: 以下是 2022.02 小程序开发能力更新、安卓微信客户端 8.0.20 版本内测、云托管能力更新及上周我们在社区收到的问题反馈的处理进度,希望与大家一同打造更好的小程序生态! 小程序开发更新图片编辑接口等3项能力 近期小程序开发已上线图片编辑接口、map 组件新增能力、Camera 支持镜像模式和录像时长参数等新能力,助力开发者高效开发。更多小程序开发新能力详情,请 点击查看新能力解读公告。 安卓微信客户端 8.0.20 内测邀请 微信团队邀请开发者参与安卓微信客户端 8.0.20 版本内部测试,本次更新概要如下: 小程序 WebAudio 底层改动,需关注相关 crash 情况小游戏 修复 texImage2D 某种用法在某些机型上 crash 的问题WebAudio 底层改动,需关注相关 crash 情况 请基于以下提供的资源体验。使用过程中若发现问题,欢迎点击进入微信开放社区 #微信客户端内测 主页发表标题包含「微信 8.0.20」的问答帖子反馈交流。更多详情请点击查看 内测公告。 [图片] 扫描二维码下载 云托管支持自动清理旧版本服务及镜像,即将上线资源复用功能 微信云托管已支持自动清理旧版本服务和镜像,有效减少开发者因遗忘版本、操作失误等造成的额外资源浪费。此外,资源复用功能即将上线,该功能将支持同一个云托管服务供同主体的多个小程序 / 公众号调用。更多详情请点击 云托管周报。 上周问题反馈和处理进度(2.14-2.18) 已修复的问题云开发初始化一直等待资源初始化的问题 查看详情 修复中的问题 Android 机型使用 FileSystemManager.writeFile 出现文件扩展名错误的问题 查看详情 在组件 scroll-view 中,属性 show-scrollbar 失效的问题 查看详情 2.21.4 及以上版本的小程序基础库出现列表数据渲染慢(掉帧、卡顿严重)的问题 查看详情 微信团队 2022.2.25
2022-02-25 - 微信开发者工具 1.05.2112301 RC 更新说明
下载地址Windows 64、Window 32、MacOS、MacOS(M1) 1、工具增加质量优化检测现在开发者工具会在上传代码阶段自动对代码做代码质量优化检测。我们在编辑器底部新增了代码质量面板,用于展示检测结果以及提供手动检测的入口: [图片] 我们对于这些检测项提供了对应的《小程序性能优化指南》 供开发者参考调优。 同时在工具的「详情」侧边栏里新增「性能分析」面板,可以用于查看线上小程序的数据,以及本地代码质量情况,供开发者针对性的进行优化。 [图片] 2、模拟器加入低端机器模拟 模拟器加低端机模拟选项,开启后将对模拟器执行速度进行一定限制。 [图片] 3、小程序无依赖文件过滤能力工具依赖分析小程序项目中无依赖的文件,在本地开发过程、预览上传时对无依赖文件进行过滤,会自动过滤无依赖的文件,从而减少小程序包体积;如果出现误过滤的情况,可以在 project.config.json 的 setting 字段中添加 ignoreDevUnusedFiles 为 false,也可以在 packOptions 的 include 字段中手动将被忽略的文件引入,同时欢迎发帖反馈误报的情况并提交代码片段帮助我们完善此功能。相关配置开关可参考下面的文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html [图片] 同时在工具中的代码依赖分析工具,也可查看分析到当前项目的无依赖文件情况。 [图片] 4、调试器增加 performance 面板小程序项目调试器增加 performance 面板,可以查看模拟器 AppService 层 JS 执行情况。同时下掉原有的 trace 面板,导入客户端 trace 数据的功能迁移到 performance 面板上。 [图片] 5、用户手机号加密方式改造获取手机号接口进行了安全升级,增加返回动态令牌code。详见:获取手机号 | 微信开放文档
2021-12-31