下载地址Windows 64、Window 32、MacOS、MacOS(M1) 1、模板库创建小程序 支持从模版创建小程序，后续将完善更多类型的模板方便用户进行开发。 [图片] 2、工具更新机制优化为优化开发者工具版本更新体验，新增【稍后更新】和【自动更新】能力。 [图片] 3、编辑器场景推荐 在扩展面板、输入相关关键字的时候，编辑器可以根据本地的代码分析，提供来自服务市场的接口推荐。此功能不会上传用户的代码到服务器，且可以在【编辑器设置】中关闭。 [图片] 4、编辑器优化 工具增强了 WXML 文件的 mustache 内部语法高亮的支持。 除了从指定已解包的扩展文件夹安装，工具还支持一键导入来自 vscode 已安装的扩展（部分扩展可能不受支持）。 [图片] 除此之外，工具的设置云同步也支持了编辑器的通用设置同步。 5、本地设置新增 wxml 压缩 工具新增 wxml 文件压缩的功能，可在上传代码包时，移除 wxml 文件里的注释和空行。目前该功能灰度过程中，如需体验可手动在 project.config.json 中 setting 中添加 minifyWXML 选项，控制是否启用。 [图片] 6、工具优化 TypeScript 模板 、新增 TypeScript + Less 和 TypeScript + Sass 模板 [图片] 工具通过对内置的编译流程进行优化，以编译插件的方式，改进了对 typescript 项目支持。 相比起之前 Typescript 项目中会同时存在 ts 文件和 js 文件，新的模板只需要创建 ts 文件即可，无需再生成同名的 js 文件。新的模板无需在每次编译前执行 npm run tsc 命令。此外，工具还支持将 less 或 sass 文件编译成 wxss 文件，可选择对应的模板创建体验。 7、工具新增机型 iPhone12机型增加 iPhone 12 mini、 iPhone 12、iPhone 12 Pro Max [图片] 8、新增启动时打开项目时设置选项 启动工具后，打开项目的行为现在更新为四种 打开最后一次展示的项目（最后一次激活窗口的项目）打开最后一次编译的项目（最后一次有编译行为触发的项目）打开最后所有打开的项目（如果是使用ctrl+q等方式强行退出工具，下次打开工具会把退出前打开过的项目都打开）不打开项目（即工具启动后不会自动打开任何项目）[图片]

上效果 [图片] 使用方法 组件介绍 两种组件类型： animateNumber: 范围内的所有数字连贯滚动，显示效果佳，但仅限于上下500内，否则页面卡顿 animateNumbers: 各个数位的数字单独滚动，0以上皆可 [代码]// animateNumber 使用示例 <animate-number value="{{value}}" min='{{-50}}' max='{{300}}' options='{{options}}'/> // 配置项如下 options: { during: 1, // (number) 动画时间 height: 40, // (number) 滚动行高 px width: '100%', // (string) 组件整体宽度 ease: 'cubic-bezier(0, 1, 0, 1)', // (string) 动画过渡效果 color: '#FF5837', // (string) 字体颜色 columnStyle: '', // (string) 字体单元 覆盖样式 } // animateNumbers 使用示例 <animate-numbers value="{{value}}" min='{{0}}' max='{{999}}' options='{{options}}'/> // 配置项如下 options: { during: 1, // (number) 动画时间 height: 40, // (number) 滚动行高 px cellWidth: 24, // (number) 单个数字宽度 px ease: 'cubic-bezier(0, 1, 0, 1)', // (string) 动画过渡效果 color: '#FF5837', // (string) 字体颜色 columnStyle: '', // (string) 字体单元 覆盖样式 } [代码] 使用代码 wxml代码 [代码]<!--index.wxml--> <view class="container"> <view class="userinfo"> <button class="btn" bindtap="onReset">重置</button> <input class="input" value="{{numberVal}}" type='number' bindinput="onInput" bindconfirm="onInput"></input> <button class="btn" type="primary" bindtap="onRun">运行</button> </view> <!-- 组件 --> <view class="title">单维数字阵列:</view> <view class="count-up"> <view>默认范围 0~100,配置项options</view> <animate-number value="{{numberVal}}" options='{{options}}'/> </view> <view class="count-up"> <view>设置最大值为 limit：200</view> <animate-number value="{{numberVal}}" max='{{limit}}' /> </view> <view class="count-up"> <view>设置范围为 -50~200</view> <animate-number value="{{numberVal}}" min='{{start}}' max='{{limit}}' /> </view> <view class="title">多维数字阵列:</view> <view class="count-up"> <view>配置同上</view> <animate-numbers value="{{numberVal}}" max='{{limit}}' options='{{options}}' /> </view> </view> [代码] js 代码 [代码]//index.js //获取应用实例 const app = getApp() Page({ data: { value: 0, numberVal: '', start: -50, limit: 200, options: { color: 'green', during: 2, height: 50, width: '100px', columnStyle: 'font-weight: normal', }, }, //事件处理函数 onReset: function() { this.setData({ numberVal: 0 }) }, onRun(){ this.setData({ numberVal: this.data.value }) }, onInput(e){ let value = e.detail.value this.setData({ value }) }, }) [代码] 源码分析 animateNumber 先从[代码]animateNumber[代码]组件开始，从js部分开始 先看常量属性部分分别是： CONFIG：作为默认样式配置 LOCK：最大值，上面有提到超过500会卡顿 问题：为什么超过500就卡顿呢？ [代码]const CONFIG = { during: 1, // :number 动画时间 height: 40, // :number 滚动行高 px width: '100%', // 组件整体宽度 ease: 'cubic-bezier(0, 1, 0, 1)', // 动画过渡效果 color: '#FF5837', // 字体颜色 columnStyle: '', // 字体单元 覆盖样式 } const LOCK = 500 // 锁止 [代码] 再来看看属性列表分别是： value：需要滚动到的目标值，设置监听变化时调用[代码]run[代码]方法 max：最大值，设置监听变化时调用[代码]setRange[代码]方法 min：最小值，设置监听变化时调用[代码]setRange[代码]方法 问题：[代码]setRange[代码]，[代码]run[代码]方法都是起到什么作用呢？ [代码]/** * 组件的属性列表 */ properties: { value: { type: Number, value: 0, observer (n){ this.run(n) } }, max: { type: Number, value: 100, observer (){ this.setRange() } }, min: { type: Number, value: 0, observer (){ this.setRange() } }, options: { type: Object, value: {} }, }, [代码] 前面这些都是准备阶段，解析来才是重头戏，敲黑板！ 页面创建时执行的时候调用了[代码]setRange[代码]，[代码]renderStyle[代码]方法。 主要目的是初始化数据范围和页面样式。 [代码]setRange[代码]方法作用把所有目标值区间的数字都遍历生成出来。如：设置了200为最大值，[代码]columns[代码]数组里面就会有1-200的数字。 [代码]renderStyle[代码]方法作用把设置的一些基础样式。 [代码]run[代码]设置具体当前显示的数字 [代码] /** * 内存数据 */ data: { columns: [], key: 0, _options: JSON.parse(JSON.stringify(CONFIG)), }, // 页面创建时执行 attached(){ this.setRange() this.renderStyle() }, /** * 组件的方法列表 */ methods: { setRange(){ let { max,min } = this.properties let arr = [] min = parseInt(min) max = parseInt(max) if(max - min < 0){ max = min }else if(max - min > LOCK){ max = min + LOCK } for(let i = min; i<= max; i++){ arr.push(i) } this.setData({ columns: arr, max, min, }) // 范围调整后，修正当前 value this.run(this.properties.value) }, run(n){ let { max,min } = this.data let index; n = parseInt(n) n = n<min ? min : n>max ? max : n index = this.data.columns.indexOf(n) this.setData({ key: index>-1 ? index : 0 }) }, renderStyle(){ /** * color, * columnStyle, * width, * height, * during, * ease, */ let options = this.properties.options, _options = this.data._options; // console.log('options:',options) Object.keys(options).map(i=>{ let val = options[i] switch (i) { case 'during': case 'height': if(parseInt(val) || val === 0 || val === '0'){ _options[i] = val } break; default: val && (_options[i] = val); break; } }) this.setData({ _options }) }, } [代码] wxml代码 [代码]<view class="count-box" style="width:{{_options.width}};"> <view class="viewport" style="height:{{_options.height}}px;"> <view class="column-wrap" style="transform: translate3d(0, -{{key * _options.height}}px, 0); transition-duration:{{_options.during}}s; transition-timing-function:{{_options.ease}}"> <view wx:for="{{columns}}" wx:key="index" class="item" style="color:{{_options.color}};height:{{_options.height}}px;line-height: {{_options.height}}px;{{_options.columnStyle}}">{{item}}</view> </view> </view> </view> [代码] css代码 [代码]/* components/animateNumber/index.wxss */ .count-box{ /* width: 100%; */ height: 100%; display: flex; justify-content: center; align-items: center; } .viewport{ width: 100%; overflow: hidden; } .column-wrap{ width: 100%; transform: translate3d(0, 0, 0); transition: all 1s cubic-bezier(0, 1, 0, 1); } .item{ width: 100%; text-align: center; font-size: 40px; font-weight: bold; } [代码] [代码]columns[代码]是所有区间内的值，然后布局会[代码]wx:for="{{columns}}"[代码]通过全部渲染出来，这里也就是为什么上限设置了500，因为一个页面显示的元素过多就会导致卡顿。 [图片] 那么遍历出了200个为什么看不到了？因为通过[代码]overflow:hidden[代码]属性做到只显示当前数字，如果把去掉这个属性就是这样的：[图片] 滚动的效果是通过改变[代码]translate3d[代码]的[代码]y[代码]轴实现的，[代码]y[代码]的值是通过-[代码]key * _options.height[代码]计算出来的，[代码]height[代码]好理解就是一个数字的高度，而[代码]key[代码]就是具体当前要显示的数字。如：我输入数字2，每个高度是50px，那么就是2*50=100px。 [图片] 那么这个时候你肯定会有个疑问，很多时候我们会有超过500的数字，那怎么办呢？这个问题好解决可以用[代码]animateNumbers[代码]组件。 animateNumbers animateNumber 和 animateNumbers 大同小异，很多内容都是一样除了一个地方。不一样的地方在于单维数字阵列和多维数字阵列。如：value为100，animateNumber是一个内容为100的view，animateNumbers是三个view组合而成一个内容为1的view和两个内容为0的view。 [图片] 再看看wxml布局代码，采用的是双重循环。 [代码]<view class="count-box"> <view class="viewport" wx:for="{{columns}}" wx:key="index" style="width:{{_options.cellWidth}}px;height:{{_options.height}}px;"> <view class="column-wrap" style="transform: translate3d(0, -{{keys[index] * _options.height}}px, 0);transition-duration:{{_options.during}}s; transition-timing-function:{{_options.ease}}"> <view wx:for="{{item}}" wx:for-item="row" wx:for-index="idx" wx:key="idx" class="item" style="color:{{_options.color}};height:{{_options.height}}px;line-height: {{_options.height}}px;{{_options.columnStyle}}">{{row}}</view> </view> </view> </view> [代码] 再看看js代码 注：同样的js代码就不重复解释了，主要看看不一样的地方。 [代码]initColumn[代码]把数字进行了分割，如：最大值100获取100的长度为3，那么就变成了3个数组，每个数组都是1-9的数字。 [代码]run[代码]方法里面按位分别计算[代码]key[代码]值放入放到[代码]keys[代码]中 [代码]setRange(){ let { max,min } = this.properties min = parseInt(min) >= 0 ? parseInt(min): 0 max = parseInt(max) > min ? parseInt(max): min let columns = this.initColumn(max); this.setData({ columns, max, min, }) // 范围调整后，修正当前 value if(this.properties.value) { this.run(this.properties.value) } }, initColumn(n){ let digit = (n + '').length, arr = [], rows = [' ', '0','1','2','3','4','5','6','7','8','9']; for(let i = 0; i< digit; i++){ if(i) { arr.unshift(rows) }else{ arr.unshift( rows.slice(1) ) } } return arr }, run(n){ let { max,min } = this.data; let value = parseInt(n); value = value<min ? min : value>max ? max : value; let valueArr = value.toString().split(''), lengths = this.data.columns.length, indexs = []; while(valueArr.length){ let figure = valueArr.pop(); if(indexs.length){ indexs.unshift(parseInt(figure) +1) }else{ indexs.unshift(parseInt(figure)) } } while( indexs.length < lengths ){ indexs.unshift(0) } this.setData({ keys: indexs }) }, [代码] 源码地址 源码地址：https://github.com/Lyuing/wxAnimateNumber

各位微信开发者： 以下是春节期间小程序及小游戏审核调整通知、安卓新版众测、小程序URL Scheme功能规则调整及上周我们在社区收到的问题反馈、需求的处理进度，希望同大家一同打造小程序生态。 微信团队邀请开发者参与内部体验（安卓微信7.0.23） 本次更新概要如下小程序 WebGL组件重构，需关注WebGL组件部分模块懒加载，降低内存，需关注运行稳定性修复部分情况下注入失败Worker 部分绑定模块重构，需关注运行稳定性request和download接口success回调中返回的profile信息完善蓝牙相关bug fix，需关注蓝牙数据回调是否正常，配对流程是否正常 小游戏 渲染组件重构，降低内存，部分模块懒加载，需关注运行稳定性修复部分情况下注入失败Worker 部分绑定模块重构，需关注运行稳定性request和download接口success回调中返回的profile信息完善 请基于以下提供的资源体验。使用过程中若发现问题，欢迎点击进入微信开放社区 #微信客户端内测 主页发表标题包含「微信7.0.23」的问答帖子反馈交流。 [图片] （扫描二维码下载） 如有需要，可查看并转发原公告：《微信团队邀请开发者参与内部体验（安卓微信7.0.23）》 春节期间小程序及小游戏审核调整通知 小程序及小游戏代码审核将在2021年春节假期2月11日（除夕）至2月17日（初六）支持开发者紧急审核需求，充分保障开发者在过年期间的紧急情况提审需求。 如开发者希望在春节前完成常规版本迭代，建议在2021年2月7日24点前提交小程序或小游戏代码审核。在此之前提交的小程序或小游戏代码审核单，审核团队将在春节前（2月11日前）审核完毕，春节期间仅支持紧急版本提审需求。 2月18日恢复正常审核后，将按提审时间顺序逐步审核春节期间常规版本提审。 小程序及小游戏名称审核、类目审核均与小程序代码审核同步进行。请开发者们合理安排提审时间，避免影响版本迭代。 如有需要，可查看并转发原公告：《春节期间小程序及小游戏审核调整通知》 小程序URL Scheme功能规则调整 为满足开发者 获取URL Scheme 的诉求，将对生成规则作如下调整： 1. Scheme将根据是否为到期有效与失效时间参数，分为短期有效Scheme与长期有效Scheme 2. 有效时间不超过31天的Scheme为短期有效Scheme，单个小程序每日生成短期有效Scheme上限为50万个 3. 有效时间超过31天的Scheme或永久有效的Scheme为长期有效Scheme，单个小程序总共可生成长期有效Scheme上限为10万个，请谨慎调用，暂不提供清除接口 该规则自2021年1月18日生效，请开发者尽快适配，生效前生成的长期有效Scheme不计入10万个数量限制。 上周问题反馈和处理进度（1.04-1.08） 已修复的问题IOS14.2 微信小程序多文本框键盘弹出问题 查看详情 云开发控制台进入显示“检查环境”发生了错误的问题 查看详情 wx-open-launch-app 模拟器正常，真机报错 [WXTAG][JSCORE]的问题 查看详情 修复中的问题 video binderror部分情况不触发的问题 查看详情 电脑端小游戏广告自动完成的问题 查看详情 ios14 微信小游戏 息屏后恢复会卡死的问题 查看详情 picker组件在电脑分辨率不同时展示的日期年份和选择的年份不一致的问题 查看详情 需求反馈需求评估中微信开放社区MarkDown编辑器支持不足的需求 查看详情 【建议】社区新增一个红包封面主页的需求 查看详情 发者工具中Javascript context显示变红 查看详情 希望能够扩大开发调试模式下真机调试单包2M的限制的需求 查看详情 微信团队 2020.1.14