- createInnerAudioContext access denied?
当页面onHide后返回，会出现这样的报错，我把onHide里面的暂停函数去掉又好了。 报错: operateAudio:fail:access denied，errCode: -1 重现：代码片段转发文件助手或者好友再返回即可重现 代码片段：https://developers.weixin.qq.com/s/jT7WaIm27Oyl
2022-04-22 - page-container在使用wx:if销毁时页面滚动不了,为啥？
添加条件判断后，关闭弹窗，页面生成不了滚动条https://developers.weixin.qq.com/s/T6UuKmmD7cyU
2022-04-12 - wx.enableAlertBeforeUnload只有在非自定义标题栏的时候才会触发?
wx.enableAlertBeforeUnload 在非自定义标题栏时(navigationStyle为custom) 不会触发弹框 请官方帮忙看看 急！！！
2022-01-05 - imgSecCheck调用时总是不是返回结果,而是抛出异常?
[图片] 这是第一种异常，是调用API超时，正常（不是黄色图片）的图片（1M以内）也会报这个错误，这个不知道怎么解决。 [图片] 这是第二种异常，说是内容有风险，但是为啥不直接抛出结果说是内容有风险，而是抛出异常说内容有风险呢。。。
2022-05-10 - 你是否因为小程序选中文本后的弹出菜单无法定制，而放弃过一些功能，只能用App弥补？有需求的来mark
我们做了一个朗读类的小程序，因为选中文本后的菜单无法定制，我们不得不放弃了一些对用户非常有价值的功能，只能考虑在App上做，比如： 选中生词查读音、查释义，加入生词本；朗读备稿，在文本中加入一些停连、重读、轻读等的标记，帮助自己更好的朗读；选中一段话，写上自己的想法；其实我们不想去做App的，会增加很多成本，但如果小程序上没法做，就只好去做App. 希望小程序能越来越强大，这样我们只要在小程序上玩耍就够了。 现在，小程序中选中一段文本，弹出的菜单只有一个“复制”，如下图所示： [图片]
2020-09-29 - 富文本editor编辑器字体颜色设置，请教，怎么弄呢？
在wxml中该怎么设置字体颜色的代码呢，***那该写什么代码呢，有例子参考吗？ <i class="iconfont icon-text_color" ******></i> <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
2022-06-23 - 编辑器editor字体颜色和背景色的bug？
EditorContext.format(string name, string value)color和backgroundColor表明支持hex color，但是如果颜色值中的字母是大写，则会出现只能选中，不能取消的情况。 <label class="color {{formats.color === '#0000C0' ? 'active border' : ''}}" data-name="color" data-value="#0000C0" style="background-color: #0000C0;"></label> #0000C0中的C一定要小写。切记切记切记 不知道这算不选bug，待官方反馈下。 如果需要复现地址，官方demo中有设置字体颜色的选项把颜色值里面的字母改成大写就可以复现。 代码片段：https://developers.weixin.qq.com/s/W7uZ3EmU7jbl
2022-01-18 - 微信小程序颜色选择器、拾色器、取色器组件
bao-wecom 微信小程序颜色选择器、拾色器、取色器组件 案例demo [图片] 使用方法 1. 安装组件 [代码]npm install --save bao-wecom [代码] 2. 构建 npm 点击开发者工具中的菜单栏：工具 --> 构建 npm [图片] 3. 颜色选择器使用 在页面的 json 配置文件中添加 bao-wecom-color-picker 自定义组件的配置 [代码]{ "usingComponents": { "bao-wecom-color-picker": "bao-wecom/colorPicker/index" } } [代码] WXML 文件中引用 bao-wecom-color-picker [代码]<bao-wecom-color-picker></bao-wecom-color-picker> [代码] bao-wecom-color-picker 的属性介绍如下： 字段名 类型 必填 描述 show Boolean 是 控制颜色选择器是否显示 color String 否 设置颜色选择器的颜色，默认为#ff0000 ,仅支持rgb、hex格式 commonColor String 否 设置常用颜色值，默认为"#000000,#ffffff,#ff0000,#ffa500,#00ff00,#0000ff,#ff00ff,#00ffff,#ffff00,#70db93,#cccccc,#999999" ,仅支持hex格式，最多12个 comfirmText String 否 设置确定按钮的文字，默认为确定 cancelText String 否 设置取消按钮的文字，默认为取消 title String 否 设置标题，默认为请选择 bao-wecom-color-picker 的事件介绍如下： 事件名 描述 confirm 点击确定时触发，返回值{hex: 16进制色值, rgb: rgb色值, hsv: hsv色值} cancel 点击取消时触发 如果觉得作者不易，打赏一下呗 [图片]
10-30 - 现在不能在小程序后台手动新增订阅消息模板了吗？
如题
08-27 - wx.getBackgroundAudioManager()获取不到属性
代码用的官方文档的: [代码]onLoad: [代码][代码]function[代码] [代码](options) {[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]const backgroundAudioManager = wx.getBackgroundAudioManager()[代码] [代码] [代码][代码]backgroundAudioManager.title = [代码][代码]'此时此刻'[代码][代码] [代码][代码]backgroundAudioManager.epname = [代码][代码]'此时此刻'[代码][代码] [代码][代码]backgroundAudioManager.singer = [代码][代码]'汪峰'[代码][代码] [代码][代码]backgroundAudioManager.coverImgUrl = [代码][代码]'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'[代码][代码] [代码][代码]backgroundAudioManager.src = [代码][代码]'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'[代码] [代码]// 设置了 src 之后会自动播放[代码][代码] [代码][代码]console.log(backgroundAudioManager);[代码][代码] [代码][代码]console.log(backgroundAudioManager.title);[代码][代码] [代码][代码]console.log(backgroundAudioManager.epname);[代码][代码] [代码][代码]console.log(backgroundAudioManager.singer);[代码][代码] [代码][代码]console.log(backgroundAudioManager.src);[代码][代码] [代码][代码]console.log(backgroundAudioManager.duration);[代码][代码]}[代码]控制台打印如下:[图片] 全部为undefined 把第一行打印的这个对象打开详细 [图片] 可以看到这个对象里其实是有部分属性的,但是有些属性还是没有 比如上面epname和singer赋过值,这里没有值, duration是有值的下面打印却是undefined 这是怎么回事? 还有放在手机上测试打印出的结果不是undefined而是null [图片]
2017-12-06 - 关于云开发的一次性订阅消息
前段时间看到了这位老哥的一篇关于订阅消息的文章：https://developers.weixin.qq.com/community/develop/article/doc/0008802e8381e0eeabb92c9975b013 这篇文章对于程序员来说非常直观的说明了一次性订阅消息的逻辑：订阅1次，可以收到订阅消息一次，订阅10次，可以收到订阅消息10次。 但是我觉得这个方案对于一个普通用户来说，并不够友好，如果我是一个不懂订阅消息的普通用户，我根本不会花时间去点这样一个点1加1的订阅消息。我觉得对于开发者来说，用户能够点一次允许并且勾上不在询问就已经很不错了，剩下的完全可以交给程序来处理。下面是我的方案。让一次性订阅消息达到长期订阅的效果。 首先明确以下逻辑： 通过 wx.getSetting({ withSubscriptions: true }) 的 success 回调 res 可以得出订阅消息的以下5种状态[图片]当用户勾选了“不在询问”之后，不管你后面怎么调 wx.requestSubscribeMessage ，订阅消息的弹窗都是不会弹起的wx.requestSubscribeMessage 需要用户手动点击触发当得到以上几种状态之后，接下来就可以根据需要做自己想要做的操作 如我的小程序首页是一个版本列表 [图片] 我在列表的头部设计了一个跟小程序同风格的授权卡片，这样不会显得突兀同时告诉用户点击授权并且勾选“不在询问”，并告诉用户这样做的目的是什么。 然后根据上面得到的不同状态来显示不同的提示语： 总开关关闭了： [图片] 勾选了“不在询问”并且选项是取消 [图片] 接下来就是实现订阅消息+1的步骤，上面提到了当用户勾选了“不在询问”之后，不管你后面怎么调 wx.requestSubscribeMessage ，订阅消息的弹窗都是不会弹起的 这时在用户点击你应用中必点的操作时，比如知乎微博的点击列表进入详情，或者我这个小程序点击版本列表进入版本详情时就可以根据以上得到的状态来判断：当授权状态是“选择了不在询问并且选项是允许” 时，直接调用 wx.requestSubscribeMessage ，这时 wx.requestSubscribeMessage 的回调必定是success，而且不会出现授权弹窗，自然也就实现了+1效果。 最后把订阅次数+1记录到数据库，推送时推送订阅次数大于0的就ok了 [图片] 这样一个普通用户需要做的操作就只有点击授权-勾选不在询问-允许 这样一个步骤，同时就实现了无形中增加订阅次数的效果，替代让用户手动去点+1增加订阅消息的操作。 另外不用担心这种操作会使用户感觉像垃圾广告一样一直被推送，因为不管是在服务通知页面，还是在设置页面，用户都是可以很轻松的一键关闭通知。 [图片] 然后说下订阅消息的几个特殊情况： 1.当你的账号在开发者工具上面点过允许或取消的时候，wx.getSetting({ withSubscriptions: true }) 的 success 回调结果是这样的 [图片] 手机上的设置界面是这样的 [图片] 回调的itemSettings属性消失了，界面上有订阅消息的开关，但是订阅消息的选项却没了，正常情况应该是这样的 [图片] 这样的 [图片] 2.当用户点了“不在询问并允许”但是又手动通过服务通知页面，或者设置页面关闭了消息通知，这时就算该用户之前已经订阅过了很多次，都会被系统自动清0，这时你的数据库可能存的该用户还有比如5次订阅消息，但是通过cloud.openapi.subscribeMessage.send推送消息的时候，会进catch，errCode是43101。 3.当用户手速过快连续点击了授权按钮触发wx.requestSubscribeMessage时，会进入fail回调，errMsg是 requestSubscribeMessage:fail last call，这个文档是没写的。 最后可以扫码体验一下： [图片]
2020-07-14 - 开源日记 持续更新NO.3 | SkylineUI组件库之基础图表
小程序展示： [图片] 今日更新：半圆进度条 今天更新的进度图表组件仍是使用canvas绘制。 后续还会更新整圆、大半圆、矩形树图、面积图、柱状图等基础图表组件，虽然市面上有echarts和antv f2等非常成熟的图表组件，但我不能确认这些组件是否适配Skyline框架，所以还是决定添加一组轻量化、风格标准极简但满足大部分场景的图表。 说回半圆，开发中最有挑战的，就是完成了计算手指点击坐标是否在进度内，并完成反馈动画 接下来直接展示： [图片] [图片] 当然，也适配了css色彩变量，兼容了深色模式： [图片]
2023-12-29 - 简单实现签到日历效果
wxml: <view class="box"> <view class="section"> <picker mode="date" value="{{date}}" fields="month" start="2010-01-01" end="{{cy+'-'+cm}}" bindchange="bindDateChange"> <view class="picker">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view> </picker> </view> <view> <!-- 显示星期 --> <view class="week color9b"> <view wx:for="{{weeks_ch}}" wx:key="unique">{{item}}</view> </view> <view class='days'> <!-- 行 --> <view class="rows" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="unique"> <!-- 列 --> <view class="columns" wx:for="{{7}}" wx:for-index="k" wx:key="unique"> <!-- 每个月份的空的单元格 --> <view class='cell' wx:if="{{days[7*i+k].date == null}}"> <text decode="{{true}}"> </text> </view> <!-- 每个月份的有数字的单元格 --> <view class='cell' wx:else> <!-- 当前日期已签到 --> <view wx:if="{{days[7*i+k].isSign == true}}" class='qianbg'> <text class="colorff">{{days[7*i+k].date}}</text> <text class="sourse">+{{days[7*i+k].Score}}</text> </view> <!-- 当前日期未签到 --> <view wx:else> <text>{{days[7*i+k].date}}</text> </view> </view> </view> </view> </view> </view> </view> 简单提下思路，首先默认确定当前年月，cy cm, 初始化：获取days遍历日历的格子，通过获取当前月第一天是星期几来判断前面有几个空格，放入days,再当月天数放入days,然后进行渲染，再通接口去拿签到信息，签到成功的突出显示。这里签到初始化时我默认给了标识isSign，将已签到列表和当前年月日进行比较，符合条件则更新签到状态。切换选择日期，这里我用的是选择器，当然可以写成点击左侧按钮上一月，右侧按钮下一月那种，重新选择日期后，initdata(e) 传入年月，就是当前选择年月的数据。将星期日作为第一日的我也备注上去了。样式根据自己的喜好改就行了，最后看看我写的两个项目效果： [图片][图片] 写了个demo：https://developers.weixin.qq.com/s/SSlwjGmb7Wm9
08-14 - 播放音频偶尔报错：err:load or init native decode so fail
使用backgroundAudioManager播放音频，偶尔会报如下错误： "errMsg":"errCode:62, err:load or init native decode so fail","errCode":10001 微信日志已经上传： 时间：2020-1-14 11:09 12:25 12:26 12:27 12:45 12:48 13:05 微信号：wxid_fh1vlznpp7lw22 报错的音频我换了两台别的手机测试播放正常，音频链接用户在微信会话中直接打开也能正常播放。用户自己手机也是时好时坏的。 社区里搜了一遍，反馈这个问题的帖子有不少，时间跨度也挺大，看了十几个帖子，但没有找到一个帖子能说明如何解决这个问题的，官方的跟进也没有结论。 以下这些相关帖子每一条回复都看了，没有看到结论或者解决方案： [图片]
2020-01-14 - 一文教你如何更优雅的处理微信支付商户订单投诉？
在国内做产品涉及使用微信支付商户收款时，难免会遇到一些消费者对支付订单发起投诉，商户如果处理不当会导致商户号出现被延长收款结算周期、限制收款能力、调整交易额度或限制提现等处罚，严重的会关闭商户主体下商户全部支付权限。 那么商户该如何正确处理消费者投诉，降低各项投诉指标呢？一些简单实用的小技巧解除你的烦恼。 微信支付对于消费者投诉处理时效要求： 1）商户最晚需在投诉单生成1天内回复用户投诉受理情况（如9月20日的投诉，商户需在9月21日24点前回复用户） 2）商户最晚需在投诉单生成3天内处理完用户问题，并在商户平台标记“投诉处理完成”（如9月20日的投诉，商户需要在9月23日24点前处理完结） 如何判断一笔投诉单属于已解决？对与投诉单微信支付的认可的处理完成标准如下： ①订单原路全额退款 ②用户主动在投诉入口回复“撤诉” ③商户通过投诉交互功能协商，确认投诉已协商达成一致，点击处理完成，用户点击“已解决”且用户不再重复投诉。 一些处理小技巧： 1）在产品中增加明显的“联系客服”入口，一般用户可以联系到客服的情况下，一般不会优先去投诉支付订单，可以有效降低商户号的客诉率 2）接入微信支付商户的“消费者投诉”接口，实时获取投诉通知，通过类似企业微信机器人能力，让指定人员可以实时接到客户投诉信息，及时处理客户投诉；针对一些投诉即将到达72h的投诉单对指定人员进行多次推送，以免出现投诉单出现超时未处理的情况，微信支付考核商户投诉处理三大指标之一的“及时处理率”就是近30天（T-33天到T-4天）内发起的投诉单，在首次投诉发起后72h内处理完成的比例。 3）在投诉单对用户进行回复后，不要直接去点击“处理完成”，当商家点击“处理完成”后，用户是无法再进行直接回复的，会发起二次投诉，标记”投诉处理完成"前是需要已完成处理用户问题的，此类操作会导致“重复投诉率”大幅度提升，不少商户都在此处踩坑。建议申请结单前确认是否已经与消费者妥善协商处理，针对重复投诉的商户需要关注并及时处理，如重复投诉较多，需要及时排查原因并做优化。 4）当遇到一些恶意投诉/不合理的投诉，请按照商户公司自己的流程妥善处理，并将具体的处理情况和结果回复用户。如果确认无法满足用户的诉求且已经是最终处理方案，在连续发起结单3次后用户仍不满意可以先暂停处理，但这单会被记录服务不满意。如果是恶意投诉，微信侧针对重复投诉会提供10%的“容错率”，如果因为此类恶意投诉导致风控，提供相关凭证在商户后台进行申诉即可。 以下是在处理客诉过程中不可取的行为，会触及“平台消费者投诉管理规范”高压线： 🙅不要主观上先去给用户扣上一顶“恶意投诉”的帽子，搞清楚状况之前，不要妄下结论，主观是大忌，会影响你对客诉处理过程中的判断 🙅不要在沟通过程中（无论是在交易投诉系统还是电话或者商家自建客服系统等）去恶意诱导或辱骂用户 🙅不要去恶意骚扰用户，例如在交易投诉系统拿到用户手机号给他来个“轰炸机”套餐 🙅不要脱离平台去使用三方聊天工具进行沟通 有问题欢迎跟帖讨论，文明沟通，理性发言！！！
2023-09-19 - 微信小程序 Editor组件在无内容的情况下，长按无法粘贴，会自动收起键盘，但没有失焦
微信小程序 Editor组件在无内容的情况下，长按无法粘贴，会自动收起键盘，但没有失焦
2023-07-11 - 小程序频发网络请求失败，错误码有“600001”，“5”，“600003”等，原因是什么？请官方协助
[13:57:19] {"env":"release"} 接口调用报错 {"errno":600001,"errMsg":"request:fail -109:net::ERR_ADDRESS_UNREACHABLE"} [13:42:47] {"env":"release"} 接口调用报错 {"errno":600001,"errMsg":"request:fail -101:net::ERR_CONNECTION_RESET"} [13:37:20] {"env":"release"} 接口调用报错 {"errno":600001,"errMsg":"request:fail errcode:-7 cronet_error_code:-7 error_msg:net::ERR_TIMED_OUT"} [11:16:55] {"env":"release"} 接口调用报错 {"errno":5,"errMsg":"request:fail fail:time out"} [11:16:52] {"env":"release"} 接口调用报错 {"errno":600001,"errMsg":"request:fail -103:net::ERR_CONNECTION_ABORTED"} 等等类似情况，请微信官方协助解决 [图片]
2023-11-13 - 小程序备案指南（企业备案），持续更新
在mp后台： 1：未上架的小程 首页--小程序发布流程--小程序备案（查看能否备案）。 说明：此页面是未发布小程序前的首页页面，发布后的不一样，不要纠结找不找得到、没有这个页面。已经发布的看下方第二张图。 可以备案： [图片] 2：已上架的小程 可以备案： 小程序管理后台顶部会提示“小程序需补充备案信息”的提醒，点击【去备案】即可进入备案流程 或在设置--基本设置--小程序备案（去备案） 不能备案： 设置--基本设置--小程序备案（暂未对存量小程序开放） [图片] 企业小程序备案准备材料： 营业执照（副本扫描件或加盖公章的复印件，建议用副本扫描件，在上面加上**小程序备案所用，他用无效）。法人身份（最好是法人，负责人的也可以）证正反面照片，彩色的，拍照要拍全。管理员个人信息，姓名，身份证号，电话，备用电话，常用邮箱。（建议管理人员和负责人是同一个人）地址填写，最好是营业执照上地址，也可以是常用地址。前置审批/专项审批（具体可查看https://developers.weixin.qq.com/miniprogram/product/record_guidelines.html）。补充材料：根据规则提供包括但不限于授权书、党建证明、居住证、情况说明、承诺书等。互联网信息服务备案承诺书（单位）。资料提前准备好，需要法人扫码验证（和小程序认证差不多）。根据不同地区，准备资料可能有所差异，详细需要什么资料，审核备案时具体再做补充。如果上述没有看懂，转移这里，官方给出的流程https://developers.weixin.qq.com/miniprogram/product/record_guidelines.html[图片] 备案流程 [图片] 。。。。。。（持续更新详细步骤） 九月八号上午填写备案信息，九月十三号成功备案（本来九月八号当天发验证短信的，用户这边没及时验证，耽搁一天） [图片] 常见信息填写问题 1、备案流程中的主办单位、主体负责人具体指的是谁？主办单位 又称互联网信息服务主办者，主要指内容服务提供者，包括单位（如企业、政府机关等）和个人两类。主体负责人 个人：主体负责人应为主办单位本人。非个人：通常由单位法定代表人担任，如有特殊情况（如法代身份涉密、长期不在国内等）可授权单位高管担任。2、个体户没有公章怎么办？若个体工商户无公章，需要主体负责人手写日期+签名+盖手印+身份证号码，同时请在主体备注处备注“个体工商户无公章”。 3、填写小程序主体信息的通讯地址是指的什么地址？可填写主体证件上的地址，也可填写你实际的办公或住所地址。 若你是个人开发者：需精确到门牌号码，若已是最详细的地址或无门牌号的，在主体备注中说明“通信地址已为最详细”。若你是单位开发者需精确到门牌号码，且至少和主体证件所省份保持一致（如证件住所和通讯地址都是广东省），不能使用特殊符号（如：2#楼2-3-301）；若已是最详细的地址，无门牌号的，在主体备注中说明“通信地址已为最详细”。备注：若你是北京地区，通讯地址填写时不能使用特殊符号（如：2#楼2-3-301）。4、什么情况下需要上传居住/暂住证明？当个人主体小程序备案申请人的身份证证件地址与申请小程序备案的省份不一致时，需要提供暂住证或居住证等证明材料。 涉及省份包括：吉林、上海、江苏、浙江、安徽、山东、湖北、广东、四川、贵州、云南。 5、小程序备案主体负责人必须填写法定代表人吗？每个省份管局的要求不一致，请按照备案小程序所属省管局要求进行填写，具体请参考： 类型地区主体负责人不是法定代表人需提供小程序主体负责人授权书吉林、山西、甘肃、江苏、安徽、四川 主体负责人必须是法定代表人：天津、内蒙古、陕西、宁夏、新疆、湖北、湖南、河南、上海、浙江、江西、贵州、重庆、云南、西藏、广西、广东、福建、黑龙江、河北、山东、青海 主体负责人可以不是法定代表人吉林、山西、甘肃、江苏、安徽、四川、海南、北京、辽宁 6、提示：主体负责人与法定代表人不一致，且备案所在地不支持法定代表人授权？你填写的【主体负责人】姓名与营业执照证件上的【法定代表人】姓名不一致，请重新填写，并保持一致。你在小程序备案 -【验证备案类型】页面中 - 主办人信息 - 选择地区中选择的省份，不支持法定代表人授权，【主体负责人】需填写【法定代表人】姓名。备案省份需填写小程序备案主体实际所在地，系统会根据你选择的区域自动匹配当地管局规则。7、在填写负责人手机号、应急手机号、邮箱时，提示：不允许被多人使用？在填写负责人手机号、应急手机号、邮箱时，提示“不允许被多人使用”，一般是出现了个人信息混用的情况，即手机号/应急手机号/邮箱填写的是其他人的信息。 在平台备案系统中，人，手机号，应急手机号，邮箱均一一绑定，同一个人允许为多个小程序备案（同一主体下），可以提交一致的手机号、应急手机号及邮箱，但不能出现不同人共用手机号/邮箱的情况。 小程序负责人授权书、小程序主体负责人授权、互联网信息服务承诺书怎么填写？小程序备案材料示例及填写指引：小程序备案材料示例小程序信息填写相关1、什么是服务内容标识？怎么选？服务内容标识是通信管局对各个行业的分类，平台部分行业类目与管局行业类目名称不完全不一致，建议根据备案小程序实际运营内容尽可能选择对应的服务内容标识。 若你是个人主体，请勿选择经营性质、企业/单位性质、涉及有关主管部门审批等的内容，如不可选择“批发和零售业-零售批发”。若你是单位主体，应选择与主体经营范围、资质相符合的内容，如你是医药公司，可选择“医疗服务-医药”，并上传《互联网药品信息服务许可证》。非政府单位不得选择“政务民生”内容。2、小程序负责人具体是指谁？是小程序管理员吗？个人主体：小程序负责人应为主办人本人。 非个人主体：小程序负责人应为本单位/公司具体负责小程序管理、小程序维护的相关人员。 3、怎么判断备案小程序是否要选择前置审批项？可参考：前置审批类别及审批部门 4、小程序管理员信息填写时，负责人姓名已填写为小程序管理员的姓名，为什么还是提示：负责人与小程序管理员不一致？出现这种提示一般都是第三方服务商协助创建的小程序未完善管理员实名信息，需补充管理员实名信息后才能进行备案，补充指引参考： 小程序MP后台-成员管理-管理员-修改。验证原管理员-填写原管理员身份证信息-扫码验证。绑定新管理员-填写【原管理员的信息】并提交，即完成管理员实名信息补充。相关文档可参考：如何完善小程序实名信息 小程序备案常见问题：https://developers.weixin.qq.com/community/develop/article/doc/000ac251a9c340df3e6073ee566c13 最后祝大家，一次备案成功
2023-10-08 - 小程序editor富文本编辑器长按显示系统复制粘贴，抬手时失去焦点导致复制粘贴弹窗不显示bug？
editor组件地址：https://developers.weixin.qq.com/miniprogram/dev/component/editor.html#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E 组件名称：editor 富文本编辑器 微信版本号：8.0.38 基础库版本号：2.30.2bug复现步骤：1.长按显示系统复制粘贴， 2.抬手时自动失去焦点，键盘收起，复制、全选粘贴弹窗自动隐藏了，不显示bug。
2023-07-14 - 微信支付平台证书更换指引
微信支付平台证书（以下简称平台证书）是微信支付和商户交互过程中用于认证微信支付平台身份的证书，商户会在微信支付APIv3接口的请求应答、回调、敏感信息加密场景用到平台证书。 平台证书的有效期为5年，如不及时更换，会导致商户调用微信支付接口失败，出现商户业务中断的情况。如果你有使用微信支付APIv3接口，请务必重视。 如果你有收到微信支付商户平台站内信、电话等渠道通知你更换平台证书，请参考以下指引处理。另外，有不少商户和开发者容易混淆平台证书和商户API证书，请注意它们并不相同，因此即使你已更换过商户API证书，也依然要更换平台证书。 平台证书简介与更换机制：https://pay.weixin.qq.com/docs/merchant/development/interface-rules/wechatpay-certificates.html 平台证书更换操作指引：https://pay.weixin.qq.com/docs/merchant/development/interface-rules/wechatpay-certificates-rotation.html
2023-09-19 - 个人对于参赛作品的简单总结
引言： 由微信小程序与腾讯云云开发产品团队联合举办的小程序云开发应用编程竞赛，目前已经进行到了初赛评审阶段，今天晚上24:00为期45天的小程序云开发挑战赛的初赛评审环节将会落下帷幕。 一：挑战赛初赛投票计算方式 初赛采用专家评审+投票方式进行，结果计算公式为：专家评分（80%）+ 投票（20%）= 初赛总分。 公投平台：微信开放社区指定板块（公投小程序已上线）； 投票方式：作品介绍文章进行点赞，根据点赞进行排名； 公投计算公式为：100 -[ (点赞数排名-1）/该赛道全部参与作品 * 100]； 投票方式：微信开放社区作品介绍文章上点赞，点击参与投票 初赛评选结果公布时间为9月30日，每个赛道将评选出10支队伍进入复赛。 二：参赛作品分类及概括 经过大赛组委会评委评审，一共有374支队伍的作品进入到初赛阶段。 将374支队伍的参赛作品按照作品类别进行分类，一共分为42类，分别对应下表： 注：由于表格宽度展示有限，故将右侧无法展示的队伍作品在下方表格中进行展示 记账与备忘 《大学生记账本》 《咸鱼记账》 《KrisQin记账本》 《MY备忘》 《家庭多用记事本》 《ygjtools》 《乐考吧》 《日程管家》 《YAccount记账助手》 《随变记账》 《待办事项工具》 《小婷和小天一起记账》 《初心日历》 《寝记账》 失物招领 《爱心收发室》 《帮寻小站》 《月见》 《长大寻物》 《悦寻失物招领》 《校园寻回》 《失全拾美》 健身类 《健身助手力量日记》 《活力健身房》 《RedPoint红点》 《健身小程序简介》 音乐影视 《云享Music》 《king电影》 《無音不泉》 《电影周周荐》 AI识别 《鹦鹉AI端侧识别》 《ai视觉测试》 《图文识别》 《AI物以类聚》 《AI写诗》 医疗健康 《人体生理指标》 《吃药小助》 《己目》 《体重MM》 《菲特日记》 《医医查》 《全国核酸检测资质医院查询》 《糖友饮食助手》 《每日戒糖》 《自助心理成长》 《预约挂号小程序》 《蓝医先生》 社团活动 《阮薇薇点名啦》 《山大clubs》 《素拓百分百》 《小小微距》 《娱乐投票小程序》 《活动栏》 《薇科技弹幕墙》 《头马报名》 《滑伴》 《科联答题》 《招新Plus》 《文艺比赛小行家》 《布告》 《BJUT活动助手》 学习工具 《错题小本本》 《为高考加分》 《分录英雄》 《口算助手》 《答案sou》 《教资易取》 《快刷题库answer question》 《拾一英语》 《魅力单词》 《魔方训练计时器》 《focusair》 《Y计算器》 《高级工匠心录》 《成长课程表》 教育培训 《来这儿学》 《微学堂(在线学习平台)》 《大学生资源共享平台》 《袋鼠培培》 《宝贝积分管理》 时间管理 《西瓜清单》 《语音倒计时器》 《西红柿时间管理》 《Do More打卡小程序》 《倒计时》 《tomato clock》 《step by step》 《BT清单》 《tusake Today》 《叮咚倒数日》 《FTodoList》 校园管理 《班级价值分》 《校园缺勤录》 《教务小助手》 《工程课表》 《云迎新》 《CAN课程表》 《简单的课表小程序》 《运动会管理系统》 《重邮课后小程序》 《高校信息共享平台》 《校园简单易》 《中北请假助手》 《知侬》 《ITD智慧校园》 校园介绍 《阿里嘻嘻》 《民大新生助手》 《北邮宣讲通》 《志愿校园》 《浙里淘志愿》 《云校知》 《校拍》 校园社区 《北院守夜人》 《校园墙》 《AIB校友会》 《校园小唤》 《xcu许院生活》 物流快递 《高校联盟-快递代取》 《速派递》 《物流小程序》 预约与邀请 《天翊图书馆预约》 《农大饭食》 《课室助手》 《会议邀请函》 《weSport》 《哪天约》 《定约》 《易约行》 《自闭间预定》 《简约约拍》 《实验室设备预约助手》 《QSCamera》 《预约班车》 《心暖农侬》 情侣婚礼 《趣婚礼》 《小酒馆》 《恋人小清单》 《云表白》 《情侣券》 《旅梦恋爱》 《快表白》 《恋爱空间》 购物商城 《微信云商城》 《吃否CHIFOU》 《云端商城小程序》 《购物》 《柠檬商城》 《武冈微商城》 《狗头的店，狗头管理》 《林林的妙妙屋》 《芳甸鲜花商城》 《优鲜配送联盟》 《汇尤e家》 《云开发带后台商城系统》 《预付费机票销售小程序》 《微购收单》 知识普及 《科普小程序》 《百词百科》 《BOSS百科》 《球员搜搜》 《火查查》 《急速查病》 《趣答星球》 《铁路生涯》 《趣酿》 《吃吃等你》 《男人买菜》 《诗华社》 《天天诗词》 《心跑道》 程序员 《sentry 小程序客户端》 《GitPark》 《码农SHOW营》 《OTP动态验证码》 《微源库》 《LE编程》 《一起来学计组叭》 《统一运维平台》 《见字如面》 图像处理 《莉龙美颜工具》 《图像复原微信小程序》 《Hi头像》 《我是主角》 《修补匠》 《祥云》 《抽屉表情》 《人脸识别虚拟仿真实验》 《照片时光机》 语言翻译 《CEnews》 《多源在线翻译》 《汉泰小词典》 《识译小程序》 社区周边 《社区速修》 《虚拟社区》 《简物业》 《租户在线》 《美今管家》 《顾家》 《雨中送伞》 《盲小鹿》 树洞与留言 《海豚时光瓶》 《树洞》 《苦海匿舟》 《深大小树洞》 《LMSH7TH》 简历与工作 《个人简历Plus》 《快速找工作》 《猿宝典》 《云线名片》 《InterviewHub》 《企业招聘》 《JF校园云招聘平台》 《普罗名特》 《校园招聘》 资讯与娱乐 《Killkinfe》 《开心小杜》 《旅小布短视频》 《心灵鸡汤大全》 《轨道nighty night》 《拯救不开心》 《大宗交易数据查询分析助手》 《糗事》 旅行 《我的旅行箱》 《云航助手》 《宝塔出行》 《PicGo图旅》 城市宣传与服务 《数字余杭》 《哏儿通》 《联系群众客户端》 《城市预警系统》 《郑州限行查询》 《佤山行》 商业工具 《软著助手》 《义思丽代办平台》 《契约farm》 办事工具 《省计数字监理》 《OA外勤管家》 《报工小助手》 《make的测评程序》 《实验室管理小程序》 《星河意见箱》 《梦凡云OA》 《微助helper》 《群消息公示》 《安全帽智慧监控小程序》 地图打卡 《高级打卡鸡》 《摄影地图游客版》 《同学在哪儿》 《每日步数打卡》 《生活智打卡》 《打卡日历》 《Mayday Online》 《嘿！我在这儿！》 《心里有树》 《地图留言》 《印纪》 天气与日历 《一眼天气》 《历史日历》 《7日天气》 《历史上的今天TIH》 《实用小工具》 游戏娱乐 《趣味游乐城》 《假如生命很短暂》 《磁力积木3D预览》 《MusicColorBlock-Detail》 《消灭癌细胞》 《红小包抽奖》 《大师请提笔》 《画画的北鼻》 《东方小游戏》 存储与分享 《酷传CoolTran》 《我存》 《次元乌托邦云网盘》 《闪加》 《悦分享》 《云享坊》 生活工具 《WiFi生成码》 《古老的API小工具》 《日常工具box》 《柠檬收纳》 《买它or not》 《我车呢》 《微信小程序工具箱》 《小记易》 《电魔方智能家居》 《缸中之鱼导购系统》 《格式转换工厂》 《小神助手》 《我家的WIFI》 二手交易与租赁 《大学校园闲置物品交易平台》 《宝宝约玩》 《精简之校园二手交易平台》 《学辰ing》 《二手市场》 《虾麦》 《校园二手购》 《零工哥》 《易珠》 《瓜大e拼车》 外卖点单收银 《来一杯a》 《美食屋》 《外卖系统》 《便利下单助手》 《云智慧收银》 《超市Boss助手(零售助手)》 《为特餐饮助手》 《Holly食刻》 《微信自助点餐小程序》 《餐饮流水记账》 《seven取餐小程序》 《校内外卖》 《秀食餐饮小程序》 《校云通》 日记博客论坛 《博客系统》 《天天读书》 《myVlog》 《红推》 《论坛小程序》 《一瞬相册》 《席博》 《一只书匣》 《社交平台》 《图迹圈》 《MallBook》 《青存纪》 《酒肆 家谱》 《比斯兔u》 垃圾分类 《垃圾问问》 《垃圾分类小程序》 《垃圾分类赢好礼》 宠物 《萌宠创造营》 《宠幸治疗》 《宠物营地》 《流浪猫速查手册》 《泊宠》 物联网 《lononiot》 《LoRa智能家居管理》 《温湿度实时监控及开关控制小demo的设计》 《HomeAssistant》 《流量计设备性能测试平台》 疫情防控 《行程助手Plus》 《每天都要上报体温》 《校园疫情管理小程序》 《CUMTB疫情管控期间学生外出申请系统》 《疫简签》 地摊 《地摊生活》 《逛逛地摊》 《迷你小摊》 承接上图表格中未完全展示的队伍的作品 记账与备忘 《智慧账本》 失物招领 健身类 音乐影视 AI识别 医疗健康 社团活动 《准到聚餐》 学习工具 《“倾听者”综合型语音评价系统》 《小青考证》 《IAI CDS》 教育培训 时间管理 校园管理 《We广油》 《江大电服》 校园介绍 校园社区 物流快递 预约与邀请 《书香长大》 《私约团课》 情侣婚礼 购物商城 知识普及 程序员 图像处理 语言翻译 社区周边 树洞与留言 简历与工作 资讯与娱乐 旅行 城市宣传与服务 商业工具 办事工具 地图打卡 天气与日历 游戏娱乐 存储与分享 生活工具 二手交易与租赁 外卖点单收银 日记博客论坛 《校园书友》 《CC交个朋友》 《点滴互助》 《广大搜搜》 《社交点评》 《迷你论坛》 《Simple Note 短记》 垃圾分类 宠物 物联网 疫情防控 地摊 以上类目整理皆来自于社区热心朋友"青寒"，感兴趣的朋友可以前往他发表的文章中进行详细查看，他写的关于参赛文章的笔记非常不错，值得推荐，此处附上文章链接地址：《个人项目学习笔记》 三：目前的作品评选情况 由于目前参赛作品较多，现官方已经将所有参赛作品和作品初赛的公投情况上传至"挑战赛全作品收录"小程序中： [图片] "挑战赛全作品收录"小程序是由杨泉开发并授权社区使用，在此非常感谢杨泉大佬，真是为了比赛操碎了心，同时也欢迎广大朋友积极参与到投票活动中，为你喜爱的队伍头上宝贵的一篇 因参赛作品较多，此处仅附上职业赛道和校园赛道两支赛道点赞量前十的情况（表中的数据为：截止到今天25号的下午17:10），仅供大家参考（表下方附上“同时刻参赛队伍获赞情况”的截图）： 职业赛道 第一名 第二名 第三名 第四名 第五名 第六名 第七名 第八名 第九名 第十名 队伍编号 303 146 232 90 243 22 252 33 106 306 参赛队伍 虾麦 我存 AI写诗 快速找工作 每日戒糖 吃否HUIBUR 小记易 GitPark Hi头像 抽屉表情 阅读量 4523 4191 2372 3771 2712 1545 1614 1398 1678 1071 点赞量 719 646 432 345 325 130 127 115 108 92 — — — — — — — — — — — 校园赛道 第一名 第二名 第三名 第四名 第五名 第六名 第七名 第八名 第九名 第十名 队伍编号 107 121 246 198 109 296 105 175 314 75 参赛队伍 QSCamera 天翔图书馆预约 Holly食刻 蓝医先生 施小布短视频 CUMTB疫情管控期间学生 深大小树洞 长大寻物 校园二手购 雨中送伞 阅读量 2611 3216 2574 1769 1938 7133 1509 1474 1823 206 点赞量 508 398 357 341 249 248 213 212 206 147 [图片] 图一:职业赛道 [图片] 图二:校园赛道 注：因未到初赛评选截止时间（截止到今天25号的晚上24:00），此时（表中的数据为：截止到今天25号的下午17:10）数据不代表最终结果，望大家在今天晚上尽快投出自己手里宝贵的一票，为你喜欢的队伍加油打气！！！ 四：复赛阶段（10月19日） 复赛采用线上路演答辩形式开展 。 参与复赛的队伍需要在10月17日之前提交指定路演材料；10月19日进行复赛的线上直播路演。 复赛评选结果在10月21日公布，每个赛道评选出5支队伍进入决赛，大赛会为每支队伍安排专家进行一对一指导，持续进行产品的深度打磨直到决赛前。 五、决赛阶段（10月底） 决赛采用线下路演方式开展。 决赛队伍将被邀请至腾讯深圳总部进行线下展演，角逐赛道Top3。 具体决赛时间以实际情况为准，将会在企业微信以及官方社区公布。 六、评分标准 校园赛道更偏重于创新和实践，以及对应用的边界把握和理解；职业赛道更偏重于场景应用、功能完备性、性能以及部署优势等。 具体评判标准如下： 解决方案定位【校园赛道30分、职业赛道25分】 需求明确：具有明确需要解决的现实问题，有明确的目标客户和使用场景； 概念创新：解决方案的产品形态或对传统产品形态的互联网化改造方面有所创新等； 贴近实际：为行业发展带来便利或具有商业价值。 解决方案技术【校园赛道15分、职业赛道25分】 合理性：结合产品特点运用合适的技术解决问题； 可靠性：充分考虑各种边界条件，具有良好的可靠性； 云开发：充分使用云开发优势特性来打造应用服务； 性能：产品性能符合实际需求，并且能够提供有说服力的测试数据。 解决方案执行【校园赛道15分、职业赛道20分】 易部署：可以很容易进行产品或服务的应用部署； 低成本：应用达成时各个成本较低，不存在无用的成本投入； 高风控：对部署之后的产品形态的各个风险有很好的把控处理。 方案产品体验【校园赛道30分、职业赛道20分】 使用体验：流程逻辑清晰，用户易懂易用，用户体验出色； 设计美观：UI设计规范统一、美观精致； 运营规范：具有系统化和合适的运营方案，不存在过度营销现象。 参赛过程表现【校园赛道10分、职业赛道10分】 资料齐全：大赛规定的作品提交材料详细完整； 资料质量：资料格式规范，论述条理清晰，语言通顺，重点突出。 在复赛和决赛时中，按照以下原则评分： 汇报展示：在定位说明、产品设计、技术方案、应用分析等方面介绍条理清楚，重点突出； 回答问题：现场回答问题正确，简明扼要。 七：奖项设置和规则详细说明 关于此次小程序云开发挑战赛的章程说明，请参考官方文档：“小程序云开发挑战赛——大赛规程”。
2020-09-25 - “网赚”小程序，你只了解1%
大部分微信开发者对“网赚”的初步认识仅仅局限于网上刷单赚佣金、或阅读文章赚佣金等业务模式。 除以上模式外，还包括自行或协助他人以拟人程序、利诱其他用户参与、转发、下载或委托刷单平台等方式等网赚行为。 今天小编通过实际案例给大家详细剖析相关网赚违规行为： 1. 小程序内纯粹做分享文章/内容后可立即得到奖励的内容（奖励包括但不限于现金、积分、礼品等） 违规示例：如下图违规小程序通过做阅读/转发文章即可获得金币奖励的模式贯穿业务，金币支持兑换现金并提现到账，属于网赚行为。[图片] 2. 小程序内含网赚刷单业务 违规示例：如下图违规小程序为APP提供刷单业务，完成刷单任务后，下载APP即可获取收益，属于网赚行为。[图片] 3. 小程序内存在通过体验APP/小程序/小游戏等产品赚取奖励的行为 违规示例：如下图违规小程序通过体验/转发小程序获取奖励，奖励包括但不限于现金、礼品、积分等，属于网赚行为。 [图片] 4. 小程序内存在通过体验自身业务获取奖励的行为 违规示例：如下图违规小程序通过体验自身业务15秒，即可获得5-10g水滴，水滴可兑换实物或现金等，属于网赚行为。 [图片] 5. 小程序昵称/简介/头像含明显网赚信息 违规示例：如下图违规小程序的头像/简介/昵称含明显网赚信息，诱导进入后获取用户信息，达到网赚推广目的，属于网赚行为。 [图片] 6. 小程序涉及以体验赚奖励、分享赚奖励等业务模式贯穿整个业务 违规示例：如下图违规小程序表面包装成打卡瓜分奖金的业务形态，实际必须通过跳转体验其他小程序、公众号后完成体验任务，才能完成每日打卡任务，属于网赚行为。 [图片] 7、小程序内无实质内容，存在通过批量观看激励视频的形式进行网赚的行为 违规示例①：如下图违规小程序内无实质内容，通过批量观看视频广告获得刮刮卡解锁机会。 [图片] 违规示例②：如下图违规小程序的每一份测试题结果，均需通过观看视频广告才能获得。[图片] 通过以上网赚违规类型及示例的介绍，希望开发者们能对小程序网赚违规有更进一步的了解。如若小程序存在网赚内容，平台将下发警告限期整改，视违规情节严重程度对小程序功能进行限制，或封号处理。
2020-03-18 - #小程序云开发挑战赛# - 高级打卡鸡
高级打卡鸡 作品简介 高级打卡鸡，顾名思义，专用于记录用户[代码]打卡[代码]，在各个时间点记录地理位置，打点位置会进行[代码]连线[代码]，可以看到自己在世界地图上遍布的足迹。 体验直通车 [图片] 应用场景 喜欢记录，对自己足迹关注，想了解自己在世界上遍布的足迹，非常方便各类[代码]旅游人士[代码]，看到自己慢慢的打满[代码]地图[代码]，非常有[代码]成就感[代码]，也非常有意义。 效果介绍 首页 首页，可以在地图看到自己所在的位置，并进行[代码]打卡[代码]，打卡后会生成分享图，便于进行朋友圈传播，也可以直接进行分享。 [图片] [图片] 记录页 [代码]历史记录[代码]页，可以看到自己以往所有的打点详情，并可以左滑删除对应记录 [图片] 世界圈 可以在[代码]世界圈[代码]看到各个用户的打卡情况，自身的打卡与其他用户做区分，同时为了保证用户的隐私，仅展示打卡时间和打卡地点。 右上角还新增了榜单功能，可以进入到榜单页看到各个用户的打卡排行榜，争取多打卡展示到top10吧。 [图片] [图片] 个人页 展示一些基本用户信息，放置了[代码]天气信息[代码]，可以方便的查看天气情况 点击头像有惊喜，现在流行的[代码]头像制作[代码]功能，已集成到打卡鸡中，头像使用了挺久，换个头像试试？ [图片] [图片] 功能原理 架构图 [图片] 源码分析 https://github.com/hzxulin/punch-chicken ps: 喜欢的关注我一波吧 团队简介 Charles Hsu，一位会点ps，会点后端，喜欢倒腾的前端开发工程师
2020-09-27 - 【必收】精心整理！小程序开发资源汇总（附带源码）
很多小伙伴想在春节放假期间学小程序，但是小程序学习的资源和教程可能不太好找。所以小助手精心整理了一期，全是干货！认真学，开启美妙的小程序开发之旅，做一个属于自己的微信小程序。有需要的小伙伴收藏好这期文章哦~ 本文收集整理了微信小程序开发资源，包括官方文档，云开发训练营文档，视频教程以及实战源码推荐，会不间断更新。。 欢迎添加云开发小助手CloudBase微信：Tcloudedu1 ，一起加入技术交流群~ 小程序云开发官方公众号 [图片] 目录 官方文档 云开发训练营 视频教程 小程序·云开发Demo 技术交流群 官方文档 小程序开发者工具 小程序设计指南 小程序开发教程 小程序框架 小程序组件 小程序API 小程序开发者工具 小程序云开发文档 云开发训练营 小程序开发入门 小程序与JavaScript 云开发快速入门 [图片] 视频教程 腾讯云云开发B站:https://space.bilibili.com/447496276 [图片] 小程序·云开发Demo 技术博客小程序 包括文章的发布及浏览、评论、点赞、浏览历史、分类、排行榜、分享、生成海报图等。 网盘小程序 兼具文件存储与分享功能的专属网盘小程序。 教务助手小程序 用完即走，查个成绩和课表，无需下载app或去翻看公众号内的历史内容。 功能日历小程序 既能查看日历又能备注事项，看云开发如何支持功能性日历小程序的快速开发。 客户业务需求收集小程序 用云开发快速制作客户业务需求收集小程序，教你用云开发实现小程序版“朋友圈”的发布与展示。 小程序朋友圈 把朋友圈装进小程序需要几步？借助云开发实现小程序朋友圈的发布与展示。 南苑导览 一款由学生独立开发的以地图为载体，提供中山大学南方学院具体地点的位置信息、导航、校园历史及文化介绍的小程序。 互动打卡小程序 用云开发轻松构建精美互动打卡小程序，交互式双人打卡，快乐加倍。 个性头像小程序 别再@官方啦！云开发教你轻松制作个性头像小程序，趣味挂件、个性icon。 二手书商城小程序 云开发轻松制作二手书交易商城小程序，让智慧延续，让温暖传递。 后台数据批量导出 小程序开发过程中如何将云数据库中的数据批量导出至excel。 发送邮件 初学者福音，手把手教你用小程序云开发实现邮件发送功能。 高考查分小程序 实现高考分数轻松查，小程序源码。 mini论坛 仅需两天轻松搭建mini论坛小程序。 运动圈小程序 打造运动圈小程序（以乒乓球为例），实现球友间高效互动。 心情日记小程序 我能想到最浪漫的事，可能就是“你的心事我全知晓”。 最美恋爱小程序 小程序前端用的是taro框架写的，后台用的云开发。教你用云开发为心爱的人做个小程。 校园约拍小程序 校园场景下，小程序·云开发大显身手，校园约拍小程序源码。 体重记录小程序 只想记录每日体重还得下个APP，不用那么麻烦！用云开发做个专属体重记录小程序，看看你每天瘦了多少。 口袋工具 口袋工具之历史上的今天。一个基于云开发的小程序，看看历史上的今天都发生了啥。 迷你微博 独立做个精简版微博出来让你刷刷刷吗？而且，它还兼具搜索、点赞、主页的功能 多媒体小程序 使用小程序·云开发构建多媒体小程序。 技术交流群 交流技术为主，开发学习工作中遇到问题可以在群内交流，欢迎有需要的朋友加群。 添加小助手微信（Tcloudedu1），回复“技术群”，即可加入云开发技术群。 最后 如果你有关于使用腾讯云云开发相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们~ 关注腾讯云云开发，后台回复【源码】，获取更多微信小程序云开发实战源码。 [图片] [图片] [图片] 关注「腾讯云云开发」，后台回复【 源码 】，获取更多微信小程序云开发实战源码。 持续更新中… [图片]
2020-01-16 - 【结对打卡】小程序发布后，关键字【打卡】搜索不到我的小程序?
我的小程序名称为【结队打卡】，但是我在搜索【打卡】关键字时，搜索不到。只有搜索【结队打卡】才能搜索到，导致小程序没有流量进入，求大佬帮忙解决一下，万分感谢！ [图片]
2022-09-14 - 个人项目学习笔记
前言：看完了比赛项目，感觉像是经历了一场头脑风暴，项目的起名、涉足行业、内容、UI、架构，以及业务设计等，感到都有很多学习的地方。打算做一个学习笔记贴。 一、分类 *项目有点多，我自己做了一下分类，以便查找。 记账与备忘： 《大学生记账本》 《咸鱼记账》 《KrisQin记账本》 《MY备忘》 《家庭多用记事本》 《ygjtools》 《乐考吧》 《日程管家》 《YAccount记账助手》 《随变记账》 《待办事项工具》 《小婷和小天一起记账》 《初心日历》 《寝记账》 《智慧账本》 失物招领： 《爱心收发室》 《帮寻小站》 《月见》 《长大寻物》 《悦寻失物招领》 《校园寻回》 《失全拾美》 健身类： 《健身助手力量日记》 《活力健身房》 《RedPoint红点》 《健身小程序简介》 音乐影视： 《云享Music》 《king电影》 《無音不泉》 《电影周周荐》 AI识别： 《鹦鹉AI端侧识别》 《ai视觉测试》 《图文识别》 《AI物以类聚》 《AI写诗》 医疗健康： 《人体生理指标》 《吃药小助》 《己目》 《体重MM》 《菲特日记》 《医医查》 《全国核酸检测资质医院查询》 《糖友饮食助手》 《每日戒糖》 《自助心理成长》 《预约挂号小程序》 《蓝医先生》 社团活动： 《阮薇薇点名啦》 《山大clubs》 《素拓百分百》 《小小微距》 《娱乐投票小程序》 《活动栏》 《薇科技弹幕墙》 《头马报名》 《滑伴》 《科联答题》 《招新Plus》 《文艺比赛小行家》 《布告》 《BJUT活动助手》 《准到聚餐》 学习工具： 《错题小本本》 《为高考加分》 《分录英雄》 《口算助手》 《答案sou》 《教资易取》 《快刷题库answer question》 《拾一英语》 《魅力单词》 《魔方训练计时器》 《focusair》 《Y计算器》 《高级工匠心录》 《成长课程表》 《“倾听者”综合型语音评价系统》 《小青考证》 《IAI CDS》 教育培训： 《来这儿学》 《微学堂(在线学习平台)》 《大学生资源共享平台》 《袋鼠培培》 《宝贝积分管理》 时间管理： 《西瓜清单》 《语音倒计时器》 《西红柿时间管理》 《Do More打卡小程序》 《倒计时》 《tomato clock》 《step by step》 《BT清单》 《tusake Today》 《叮咚倒数日》 《FTodoList》 校园管理： 《班级价值分》 《校园缺勤录》 《教务小助手》 《工程课表》 《云迎新》 《CAN课程表》 《简单的课表小程序》 《运动会管理系统》 《重邮课后小程序》 《高校信息共享平台》 《校园简单易》 《中北请假助手》 《知侬》 《ITD智慧校园》 《We广油》 《江大电服》 校园介绍： 《阿里嘻嘻》 《民大新生助手》 《北邮宣讲通》 《志愿校园》 《浙里淘志愿》 《云校知》 《校拍》 校园社区： 《北院守夜人》 《校园墙》 《AIB校友会》 《校园小唤》 《xcu许院生活》 物流快递： 《高校联盟-快递代取》 《速派递》 《物流小程序》 预约与邀请： 《天翊图书馆预约》 《农大饭食》 《课室助手》 《会议邀请函》 《weSport》 《哪天约》 《定约》 《易约行》 《自闭间预定》 《简约约拍》 《实验室设备预约助手》 《QSCamera》 《预约班车》 《心暖农侬》 《书香长大》 《私约团课》 情侣婚礼： 《趣婚礼》 《小酒馆》 《恋人小清单》 《云表白》 《情侣券》 《旅梦恋爱》 《快表白》 《恋爱空间》 购物商城： 《微信云商城》 《吃否CHIFOU》 《云端商城小程序》 《购物》 《柠檬商城》 《武冈微商城》 《狗头的店，狗头管理》 《林林的妙妙屋》 《芳甸鲜花商城》 《优鲜配送联盟》 《汇尤e家》 《云开发带后台商城系统》 《预付费机票销售小程序》 《微购收单》 知识普及： 《科普小程序》 《百词百科》 《BOSS百科》 《球员搜搜》 《火查查》 《急速查病》 《趣答星球》 《铁路生涯》 《趣酿》 《吃吃等你》 《男人买菜》 《诗华社》 《天天诗词》 《心跑道》 程序员： 《sentry 小程序客户端》 《GitPark》 《码农SHOW营》 《OTP动态验证码》 《微源库》 《LE编程》 《一起来学计组叭》 《统一运维平台》 《见字如面》 图像处理： 《莉龙美颜工具》 《图像复原微信小程序》 《Hi头像》 《我是主角》 《修补匠》 《祥云》 《抽屉表情》 《人脸识别虚拟仿真实验》 《照片时光机》 语言翻译： 《CEnews》 《多源在线翻译》 《汉泰小词典》 《识译小程序》 社区周边： 《社区速修》 《虚拟社区》 《简物业》 《租户在线》 《美今管家》 《顾家》 《雨中送伞》 《盲小鹿》 树洞与留言： 《海豚时光瓶》 《树洞》 《苦海匿舟》 《深大小树洞》 《LMSH7TH》 简历与工作： 《个人简历Plus》 《快速找工作》 《猿宝典》 《云线名片》 《InterviewHub》 《企业招聘》 《JF校园云招聘平台》 《普罗名特》 《校园招聘》 资讯与娱乐： 《Killkinfe》 《开心小杜》 《旅小布短视频》 《心灵鸡汤大全》 《轨道nighty night》 《拯救不开心》 《大宗交易数据查询分析助手》 《糗事》 旅行： 《我的旅行箱》 《云航助手》 《宝塔出行》 《PicGo图旅》 城市宣传与服务： 《数字余杭》 《哏儿通》 《联系群众客户端》 《城市预警系统》 《郑州限行查询》 《佤山行》 商业工具： 《软著助手》 《义思丽代办平台》 《契约farm》 办事工具： 《省计数字监理》 《OA外勤管家》 《报工小助手》 《make的测评程序》 《实验室管理小程序》 《星河意见箱》 《梦凡云OA》 《微助helper》 《群消息公示》 《安全帽智慧监控小程序》 地图打卡： 《高级打卡鸡》 《摄影地图游客版》 《同学在哪儿》 《每日步数打卡》 《生活智打卡》 《打卡日历》 《Mayday Online》 《嘿！我在这儿！》 《心里有树》 《地图留言》 《印纪》 天气与日历： 《一眼天气》 《历史日历》 《7日天气》 《历史上的今天TIH》 《实用小工具》 游戏娱乐： 《趣味游乐城》 《假如生命很短暂》 《磁力积木3D预览》 《MusicColorBlock-Detail》 《消灭癌细胞》 《红小包抽奖》 《大师请提笔》 《画画的北鼻》 《东方小游戏》 存储与分享： 《酷传CoolTran》 《我存》 《次元乌托邦云网盘》 《闪加》 《悦分享》 《云享坊》 生活工具： 《WiFi生成码》 《古老的API小工具》 《日常工具box》 《柠檬收纳》 《买它or not》 《我车呢》 《微信小程序工具箱》 《小记易》 《电魔方智能家居》 《缸中之鱼导购系统》 《格式转换工厂》 《小神助手》 《我家的WIFI》 二手交易与租赁： 《大学校园闲置物品交易平台》 《宝宝约玩》 《精简之校园二手交易平台》 《学辰ing》 《二手市场》 《虾麦》 《校园二手购》 《零工哥》 《易珠》 《瓜大e拼车》 外卖点单收银： 《来一杯a》 《美食屋》 《外卖系统》 《便利下单助手》 《云智慧收银》 《超市Boss助手(零售助手)》 《为特餐饮助手》 《Holly食刻》 《微信自助点餐小程序》 《餐饮流水记账》 《seven取餐小程序》 《校内外卖》 《秀食餐饮小程序》 《校云通》 日记博客论坛： 《博客系统》 《天天读书》 《myVlog》 《红推》 《论坛小程序》 《一瞬相册》 《席博》 《一只书匣》 《社交平台》 《图迹圈》 《MallBook》 《青存纪》 《酒肆 家谱》 《比斯兔u》 《校园书友》 《CC交个朋友》 《点滴互助》 《广大搜搜》 《社交点评》 《迷你论坛》 《Simple Note 短记》 垃圾分类： 《垃圾问问》 《垃圾分类小程序》 《垃圾分类赢好礼》 宠物： 《萌宠创造营》 《宠幸治疗》 《宠物营地》 《流浪猫速查手册》 《泊宠》 物联网： 《lononiot》 《LoRa智能家居管理》 《温湿度实时监控及开关控制小demo的设计》 《HomeAssistant》 《流量计设备性能测试平台》 疫情防控： 《行程助手Plus》 《每天都要上报体温》 《校园疫情管理小程序》 《CUMTB疫情管控期间学生外出申请系统》 《疫简签》 地摊： 《地摊生活》 《逛逛地摊》 《迷你小摊》 二、学习笔记 （一）名词解释 1，分录： 会计分录亦称“记账公式”，简称“分录”。它根据复式记账原理的要求，对每笔经济业务列出相对应的双方账户及其金额的一种记录。 2，文玩： 指的是文房四宝及其衍生出来的各种文房器玩。这些文具造型各异，雕琢精细，可用可赏，使之成为书房里、书案上陈设的工艺美术品。 3，sentry： Sentry是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题。 4，GitHub： 是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。 5，软著： 全称是计算机软件著作权，是指软件的开发者或者其他权利人依据有关著作权法律的规定，对于软件作品所享有的各项专有权利。 6，打卡： 网络流行词，原指上下班时刷卡记录考勤。现衍生指到了某个地方或拥有某个事物（一般会向他人展示）。网红、圣地打卡。 7，番茄工作法： 是简单易行的时间管理方法。使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后进行短暂休息一下（5分钟就行），然后再开始下一个番茄。每4个番茄时段多休息一会儿。 8，码农： 可以指在程序设计某个专业领域中的专业人士，或是从事软体撰写，程序开发、维护的专业人员。但一般Coder特指进行编写代码的编码员。 9，树洞： 来源于童话故事《皇帝长了驴耳朵》，意思是一个可以袒露心声的地方，是指可以将秘密告诉它而绝对不会担心会泄露出去的地方。 10，AI： 全程人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 11，OA： 办公自动化（Office Automation，简称OA）是将现代化办公和计算机技术结合起来的一种新型的办公方式。办公自动化没有统一的定义，凡是在传统的办公室中采用各种新技术、新机器、新设备从事办公业务，都属于办公自动化的领域。 12，素拓： “素质拓展训练”的简称。素质拓展起源于国外风行了几十年的户外体验式训练，通过设计独特的富有思想性、挑战性和趣味性的户外活动，培训人们积极进取的人生态度和团队合作精神，是一种现代人和现代组织全新的学习方法和训练方式。 13，磁力积木： 由若干个不同形状的积木单体组成。在各个单体的边沿嵌有磁铁或磁片，磁铁上履盖有一层搪瓷，利用磁力使各单体紧密连接在一起。 14，教资： 指教师资格证考试，是由教育部考试中心官方设定的教师资格考试。 15，Instagram： 又叫照片墙，是一款运行在移动端上的社交应用，以一种快速、美妙和有趣的方式将你随时抓拍下的图片彼此分享。 16，Redpoint： 攀岩术语，是指事前曾练习爬过该路线，以先锋攀登的方式、无坠落地完攀该路线。 17，头马： 是Toastmasters的中文简称，于1924年在美国加州成立。是一个非盈利性的、由会员自行管理的组织，目前已在全球一百多个国家成立了上万个俱乐部。 *上述名词介绍来自百度百科与知乎。 （二）出现的学校 河北科技大学（河北-石家庄） 电子科技大学（四川-成都） 重庆邮电大学（重庆） 哈尔滨理工大学（黑龙江-哈尔滨） 桂林航天工业学院理学院（广西-桂林） 河南理工大学（河南-焦作） 河北北方学院（河北-张家口） 北方民族大学（宁夏-银川） 山西大学（山西-太原） 西安交通大学（陕西-西安） 西安电子科技大学（陕西-西安） 华中科技大学（湖北-武汉） 深圳大学（广东-深圳） 浙江大学（浙江-杭州） 湖南大学（湖南-长沙） 武汉大学（湖北-武汉） 广东技术师范大学（广东-广州） 西北民族大学（甘肃-兰州） 北京邮电大学（北京） 中国民航大学（天津） 广东机电职业技术学院（广东-广州） 长江大学（湖北-荆州） 华南理工大学（广东-广州） 包头铁道职业技术学院（内蒙古-包头） 重庆工程职业技术学院（重庆） 江苏大学（江苏-镇江） 南京邮电大学（江苏-南京） 华南理工大学广州学院（广东-广州） 长安大学（陕西-西安） 泉州师范学院（福建-泉州） 桂林电子科技大学（广西-桂林） 广西医科大学（广西-南宁） 华南农业大学（广东-广州） 山西农业大学（山西-晋中、太原） 南京大学金陵学院（江苏-南京） 广东石油化工学院（广东-茂名） 兰州交通大学（甘肃-兰州） 东华理工大学（江西-南昌、抚州） 中山大学南方学院（广东-广州） 广州大学（广东-广州） 中国矿业大学（北京） 南京工业大学（江苏-南京） 中北大学（山西-太原） 华中农业大学（湖北-武汉） 东莞理工学院（广东-东莞） 广东工业大学（广东-广州） 上海电机学院（上海） 南宁职业技术学院（广西-南宁） 台州职业技术学院（浙江-台州） 福州大学（福建-福州） 厦门理工学院（福建-厦门） 美国纽约大学（美国） 英国曼彻斯特大学（英国） 昆明理工大学（云南-昆明） 天津城建大学（天津） 北京工业大学（北京） 广东建设职业技术学院（广东-广州） 湖北师范大学（湖北-黄石） 许昌学院（河南-许昌） 西北工业大学（陕西-西安） （三）个人认为的特别题材 动物保护-鹦鹉AI端侧识别 健康管理-吃药小助 学习工具-口算助手 商业工具-软著助手 图像处理-摄影地图游客版 AI换脸-我是主角 个性服务-雨中送伞 情侣生活-恋人小清单 心情宣泄-苦海匿舟 走失找回-月见 AR躲猫猫-萌宠创造 文艺共鸣-轨道nighty night 心里健康-心暖农侬 模拟红包-红小包抽奖 攀岩健身-RedPoint 职校沟通-铁路生涯 酿酒乐趣-趣酿 盲人助力-盲小鹿 历史日历-历史上的今天 消防检查-火查查 情侣福音-情侣券 家庭互助-顾家 宠物关注-流浪猫速查手册 停车助手-我车呢 诗歌创作-AI写诗 智能家居-LoRa智能家居管理 智能招领-悦寻失物招领 你画我猜-画画的北鼻 随手反馈-城市预警系统 仿真识别-人脸识别虚拟仿真实验 智慧校园-ITD智慧校园 活动协调-哪天约 家庭物联-HomeAssistant 地热监测-流量计设备性能测试平台 （四）官方公布的复赛名单 校园赛道： [图片] 职业赛道： [图片] （五）官方公布的决赛名单 校园赛道： [图片] 职业赛道： [图片] （六）最终决赛成绩 校园赛道： [图片] 职业赛道： [图片]
2020-11-14 - RecorderManager录制时录音丢失，stop时报错，右上角录音图标一直是灰的，无法正常结束
RecorderManger录制时有小概率（但近期偏多）出现卡死的情况，为了排查，我们在录制相关的每一个地方都加了日志，下面是根据日志还原的一次问题现场： [图片] 上面提到的另一个录音丢失的帖子：https://developers.weixin.qq.com/community/develop/doc/000c88692982c858a41fddc0c5b800 ，这个当时比较容易复现。 小概率事件，没法提供可复现的代码片段。如有需要，我们可以让出现问题的用户配合提供微信日志。 2023-8-18 21:12 补充： 下面是小程序的日志，用户点击结束录音时，提示录音已经结束了，说明录音是自己提前异常结束的，在此之前小程序也没有收到过onError或者onStop回调。从分析的已录制时长52秒少于录制时长96秒也说明录音事实上早就结束了。用户提供的截图显示右上角是一个灰色的话筒，也说明了录音状态是异常的。 2023-8-18 20:32:35 [info] recorder.onStart 2023-8-18 20:34:11 [info] recorderManager.stop() called. 2023-8-18 20:34:11 [error] recorder.onError: {"errMsg":"operateRecorder:fail:audio is stop, don't stop record again"} 2023-8-18 20:34:11 [info] frameCount: 2025, estimated duration: 52.903124999999996s [图片]
2023-08-18 - 如何用小程序实现类原生APP下一条无限刷体验
1.背景 如今信息流业务是各大互联网公司争先抢占的一个大面包，为了提高用户的后续消费，产品想出了各种各样的方法，例如在微视中，用户可以无限上拉出下一条视频；在知乎中，也可以无限上拉出下一条回答。这样的操作方式用户体验更好，后续消费也更多。最近几年的时间，微信小程序已经从一颗小小的萌芽成长为参天大树，形成了较大规模的生态，小程序也拥有了一个很大的流量入口。 2.demo体验 那如何才能在小程序中实现类原生APP效果的下一条无限刷体验？ 这篇文章详细记录了下一条无限刷效果的实现原理，以及细节和体验优化，并将相关代码抽象成一个微信小程序代码片段，有需要的同学可查看demo源码。 线上效果请用微信扫码体验： [图片] 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a 3.实现原理 出于性能和兼容性考虑，我们尽量采用小程序官方提供的原生组件来实现下一条无限刷效果。我们发现，可以将无限上拉下一篇的文章看作一个竖向滚动的轮播图，又由于每一篇文章的内容长度高于一屏幕高度，所以需要实现文章内部可滚动，以及文章之间可以上拉和下拉切换的功能。 在多次尝试后，我们最终采用了在[代码]<swiper>[代码]组件内部嵌套一个[代码]<scroll-view>[代码]组件的方式实现，利用[代码]<swiper>[代码]组件来实现文章之间上拉和下拉切换的功能，利用[代码]<scroll-view>[代码]来实现一篇文章内部可上下滚动的功能。 所以页面的dom结构如下所示： [代码]<swiper class='scroll-swiper' circular="{{false}}" vertical="{{true}}" bindchange="bindChange" skip-hidden-item-layout="{{true}}" duration="{{500}}" easing-function="easeInCubic" > <block wx:for="{{articleData}}"> <swiper-item> <scroll-view scroll-top="0" scroll-with-animation="{{false}}" scroll-y > content </scroll-view> </swiper-item> </block> </swiper> [代码] 4.性能优化 我们知道view部分是运行在webview上的，所以前端领域的大多数优化方式都有用。例如减少代码包体积，使用分包，渲染性能优化等。下面主要讲一下渲染性能优化。 4.1 dom优化 由于页面需要无限上拉刷新，所以要在[代码]<swiper>[代码]组件中不断的增加[代码]<swiper-item>[代码]，这样必然会导致页面的dom节点成倍数的增加，最后非常卡顿。 为了优化页面的dom节点，我们利用[代码]<swiper>[代码]的[代码]current[代码]和[代码]<swiper-item>[代码]的[代码]index[代码]来做优化，控制是否渲染dom节点。首先，仅当[代码]index <= current + 1[代码]时渲染[代码]<swiper-item>[代码]，也就是页面中最多预先加载出下一条，而不是将接口返回的所有后续数据都渲染出来；其次，对于用户已经消费过的之前的[代码]<swiper-item>[代码]，不能直接销毁dom节点，否则会导致[代码]<swiper>[代码]的[代码]current[代码]值出现错乱，但是我们可以控制是否渲染[代码]<swiper-item>[代码]内部的子节点，我们设置了仅当[代码]current <= index + 1 && index -1 <= current[代码]时才会渲染[代码]<swiper-item>[代码]中的内容，也就是仅渲染当先文章，及上一篇和下一篇的文章内容，其他文章的dom节点都被销毁了。 这样，无论用户上拉刷新了多少次，页面中最多只会渲染3篇文章的内容，避免了因为上拉次数太多导致的页面卡顿。 4.2 分页时setData的优化 setData工作原理 [图片] 小程序的视图层目前使用[代码]WebView[代码]作为渲染载体，而逻辑层是由独立的 [代码]JavascriptCore[代码] 作为运行环境。在架构上，[代码]WebView[代码] 和 [代码]JavascriptCore[代码] 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 [代码]evaluateJavascript[代码] 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 [代码]JS[代码] 脚本，再通过执行 [代码]JS[代码] 脚本的形式传递到两边独立环境。 而 [代码]evaluateJavascript[代码] 的执行会受很多方面的影响，数据到达视图层并不是实时的。 每次 [代码]setData[代码] 的调用都是一次进程间通信过程，通信开销与 setData 的数据量正相关。 [代码]setData[代码] 会引发视图层页面内容的更新，这一耗时操作一定时间中会阻塞用户交互。 [代码]setData[代码] 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。 避免不当使用setData [代码]data[代码] 应仅包括与页面渲染相关的数据，其他数据可绑定在this上。使用 [代码]data[代码] 在方法间共享数据，会增加 setData 传输的数据量，。 使用 [代码]setData[代码] 传输大量数据，通讯耗时与数据正相关，页面更新延迟可能造成页面更新开销增加。仅传输页面中发生变化的数据，使用 [代码]setData[代码] 的特殊 [代码]key[代码] 实现局部更新。 避免不必要的 [代码]setData[代码]，避免短时间内频繁调用 [代码]setData[代码]，对连续的setData调用进行合并。不然会导致操作卡顿，交互延迟，阻塞通信，页面渲染延迟。 避免在后台页面进行 [代码]setData[代码]，这样会抢占前台页面的渲染资源。可将页面切入后台后的[代码]setData[代码]调用延迟到页面重新展示时执行。 优化示例 无限上拉刷新的数据会采用分页接口的形式，分多次请求回来。在使用分页接口拉取到下一刷的数据后，我们需要调用[代码]setData[代码]将数据写进[代码]data[代码]的[代码]articleData[代码]中，这个[代码]articleData[代码]是一个数组，里面存放着所有的文章数据，数据量十分庞大，如果直接[代码]setData[代码]会增加通讯耗时和页面更新开销，导致操作卡顿，交互延迟。 为了避免这个问题，我们将[代码]articleData[代码]改进为一个二维数组，每一次[代码]setData[代码]通过分页的 [代码]cachedCount[代码]标识来实现局部更新，具体代码如下： [代码]this.setData({ [`articleData[${cachedCount}]`]: [...data], cachedCount: cachedCount + 1, }) [代码] [代码]articleData[代码]的结构如下： [图片] 4.3 体验优化 解决了操作卡顿，交互延迟等问题，我们还需要对动画和交互的体验进行优化，以达到类原生APP效果的体验。 在文章间上拉切换时，我们使用了[代码]<swiper>[代码]组件自带的动画效果，并通过设置[代码]duration[代码]和[代码]easing-function[代码]来优化滚动细节和动画。 当用户阅读文章到底部时，会提示下一篇文章的标题等信息，而在页面上拉时，由于下一篇文章的内容已经加载出来了，这样在滑动过程中会出现两个重复的标题。为了避免这种情况出现，我们通过一个占满屏幕宽高的空白[代码]<view>[代码]来将下一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]hidden="{{index !== current && index !== current + 1}}"[代码]来隐藏这个空白[代码]<view>[代码]，并对这个空白[代码]<view>[代码]的高度变化增加动画，来实现下一篇文章从屏幕底部滚动到屏幕顶部的效果： [代码].fake-scroll { height: 100%; width: 100%; transition: height 0.3s cubic-bezier(0.167,0.167,0.4,1); } [代码] [图片] 而当用户想要上拉查看之前阅读过的文章时，我们需要给用户一个“下滑查看上一条”提示，所以也可以采用同上的方式，通过一个占满屏幕宽高的提示语[代码]<view>[代码]来将上一篇文章的内容撑出屏幕，并在滚动结束时，通过[代码]wx:if="{{index + 1 === current}}"[代码]来隐藏这个提示语[代码]<view>[代码]，并对这个提示语[代码]<view>[代码]的透明度变化增加动画，来实现下拉时提示“下滑查看上一条”的效果： [代码].fake-previous { height: 100%; width: 100%; opacity: 0; transition: opacity 1s ease-in; } .fake-previous.show-fake-previous { opacity: 1; } [代码] 至此，这个类原生APP效果的下一条无限刷体验的需求的所有要点和细节都已实现。 记录在此，欢迎交流和讨论。 小程序demo体验请点击：https://developers.weixin.qq.com/s/vIfPUomP7f9a
2019-06-25 - Skyline｜长列表也可以丝滑～
[图片] [图片] 对于长列表出现的白屏、卡顿、界面跳动等问题，小程序提供了新 scroll-view 来解决这一系列问题。我们先来看看效果～ 快速滚动效果对比我们通过一组长列表来展示新旧 scroll-view 在快速滚动下的效果对比。 当长列表快速滚动时，旧 scroll-view 容易出现白屏的情况，新 scroll-view 则不会出现白屏。 左：旧 scroll-view、右：新 scroll-view [视频] 在安卓机器快速滚动过程中，旧 scroll-view 反应卡顿，容易出现手指离开操作时，滚动动画还在进行。 而新 scroll-view 则可以保持界面滚动效果跟随手指，停止滚动则缓慢结束动画效果。 左：旧 scroll-view、右：新 scroll-view ，测试机型：Xiaomi MIX 3 [视频] 反向滚动效果对比在对话等场景下，反向滚动是常见的功能，旧 scroll-view 并没有提供反向滚动的能力，我们来看看旧 scroll-view 下是怎么完成反向滚动的～ 在对话数据在加载的时候，对话列表需要在更新完列表数据之后，再使用 scroll-into-view 或者 scroll-top 来保持当前滚动位置，因为设置滚动位置会有延迟，所以容易出现 界面跳动 的情况。 // .js // scroll-view 滚动到顶部时触发 bindscrolltoupper() { // 先更新列表数据 this.setData({ recycleList: getnewList() }, () => { // 更新完数据后再设置滚动位置 this.setData({ scrollintoview: scrollintoview }) }) } 为了解决界面跳动的问题，社区上也有通过翻转的方法来解决，将 scroll-view 与 scroll-view 的子元素进行翻转。 // .wxss .reserve { transform: rotateX(180deg); } // .wxml 然而进行翻转之后，会遇到手指滚动方向与列表滚动方向相反、scroll-into-view 属性无效等问题。 为了帮开发者们解决反向滚动类列表的一系列问题，新 scroll-view 直接提供了 reverse 属性支持反向滚动的能力，滚动效果更加顺滑。 左：旧 scroll-view、右：新 scroll-view（图片加载期间，GIF 渲染较慢） [视频] 怎么接入新 scroll-view ？新的 scroll-view 使用起来很简单，主要有以下两个步骤： 修改小程序配置scroll-view 增加 type="list"// app.json // "renderer": "skyline" 开启之后所有页面会变成自定义导航，可参考 https://developers.weixin.qq.com/s/Y5Y8rrm37qEY 实现自定义导航 // 也可在 page.json 中配置 "renderer": "skyline" 逐个页面开启 { ... "lazyCodeLoading": "requiredComponents", "renderer": "skyline" } // page.json { ... "disableScroll": true, "navigationStyle": "custom" } // page.wxml ... // 反向滚动 新的 scroll-view 从安卓 8.0.28 / iOS 8.0.30 开始支持，如需兼容低版本需要进行兼容处理。 wx.getSkylineInfo({ success(res) { if (res.isSupported) { // 使用新版 scroll-view } else { // 使用旧版 scroll-view } } }) 如需体验长列表效果，可在微信开发者工具导入该代码片段即可体验：https://developers.weixin.qq.com/s/Y5Y8rrm37qEY 更多接入详情请参考文档 怎么做到的？大家肯定好奇为什么新 scroll-view 可以解决这个头疼的问题呢？ 我们来对比一下新旧 scroll-view 有什么区别就可以知道答案啦～ 旧 scroll-view 逻辑层与渲染层的通信需要通过 JSBridge 进行转换，需要一定的时间开销渲染采用异步分块光栅化，当渲染赶不上滚动的速度，来不及渲染则会出现白屏渲染大量节点内存占用高，需要开发者自行优化只渲染在屏节点，开发成本高新 scroll-view 逻辑层与渲染层的通信无需通过 JSBridge 进行转换，减少了大量通信时间开销渲染采用同步光栅化，滚动与渲染在同一线程，不会出现白屏针对长列表进行优化，只渲染在屏节点，内存占用低，减少了一些渲染耗时，且开发接入成本低[图片] 除此之外，新 scroll-view 后续将提供 type="custom" 支持 sticky 吸顶效果、网格布局、瀑布流布局等能力便于开发者接入使用～
2023-08-03 - 一种新颖的解决IOS虚拟支付的方式
一种新颖的解决IOS虚拟支付的方式 ~ 今天群里有朋友问起这么一件事， [图片] 这里有个很重要的信息，那就是苹果手机虚拟支付不允许，那么安卓手机完成支付，然后将这个付费的服务赠送给苹果手机是否可行 然后我顺着这个思路想到了两个小程序 1）腾讯手机充值 2）乘车码 这里面都有付费赠送的场景 ~ [图片] ~ ~ [图片]~ ~ [图片] [图片] ~ [图片] [图片] ~ [图片] ~ 一种新颖的解决IOS虚拟支付的方式 ~ 目前从合规角度这种方式肯定是通过的，但是不能在ios端做任何引导，只能在安卓端展示这个赠送功能，可以在苹果端写一个类似锦囊的按钮略作提示
2022-01-06 - 小程序功能页面内容接入已开启，但无任何数据收录，请问下是什么问题导致？需要怎么操作？
你好，请问下，小程序内页面内容接入，已经创建有很长一段时间了，页面内容接入从一开始创建后就开启，到现在一条内容都没收录进来，这个需要怎么进行操作才能有内容收录呢？ 又或者是不是有考核UV达到多少级别，才能使用该功能？烦请官方帮忙解释下，处理下这个问题，谢谢了！[图片][图片][图片]
2023-02-07 - 搜一搜让我们进行页面内容接入-页面收录的对接，但这个该功已经下线，请问我们小程后续应该如何接入搜索？
背景 我们小程序接入了微信搜一搜，审核后提示“同类内容目前较满足，小程序内容质量暂不具备接口接入优势 ，建议可先通过页面内容接入-页面收录的方式进行内容合作” 接下来我们进行页面内容接入-页面收录的对接，有两种形式；1、爬虫自动抓取，这个功能我们一直是开启的，但从去年10月开始微信关闭了此功能；2、接口对接，接口文档的页面无法进入（404） [图片] 问题 请问：接下来我们的小程序应该如何对接微信的搜索功能呢？
2022-06-09 - 一眼告诉你什么是订阅消息了，看完就懂订阅消息。
消息通知有两种： 一、A的动作后，发消息给A自己，这种容易解决，不多说明； 二、A动作后，发消息给B（比如管理员、店家、楼主），如何保证B收到消息？这种是本方案要解决的问题。 一张图片一眼告诉你什么是订阅消息，产品经理的设计UI居然让人一眼就知道订阅消息是什么玩意。 [图片] 用户 B （管理员、商家、组长、楼主）在知道订阅数不足后，打开小程序来续订阅数，否则没法收到订阅消息。 [图片] 补充一： 关于勾选按钮，请注意话述是：“总是保持以上选择，不再询问”，而不是：“总是同意接收订阅消息”，不要幻想就成了永久性订阅消息； 相当于你打电话订外卖，对店家说“老样子”，店家只会马上送一次外卖，而不是会以后每天自动给你送外卖了。 勾选和不勾选的区别是什么呢？ 区别仅仅是：不勾选时，必须点击订阅10次，弹窗10次；勾选后，仍然必须点击订阅10次，但是不弹窗。无论如何“订阅”这个点击n次的动作少不了。 补充二： 一旦勾选后，就不可逆了，没有任何办法恢复或取消勾选了，除非你小程序MP后台换一次消息模板号(删除模板，重新添加一次)。 补充三： 关于如何保存订阅数。 保存在数据库中，笔者用的是云开发，数据库表user结构如下： { _id:'openid1', nickName:'老张', msg:{ "tempId1":5, "tempId2":7, } } 补充四： 关于如何获取订阅数。两种方式： 一、wx.requestSubscribeMessage的回调success里获取； 二、消息推送机制获取；https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html
2022-09-21 - Collection.watch中监听失效/onChange无返回数据的可能性原因
Collection.watch中监听失效/onChange无返回数据的可能性原因 const watcher = db.collection('todos') // 按 progress 降序 .orderBy('progress', 'desc') // 取按 orderBy 排序之后的前 10 个 .limit(10) // 筛选语句 .where({ // 填入当前用户 openid，或如果使用了安全规则，则 {openid} 即代表当前用户 openid //_openid: '{openid}' }) // 发起监听 .watch({ onChange: function (snapshot) { console.log('snapshot', snapshot) }, onError: function (err) { console.error('the watch closed because of error', err) } }) 尝试了很久发现没返回数据，核查后原因如下： 数据权限问题，需要调整成“所有用户可读，仅创建者可读写”，否则onChange方法将会无任何返回结果，这一点官方文档目前（2022/09/03）没有说明，略坑！； [图片]
2022-09-03 - 「基础库2.29.2」RecorderManager在苹果手机上暂停几次后，就录不进声音了？
代码片段中自动每隔几秒pause并resume，下面截图记录了相关的事件回调（苹果手机），一开始还能看到onFrameRecorded回调，但到后面就没了，不再有新的录音数据了： [图片]
2023-01-10 - 小程序云开发获取并保存用户IP属地
现在各大平台发表文章、评论等内容都显示出了用户的IP属地，现在来探讨一下小程序使用云开发怎么获取并保存用户IP属地。 1、获取到用户ip，这里演示使用云函数获取。 2、使用腾讯位置服务的WebService API的IP定位接口，获取归属地。 响应示例： { "status": 0, "message": "Success", "result": { "ip": "111.206.145.41", "location": { "lat": 39.90469, "lng": 116.40717 }, "ad_info": { "nation": "中国", "province": "北京市", "city": "北京市", "district": "", "adcode": 110000 } } } 演示代码： // 云函数入口文件 const cloud = require('wx-server-sdk') const axios = require('axios') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); var ip = wxContext.CLIENTIP ? wxContext.CLIENTIP : wxContext.CLIENTIPV6; if (ip) { const res = await axios.get("https://apis.map.qq.com/ws/location/v1/ip", { params: { ip: ip, key: "xxx" // 使用腾讯WebService API：https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp } }); return res; } return null; }
2022-05-11 - 小程序app.onLaunch与page.onLoad异步问题的最佳实践
场景： 在小程序中大家应该都有这样的场景，在onLaunch里用wx.login静默登录拿到code，再用code去发送请求获取token、用户信息等，整个过程都是异步的，然后我们在业务页面里onLoad去用的时候异步请求还没回来，导致没拿到想要的数据，以往要么监听是否拿到，要么自己封装一套回调，总之都挺麻烦，每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案，公司内部已接入两年很稳定： 1.可完美解决异步问题 2.不污染原生生命周期，与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现，接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景，以下有部分是伪代码，请勿直接粘贴使用，具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = { // 是否已拿到token token: '', // 用户信息 userInfo: { userId: '', head: '' } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({ 'Login':{ name:'Login', watchKey: 'token', onUpdate(token){ //有token则触发此钩子 return !!token; } }, 'User':{ name:'User', watchKey: 'userInfo', onUpdate(user){ //获取到userinfo里的userId则触发此钩子 return !!user.userId; } } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }） //关键点来了 //Page.js，业务页面使用 Page({ onLoadLogin() { //拿到token啦，可以使用token发起请求了 const token = getApp().globalData.token }, onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo }, onReadyUser() { //页面初次渲染完毕 && 拿到用户信息，可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) }, onShowUser() { //页面每次显示 && 拿到用户信息，我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github：https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快，记得star哦
2023-04-23 - 让小程序页面和自定义组件支持 computed 和 watch 数据监听器
习惯于 VUE 或其他一些框架的同学们可能会经常使用它们的 [代码]computed[代码] 和 [代码]watch[代码] 。 小程序框架本身并没有提供这个功能，但我们基于现有的特性，做了一个 npm 模块来提供 [代码]computed[代码] 和 [代码]watch[代码] 功能。 先来个 GitHub 链接：https://github.com/wechat-miniprogram/computed 如何使用？ 安装 npm 模块 [代码]npm install --save miniprogram-computed [代码] 示例代码 [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { return data.a + data.b }, }, }) [代码] [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, sum: 2, }, watch: { 'a, b': function(a, b) { this.setData({ sum: a + b }) }, }, }) [代码] 怎么在页面中使用？ 其实上面的示例不仅在自定义组件中可以使用，在页面中也是可以的——因为小程序的页面也可用 [代码]Component[代码] 构造器来创建！ 如果你已经有一个这样的页面： [代码]Page({ data: { a: 1, b: 1, }, onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }) [代码] 可以先把它改成： [代码]Component({ data: { a: 1, b: 1, }, methods: { onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }, }) [代码] 然后就可以用了： [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { return data.a + data.b }, }, methods: { onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }, }) [代码] 应该使用 [代码]computed[代码] 还是 [代码]watch[代码] ？ 看起来 [代码]computed[代码] 和 [代码]watch[代码] 具有类似的功能，应该使用哪个呢？ 一个简单的原则： [代码]computed[代码] 只有 [代码]data[代码] 可以访问，不能访问组件的 [代码]methods[代码] （但可以访问组件外的通用函数）。如果满足这个需要，使用 [代码]computed[代码] ，否则使用 [代码]watch[代码] 。 想知道原理？ [代码]computed[代码] 和 [代码]watch[代码] 主要基于两个自定义组件特性： 数据监听器 和 自定义组件扩展 。其中，数据监听器 [代码]observers[代码] 可以用来监听数据被 [代码]setData[代码] 操作。 对于 [代码]computed[代码] ，每次执行 [代码]computed[代码] 函数时，记录下有哪些 data 中的字段被依赖。如果下一次 [代码]setData[代码] 后这些字段被改变了，就重新执行这个 [代码]computed[代码] 函数。 对于 [代码]watch[代码] ，它和 [代码]observers[代码] 的区别不大。区别在于，如果一个 data 中的字段被设置但未被改变，普通的 [代码]observers[代码] 会触发，但 [代码]watch[代码] 不会。 如果遇到问题或者有好的建议，可以在 GitHub 提 issue 。
2019-07-24 - 重渲染与自定义组件优化（下）
[视频] 接下来我们看实践二实现wxs版本的stopwatch组件。 另一个组件stopwatch_wxs这个组件版本与stopwatch组件它实现了相同的方法，调用方式也是一样的，不同点在于我们wxs组件。这个版本的组件，它在wxml这个页面里边引入了一个wxs脚本。关于时间计算的逻辑，包括格式化等等这些全部从逻辑层移到了wxs脚本里面去，从这个组件的代码来看wxs组件的JS代码与我们原来的stopwatch组件，它的代码是一样的。 主要也是实现了三个方法start、stop和switch，并且它的wxss的样式代码相比原组件也没有一个变化。在组件的wxml代码里面引入了一个wxs脚本，JS这个代码层对wxs脚本的一个控制，它是通过一个叫做change:mode这样的一个属性去完成的。index.wxs这个脚本的这个内容我们可以看一下，稍后会看到，这个文件只能使用ES5的语法，所有ES6的语法都不能使用，并且这和我们在这个项目详情面板里边是否开启将JS变成ES5没有关系，你开不开启这个设置你都不可以使用，这样一个ES6语法。 wxs脚本它没有定时器，我们可以使用组件对象的requestAnimationFrame方法代替于原来的定时器方法，在这个组件对象上我们当然也可以使用setTimeout方法创建定制器，setInterval也可以，但显然在这个地方与帧频天然合拍的requestAnimationFrame方法，它更适合干这个工作，它能使我们这个数字的切换刷新的动画看起来更加的一个流畅。在测试的时候我们仍然可以打开Performance面板，使用wxs脚本实现了单次视图更新，它的消耗大概是在20毫秒左右，比原来的执行性能要稍好一些。 下面我们开始代码实践。 首先第一步我们需要去创建另外一个版本也就是wxs版本的这样的一个组件。这个组件在我们最终源码里面都有了，都已经实现了。我们看一下它的一个效果。首先我们看wxml这个标签代码，标签代码相比原来我们增加了第一个，增加了这个模块wxs这个模块的一个引入，然后在下面这个地方加了一个change:mode等于index.modeObserver。这个是为了实现一个属性监听，就是将我们对mode属性的一个变化，将这个事件然后传递给这样的一个方法 传递给它去驱动这个方法的一个执行。当我们加了这个属性以后，后面mode等于什么一个值我们必须也是要添加的，这个是必不可少的。 再看一下JS代码里面，首先这个地方，我们可以看到把它放在了data里面，因为要通过setData去改变它去触发我们视图上面属性它的一个改变，所以我们把这个地方把它放到data数据对象里面。然后start方法很简单，就是一个setData的调用，stop也是。switch方法没有变化，整个现在我们自定义组件对于wxs这个版本它的JS逻辑层代码已经达到了最简化，它没有一点多余的一个代码了。 那么这个组件的功能在哪里实现的，我们看一下。最重要的一个角色就是index.wxs脚本，这个脚本我们刚才提到了是在这个地方引入的对吧，引入以后然后我们看它里面干了什么事情。它有一个导出的方法在最下面，模块导出然后modeobserver这个方法干了什么事情，我们看一下。在这个地方它接收了一些参数，这些参数都是视图在调用它的时候负责传递给它的，这是它的新值就是mode的新值，因为这个监听的是mode属性，然后这是它的旧值，ownerInstance，这个是它本身组件它所属的实例，它属于哪个实例对象，这个它本身的一个实例。在这个里面我们需要去做判断，然后去看新值，判断如果它等于start，我们就调用这个start，如果它等于stop，我们就调用stop对吧。 start与stop怎么实现的？我们再接着往上面看，start里面这个地方有一个配置，这个配置其实传的其实就是ownerInstance。如果说我们组件在这个页面里面的话，它本身它的所有者其实就是一个page，它不是page也没有关系，因为我们用的它里面的这个方法是callMethod，调用它的方法还有requestAnimation调用它，只要这个方法可以调用就可以了，在这个里面我们再看一下干了一个什么事情。这个地方仍然会有一个convertTimeStampToString这样的一个时间格式化的方法，这个方法全是用ES5的这样一个语法写的。这个逻辑我们可以看到与我们原来的组件的逻辑，我们可以看一下是一样的，我们只是把它换了一个地方，然后拷贝在这个地方，同时将我们的let关键字改成var。为啥改成var？因为前面我们提到了，在wxs脚本里面你不可以使用ES6的语法，只能使用ES5对吧，然后这个地方就是为了格式化。 格式化以后在这个地方注意，我们有了一个小小的处理，为啥要处理？因为本身在wxs脚本里边去调callMethod的方法也是间接调setData，我们这个代码调用本身也是要通过Native层进行中转的。如果你这个方法调得太频繁的话显然它也会影响性能，所以我们这个地方做了一个限流，判断一下消失的时间是不是大于100毫秒，如果大于100毫秒然后允许它调用，如果没有那就先跳过去本次更新 让更新不太频繁。100毫秒间隔是可以的，因为我们人类对变化的一个感知时间大概是200毫秒，你可以感知它的一个变化100毫秒的话，基本上你对人类来讲是无感知的。 这个地方会有一个mode等于start的判断，如果是它还等于start这个状态，组件这个状态的话我们继续用requestAnimationFrame去启动本身上面的调用它本身是一个递归调用。只有当mode等于stop的时候，它才会停止调用 不再会调用了，这是它的一个调用方法。这个地方我们再多说一下，这地方有一个是什么 requestAnimationFrame这个方法本身是由我们渲染的时候，视图它本身帧频去驱动的，就是视图层渲染一次，它触发一次这个事件，然后我们通过这个方法去绑定的这些回调执行，它也会再跟着再执行一次，就这样一种方式。 它可以最大程度的跟我们这个视图的渲染进行合拍，如果是你不用这种方式，你用定时器的话，定时器写在逻辑层里面很可能跟我们这个视图渲染它不是合拍的，视图渲染了比如说你每秒渲染30帧，然后JS定时器你要求它每秒更新60帧，它跟不上。它跟不上的时候视图就会卡顿。所以这个地方我们用requestAnimationFrame这个方法，这是我们优先要使用的一个方法。前面我们提到了在这个里面，我们不可以使用setInterval setTimeout，本身在wxs脚本里面是不能使用的。但是我们在我们传进来的对象上比如说像ownerInstance，我们在这个上面它其实是有定时器方法的，你明白吗？它是有定时器方法的，就是我们可以在这个上面去调用定时器方法，有这个选项可以选择。但是就如我们刚才所说它性能其实不如requestAnimationFrame，所以我们在这个地方还是选择这个方法。 下面我们再看stop，其实它什么事都没干，为什么？正常情况下我们在这个地方要干一个清扫的工作，就是我们要调cancelAnimationFrame，但这个cancelAnimationFrame这个方法在这个对象上面它是不存在的。你把这个配置换成这个也是一样的，本身这个方法在这个上面目前是不存在的，以后可能会有，如果以后有的话，这个地方我们要做一个清扫工作，但目前它没有，所以这个地方这个方法什么也没有做这样的一种方式。 还有一个地方我们需要说明一下，就是这个mode，这个mode我们可以看一下我们是在哪里定义的，是本身在这个模块代码里面对吧。在这个地方进行定义的，它相当于什么，它其实相当于是一个模块变量。这个模块当它在我们的页面里面 在这个地方，当它在这个地方引入的时候，其实它已经有了一个模块的实例。明白了吗？它已经有了一个实例，当它有了一个实例以后，里面的这些变量它其实都是有状态的，都可以自己持有自己的一个状态，持有自己一种状态。所以在这个地方我们可以拿这个mode然后去做临时的一个状态的储存，然后这个地方可以去判断。 如果我们不用这种方式还有另外一种方式可以用是什么方式，就是通过instance.getDataset然后调用它的mode，调用它的mode去判断是否等于start，这个取它是从哪取的，它其实从我们这个组件。我们看一下传递过来的事件是这个，因为这个事件是从这传的 ，instance它其实等于谁？它其实等于这个view对不对，我们取它的dataset取到哪里，取到这个地方看到没有？这个地方有一个data-mode，等于mode对不对。如果是我们按照我们后面提到的这个方式去取，取到的信息其实是它。当然这个地方我们要有一个对比，在这个模块里边让它自己持有这个状态，与我们从这个视图上去取这个状态，两种方式进行对比。 我们下面的这种方式它的效率会更高，因为它本身自己就把这个状态给它做了很好的一个判断，你不需要去麻烦别人再去取那个状态了，你多了一层调用效率又会降低，这是关于这个脚本的一个说明说得稍微多一点，因为所有的代码都是在这里面实现的。 这个工作做完以后，接下来我们要做什么？因为我们组件的向外暴露的方法都是一致的，行为也是一致的，所以我们只需要在我们组件引入的在这个地方加了一个wxs，只需要加这个以后组件引用就变成从原来引入这个组件，然后变成了引入这个组件，这个组件名我们不变，组件名我们仍然可以按原来的方式进行使用，现在代码终于改完了。然后单击编译，我们看一下它的实际运行效果。选择我们首页然后运行首页 ，已经渲染出来了，然后单击 然后它运行，我们看到也在快速地进行切换，现在我们要对比，要打开Performance面板，可以让它先停下来把我们原来的给它清除一下，重新单击录制，然后单击开始，已经有了 然后停止 不需要太长，因为我们只需要测一段时间，只要它有执行就可以了，看一下 仍然是有问题的。因为我们的优化看来是无止境的，而我们对比一下看看跟原来相比是不是有所改善，你比如这个我们看到它渲染任务大概是54.30对不对，然后它里边这里面有个setData，然后这个地方也是大概57.40，这个是66 稍微长一点66，这个地方是61，然后这个大概是26，这个里面我看一下，它里面其实也是有setData的 每次都不一样。 这个地方它性能我们可以做个小小的测试，它主要是由什么样的一个代码然后引发的，我们可以改一个地方 改哪里，你觉得我们改哪里可以让性能稍微变好一点，改我们的这个地方对不对。因为它现在性能其实主要是在这个地方受影响的，我们只需要在这个地方将这个阈值改一下，我们改成200 改成200之后再做一个测试，再看一下表现 把这个清掉，然后再单击开始 然后录制，它本身面板的开启也是需要CPU的，所以它开启的时候我们可以明显感到它有一个卡顿，好，停止，现在这个测试我们看一下跟我们刚才的操作相比，明显可以感到我这个界面没有刚才卡顿了对不对，比刚才好了很多，这个地方已经没有红三角了，红三角的显示与刚才相比已经少了很多，看我们刚才这些东西已经没有了对不对，我们可以看到里面的方法，这个地方这有一个 很多都是匿名函数的一个回调，我们再看这个地方有setData对不对，setData大概是浪费了6.98毫秒，它整体上这个时间 我们渲染这个时间大概是消耗了到36.40，刚才我们看到大概是60毫秒，现在我们把它 间隔100改成200以后，消耗大概是变到了36毫秒，基本上效率提升了一半。 这和我们的预想也是一致的，因为我们将本身这个地方将100改成200的时候，从理论上来讲它这个性能应该会提升100对吧，这个从侧面也说明这个地方它其实就是影响我们性能的主要的一个关键点。从理论上讲也是因为我们所有的这些其他的一个代码，它都是这个wxs代码对吧，只有这一个地方我们是用到了JS的逻辑层计算这个结果，然后要通过这样一种方式传给JS逻辑层，由JS逻辑层再去更新这样视图里面的数据，本质上我们这种优化把这个组件变成wxs这样的一个版本，变了以后 其实只有我们上面的这些计算代码是用新的脚本语言，就是wxs脚本去执行的，而渲染数据的传递还是原来的那种方式并且它还绕了一个弯对不对，所以从这两种组件的表现来看，我们新的组件它在渲染的时候 它性能比原来的组件会稍微好那么一点点，但是好的也不算太多，因为本质上它还是受限于callMethod以及setData这个方法的一个限制，它有限制在这个地方，我们这个演示就说到这里。 最后我们总结一下，小程序的视图更新有重渲染机制，当这个逻辑层代码通过setData方法 改变视图数据的时候它会触发新的wxml节点树的一个生成以及新旧节点树的一个差异比较将数据密集更新的功能组件化可以显著提升我们视图渲染的运行时效率。此外wxs脚本，它由于不需要底层的一个中转，也就是通过evalulateJavaScript方法的一个帮助，它可以绕过逻辑层直接操作这个视图层的一个组件，使用它辅助完成这个组件的一个开发也可以大大提升我们这个视图渲染的一个效率，在wxs脚本与逻辑层需要相互调用的地方我们也有办法进行处理 我们举个例子，例如在wxs脚本里面可以通过ownerInstance的callMethod方法去调用这个页面上的方法。例如刚才我们看到的对setData这个方法的一个调用反过来逻辑层怎么样去调用wxs脚本里面的方法，我们可以通过视图层上绑定一个名称，为changexxx这样的一个特别属性，触发对wxs脚本的里面的方法的一个调用。 这节课我们涉及到的文档如屏幕上所示，这节课我们就讲到这里。 这节课我们主要学习了如何将数据更新频繁的功能区域进行组件化以及如何使用wxs脚本辅助完成组件的一个自定义以提升运行时的渲染性能。 下节课我们学习代码按需注入与初始渲染缓存，这里有个问题请你思考一下：在传统动态的网页开发里面，可以将HTML这个页面在这个服务器端缓存下来甚至写成静态的HTML文件以此来加快下一次用户访问，同一个页面的加载速度在这个小程序开发里面有类似的技术也可以实现这样的一个效果，你知道是哪个技术吗？ 下节课我们一起来深入探讨一下这个问题。 点击查看开放文档： WXS 语法参考WXS响应事件
2022-07-13 - 【小程序代码自查】小程序闪退-内存泄露导致
背景用户经常出现闪退的情况，并提示内存不足。根据用户操作场景，猜测页面存在内存泄露。 内存泄露是什么？内存泄露是程序运行过程中产生的内存变量会一直存在，不会被垃圾回收机制检测到，导致一直不会被销毁，内存占用会越来越大。 比如说： 我们在运行小程序的时候会产生一个页面，小程序会给这个页面创建一个实例，当这个页面销毁的时候，这个实例应该会被销毁。 但是如果我们有个定时器（setInterval），定时器里面对这个页面实例存在引用，那这个页面实例就不会被销毁，因为有被用到。 当存在内存泄露的情况，用户长期使用我们的小程序会导致小程序占用的内存越来越大，最后会导致小程序闪退（被微信强制销毁） 排查内存泄露用到的工具-weakSet先简单描述一下weakSet，让大家有个简单的认识，详细需要去看下文档。 weakSet 是一个可以存储唯一变量的集合，和Set不一样的是，weakSet存储的变量都是弱引用，就是不会影响垃圾回收，如果存储的变量被回收了，在这个集合里面就找不到。 所以weakSet不能被遍历，也没有长度的概念。但是我们可以通过控制台打印weakset的指向，知道里面有多少个元素。如下图： [图片] 通过展开，我们可以知道里面是哪个页面的实例，但是我们在控制台展开就意味着我们对这个页面实例存在引用，则无法被垃圾回收。所以在执行垃圾回收之前需要清空控制台的输出。 如何确定页面是否存在内存泄露如果页面存在内存泄露则不会销毁页面实例。我们只需要判断页面实例有没有被销毁即可。 我们在一开始就把页面实例加到weakSet里面，当执行多次跳转页面之后，会存在多个页面实例，最后回到首页，触发小程序的垃圾回收。 如果不存在内存泄露，那weakSet集合里面只会存在两个页面实例（当前页面实例+返回回来的页面实例），比如下图的页面A和页面B。 如果存在内存泄露，那weakSet集合里面会存在多个页面实例（当前页面实例+存在内存泄露的页面实例*n），比如下图的页面A、页面B、页面C和页面D. 具体如下图： [图片] 如何主动触发小程序的垃圾回收小程序没有api可以让我们触发小程序的垃圾回收，我们目前可以通过开发者工具的performance面板或memory的垃圾回收（collect garbage 垃圾桶图标）按钮。 [图片] [图片] 触发垃圾回收之后的结果如图： [图片] 这个需要手动触发才可以，我们在测试的时候需要手动点击，无法自动触发，所以我们想了个方案自动触发垃圾回收。 通过给内存塞很多数据，然后将这些数据标为无用的，当内存达到500m左右小程序就会触发垃圾回收。这个办法会导致我们内存一段时间激增，建议尽量在跳转页面的时候不要开启，只有在最后页面跳转回首页才进行。 // 主动触发垃圾回收 setInterval(()=>{ if(!global.startGC){ return } let a = [] for (let i = 0; i < 10000000; i++) { a.push({ name: "pling", age: Math.random() * 10000 }) } console.log("length", a.length) a = [] }, 3000) 如何定位页面内存泄露的原因内存泄露的情况举例： global.list = [] Page({ // ... onLoad() { // ... 省略其他代码 // 将页面实例挂载到全局对象，如没有清理，则页面实例会一直不被销毁 global.list.push(this) // 存在Interval计时器，则会一直存在对页面实例的引用 setInterval(() => { console.log("test", this.data) }, 5000); // 通过settimeout的循环调用，实现了类似于interval的效果也会导致页面实例不会被销毁 this.testLoop() const that = this function test(){ console.log(that.data) } // 将内部函数挂载到全局变量，则会导致函数的作用域链都会存在引用，不会被销毁 global.logThis = test }, testLoop(){ setTimeout(() => { this.testLoop() }, 10000); } }) 通过上面我们可以知道一般会有上面四种情况导致内存泄露。 将对象挂载到全局对象上，页面写在没有清楚通过暴露内部函数给外部对象，导致存在作用域的引用，页面卸载没有清楚内部函数存在定时执行的函数存在对页面实例的引用，页面销毁没有清除定时器通过延时执行的函数循环调用，并存在对页面实例的引用，页面销毁没有停止调用。第一第二种情况会比较少出现，目前暂时还没考虑如何去排查。 第三第四种都会对页面实例存在调用，所以我们在页面实例销毁之后对页面实例上的属性进行监听，如果一直存在调用则会有问题。 [图片] 具体实现代码： // 检查页面卸载后对页面实例调用 Page({ data: { test: "111" }, onLoad() { global.pageSet.add(this) setInterval(() => { console.log("test", this.__wxExparserNodeId__, this.data.test) }, 5000); }, // .... onUnload(){ console.log("unload"); const that = this // 获得可以枚举的属性列表 const keys = Object.keys(that) // 加入data 因为data 不是可以枚举的属性 keys.push("data") console.log(keys); keys.map(key=>{ // 获得原本的属性描述 const property = Object.getOwnPropertyDescriptor(that, key) // 保留原有的值 const origin = that[key]; // 获得属性的get方法 有可能没有 const getter = property && property.get // 获得属性的set方法 有可能没有 const setter = property && property.set const isFunction = typeof origin === "function" // 如果是function的话 需要绑定this if(isFunction){ origin.bind(that) } const newThis = {} // 拦截属性 Object.defineProperty(that, key, { get: function(){ console.log(`调用了this.${key}的getter`); // 有getter 调用getter if(getter){ return getter.call(that) } return newThis[key] || origin }, set: function(newVal){ console.log(`调用了this.${key}的setter`); if(setter){ return setter.call(that, newVal) } newThis[key] = newVal } }) }) } }) 测试demo我们在自己项目里面测试会比较麻烦，一开始可能会有干扰，所以我这边弄了个代码片段，先校验一下这个方法是否可行，如果可行再加到自己的项目里面。 小程序代码片段
2021-05-12 - 微信小程序使用科大讯飞语音评测，保姆级教程！
最近微信小程序项目中，需要添加语音评测功能，就选用了科大讯飞的语音评测流式版接口，但在使用过程中，遇到了很多问题，再网上搜资料，搜了好多，也没直接能用的，好在后来参考了许多资料后，终于调试成功了，接下来，跟大家分享一下我是怎么处理的。 1.第一步，准备所用到的工具，下载官方jsdemo，将 base64js 文件复制到自己的小程序项目中，用npm安装crypto-js xmldom这2个工具 然后，将工具导入到页面中 const CryptoJS = require('crypto-js') const Base64 = require('../../tools/base64js').Base64; var DOMParser = require('xmldom').DOMParser; 2.第二步，初始化用到的变量，定义用到的关键函数 const APPID = '替换成你自己的' const API_SECRET = '替换成你自己的' const API_KEY = '替换成你自己的' let audioData = [] //存储音频流的数组 let socketTask = null //小程序的socketTask let handlerInterval = null // 定时器，用来定时发送数据流 function getWebSocketUrl() {//生成socket使用的url return new Promise((resolve, reject) => { var url = 'wss://ise-api.xfyun.cn/v2/open-ise' var host = 'ise-api.xfyun.cn' var apiKey = API_KEY var apiSecret = API_SECRET var date = new Date().toGMTString() var algorithm = 'hmac-sha256' var headers = 'host date request-line' var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/open-ise HTTP/1.1` var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret) var signature = CryptoJS.enc.Base64.stringify(signatureSha) var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"` var authorization =Base64.encode(authorizationOrigin) url = `${url}?authorization=${authorization}&date=${date}&host=${host}` resolve(url) }) } 3.开始录音 //开始录音 startVoiceRecord(){ let that = this that.setData({recordState:'recording'}) recorderManager.onStart(() => { console.log('recorder start') }) recorderManager.onPause(() => { console.log('recorder pause') }) recorderManager.onStop((res) => { console.log('recorder stop', res) const { tempFilePath } = res that.startUpRecord()//录音完成，准备调用讯飞接口 }) recorderManager.onFrameRecorded((res) => { const { frameBuffer } = res console.log('frameBuffer.byteLength', frameBuffer.byteLength) let u8Arr = new Uint8Array(frameBuffer) audioData.push(u8Arr) //将每一帧的数据取出，放到audioData中，准备使用 }) const options = { duration: 180000, sampleRate: 16000, numberOfChannels: 1, encodeBitRate: 44100, frameSize: 2, format: 'pcm', } recorderManager.start(options) }, 4. 开始socket连接，准备上传数据并处理 startUpRecord(){ let that = this getWebSocketUrl().then(( url)=>{ let newURL = encodeURI(url) socketTask = wx.connectSocket({ url: newURL, }) socketTask.onOpen(()=>{ console.log('打开了socket') that.webSocketSend() }) socketTask.onMessage((e)=>{ // result 在这里做信息处理 console.log('收到了结果：',e) that.result(e.data) }) socketTask.onError((err)=>{ //结束录音 console.log('socket 出错：',err) }) socketTask.onClose(()=>{ // 结束录音 console.log('socket 关闭：') }) }) }, webSocketSend() { console.log('开始发送数据',audioData) let that = this let audioDataUp = audioData.splice(0, 1) var params = { common: { app_id:APPID, }, business: { category: 'read_sentence', // read_syllable/单字朗读，汉语专有 read_word/词语朗读 read_sentence/句子朗读 https://www.xfyun.cn/doc/Ise/IseAPI.html#%E6%8E%A5%E5%8F%A3%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B rstcd: 'utf8', group: 'pupil', sub: 'ise', ent: 'cn_vip', tte: 'utf-8', cmd: 'ssb', auf: 'audio/L16;rate=16000', aus: 1, aue: 'raw', text: '\uFEFF' + '今天天气怎么样？' }, data: { status: 0, encoding: 'raw', data_type: 1, data: that.toBase64(audioDataUp[0]), }, } console.log(JSON.stringify(params)) socketTask.send({data: JSON.stringify(params)}) handlerInterval = setInterval(() => { // websocket未连接 if (!socketTask) { clearInterval(handlerInterval) return } // 最后一帧 if (audioData.length === 0) { console.log('数据发送完毕') socketTask.send( {data: JSON.stringify({ business: { cmd: 'auw', aus: 4, aue: 'raw' }, data: { status: 2, encoding: 'raw', data_type: 1, data: '', }, })} ) audioData = [] clearInterval(handlerInterval) return false } audioDataUp = audioData.splice(0, 1) // 中间帧 console.log('audioDataUp:',audioDataUp[0]) socketTask.send( { data: JSON.stringify({ business: { cmd: 'auw', aus: 2, aue: 'raw' }, data: { status: 1, encoding: 'raw', data_type: 1, data: that.toBase64(audioDataUp[0]), }, })} ) }, 40) }, result(resultData) { // 识别结束 let jsonData = JSON.parse(resultData) if (jsonData.data && jsonData.data.data) { let data = Base64.decode(jsonData.data.data) const doc=new DOMParser().parseFromString(data,'text/xml'); let sentence = doc.getElementsByTagName('read_sentence')[1] let accuracy_score = sentence.getAttribute('accuracy_score') let emotion_score = sentence.getAttribute('emotion_score') let fluency_score = sentence.getAttribute('fluency_score') let total_score = sentence.getAttribute('total_score') let integrity_score = sentence.getAttribute('integrity_score') let phone_score = sentence.getAttribute('phone_score') let tone_score = sentence.getAttribute('tone_score') let is_rejected = sentence.getAttribute('is_rejected') console.log('parseRes:',accuracy_score,emotion_score,fluency_score,total_score) //评测结果在这里，就出来了，然后就可以拿评测数据去使用了 } if (jsonData.code === 0 && jsonData.data.status === 2) { // 在这里结束socket socketTask.close() } if (jsonData.code !== 0) { socketTask.close() console.log(`${jsonData.code}:${jsonData.message}`) } }, 到这里，整个流程就完了，祝愿大家都能一次调用成功，有什么问题的话，咱们再讨论！
2023-06-13 - 请教一下：RecorderManager能否获取到音量？
想实现录音时麦克风随音量大小变化的动画效果，不知道RecorderManager如何实现。
2022-10-03 - 「基础库2.26.1」我们又有被灰度到的用户无法播放mp3了。关于小程序基础库灰度流程的建议？
建议：每次灰度新的基础库版本时，能不能最先灰度我们这些开发者提供的微信号，以方便我们尽早的进行新版本测试？可以每次提供个表单让我们来填要灰度的微信号。 从昨晚开始，我们被灰度到2.26.1的用户很多都出现了mp3无法播放的问题，基础库版本升级前都是正常的。而类似这样因为基础库被灰度到更高版本导致小程序无法播放mp3的情况已经出现好几次了。
2022-09-24 - 小程序性能优化实践
小程序性能优化课程基于实际开发场景，由资深开发者分享小程序性能优化的各项能力及应用实践，提升小程序性能表现，满足用户体验。
10-09 - 小程序录音实时波形图
首先，做这个不需要把MP3转pcm。 结果就是，转了pcm也不知道怎么出波形。搞了我好几天。。。 但是微信现在不需要引入js-mp3库就可以转，仅仅记录一下，代码如下： var audioCtx = wx.createWebAudioContext() audioCtx.decodeAudioData(frameBuffer, audioBuffer => { let float32Array = audioBuffer.getChannelData(0) ...} AudioContext.createAnalyser()，这是浏览器的接口，微信的WebAudioContext暂时没有这个。 页面js： const that = this; var recorderManager = wx.getRecorderManager() //把frameBuffer转一下，再转成普通Array，传给voice组件 recorderManager.onFrameRecorded((res) => { const { frameBuffer } = res let uint8Array = new Uint8Array(frameBuffer) that.setData({ voiceLine: new Array(...uint8Array) }) }) const options = { duration: 40000, numberOfChannels: 1, format: 'mp3', frameSize: 0.01, //这里设置很小，就会只取一帧就触发onFrameRecorded事件 // sampleRate: 44100, encodeBitRate: 16000, } recorderManager.start(options) 页面wxml：引入组件，传递数据 组件voice.wxml： 组件voice.wxss: .canvas { position: fixed; top: 0; left: 10px; right: 60; bottom: 0; width: 300px; height: 100%; } 组件js： var voiceLine = []; var MaxValue = 0; Component({ /** * 组件的属性列表 */ properties: { voice: Array }, /** * 组件的初始数据 */ data: { }, lifetimes: { // 组件刚刚被创建时执行 attached() { wx.createSelectorQuery().in(this) .select('#canvas') .fields({ node: true, size: true, }) .exec(this.init.bind(this)) }, //删除该组件绑定的所有事件 detached() { } }, pageLifetimes: { show: function () { }, hide: function () { // 页面被隐藏 }, resize: function (size) { // 页面尺寸变化 } }, observers: { 'voice': function (voice) { if (!voice instanceof Array || voice.length === 0) { return; } // 显示单一波形，调试用 //解开注释可以查看每个波形，慢慢找规律 // this.renderVoice(voice); // return; let voiceLen = voice.length, plantValue = 0, //常见数据 serialValueNum = 0 //连续计数器 for (var i = 0; i < voiceLen; i++) { //连续9个表示该帧空了 if (serialValueNum > 9) { console.log('总长：', voiceLen, '常见数据：', plantValue, '干了：', serialValueNum) if (voiceLine.length > 60) { voiceLine.shift() } voiceLine.push(0) this.renderCanvas(); return; } if (plantValue != voice[i]) { plantValue = voice[i] serialValueNum = 0 } else { serialValueNum++; } } // 按长度显示 let middleNum = voice.length if (middleNum > MaxValue) { MaxValue = middleNum console.log('MaxValue:', MaxValue); } //长度<100抛弃数据 if (middleNum < 100) { console.log('长度<100抛弃数据:', middleNum, voice); middleNum = 100 } if (voiceLine.length > 60) { voiceLine.shift() } voiceLine.push(middleNum) this.renderCanvas(); }, }, /** * 组件的方法列表 */ methods: { init(res) { const width = res[0].width const height = res[0].height const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = width * dpr canvas.height = height * dpr ctx.scale(dpr, dpr) this.ctx = ctx this.width = width this.height = height }, renderVoice(voiceLine) { if (typeof this.ctx === 'undefined') { return } const width = this.width const height = this.height const ctx = this.ctx ctx.clearRect(0, 0, width, height) var len = voiceLine.length, barHeight = 1, q = 0, left = 0 let plantValue = 0, //常见数据 serialValueNum = 0 //连续计数器 console.log(voiceLine); ctx.strokeStyle = 'blue' for (var i = 0; i < len; i++) { if (i == len - 1 && serialValueNum > 9) { //连续5个很罕见 console.log('总长：', len, '常见数据：', plantValue, '干了：', serialValueNum) } if (plantValue != voiceLine[i]) { plantValue = voiceLine[i] serialValueNum = 0 } else { serialValueNum++; } q = i % height left = parseInt(i / height) * 60 + 60 barHeight = (voiceLine[i] / 255) * 60 // 绘制向上的线条 ctx.beginPath(); ctx.moveTo(left, q); ctx.lineTo(left + barHeight, q); ctx.stroke(); } }, renderCanvas() { if (typeof this.ctx === 'undefined') { return } const width = this.width const height = this.height const ctx = this.ctx ctx.clearRect(0, 0, width, height) var len = voiceLine.length, barHeight = 1, t_arr = [] let now_V, min = 100, max = MaxValue - min; ctx.strokeStyle = 'blue' ctx.lineWidth = 3; for (var i = 0; i < len; i++) { now_V = voiceLine[i] == 0 ? 0 : voiceLine[i] - min if (now_V == 0) { ctx.beginPath(); ctx.moveTo(3, i * 8 - 4); ctx.lineTo(3, i * 8 + 4); ctx.stroke(); continue; } t_arr.push(now_V) barHeight = (now_V / max) * 60 // 绘制向上的线条 ctx.beginPath(); ctx.moveTo(0, i * 8); ctx.lineTo(barHeight, i * 8); ctx.stroke(); } t_arr.sort((a, b) => a - b); console.log('Min', t_arr[0], 'Max', t_arr[t_arr.length - 1]) } } }) 原理：说白了，传过来的一串数据，当有大声音时，会突然变长。 当完全静音时，会连续出现85或170这个值。如果是转Int8Array，会有-86这个值。 至于为什么，上面代码解开注释可以观察单个波形。 [图片] 最后成品的案例在：“艺匠人”小程序->新建作品。 感兴趣的童鞋搜一下玩玩吧~
2023-02-07 - 在 kbone 中实现小程序 svg 渲染
背景 2019 年底，微信小程序已经推出了近三个年头，我身边的前端开发者基本都做过至少一次小程序了。很多友商曾打算推动小程序进入 W3C 标准，而微信并不为所动，个人认为，小程序本身在框架设计上称不上「标准」，微信也并没打算做一个「标准的平台」。 小程序更注重产品形态和交互，注重对开发者能力的制约，尽可能减少对用户的干扰；因此，也许小程序从设计之初就没有过多考虑开发层面的「优雅」，而是以方便上手、容易学习为主。最典型的例子就是 [代码]App()[代码]、[代码]Page()[代码] 这一类直接注入到模块内的工厂方法，你不知道、也不需要知道它从何处来，来无影去无踪，是与现在 JS 生态中早已普及的模块化开发有点相悖的。 在架构上，小程序选择了将逻辑层与视图层分离的方式来组织业务代码。小程序的源码提交上传时，JS 会被打包成逻辑层代码（[代码]app-service.js[代码]），在运行时与逻辑层基础库 [代码]WAService.js[代码] 相结合，在逻辑层 Webview（或 JSCore）中执行；WXML/WXSS 将会编译成 JS 并拼接成 [代码]page-frame.html[代码]，在运行时与视图层基础库 [代码]WAWebview.js[代码] 相结合，在视图层堆栈的 Webview 中执行。基础库负责利用客户端提供的通信管道，相互建立联系，对小程序和页面的生命周期、页面上虚拟 DOM 的渲染等进行管理，并在必要时使用客户端提供的原生能力。 [图片] (小程序实例的典型架构) 熟悉小程序的开发者都知道，这样的架构最主要的目的就是禁止业务代码操作 DOM，迫使开发者使用数据驱动的开发方式，同时在小程序推出初期可以避免良莠不齐的 HTML 项目快速攻占小程序平台，后期则可以缓解小程序平台上的优质产品流失。 kbone 是什么 从 2017 年初小程序推出开始，业界最关心的就是小程序能否转为普通的 Web 开发。最初我们只能简单的用 Babel 进行 JS 的转换；后来小程序推出了 web-view 组件，开发者则开始想办法让 Web 页面使用小程序能力；在知道了 web-view 中的消息不能实时传到小程序逻辑层后，大家则开始选择妥协，改用语法树转换的方式来实现。很多小程序开发框架都是在这一个阶段产生的，如 Wepy、Labrador、mpvue 和 Taro。 语法树转换终究是不可靠的——在 Wepy 和 Taro 的使用中，我们常常会碰到很多语法无法识别的坑，坑的数量与代码量成正比。因此，这些框架更适用于从零开始写，而不适合将一个大型项目移植到小程序。 kbone 是微信团队开源的微信小程序同构框架，与基于语法树转换的 Wepy、Taro 等传统框架不同，kbone 的思路是在逻辑层用类似 SSR 的方式模拟出 DOM 和 BOM 结构，让逻辑层的 HTML5 代码正常运行；而 kbone 会负责将逻辑层中的虚拟 DOM 以 setData 的形式传递给视图层，让视图层利用小程序组件递归渲染的能力，产生出真实的 DOM 结构。 使用 kbone 之后，我们可以将小程序页面理解为一个独立的 html 文档（而不是 SPA 中的一个 router page）。在每个页面的 JS 中初始化 kbone，为逻辑层提供虚拟 DOM 和 BOM 的环境，然后就可以像 H5 一样加载各种主流前端框架和业务代码，kbone 会负责逻辑层和视图层之间的 DOM 和事件同步。 让 kbone 支持 HTML5 inline SVG 在 HTML 中，SVG 的引入有很多种不同的方式，可以像图片一样使用 [代码]<img>[代码] 标签、[代码]background-image[代码] 属性，也可以直接在 HTML 中插入 [代码]<svg>[代码] 标签，另外还有 [代码]<object>[代码]、[代码]<embed>[代码] 等不太常见的方式。 在一些大型 web-view 项目迁移到 kbone 的过程中，常常会遇到 HTML inline SVG（在 HTML 中直接插入 SVG 标签）这种情况；有的页面还会异步加载一个含有很多小图标（[代码]<symbol>[代码]）的大 SVG、在页面上用 [代码]<use xlink:href="#symbol-id">[代码] 的方式，实现 SVG 的 Sprite 化。 本文针对单个页面上出现大量 HTML inline SVG 的实战场景，通过识别并转换成 [代码]background-image[代码]，来实现小程序 kbone 对 SVG 的支持。 构造用例 首先我们以 kbone 官方示例 为基础，导入该项目后，在项目根目录新建 [代码]kbone-svg.js[代码]，然后进入 [代码]/pages/index/index.js[代码]，在 [代码]onLoad()[代码] 的结尾先写出调用方式和示例： [代码]Page({ data: ..., onLoad(query) { ... init(this.window, this.document) this.setData({ pageId: this.pageId }) this.app = this.window.createApp() this.window.$$trigger('load') this.window.$$trigger('wxload', { event: query }) // 添加我们的调用方式和示例 require('../../svg.js')(this.window) this.document.body.innerHTML += ` <p>SVG 渲染</p> <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 40 40" id="bell" width="40" height="40"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.65" transform="translate(3.8, 2.8)"> <polygon fill="#000000" points="0.2 27.2 32.2 27.2 32.2 30.2 0.2 30.2" /> <path d="M15.84,1.66 L6.6,6 L4.5,28.7 L27.16,28.7 L25.1,6.01 L15.84,1.66 Z" stroke="#000000" stroke-width="3" /> <polygon fill="#000000" points="11.52 30.2 13.68 33.2 18 33.2 20.16 30.2" /> </g> </svg> <p>SVG Symbol 渲染</p> <svg xmlns='http://www.w3.org/2000/svg' style="display:none"> <defs><symbol viewBox="0 0 40 40" id="bell"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.65" transform="translate(3.8, 2.8)"> <polygon fill="#000000" points="0.2 27.2 32.2 27.2 32.2 30.2 0.2 30.2" /> <path d="M15.84,1.66 L6.6,6 L4.5,28.7 L27.16,28.7 L25.1,6.01 L15.84,1.66 Z" stroke="#000000" stroke-width="3" /> <polygon fill="#000000" points="11.52 30.2 13.68 33.2 18 33.2 20.16 30.2" /> </g> </symbol></defs> </svg> <svg xmlns='http://www.w3.org/2000/svg' width="40" height="40"> <use xlink:href="#bell"></use> </svg> <p>SVG 自引用渲染</p> <svg viewBox="0 0 80 20" width="80" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Our symbol in its own coordinate system --> <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- A grid to materialize our symbol positioning --> <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> <!-- All instances of our symbol --> <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> </svg> ` } }) [代码] 本例中，结合 [代码]<defs>[代码] [代码]<symbol>[代码] 和 [代码]<use>[代码] 的文档，给出了三种示例，分别用来代表普通 SVG 的渲染、跨 SVG 引用 Symbol（类似于雪碧图）的渲染、以及 SVG 内引用当前文档中的 Symbol 的渲染情况。 分析和实现 上述示例中，我们模拟 H5 条件下最一般的情况，直接在 body 下添加 HTML。如何支持这样的情况？首先我们打开 kbone 的代码 [代码]/miniprogram_npm/miniprogram-render/node/element.js[代码]，观察 [代码]innerHTML[代码] 的 setter： [代码]set innerHTML(html) { if (typeof html !== 'string') return const fragment = this.ownerDocument.$$createElement({ tagName: 'documentfragment', // ... }) // ... ast = parser.parse(html) // ... // 生成 dom 树 ast.forEach(item => { const node = this.$_generateDomTree(item) // <-- if (node) fragment.appendChild(node) }) // 删除所有子节点 this.$_children.forEach(node => { // ... }) this.$_children.length = 0 // ... this.appendChild(fragment) } [代码] 可以看到，[代码]innerHTML[代码] 被转化成 [代码]$_generateDomTree[代码] 的调用，生成新的子节点，并替换掉所有旧的子节点。而在 [代码]$_generateDomTree[代码] 中，最终将会调用 [代码]this.ownerDocument.$$createElement[代码]。 根据 [代码]/miniprogram_npm/miniprogram-render/document.js[代码] 中的定义，[代码]Document.prototype.$$createElement[代码] 作为我们熟知的 [代码]Document.prototype.createElement[代码] 的内部实现，因此为了监听 [代码]<svg>[代码] 等节点的创建，需要对 [代码]$$createElement[代码] 方法进行 Hook。 在 kbone 官方文档 DOM/BOM 扩展 API 一章中不难发现，我们可以使用 [代码]window.$$addAspect[代码] 函数对所需的方法进行 Hook： [代码]window.$$addAspect('document.$$createElement.after', (el) => { if (el.tagName.toLowerCase() === 'svg') { setTimeout(() => renderSvg(el), 0); } }); [代码] 在这里，我们监听了 [代码]<svg>[代码] 节点的建立，并在下一个宏任务中（即等待 [代码]<svg>[代码] 节点的所有子节点挂载完成后）调用我们自己的 [代码]renderSvg()[代码] 方法。在 [代码]renderSvg()[代码] 中，我们希望进行下列一些操作： 首先分析并保存当前 SVG 文档中的所有 Symbol，以便于当前 SVG 文档内部或者其它 SVG 中使用； 将当前 SVG 文档中的跨文档 [代码]<use>[代码] 节点替换成对应 Symbol 的 HTML，如果对应的 Symbol 还没有加载，则监听其加载完成； 清理当前 SVG 文档，并转换为 [代码]data:image/svg+xml[代码] 格式的 Data URI； 将当前 SVG 标记为已渲染，清除所有子节点，并将生成的 Data URI 设置为 CSS [代码]background-image[代码] 属性。 在并不知道 Symbol 是否可以再包含 [代码]<use>[代码] 的情况下，为了简化问题，我们可以先假设所有的 Symbol 中不会包含 [代码]<use>[代码]，即不存在 Symbol 之间多级依赖和循环依赖的情况。经过反复修改，[代码]renderSvg()[代码] 方法实现如下： [代码]const symbolMap = {}; const symbolUseMap = {}; const renderSvg = (el) => { // 如果之前已经完成渲染，就不重复渲染 if (el.style.backgroundImage) return; // 分析并保存当前 SVG 文档中的所有 Symbol，以便于当前 SVG 文档内部或者其它 SVG 中使用 // 同时，记录这些 Symbol，如果在当前 SVG 中本地使用，则不需要替换他们 const localSymbols = new Set(el.querySelectorAll('symbol').map(resolveSymbol)); // 先假设没有完成渲染 let isFullRendered = true; // 将当前 SVG 文档中的跨文档 `<use>` 节点替换成对应 Symbol 的 HTML el.querySelectorAll('use').forEach(use => { const symbolId = (use.getAttribute('xlink:href') || use.getAttribute('data-xlink-href')).replace(/^#/, ''); // 如果是当前文档内局部的 Symbol，不需要替换，background-image 会直接解析 if (localSymbols.has(symbolId)) return; const symbol = symbolMap[symbolId]; if (symbol) { // 如果对应的 Symbol 已经加载，将 <use> 替换成对应的 Symbol // 这里暂时简化考虑，直接覆盖 <use> 的父节点的所有内容 const parentNode = use.parentNode; parentNode.innerHTML = symbol.innerHTML; parentNode.setAttribute('viewBox', symbol.getAttribute('viewBox')); if (!symbolUseMap[symbolId]) symbolUseMap[symbolId] = new Set(); symbolUseMap[symbolId].delete(el); } else { // 如果对应的 Symbol 还没有加载，则监听其加载完成 if (!symbolUseMap[symbolId]) symbolUseMap[symbolId] = new Set(); symbolUseMap[symbolId].add(el); isFullRendered = false; } }); // 若存在没加载完的 Symbol，先不执行渲染，因为渲染过程是一次性的，需要破坏所有子节点 if (!isFullRendered) return; // 清理当前 SVG 文档，并转换为 `data:image/svg+xml` 格式的 Data URI let svg = el.outerHTML; const svgDataURI = parseSvgToDataURI(svg); const backgroundImage = `url('${svgDataURI}')`; if (backgroundImage.length > 5000) { console.error('[kbone-svg] SVG 长度超限', { svg, data: svgDataURI }); } // 将当前 SVG 标记为已渲染，清除所有子节点，并将生成的 Data URI 设置为 CSS `background-image` 属性 el.innerHTML = ''; if (el.getAttribute('width')) el.style.width = el.getAttribute('width') + 'px'; if (el.getAttribute('height')) el.style.height = el.getAttribute('height') + 'px'; el.style.backgroundImage = backgroundImage; el.style.backgroundPosition = 'center'; el.style.backgroundRepeat = 'no-repeat'; console.log('[kbone-svg] 渲染 SVG 元素完成', { svg, data: svgDataURI }); } [代码] 接下来我们需要实现 resolveSymbol 方法。当遇到 Symbol 时，需要解析其 ID，保存该 Symbol 节点，并触发所有依赖当前 Symbol 的其他 SVG 的重新渲染。 [代码]const resolveSymbol = (el) => { const symbolId = el.id; el.id = null; const symbol = el; if (symbolMap[symbolId] !== symbol) { symbolMap[symbolId] = symbol; setTimeout(() => symbolUseMap[symbolId] && symbolUseMap[symbolId].forEach(renderSvg), 0); } console.log('[kbone-svg] 保存 Symbol 完成', symbol); return symbolId; } [代码] 最后，我们需要定义 SVG 进行清理和渲染（转化为 Data URI）的过程。在此之前，需要对 setAttribute 和 setAttributeNS 进行一个 polyfill，因为 kbone 不支持为节点设置任意属性，很多属性设置之后会丢失。 [代码]const _setAttribute = window.Element.prototype.setAttribute; window.Element.prototype.setAttribute = function (attribute, value) { const oldHtml = this.outerHTML; _setAttribute.call(this, attribute, value); const newHtml = this.outerHTML; // 如果设置属性后 outerHTML 没有改变，则设置到 dataset 中 if (oldHtml === newHtml) { this.dataset[attribute] = value; } } // 对设置 xlink:href 时可能出现的报错进行 polyfill，改为 data-xlink-href window.Element.prototype.setAttributeNS = function (xmlns, attribute, value) { this.setAttribute('data-' + attribute.replace(':', '-'), value) } [代码] 接下来即可定义 SVG 文档转化为 Data URI 的过程了，这里需要用到很多正则表达式。 [代码]const parseSvgToDataURI = (svg) => { // 将被设置到 dataset 中的属性还原出来 svg = svg.replace(/data-(.*?=(['"]).*?\2)/g, '$1'); // 将被设置到 data-xlink-href 的属性还原出来 svg = svg.replace(/xlink-href=/g, 'xlink:href='); // 将 dataset 中被变成 kebab-case 写法的 viewBox 还原出来 svg = svg.replace(/view-box=/g, 'viewBox='); // 清除 SVG 中不应该显示的 title、desc、defs 元素 svg = svg.replace(/<(title|desc|defs)>[\s\S]*?<\/\1>/g, ''); // 为非标准 XML 的 SVG 添加 xmlns，防止视图层解析出错 if (!/xmlns=/.test(svg)) svg = svg.replace(/<svg/, "<svg xmlns='http://www.w3.org/2000/svg'"); // 对 SVG 中出现的浮点数统一取最多两位小数，缓解数据量过大问题 svg = svg.replace(/\d+\.\d+/g, (match) => parseFloat(parseFloat(match).toFixed(2))); // 清除注释，缓解数据量过大的问题 svg = svg.replace(/<!--[\s\S]*?-->/g, ''); // 模拟 HTML 的 white-space 行为，将多个空格或换行符换成一个空格，减少数据量 svg = svg.replace(/\s+/g, " "); // 对特殊符号进行转义，这里参考了 https://github.com/bhovhannes/svg-url-loader/blob/master/src/loader.js svg = svg.replace(/[{}\|\\\^~\[\]`"<>#%]/g, function (match) { return '%' + match[0].charCodeAt(0).toString(16).toUpperCase(); }); // 单引号替换为 \'，由于 kbone 的 bug，节点属性中的双引号在生成 outerHTML 时不会被转义导致出错 // 因此 background-image: url( 后面只能跟单引号，所以生成的 URI 内部也就只能用斜杠转义单引号了 svg = svg.replace(/'/g, "\\'"); // 最后添加 mime 头部，变成 Webview 可以识别的 Data URI return 'data:image/svg+xml,' + svg.trim(); } [代码] 以上是经过反复 debug 后的相对稳定的代码。放在上文的演示项目中，效果如下图： [图片] 可以看出，前两例中已经可以渲染出图片，第三例中，与 MDN 官方文档的表现 不太一致，经过检查，生成的 Data URI 直接打开并没有问题，可能是小程序视图层的环境对 SVG 内的尺寸换算存在问题。 在 Android 和 iOS 真机调试中，本例没有出现无法显示的兼容问题，这也说明了这种方案可行。 问题与总结 kbone 解决了 JS 难题，却留下了 CSS 难题 在上述例子中可以看到，kbone 已经非常类似于 H5 的环境，但有一个很容易忽略的问题：由于实际的操作对象是 [代码]<body>[代码] 的虚拟 DOM，且小程序视图层并不支持 [代码]<style>[代码] ，我们已经无法通过 JS 给整个页面（而非特定元素）注入 CSS，因此也无法通过纯 JS 层面的 polyfill 来为 [代码]svg[代码] 等某一类元素定义一些优先级较低的默认样式。 例如，在解析 SVG 的过程中，我们可能希望通过获取 SVG 元素的尺寸来设置渲染后背景图的默认尺寸（像 [代码]<img>[代码] 那样），同时允许来自业务代码中的尺寸覆盖，这在 kbone 环境下，甚至也许在小程序架构中是不可能的——除非我们利用 Webpack 的黑魔法将自己的 polyfill 编译到 WXSS 中去，或者如果你有超人的胆量和气魄，也可以给你迁移过来的业务代码中要覆盖你的样式批量加上 [代码]!important[代码]。 同理，可以肯定的是，我们也无法在 JS 中控制诸如媒体查询、字体定义、动画定义、以及 [代码]::before[代码]、[代码]::after[代码] 伪元素的展示行为等，这些都是只能通过静态 WXSS 编译到小程序包内，而无法通过小程序 JS 动态加载的。 数据量消耗 另外，虽然在 HTML5 环境中十分推崇 SVG 格式，但放在 kbone 的特定环境下，把 SVG 转换成 CSS [代码]background-image[代码] 反而是一种不甚考究的方案，因为这将会占用 [代码]setData()[代码]（小程序基础库中称为 [代码]vdSyncBatch[代码]）的数据量，降低数据层和视图层之间通信的效率，不过好在每个 SVG 图片只会被传输一次。 在写这个项目的同时，我也尝试将经过清理后生成的 SVG 利用小程序接口保存到本地文件，然后将文件的虚拟 URL 交给视图层，结果并不乐观。视图层在向微信 JSSDK 请求该 SVG 文件的过程中，也许因为没有收到 Content-Type 或者收到的 Content-Type 不对，导致 SVG 文件无法被正确解析展示出来。这可能是小程序的 Bug，或者也许是小程序并没有打算支持的灰色地带。 小结 尽管依然存在诸多问题，通过一个 polyfill 来为项目迁移过程中遇到的 SVG 提供一个临时展示方案仍然是有必要的——这让我们可以先搁置图片格式的问题，将更重要的问题处理完之后，再回来批量转换格式、或改用 Canvas 来绘制。 文中完成的 kbone SVG polyfill 只有一个 JS 文件，托管在我个人的 GitHub，同时为了方便使用也发布到 NPM。本文存在很多主观推测和评论，如有谬误，欢迎留言指正。 [图片] [图片]
2020-01-02 - 这些 Canvas 小技巧，保证你新年用得上
来自「微信开发者」公众号，作者为微信小程序技术研发工程师binnie。 本文主要介绍了3个隐藏的 Canvas 小技巧： - 绘制并生成图片 - Video 绘制 Canvas / webgl - 视频解码并绘制到 webgl - 录制并导出 webgl 视频 一键加滤镜 快速合成音视频 轻松挑选视频封面 …… Canvas 能够做这些？ 作为资深的开发者，相信大家对 Canvas 都不陌生。这项能力在绘制图形方面发挥着极大的作用，高效支持图片编辑、数据可视化等应用场景。但是只局限于一般能力应用，那格局就小了。 Canvas 的应用场景非常丰富！赶紧往下看看这些隐藏的 Canvas 小技巧，保证你新年用得上！还有手把手教程以及文末彩蛋哟。 -- • 绘制并生成图片 • -- [图片] 示例：新年模板长按保存祝福 适用场景：图片分享海报 相关 API：RenderingContext／Canvas／wx.canvasToTempFilePath Step 1: 创建实例获取对象 创建 Canvas 实例，获取 CanvasRenderingContext2D 对象（Canvas 绘图上下文）来绘制形状、文本、图像等。 const query = wx.createSelectorQuery() let canvas = null query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => { // 通过 wx.createSelectorQuery 获取到 canvas 实例 canvas = res[0].node // 通过 canvas.getContext('2d') 获取 CanvasRenderingContext2D 对象 const ctx = canvas.getContext('2d') }) Step 2: 设置宽高调整图片 获取 Canvas 绘图上下文后，将 Canvas 的宽高设置为节点宽高 * 设备像素比，绘制出来的图片更清晰 // 获取设备像素比 const dpr = wx.getSystemInfoSync().pixelRatio // 将 canvas 宽高设置为 canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr Step 3: 绘制内容 使用 CanvasRenderingContext2D 绘制，根据业务需要在画布中绘制头像、文字、背景等 // 矩形 ctx.fillStyle = '#FFFFFF' ctx.fillRect(0, 0, canvas.width , canvas.height ) // 图片 var image = canvas.createImage() himage.src = 'https://example.com/example.jpg' headImage.onload = (res) => { ctx.drawImage(himage 0, 0, 32, 32; } // 文本 ctx.font = "18px SimHei"; ctx.textAlgin = "left" ctx.fillStyle = "#07c160"; ctx.fillText("这是我的名字", 0, 0); Step 4: 生成并保存本地 使用 wx.canvasToTempFilePath 将画布生成图片，wx.saveImageToPhotosAlbum 将图片保存到本地。 wx.canvasToTempFilePath({ canvas: canvas, // canvas 实例 success(res) { // canvas 生成图片成功 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { // 保存成功 } }) } }) -- • Video 绘制 Canvas / webgl • -- [图片] 示例：视频文件绘制 Canvas 适用场景：制作 Video 滤镜、挑选 Video 封面等 相关 API：RenderingContext／Canvas Step 1: 获取实例 通过 wx.createSelectorQuery 获取 VideoContext 实例 let video = null wx.createSelectorQuery().select('#video').context(res => { // 通过 wx.createSelectorQuery 获取 VideoContext 实例 video = res.context; }) Step 2: 绘制内容 获取 VideoContext 实例后，将 VideoContext 传递给 Canvas 进行绘制。开发者根据业务需求选择绘制类型： Canvas 2d 写法：canvas.drawImage(video, ...)webgl 写法：gl.texImage2D(..., video) wx.createSelectorQuery().selectAll('#myCanvas,#webglCanvas').node(res => { const ctx = res[0].node.getContext('2d') const gl = res[1].node.getContext('webgl') setInterval(() => { // canvas 2d // 将 video 纹理对象传入 drawImage 进行绘制 ctx1.drawImage(video, 0, 0, w * dpr, h * dpr); // 添加一个蒙层 ctx1.fillStyle = 'rgba(0, 0, 0, 0.3)' ctx1.fillRect(0, 0, w * dpr, h * dpr); // webgl const render = createRenderer(res[1].node, w, h) render(new Uint8Array(ctx1.getImageData(0, 0, w * dpr, h * dpr).data), w * dpr, h * dpr) }, 1000 / 24) }).exec() function createRenderer(canvas, width, height) { const gl = canvas.getContext("webgl") ... return (arrayBuffer, width, height) => { ... // 指定二维纹理图像 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, arrayBuffer) gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0) } } -- • 视频解码并绘制到 webgl • -- [图片] 示例：视频一键解码并绘制到 webgl 适用场景：添加特效、贴图等视频编辑场景 相关 API：wx.createVideoDecoder／VideoDecoder／RenderingContext／Canvas.requestAnimationFrame／wx.createMediaAudioPlayer／MediaAudioPlayer Step 1: 创建视频解码器进行解码 1. 调用 createVideoDecoder 对视频进行解码 2. 使用 videodecoder.start 启动解码，视频源文件不限制本地或远程路径 3. 通过 videodecoder.on('start', res => {}) 监听解码，通过 videodecoder.getFrameData() 获取到解码数据 // 获取视频解码器 getVideoDecoder(source, abortAudio) { return new Promise((resolve, reject) => { // 创建视频解码器 videodecoder = wx.createVideoDecoder() // 开始解码 videodecoder.start({ abortAudio: abortAudio, source: source, // 视频源文件，支持本地路径&远程路径 mode: 0 // 按pts解码，保证音画同步 }) // 监听解码 开始 videodecoder.on('start', res => { console.log('videodecoder start', res) // 状态初始化 isStop = false resolve(videodecoder) }) // 监听解码 结束 videodecoder.on('ended', res => { // 状态设置为结束，停止画面录制器 isStop = true }) }) }, Step 2: 解码数据绘制到 webgl 1. 通过 gl.texImage2D(..., image) 将解码数据绘制到 webgl 2. 使用 webgl.requestAnimationFrame 继续绘制，效果更加流畅 // 将解码数据绘制到 webgl 中 const query = wx.createSelectorQuery() query.select('#webglCanvas').node().exec((res) => { const webgl = res[0].node const requestAnimationFrame = webgl.requestAnimationFrame; // 初始化webgl let render = null if (!render) { render = createRenderer(webgl, 600, 400) } /** * 绘制视频帧到 canvas */ let i = 1 let loop = () => { // 解码结束，停止循环 if (isStop) { return } // 获取解码数据，绘制到 webgl 中 const imageData = videodecoder.getFrameData() if (imageData) { // render 的高宽需要设置为图片的宽高才可以绘制出来 render(new Uint8Array(imageData.data), imageData.width, imageData.height) } // 继续绘制 console.log('绘制帧数：', i++) requestAnimationFrame(loop) } // 启动录制循环 requestAnimationFrame(loop) }) Step 3: 添加音频播放器同步播放音频 完成 Step2 后，webgl 只有视频播放，缺少音频。因此使用 wx.createMediaAudioPlayer()，支持 addAudioSource 传入 videodecoder，保证视频帧渲染音画同步 /** * 创建媒体音频播放器 */ let mediaAudioPlayer = null let addAudio = () => { if (mediaAudioPlayer) return mediaAudioPlayer = wx.createMediaAudioPlayer() mediaAudioPlayer.start().then(() => { // 添加播放器音频来源 mediaAudioPlayer.addAudioSource(videodecoder).then(res => { console.log('add mediaAudioPlayer: ',) }) }) } // render 绘制视频同时添加音频 render(new Uint8Array(imageData.data), imageData.width, imageData.height) addAudio() -- • 录制并导出 webgl 视频 • -- [图片] 示例：录制并一键导出 webgl 视频 适用场景：将动画、编辑过的视频导出视频文件保存 相关 API：wx.createMediaRecorder／MediaRecorder／wx.createMediaContainer／MediaContainer／MediaTrack Step 1: 创建 webgl 画面录制器进行录制 通过 createMediaRecorder 创建页面录制器，并且绑定 webgl（建议离屏状态，效果更好）进行录制 /** * 获取画面录制器 */ getRecorder() { let canvas = this.getMainCanvasNode() let recorder = wx.createMediaRecorder(canvas, { fps: choosedVideoInfo.fps, // 实际视频的 fps videoBitsPerSecond: choosedVideoInfo.bitrate, // 实际视频的 bitrate gop: 12 }) // 监听录制事件 recorder.on("timeupdate", (res) => { console.log('recorder 录制中，当前时间：', res.currentTime) }) recorder.on("stop", (res) => { console.log('recorder停止') this.saveMedia(res.tempFilePath) }) // 开始录制 recorder.start() this.recorder = recorder return recorder }, // 初始化 画面录制器 并进行录制 await this.initRenderer() this.getDecoder().then((decoder) => { let recorder = this.getRecorder() var self = this function loop() { if (self.stopped) { return } let frameData = decoder.getFrameData() if (!frameData) { console.log('没取到帧') setTimeout(() => { loop() }, 1000/60) } else { self.renderFrame(frameData) recorder.requestFrame(() => { console.log('录制帧数：', i++) loop() }) } } loop() }) Step 2: 添加音频合成音视频 1. 通过 createMediaContainer 创建音视频处理容器来合成音视频 2. 通过 MediaContainer.extractDataSource 将视频源分离出视频轨道和音频轨道，将需要的轨道通过 MediaContainer.addTrack 添加到容器中 3. 通过 MediaContainer.export 导出即可获得合成后的视频文件 /** * 将视频和音频合到一起并保存到本地 * @param {*} videoTempFilePath */ saveMedia(videoTempFilePath) { const self = this let choosedFile = this.choosedFile const MediaContainer = wx.createMediaContainer() // webgl的取视频 MediaContainer.extractDataSource({ source: videoTempFilePath, success(res) { MediaContainer.addTrack(res.tracks[0]) // 源视频取音频 MediaContainer.extractDataSource({ source: choosedFile, success(res) { // 拿到音频轨道并加入到容器 res.tracks[0].kind == 'audio' && MediaContainer.addTrack(res.tracks[0]) res.tracks[1].kind == 'audio' && MediaContainer.addTrack(res.tracks[1]) // 合成视频并导出视频文件 MediaContainer.export({ success(res) { // 保存视频到本地 wx.saveVideoToPhotosAlbum({ filePath: res.tempFilePath, success() { wx.showToast({ title: '导出成功', icon: 'success', duration: 2000 }) self.destroy() } }) } }) } }) } }) }, -- •高效图像处理彩蛋 • -- 学会以上这些 Canvas 小技巧，还担心新年的美图美照美视频处理不过来？赶紧码下这个 Canvas 代码包，保证你就是家里最闪耀的靓女靓仔。 预祝大家新的一年 Canvas 在手，红包一直有！
2022-03-24 - 请问一下注销微信赞赏用户后，赞赏用户的小程序里没有信息了但是公众号也邀请不了新的微信账号作为赞赏？
【公众号】: 我有一篇小作文 【浏览器UA】: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x63060012) 【页面链接】: https://mp.weixin.qq.com/cgi-bin/home?t=home/index&lang=zh_CN&token=1797172545 【问题描述】: 请描述问题发生时的操作步骤,并最好能附出现问题的截图
2022-04-12 - scroll-view的scrolltoupper触发问题
- 当前 Bug 的表现（可附上截图） 我将scroll-view快速滑动到了顶部，但是bindscroll的e.detail.scrollTop不为0，而且未触发scrolltoupper [图片] - 预期表现 将scroll-view快速滑动到顶部，bindscroll的e.detail.scrollTop最后值为0，而且触发scrolltoupper - 提供一个最简复现 Demo https://developers.weixin.qq.com/s/lgunpfmW7071
2019-03-30 - 【讨论】所列举的小程序是否违反虚拟支付相关运营规范？
【本次投诉不具有恶意投诉，只是对规则校验和探索。】 小程序开发者文档中第二点“具体运营规范“中第5.13.3指出：“含引导虚拟支付行为，形式包括但不限于引导至app、公众号、h5、个人号、网站、安卓支付完成支付等。”。 鉴于规则中并未明确提出，仅在客服中进行解释“无法进行虚拟支付”并提供支付H5链接的方式是否违反规则。故列举下方两个小程序，若小程序相关工作人员能够看到的话，请给予明确回复，目前这种行为是否违反规则。同时也欢迎各位大佬们留言讨论！ 产品一：二狗单身青年自救平台 该产品在虚拟商品页面进入客服对话后，通过客服账号的自动化回复，提供了超链接直接跳转至虚拟支付的H5页面。 [图片][图片] [图片] 产品2：青藤之恋 该产品亦通过在线客服系统，引导用户前往自家公众号进行账号绑定并完成虚拟支付闭环。而在公众号中的虚拟支付H5页面中（下方图5），指出该页面所购买的虚拟商品用于小程序中，属不属于违反规范？ [图片][图片][图片][图片][图片]
2021-08-17 - 微信流量主结算 开发票 我少开了一分钱 影响结算嘛？
需要重开发票嘛
2020-10-26 - webview跳转小程序的另一种实现
起因 因为公司业务原因，小程序嵌套了大量的h5页面供； 但涉及到支付类的操作必须在小程序原生页面完成； 这就牵扯了webview跳转原生小程序问题； 我们在线上经常遇到用户投诉；在webview页面点去支付没有反应； 代码逻辑上，这个按钮点击应该跳转原生页面才对的； 我们也在相关页面添加了日志，显示已经触发jssdk成功跳转回掉 但是并没有跳转成功 就在前几天我们又接到用户关于跳转失败投诉； 这种收到反馈，搜集微信日志，联系官方的操作过于被动； 每次都要被公司质量管控部门吐槽，有苦难言； 社区也有不少开发者反馈相关问题；但是偶现bug，官方也不易排查 所以除了等待官方解决我们就没有别的办法了么？ 突破 就在我辗转反侧，彻夜难眠的时候，官方文档的一句话吸引了我 [图片] 每次网页加载都能触发bindload事件获取到url 那么我们能不能指定一个url，获取url上的指定的参数，利用小程序原生能力进行跳转呢 实现 wxml 页面添加bindload事件监听 [代码]<web-view src="{{url}}" bindload="load"></web-view> [代码] js 监听url中的变化，检测到指定值执行跳转逻辑 [代码]load: function (e) { // 获取url const src = e.detail.src; const query = src.split('?')[1] || ''; // 检测url参数中是否有指定的参数 const isJump = query.indexOf('word=jump'); // 检测到指定值执行跳转逻辑 if(isJump >= 0){ wx.navigateTo({ url: '/index/index' }) } } [代码] demo 这里写了一个简单的demo https://developers.weixin.qq.com/s/HCPpEzmU7DkV 嵌入了触屏的baidu 当监听到搜索关键词为jump时，会执行原生的跳转 [图片] 兼容性的问题 因为公司小程序基础库是2.9.2，大于等于这个版本的可靠性是经过我们线上验证的 低于2.9.2的基础库版本有待考证，可能需要使用者自测 这里给大家提供一种思路，可以结合场景使用 安卓微信8.0.1，出现webview bindload没有执行的情况，这个api在新版本微信上可能有兼容性问题（20210322）
2021-08-13 - 小程序链接生成与使用规则调整公告
各位开发者： 为确保小程序链接合理使用，自 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 - "lazyCodeLoading": ""配置后,自定义tabBar无法使用？
我配置了"lazyCodeLoading": "requiredComponents"后，自定义的tarbar不生效了，请问这怎么处理
2021-12-01 - 【改进版】如何从零实现上拉无限加载瀑布流组件
前言 之前分享过一篇瀑布流如何实现的文章，经过时间的证明，之前的做法并不好，性能上会有问题，所以还是不投机取巧了，老老实实的实现。 回顾： 通过grid-auto-rows的特性实现 item通过grid-row设置高度 js获取节点高度计算span的值 通过wxs设置css的变量实现修改样式 痛点： grid-auto-rows数值越大，span计算准确度越低。 谷歌浏览器、微信开发工具，如果界面高度超过[代码]1000 * grid-auto-rows[代码]的高度，那么后面的内容就不会显示了，谷歌解释说是为了不过渡消耗性能。 因为性能问题，超过1000的item就不会显示了，全会挤压在最下面，导致页面非常卡，开发工具能直接卡崩溃，手机上还没发现这个问题，之前也忽视了这个问题，后面调试的时候就非常恼火，开发工具跟真机上效果不一致。 为了保证span计算的准确度高，grid-auto-rows一般设置成1-10px，1px准确就等于view的高度，但是超过1000px就卡没了。 实现思路 通过selectAllComponents获取所有的子节点 通过getComputedStyle获取节点的高度 简单的排序算法计算节点位置 设置节点的样式 通过wxs的[代码]getState[代码]储存每屏节点渲染的数据 触发[代码]image[代码]组件的[代码]load[代码]事件重新计算并渲染节点位置 创建组件 需要开启抽象节点 [代码]// waterfall/index.json { "componentGenerics": { "selectable": true } } [代码] 利用wxs响应事件获取页面的节点 [代码]<view class="waterfall" views="{{ views.length }}" data-option="{{ {span} }}" change:views="{{ wxs.init }}" > <!-- 嵌套遍历views二维数组 --> <block wx:for="{{ views }}" wx:key="item" wx:for-index="i" > <selectable class="item view-{{ i }}" wx:for="{{ item }}" wx:key="item" value="{{ item }}" /> </block> </view> [代码] 创建item的x,y边距变量 [代码]--span[代码] [代码].waterfall { --span: 5px; width: 100%; position: relative; .item { width: calc(50% - var(--span)); position: absolute; } } [代码] 创建 [代码]index.wxs[代码]，核心业务代码都写在这里 [代码]// 当views被setData的时候会被触发 module.export = { init: function(newValue, oldValue, ownerInstance, instance) { console.log(newValue, oldValue, ownerInstance, instance) } } [代码] 业务逻辑 步骤一：获取所有节点 [代码]function init(length, oldValue, ownerInstance, instance) { // 加个判断，避免views长度为0时，或者长度为发生变化时也会执行业务代码 // 只有当views被push新的内容才会执行下面的业务 if (!length || length === oldValue) return // index 其实就是views的长度减一，就等于当前的数组下标 var index = length - 1 var views = ownerInstance.selectAllComponents('.view-' + index) console.log(JSON.stringify(views)) } [代码] [图片] [图片] 步骤二：遍历views获取节点的高度 [代码]views.forEach(function(v, k){ var viewStyle = v.getComputedStyle(['width', 'height']) // 获取高度 var height = viewStyle.height console.log(viewStyle) // [WXS Runtime info] {"width":"182.5px", "height":"242px"} }) [代码] 步骤三：计算view的位置信息 [代码]var LH = 0 var RH = 0 views.forEach(function (v, k) { var viewStyle = v.getComputedStyle(['width', 'height']) // 格式化高度，将px去掉 var height = fixUnit(viewStyle.height) var style = {} if (LH <= RH) { style = { left: 0, top: LH + 'px' } LH += height } else if (RH < LH) { style = { right: 0, top: RH + 'px' } RH += height } // 设置view的样式 v.setStyle(style) }) [代码] 此时，页面的节点会根据position自动排列好 [图片] 步骤四：储存LH,RH到局部变量 [代码]function init(length, oldValue, ownerInstance, instance) { if (!length || length === oldValue) return // 获取局部变量 var state = ownerInstance.getState() // 获取当前节点的dataset var dataset = instance.getDataset() var index = length - 1 state.option = dataset.option state.page = length // 创建并生成记录左侧、右侧高度 // 用二维数组来记录 if (!state.heights) { state.heights = [[0, 0]] } // 记录初次渲染时间戳 if (!state.timeouts) { state.timeouts = [] } // 获取时间戳，并且加上3000毫秒，用于后面计算图片loaded完是否超时 state.timeouts[index] = getDate().getTime() + 3000 refreshViews(index, ownerInstance, state) } function refreshViews(index, ownerInstance, state) { var views = ownerInstance.selectAllComponents('.view-' + index) var span = state.option.span var LH = state.heights[index][0] // 左侧 var RH = state.heights[index][1] // 右侧 views.forEach(function (v, k) { var viewStyle = v.getComputedStyle(['width', 'height']) var height = fixUnit(viewStyle.height) var style = {} if (LH <= RH) { style = { left: 0, top: LH + 'px' } LH += height + span[0] } else if (RH < LH) { style = { right: 0, top: RH + 'px' } RH += height + span[0] } v.setStyle(style) // 保存LH, RH的值到state.heights // 当前的LH,RH其实就是下屏开始的坐标 state.heights[index + 1] = [LH, RH] console.log('渲染', index, k) }) } [代码] 步骤五：图片加载完重新计算位置 [代码]// waterfall/index.js Component({ properties: { views: Array, span: { type: Array, value: [10, 10], }, }, methods: { onLoaded({ detail: { width, height, pIndex, index } }) { this.setData({ [`views[${pIndex}][${index}].loaded`]: { width, height }, }) }, }, }) [代码] [代码]function loaded(value, oldValue, ownerInstance, instance) { if (!value.item.loaded || !oldValue) return // 获取局部变量 var state = ownerInstance.getState() // 判断加载是否超时，如果超时则不触发计算渲染事件 // 让该节点保持当前的位置及高度 var timeout = state.timeouts[value.pIndex] if (timeout < getDate().getTime()) { console.log('加载超时') return } var view = instance.selectComponent('.loaded-view') var viewWidth = view.getComputedStyle(['width']).width // 设置虚拟节点card组件里的loaded-view高度 view.setStyle({ height: computedHeight( viewWidth, value.item.loaded.width, value.item.loaded.height ) + 'px', }) // 加个函数防抖，因为图片加载快的情况下，会并发触发事件 // 尽可能的少触发计算，渲染事件，保证性能 ownerInstance.clearTimeout(timer) timer = ownerInstance.setTimeout(function () { // 渲染当前图片加载完后面的所有views // for循环处理当前图片所在的views，以及后面所有的views // 因为有些图片过大，可能会加载5s左右，但是用户如果上拉又加载了 // 一屏内容并且也通过计算渲染了，这时候上一屏又触发了计算渲染 // 那么可能位置信息就会发生变化，导致被遮挡，或者有空白，这时候只能 // 计算触发事件的图片以及后面的图片，保证位置信息是正确的 for (var i = value.pIndex; i < state.page; i++) { console.log('需要渲染', i) refreshViews(i, ownerInstance, state) } }, 300) } [代码] [图片] 优化 瀑布流最好后台会返回图片的尺寸信息，然后初次渲染的时候就计算好节点的长宽比例，这样就不用监听图片loaded事件了，瀑布流组件代码也不会频繁触发计算渲染，性能也好，方法也简单。 [代码]<image src="xxxx" style="{{ wxs.computed({width, height}) }}" /> [代码] [代码]// wxs function computed(option) { // 节点宽度自己去计算 var viewWidth = 375 / 2 var width = option.width var height = option.height return (viewWidth / width) * height + 'px } [代码] 完整代码 打开代码片段https://developers.weixin.qq.com/s/SO5q6UmF7doL，可直接运行。 https://github.com/liziwork/li-ui github 如果打不开，请切换到码云，gitee.com，代码同步更新的，觉得有用动动您的小手点个Star。 扫码查看更多组件 [图片]
2021-03-19 - 如何从零实现上拉无限加载瀑布流组件
代码已优化请查看另外一篇文章 https://developers.weixin.qq.com/community/develop/article/doc/00026c521ece40c2d2db97f7156013 小程序瀑布流组件 前言：为了实现这个组件也花费了些时间，以前也做过瀑布流的功能，不过是利用 js 去 计算图片的高度，然后通过 css 的绝对定位去改变位置。不过这种要提前加载完一个列 表的图片，然后通过排列的算法生成排序的数组。总之就是太复杂了，后来在网上也看到 纯 css 实现，比如 flex 两列布局，columns 等，不做过多的阐述，下面分享下自己项 目中实现的瀑布流过程。 Css Grid 布局 Css3 变量属性 Js 动态修改 css 变量属性 Wxs 小程序脚本语言 Wxml 节点 Api Component 自定义组件 效果图 代码片段 [图片] Css Grid 网格布局实现多列多行布局 [代码]<view class="c-waterfall"> <view wx:for="{{ 10 }}" wx:key="item" class="view-container" > {{ item }} </view> </view> [代码] [代码].c-waterfall { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; grid-auto-rows: 10px; grid-gap: 10px; } .view-container { width: 100%; grid-row: auto / span 20; } [代码] Css3 变量，可以通过[代码]js动态[代码]改变 [代码].c-waterfall { --grid-span: 10; --grid-column: 2; --grid-gap: 10px; --grid-rows: 10px; width: 100%; display: grid; grid-template-columns: repeat(var(--grid-column), 1fr); grid-auto-flow: row dense; grid-auto-rows: var(--grid-rows); grid-gap: var(--grid-gap); } .view-container { width: 100%; grid-row: auto / span var(--grid-span); } [代码] 动态修改 css 变量，实现遍历的节点都有独立的样式 [代码]<view class="c-waterfall" style="{{ style }}"> <view wx:for="{{ 10 }}" wx:key="item" class="view-container style="grid-row: auto / span var(--grid-row-{{ index }})" > {{ item }} </view> </view> [代码] [代码]Page({ data: { span: 20, style: '' }, onReady() { this.setData({ style: '--grid-row-0: 10;--grid-row-1: 10;' // 0-9... }) } }) [代码] 显然通过这种方式去修改emmm，有点不尽人意，当view渲染的时候，通过[代码]index[代码]下标给每个view都设置独立的[代码]grid-row[代码]样式，然后在修改view父级的style，将[代码]--grid-row-xxx[代码]变量写进去实现子类继承，虽然比直接去修改每个view的样式要优雅些，但是一旦views的节点多了，100个、1000个、没上限呢，那这个父级的style真的惨不忍睹。。比如100个view，那么style将会是下面这样，所以需要换个思路还是得单独去设置view的样式。 [代码]const views = [...99].map((v, k) => `--grid-row-${k}: 10;`) console.log(views) // ["--grid-row-0: 10;", "--grid-row-1: 10;", ... "--grid-row-2: 10;", "--grid-row-3: 10;", "--grid-row-98: 10;", "--grid-row-99: 10;"] [代码] 通过Wxs脚本语言来修改view的样式，相比较通过[代码]setData[代码]去修改view的样式，wxs的性能绝对比js强。 WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。 WXS 函数不能作为组件的事件回调。 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。 一般在对wxs的使用场景上大多数用来做[代码]computed[代码]计算，因为在[代码]wxml[代码]模板语法里只能进行简单的三元运算，所以一些复杂的运算、逻辑判断等都会放到wxs里面去处理，然后返回给wxml。 [代码]// index.wxs var format = function(string) { return string + 'px' } module.exports = { format: format } [代码] [代码]<!-- index.wxml --> <wxs src="./index.wxs" module="wxs"></wxs> <view>{{ wxs.format('100') }}</view> <view>{{ wxs.format(span) }}</view> <button bind:tap="modifySpan">修改span的值</button> [代码] [代码]// index.js page({ data: { span }, modifySpan() { this.setData({ span: '200' }) } }) [代码] 通过WXS响应事件来修改视图层[代码]Webview[代码]，跳过逻辑层[代码]App Service[代码]，减少性能开销，比如一些频繁响应的事件监听，滚动条位置，手指滑动位置等，通过wxs来做视图层的修改，大大提升了流畅度。 通过wxs响应原生组件的事件，[代码]image[代码]组件的[代码]bind:load[代码]事件 [代码]<!-- index.html --> <wxs src="./index.wxs" module="wxs"></wxs> <image class="image" src="https://hbimg.huabanimg.com/ccf4a904deaebc25990a47471c61ea1c765694f82633b-71iPZs_/fw/480/format/webp" bind:load="{{ wxs.loadImg }}" /> [代码] [代码]// index.wxs var loadImg = function(event, ownerInstance) { // image组件load加载完返回图片的信息 var image = event.detail // 获取image的实例 var imageDom = ownerInstance.selectComponent('.image') // 设置image的样式 imageDom.setStyle({ height: image.height + 'px', background: 'red' // ... }) // 给image添加class imageDom.addClass('.loaded') // 更多的功能请参考文档 // https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html } module.exports = { loadImg: loadImg } [代码] wxs监听data的值 [代码]<!-- index.html --> <wxs src="./index.wxs" module="wxs"></wxs> <view class="container"> <view change:text="{{ wxs.changeText }}" text="{{ text }}" class="text" data-options="{{ options }}" > {{ text }} </view> <view class="child-node"> this is childNode </view> <!-- 某个自定义组件 --> <test-component class="other-node" /> </view> [代码] [代码]// index.wxs var changeText = function(newValue, oldValue, ownerInstance, instance) { // 获取修改后的text var text = newValue // 获取data-options var options = instance.getDataset() // 获取当前页面的任意节点实例 var childNode = instance.selectComponent('.container .child-node') // 修改childNode样式 childNode.setStyle({ color: 'gree' }) // 获取页面的自定义组件 var otherNode = instance.selectComponent('.container .other-node') // 获取自定义组件内的节点实例 // 通过css选择器 > var otherChildNode = instance.selectComponent('.container .other-node >>> .other-child-node') // 获取自定义组件内部节点的样式 var style = otherChildNode.getComputedStyle(['width', 'height']) // 更多功能看文档 } module.exports = { changeText: changeText } [代码] 通过[代码]createSelectorQuery[代码]获取节点的信息，用来后续计算[代码]grid-row[代码]的参数 [代码]Page({ onReady() { wx.createSelectorQuery(this) .select('.view-container') .fields({size: true}) .exec((res) => { console.log(res) // [{width: 375, height: 390}] }) } }) [代码] 创建waterfall自定义组件 waterfall组件的职责，做成组件有什么好处，不做成组件又有什么好处，以及通过抽象节点来实现多组件复用。 prop的基本设置参数 [代码]Component({ properties: { views: Array, // 需要渲染的瀑布流视图列表 options: { // 瀑布流的参数定义 type: Object, default: { span: 20, // 节点高度比 column: 2, // 显示几列 gap: [10, 10], // xy轴边距，单位px rows: 2, // 网格的高度，单位px }, } } }) [代码] 组件内部默认的样式 [代码].c-waterfall { --grid-span: 10; --grid-column: 2; --grid-gap: 10px; --grid-rows: 10px; width: 100%; display: grid; grid-template-columns: repeat(var(--grid-column), 1fr); grid-auto-flow: row dense; grid-auto-rows: var(--grid-rows); grid-gap: var(--grid-gap); } .view-container { width: 100%; grid-row: auto / span var(--grid-span); } [代码] 组件的骨架 [代码]<wxs src="./index.wxs" module="wx" ></wxs> <!-- 样式承载节点 --> <view class="c-waterfall" change:loadStatus="{{ wx.load }}" loadStatus="{{ childNode }}" data-options="{{ options }}" style="{{ wx.setStyle(options) }}" > <!-- 抽象节点 --> <selectable class="view-container" id="view-{{ index }}" wx:for="{{ views }}" wx:key="item" value="{{ item }}" index="{{ index }}" bind:load="load" > </selectable> </view> [代码] 抽象节点 [代码]{ "component": true, "usingComponents": {}, "componentGenerics": { "selectable": true } } [代码] 抽象节点应该遵循什么 [代码]Component({ properties: { value: Object, // 组件自身需要的数据 index: Number, // 下标值 }, methods: { load(event) { // load节点响应事件 this.triggerEvent('load', { ...this.data, // value必填参数 {width,height} value: { ...event.detail }, }) }, }, }) [代码] 组件wxs响应事件 [代码].c-waterfall[代码]样式承载节点，主要是设置options传入的参数 [代码] var _getGap = function (gaps) { return gaps .map(function (v) { return v + 'px' }) .join(' ') } var setStyle = function (options) { if (!options) return var style = [ '--grid-span: ' + options.span || 10, '--grid-column: ' + options.column || 2, '--grid-gap: ' + _getGap(options.gap || [10, 10]), '--grid-rows: ' + (options.rows || 10) + 'px', ] return style.join(';') } [代码] 获取瀑布流样式承载节点实例 [代码] var _getWaterfall = function (dom) { var waterfallDom = dom.selectComponent('.c-waterfall') return { dom: waterfallDom, options: waterfallDom.getDataset().options, } } [代码] 获取事件触发的节点实例 [代码] var _getView = function (index, dom) { var viewDom = dom.selectComponent('.c-waterfall >>> #view-' + index) return { dom: viewDom, style: viewDom.getComputedStyle(['width', 'height']), } } [代码] 获取虚拟节点自定义组件load节点实例，初始化渲染时，节点是未知的，比如image组件，图片的宽高是未知的，需要等到image加载完成才会知道宽高，该节点用于存放异步视图展示，然后通过事件回调计算出节点高度。 [代码] var _getLoadView = function (index, dom) { return { dom: dom.selectComponent( '.c-waterfall >>> #view-' + index + '>>>.waterfall-load-node' ), } } [代码] 获取虚拟节点自定义组件other节点实例，初始化渲染就存在节点，比如一些文字就放在该节点，具体由组件的创造者去自定义。 [代码] var _getOtherView = function (index, dom) { var other = dom.selectComponent( '.c-waterfall >>> #view-' + index + '>>> .waterfall-load-other' ) return { dom: other, style: other.getComputedStyle(['height', 'width']), } } [代码] 已知瀑布流样式承载节点的宽度，等load节点异步视图回调时，获取到load节点的实际高度，比如一张400*800的图片，如果要显示在一个宽度180px的视图里，注意：[代码]image[代码]组件会有默认高度240px，或者用户自己设置了高度。如果要实现瀑布流，还是需要通过计算图片的宽高比例得到图片在视图中宽高，然后再通过计算grid布局的span值实现填充。 [代码] var fix = function (string) { if (typeof string === 'number') return string return Number(string.replace('px', '')) } var computedContainerHeight = function (node, view) { var vW = fix(view.width) var nW = fix(node.width) var nH = fix(node.height) var scale = nW / vW return { width: vW, height: nH / scale, } } [代码] 通过公式计算span的值，这个公式也是花了我不少时间去研究的，对grid布局使用也不多，很多潜在用法并不知道，所以通过大量的随机数据对比查找规律所在。[代码]gap为数组[x, y][代码]，我们要取y计算，已知gap、rows求视图中节点高度[代码](gap[y] + rows) * span - gap[y] = height[代码]，有了求height的公式，那么求span就简单了，[代码](height + gap[y]) / (gap[y] + rows) = span[代码]，最终视图里的高度会跟计算出来的结果几个像素的误差，因为[代码]grid-row[代码]设置span不能为小数，只能为整数，而我们瀑布流的高度是未知的，通过计算有多位浮点数，所以只能向上取整了导致有几个像素的误差。 [代码] var computedSpan = function (height, options) { var rows = options.rows var gap = options.gap[1] var span = Math.ceil((height + gap) / (gap + rows)) return span } [代码] 最后我们能得到[代码]span[代码]的值了，只需要将[代码]load完成的视图修改样式即可[代码] [代码] var load = function (node, oldNode, dom) { if (!node.value) return false var index = node.index var waterfall = _getWaterfall(dom) // 获取虚拟组件，通过index下标确认是哪个，获取宽度高度 var view = _getView(index, dom) var otherView = _getOtherView(index, dom) var otherViewHeight = fix(otherView.style.height) // 计算虚拟组件的高度，其实就是计算图片在当前视图节点里的宽高比例 // image组件的mode="widthFix"也是这样计算的额 var virtualStyle = computedContainerHeight(node.value, view.style) // span取值，此处计算的高度应该是整个虚拟节点视图的高度 // load事件回调里，我们只传了load视图节点的宽高 // 后续通过selectComponent获取到了other视图节点的高度 var span = computedSpan( otherViewHeight + virtualStyle.height, waterfall.options ) // 设置虚拟组件的样式 view.dom.setStyle({ 'grid-row': 'auto / span ' + span, }) // 获取重新渲染后的虚拟组件高度 var viewHeight = view.dom.getComputedStyle(['width', 'height']) viewHeight = fix(viewHeight.height) // 上面说了因为浮点数的计算会导致有几个像素的误差 // 为了视图美观，我们将load视图节点的高度设置成虚拟视图节点的总高度减去静态节点的高度 var loadView = _getLoadView(index, dom) loadView.dom.setStyle({ width: virtualStyle.width + 'px', height: parseInt(viewHeight - otherViewHeight) + 'px', opacity: 1, visibility: 'visible', }) return false } module.exports = { load: load, setStyle: setStyle, } [代码] 抽离成虚拟节点自定义组件的利弊 利： 符合观察者模式的设计模式 降低代码耦合度 扩展性强 代码清晰 弊： 节点增加，如果视图节点过多会造成小程序性能警告 样式编写不便捷，需要写过多的判断代码去实现外部样式覆盖 wxs只能监听原生组件的事件，所以image的load事件触发时本可以直接去修改页面视图节点样式，不需要传回给父组件，然后父组件setData下标，wxs监听事件触发在去修改视图样式，多了一次setData的开销。 合： 时间有限没有扩展样式覆盖了，可以开启自定义组件的外部样式引入 节点过多的问题，在我自己电脑上，开发工具插入100个组件时，出现了卡顿，样式错乱，真机上目前还没发现上限。 后续想实现长列表功能，有回收机制，这样视图内的节点有限了，降低了性能开销，因为之前版本的长列表组件是通过[代码]createSelectorQuery[代码]获取节点信息，然后记录高度，通过创建[代码]createIntersectionObserver[代码]监听视图节点是否在视图来判断是否渲染。但是瀑布流有异步视图，初次渲染的高度跟异步加载完的高度是不一样，所以创建监听事件高度会不准确，若等到load完再创建监听事件，父级容器的高度又要经过计算，因为子节点会去填充空白区域实现瀑布流，目前项目中为了避免节点过大造成性能警告，加了item的个数限制，如果超过100或者1000个就清空数组，类似分页的功能。不过上面总结的思路可以去试试。 等把功能完善了，发布npm依赖包安装。 后续有时间会将项目里比较实用的组件抽离出来。。 自定义tabbar 自定义navbar 长列表 下拉刷新 上拉加载 购物车sku … Demo page调用页面 [代码]<view class="container"> <waterfall wx:if="{{ _type === 0 }}" generic:selectable="test-view" views="{{ views }}" options="{{ options }}" /> <waterfall wx:else generic:selectable="image-view" views="{{ images }}" options="{{ options }}" /> </view> <view class="btns"> <button bind:tap="loadView">模拟节点</button> <button bind:tap="loadImage">远程图片</button> </view> [代码] [代码]Page({ data: { views: [], loading: false, options: { span: 30, column: 2, gap: [10, 10], rows: 2, }, images: [], _page: 1, _type: 0, }, onLoad() { // 生成随机数据 // this.generateViews() // this.getHuaBanList() }, loadView() { this.data._page = 1 this.setData({ images: [], _type: 0 }) this.generateViews() }, loadImage() { this.data._type = 1 this.setData({ views: [], _type: 1 }) this.getHuaBanList() }, getHuaBanList() { let { images, _page } = this.data wx.request({ url: `https://huaban.com/search/?q=随机&page=${_page}&per_page=10&wfl=1`, header: { accept: 'application/json', 'accept-language': 'zh-CN,zh;q=0.9', 'x-request': 'JSON', 'x-requested-with': 'XMLHttpRequest', }, success: (res) => { res.data.pins.map((v) => { images.push({ url: `https://hbimg.huabanimg.com/${v.file.key}_/fw/480/format/webp`, title: v.raw_text, }) }) this.setData({ images, _page: ++_page }) wx.hideLoading() }, }) }, generateViews() { const { views } = this.data for (let i = 0; i < 10; i++) { views.push({ width: this._randomNum(150, 500) + 'px', height: this._randomNum(200, 600) + 'px', }) } this.setData({ views, }) }, _randomNum(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(String(Math.random() * minNum + 1), 10) break case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10) break default: return 0 break } }, onReachBottom() { let { loading, _type } = this.data if (!loading) { wx.showLoading({ title: 'loading...', }) loading = true setTimeout(() => { _type === 0 ? this.generateViews() : this.getHuaBanList() wx.hideLoading() loading = false }, 1000) } }, }) [代码] [代码]{ "usingComponents": { "waterfall": "/components/waterfall/index", "test-view": "/components/test-view/index", "image-view": "/components/image-view/index" } } [代码] 模拟load异步的自定义组件 [代码]<view class="c-test-view"> <view class="waterfall-load-node"> {{value.width}}*{{value.height}} </view> <view class="waterfall-load-other">模拟加载图片</view> </view> [代码] [代码]Component({ properties: { value: Object, index: Number, }, lifetimes: { ready() { const { index } = this.data const timer = 1000 + 300 * String(index).charAt(index.length - 1) setTimeout(() => this.load(), timer) }, }, methods: { load() { this.triggerEvent('load', { ...this.data, }) }, }, }) [代码] [代码].c-test-view { width: 100%; height: 100%; display: flex; flex-flow: column; justify-content: center; align-items: center; background: white; } .c-test-view .waterfall-load-node { height: 50%; flex-grow: 1; transition: all 0.3s; display: inline-flex; flex-flow: column; justify-content: center; align-items: center; background: #eeeeee; width: 100%; opacity: 0; } .c-test-view .waterfall-load-other { width: 100%; height: 80rpx; display: inline-flex; justify-content: center; align-items: center; background: cornflowerblue; color: white; } [代码] 随机获取花瓣网图片的自定义组件 [代码]<view class="c-image-view"> <view class="waterfall-load-node"> <image class="load-image" src="{{ value.url }}" bind:load="load" /> </view> <view class="waterfall-load-other">{{ value.title }}</view> </view> [代码] [代码]Component({ properties: { value: Object, index: Number, }, lifetimes: { ready() {}, }, methods: { load(event) { this.triggerEvent('load', { ...this.data, value: { ...event.detail }, }) }, }, }) [代码] [代码].c-image-view { width: 100%; display: inline-flex; flex-flow: column; background: white; border-radius: 10px; overflow: hidden; height: 100%; } .c-image-view .waterfall-load-node { width: 100%; height: 50%; display: inline-flex; flex-grow: 1; background: gainsboro; transition: opacity 0.3s; opacity: 0; overflow: hidden; visibility: hidden; } .c-image-view .waterfall-load-node .load-image { width: 100%; height: 100%; overflow: hidden; } .c-image-view .waterfall-load-other { font-size: 30rpx; background: white; min-height: 60rpx; padding: 10px; display: flex; align-items: center; } [代码] 代码片段 https://developers.weixin.qq.com/s/Q02FETmW7ind
2021-03-19 - rich-text 单词换行被折断，设置word-wrap:break-word;无效 求解决方法？
[图片]
2021-12-29 - 如何实现圣诞节星星飘落效果
圣诞节快到啦～🎄🎄🎄🎄咱们也试着做做小程序版本的星星✨飘落效果吧～ 先来个效果图： [图片] 484听起来很叼，看起来也就那样。 来咱们上手开始撸 页面内容wxml，先简单切个图吧。 [代码]<view class="container"> <image src="https://qiniu-image.qtshe.com/merry_001.jpg" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_02.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_03.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_04.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_05.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_06.jpg" alt="" mode="widthFix"/> <image src="https://qiniu-image.qtshe.com/merry_07.jpg" alt="" mode="widthFix"/> </view> <canvas canvas-id="myCanvas" /> [代码] 页面样式wxss，因为切片用的不太熟练，图片之间有个2rpx的空隙。 [代码].container { height: 100%; box-sizing: border-box; min-height: 100vh; } image { width: 100%; display: block; margin-top: -2rpx; //不会切图造的孽 } canvas { width: 100%; min-height:100vh; position: fixed; top: 0; z-index: 888; } [代码] 重点JS： [代码]//获取应用实例 const app = getApp() // 存储所有的星星 const stars = [] // 下落的加速度 const G = 0.01 const stime = 60 // 速度上限，避免速度过快 const SPEED_LIMIT_X = 1 const SPEED_LIMIT_Y = 1 const W = wx.getSystemInfoSync().windowWidth const H = wx.getSystemInfoSync().windowHeight var starImage = '' //星星素材 wx.getImageInfo({ src: 'https://qiniu-image.qtshe.com/WechatIMG470.png', success: (res)=> { starImage = res.path } }) Page({ onLoad() { this.setAudioPlay() }, onShow() { this.createStar() }, createStar() { let starCount = 350 //星星总的数量 let starNum = 0 //当前生成星星数 let deltaTime = 0 let ctx = wx.createCanvasContext('myCanvas') let requestAnimationFrame = (() => { return (callback) => { setTimeout(callback, 1000 / stime) } })() starLoop() function starLoop() { requestAnimationFrame(starLoop) ctx.clearRect(0, 0, W, H) deltaTime = 20 //每次增加的星星数量 starNum += deltaTime if (starNum > starCount) { stars.push( new Star(Math.random() * W, 0, Math.random() * 5 + 5) ); starNum %= starCount } stars.map((s, i) => { //重复绘制 s.update() s.draw() if (s.y >= H) { //大于屏幕高度的就从数组里去掉 stars.splice(i, 1) } }) ctx.draw() } function Star(x, y, radius) { this.x = x this.y = y this.sx = 0 this.sy = 0 this.deg = 0 this.radius = radius this.ax = Math.random() < 0.5 ? 0.005 : -0.005 } Star.prototype.update = function() { const deltaDeg = Math.random() * 0.6 + 0.2 this.sx += this.ax if (this.sx >= SPEED_LIMIT_X || this.sx <= -SPEED_LIMIT_X) { this.ax *= -1 } if (this.sy < SPEED_LIMIT_Y) { this.sy += G } this.deg += deltaDeg this.x += this.sx this.y += this.sy } Star.prototype.draw = function() { const radius = this.radius ctx.save() ctx.translate(this.x, this.y) ctx.rotate(this.deg * Math.PI / 180) ctx.drawImage(starImage, -radius, -radius * 1.8, radius * 2, radius * 2) ctx.restore() } }, setAudioPlay() { let adctx = wx.createInnerAudioContext() adctx.autoplay = true adctx.loop = true adctx.src = 'https://dn-qtshe.qbox.me/Jingle%20Bells.mp3' adctx.onPlay(() => { console.log('开始播放') adctx.play() }) } }) [代码] 以上只是简单实现了一个星星飘落的效果，预览的时候需要开启不校验合法域名哦～ 目前还有更优的h5版本，使用Three.js实现的，在小程序内使用Three.js对于我来说有点打脑壳，先把效果分享出来吧。 h5版本，手机看效果最佳 h5源码可直接右键查看：https://qiniu-web.qtshe.com/merryChrimas.html
2023-12-07 - 在小程序上使用CSS3实现雪花特效代码片段
[视频] 雪花效果如上视频小程序的头部样式 使用纯css3构建雪花动画。我这里把动画从小程序里扒拉出来 需要的小伙伴自行下载在开发者工具中打开即可。 代码片段：https://developers.weixin.qq.com/s/KNYDthmf7uu8
2021-10-24 - 【圣诞节特供】雪花飘落组件
圣诞节到啦！ 在写页面的时候想到以前会出现的雪花飘落 用超简单的方法实现了 [代码] [代码] [代码] 代码片段： https://developers.weixin.qq.com/s/2AUMkEmC7cdi[代码] 动画的原理是CSS中的 [代码] [代码] [代码]view { [代码][代码] [代码][代码]transition: [代码][代码]all[代码] [代码]5[代码][代码]s ease-in;[代码] [代码]}[代码] [代码] [代码] 雪花数量以及出现实际的实现的方法是 在data里面放一个数组，用于存雪花的x轴偏移量。 用setTimeOut的方法递归实现 1~2 秒雪花的增量 [代码] let snowInterval = e => {[代码][代码] [代码][代码]this[代码][代码].data.snowArray.push(Math.random() * 750);[代码][代码] [代码][代码]this[代码][代码].setData({ snowOffset: [代码][代码]this[代码][代码].data.snowArray.length - 2, snowArray: [代码][代码]this[代码][代码].data.snowArray });[代码][代码] [代码][代码]setTimeout(snowInterval, Math.random() * 1000 + 300);[代码][代码] [代码][代码]};[代码][代码] [代码][代码]snowInterval();[代码]再以雪花数组的长度以及当前雪花的键名 定义雪花的不同周期（出现→ 飘落 →沉底 → 消失） [代码] [代码] [代码]<[代码][代码]view[代码] [代码] wx:for[代码][代码]=[代码][代码]"{{snowArray}}"[代码] [代码] wx:if="{{index + 30 > snowOffset}}" [代码] [代码] wx:key="index" style="left: {{item}}rpx; {{index < [代码][代码]snowOffset[代码] [代码]? 'top: 100%' : ''}}" [代码] [代码] class[代码][代码]=[代码][代码]"dot"[代码] [代码]></[代码][代码]view[代码][代码]>[代码] [代码] [代码] 肥肠简单的实现方法，想想以前用网页去实现花费好多时间（ 不过那个时候的版本会随着鼠标飘动 ）
2019-12-16 - SVGA 动画库现已支持在微信小程序中使用
SVGA 是一款轻量级的动画导出及播放方案（ https://svga.io ），微信小程序在最近的更新中，增强了 Canvas 组件的能力，为此，我们在 SVGAPlayer-Web 的基础上，建立了 mp 分支，用于支持 SVGA 在微信小程序上的播放。 如需使用，可点击右方链接查看 README。 https://github.com/svga/svgaplayer-weapp
2021-06-11 - 关闭微信小程序直播组件，直播中的分享和复制链接
1、取消复制链接和分享，微信小程序里面可以直接用，但是这个代码必须在发布后，（复制链接）才能看到被屏蔽的效果，开发版不行，这个也是测试后才发现的，没人提到这一块。走了一些弯路 onLoad: function() { wx.hideShareMenu(); }, 正式版效果图 [图片] 2、小程序的直播组件，在创建直播的时候，设置 【关闭分享】。这样直播过程中，就可以实现上面的功能。禁止分享和复制链接 备注。留给需要的人。
2021-07-08 - 用 HTM 实现小程序 SVG
写在前面 今天你可以在小程序中使用 Cax 引擎高性能渲染 SVG！ SVG 是可缩放矢量图形(Scalable Vector Graphics)，基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。SVG 的优势有很多: SVG 使用 XML 格式定义图形，可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的，且放大图片质量不下降 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性、可编程星更强 SVG 完全支持 DOM 编程，具有交互性和动态性 而支持上面这些优秀特性的前提是 - 需要支持 SVG 标签。比如在小程序中直接写： [代码]<svg width="300" height="150"> <rect bindtap="tapHandler" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"> </rect> </svg> [代码] 上面定义了 SVG 的结构、样式和点击行为。但是小程序目前不支持 SVG 标签，仅仅支持加载 SVG 之后 作为 background-image 进行展示，如 [代码]background-image: url("data:image/svg+xml.......)[代码]，或者 base64 后作为 background-image 的 url。 直接看在小程序种使用案例: [代码]import { html, renderSVG } from '../../cax/cax' Page({ onLoad: function () { renderSVG(html` <svg width="300" height="220"> <rect bindtap="tapHandler" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(100 50) rotate(45 50 50)"> </rect> </svg>`, 'svg-a', this) }, tapHandler: function () { console.log('你点击了 rect') } }) [代码] 其中的 svg-a 对应着 wxml 里 cax-element 的 id: [代码]<view class="container"> <cax-element id="svg-c"></cax-element> </view> [代码] 声明组件依赖 [代码]{ "usingComponents": { "cax-element":"../../cax/index" } } [代码] 小程序中显示效果: [图片] 可以使用 [代码]width[代码]，[代码]height[代码]，[代码]bounds-x[代码] 和 [代码]bounds-y[代码] 设置绑定事件的范围，比如: [代码]<path width="100" height="100" bounds-x="50" bounds-y="50" /> [代码] 需要注意的是，元素的事件触发的包围盒受自身或者父节点的 transform 影响，所以不是绝对坐标的 rect 触发区域。 再来一个复杂的例子，用 SVG 绘制 Omi 的 logo: [代码]renderSVG(html` <svg width="300" height="220"> <g transform="translate(50,10) scale(0.2 0.2)"> <circle fill="#07C160" cx="512" cy="512" r="512"/> <polygon fill="white" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/> <circle fill="white" cx="839.36" cy="242.47" r="50"/> </g> </svg>`, 'svg-a', this) [代码] 小程序种显示效果: [图片] 在 omip 和 mps 当中使用 cax 渲染 svg，你可以不用使用 htm。比如在 omip 中实现上面两个例子： [代码] renderSVG( <svg width="300" height="220"> <rect bindtap="tapHandler" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(100 50) rotate(45 50 50)"> </rect> </svg>, 'svg-a', this.$scope) [代码] [代码]renderSVG( <svg width="300" height="220"> <g transform="translate(50,10) scale(0.2 0.2)"> <circle fill="#07C160" cx="512" cy="512" r="512"/> <polygon fill="white" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/> <circle fill="white" cx="839.36" cy="242.47" r="50"/> </g> </svg>, 'svg-a', this.$scope) [代码] 需要注意的是在 omip 中传递的最后一个参数不是 [代码]this[代码]，而是 [代码]this.$scope[代码]。 在 mps 中，更加彻底，你可以单独创建 svg 文件，通过 import 导入。 [代码]//注意这里不能写 test.svg，因为 mps 会把 test.svg 编译成 test.js import testSVG from '../../svg/test' import { renderSVG } from '../../cax/cax' Page({ tapHandler: function(){ this.pause = !this.pause }, onLoad: function () { renderSVG(testSVG, 'svg-a', this) } }) [代码] 比如 test.svg ： [代码]<svg width="300" height="300"> <rect bindtap="tapHandler" x="0" y="0" height="110" width="110" style="stroke:#ff0000; fill: #0000ff" /> </svg> [代码] 会被 mps 编译成： [代码]const h = (type, props, ...children) => ({ type, props, children }); export default h( "svg", { width: "300", height: "300" }, h("rect", { bindtap: "tapHandler", x: "0", y: "0", height: "110", width: "110", style: "stroke:#ff0000; fill: #0000ff" }) ); [代码] 所以总结一下: 你可以在 mps 中直接使用 import 的 SVG 文件的方式使用 SVG 你可以直接在 omip 中使用 JSX 的使用 SVG 你可以直接在原生小程序当中使用 htm 的方式使用 SVG 这就完了？远没有，看 cax 在小程序中的这个例子： [图片] 详细代码: [代码]renderSVG(html` <svg width="300" height="200"> <path d="M 256,213 C 245,181 206,187 234,262 147,181 169,71.2 233,18 220,56 235,81 283,88 285,78.7 286,69.3 288,60 289,61.3 290,62.7 291,64 291,64 297,63 300,63 303,63 309,64 309,64 310,62.7 311,61.3 312,60 314,69.3 315,78.7 317,88 365,82 380,56 367,18 431,71 453,181 366,262 394,187 356,181 344,213 328,185 309,184 300,284 291,184 272,185 256,213 Z" style="stroke:#ff0000; fill: black"> <animate dur="32s" repeatCount="indefinite" attributeName="d" values="......太长，这里省略 paths........" /> </path> </svg>`, 'svg-c', this) [代码] 再试试著名的 SVG 老虎: [图片] path 太长，就不贴代码了，可以点击这里查看 pasiton 标签 [代码]import { html, renderSVG } from '../../cax/cax' Page({ onLoad: function () { const svg = renderSVG(html` <svg width="200" height="200"> <pasition duration="200" bindtap=${this.changePath} width="100" height="100" from="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" to="M49.1 23.5H2.1C0.9 23.5 0 24.5 0 25.6s0.9 2.1 2.1 2.1h47c1.1 0 2.1-0.9 2.1-2.1C51.2 24.5 50.3 23.5 49.1 23.5zM49.1 7.8H2.1C0.9 7.8 0 8.8 0 9.9c0 1.1 0.9 2.1 2.1 2.1h47c1.1 0 2.1-0.9 2.1-2.1C51.2 8.8 50.3 7.8 49.1 7.8zM49.1 39.2H2.1C0.9 39.2 0 40.1 0 41.3s0.9 2.1 2.1 2.1h47c1.1 0 2.1-0.9 2.1-2.1S50.3 39.2 49.1 39.2z" from-stroke="red" to-stroke="green" from-fill="blue" to-fill="red" stroke-width="2" /> </svg>`, 'svg-c', this) this.pasitionElement = svg.children[0] }, changePath: function () { this.pasitionElement.toggle() } }) [代码] pasiton 提供了两个 path 和 颜色 相互切换的能力，最常见的场景比如 menu 按钮和 close 按钮点击后 path 的变形。 举个例子，看颜色和 path 同时变化： [图片] 线性运动 这里举一个在 mps 中使用 SVG 的案例: [代码]import { renderSVG, To } from '../../cax/cax' Page({ tapHandler: function(){ this.pause = !this.pause }, onLoad: function () { const svg = renderSVG(html` <svg width="300" height="300"> <rect bindtap="tapHandler" x="0" y="0" height="110" width="110" style="stroke:#ff0000; fill: #0000ff" /> </svg>` , 'svg-a', this) const rect = svg.children[0] rect.originX = rect.width/2 rect.originY = rect.height/2 rect.x = svg.stage.width/2 rect.y = svg.stage.height/2 this.pause = false this.interval = setInterval(()=>{ if(!this.pause){ rect.rotation++ svg.stage.update() } },15) }) [代码] 效果如下: [图片] 组合运动 [代码]import { renderSVG, To } from '../../cax/cax' Page({ onLoad: function () { const svg = renderSVG(html` <svg width="300" height="300"> <rect bindtap="tapHandler" x="0" y="0" height="110" width="110" style="stroke:#ff0000; fill: #0000ff" /> </svg>` ,'svg-a', this) const rect = svg.children[0] rect.originX = rect.width/2 rect.originY = rect.height rect.x = svg.stage.width/2 rect.y = svg.stage.height/2 var sineInOut = To.easing.sinusoidalInOut To.get(rect) .to().scaleY(0.8, 450, sineInOut).skewX(20, 900, sineInOut) .wait(900) .cycle().start() To.get(rect) .wait(450) .to().scaleY(1, 450, sineInOut) .wait(900) .cycle().start() To.get(rect) .wait(900) .to().scaleY(0.8, 450, sineInOut).skewX(-20, 900, sineInOut) .cycle() .start() To.get(rect) .wait(1350) .to().scaleY(1, 450, sineInOut) .cycle() .start() setInterval(() => { rect.stage.update() }, 16) } }) [代码] 效果如下: [图片] 其他 vscode 安装 lit-html 插件使 htm 的 html[代码]内容[代码] 高亮 还希望小程序 SVG 提供什么功能可以开 issues告诉我们，评估后通过，我们去实现！ Cax Github 参考文档
01-04 - 【小程序代码自查】【内存泄露】注册组件对象使用闭包函数导致
背景 经过上一次排查了内存泄露之后，内存泄漏的问题好了很多。但是最近有用户反馈还是会有内存告警的问题，所以有可能会存在内存泄露，经过排查，确实存在内存泄露，但是内存泄露的原因不明，并非是在延时调用页面实例对象。 如何确定问题 使用方法 二分debugger + 在内存中查找对象最短引用路径 具体操作 找到页面开始调用的生命周期（onload），将生命周期内部调用的方法全部注释。查看页面实例是否会被回收。 如果没被回收，则注释下一个生命周期执行的代码。 如果页面实例被回收，则将生命周期内部调用的方法注释一半。 重复123 直到最小的一行代码。 通过二分debugger法，查找到是调用了this.setData({a: “xxxxx”})，才会导致内存泄露的。 所以我猜测是因为有组件没被回收，才导致的页面实例没被回收，因为组件会存在对页面实例的引用。 查找setData对应的属性值，找到影响的组件，看下是否有监听页面属性的操作，如果有监听的操作，查看监听操作内部做了什么逻辑，然后再通过二分debugger，找到真正影响的代码。比如下图的示例代码中的： [代码]this.cData[onlyKey] = new Move(this)[代码] 按道理，页面被销毁，自己的cData 属性也会被销毁才对，就算存在循环应用也没什么问题。在不了解底层逻辑情况下，我通过查找组件实例的最短引用路径，发现组件实例存在于底层逻辑的闭包函数中。如下实例的： [代码]// 处理原有的自定义属性，等组件创建再把自定义属性放到组件上 function handleCompObj(compObj){ // xxxxxxxx } [代码] 最终发现底层逻辑有对于针对自定义属性做缓存，相当于全部组件实例都共用一份自定义属性。 下面是示例代码： [代码]// components/comp.js console.log("comp"); class Move{ constructor(config){ this.config = config } } let numId = 0 // 组件对象类 class Comp { cData = {} constructor(){ } created = function(){ this.key = "comp" + numId++ // 创建唯一key const onlyKey = "onlyKey" + new Date() // 用组件自定义属性存储 一个带有组件实例的对象，存在循环引用 this.cData[onlyKey] = new Move(this) console.log("this.cData", this.cData) } /** * 组件的初始数据 */ data = { } } const compObj = new Comp() console.log("compObj", compObj); // 处理原有的自定义属性，等组件创建再把自定义属性放到组件上 function handleCompObj(compObj){ // 自定义属性 const customPropties = { } const compPropertyKeys= [ "externalClasses", "behaviors", "relations", "data", "properties", "methods", "lifetimes", "pageLifetimes", "definitionFilter", "options", "setData", "observers", ] Object.keys(compObj).map((key)=>{ // 固定属性排除 if(compPropertyKeys.includes(key)){return} customPropties[key] = compObj[key] }) // 原有组件创建生命周期 const originCreated = compObj.created function newCreated(){ // 组件创建的时候，将自定义属性赋给组件实例对象 Object.assign(this, customPropties) // 运行原有的组件逻辑 originCreated.call(this) } compObj.created = newCreated return compObj } // 处理组件类的实例，给组件增加自定义属性 const newCompObj = handleCompObj(compObj) // 注册组件 Component(newCompObj) [代码] 解决办法 在给组件增加自定义属性的时候，如果是对象，则需要深复制。
2021-09-02 - 云函数云端安装依赖，无论是依赖包还是云函数自己的package.json里的install都不执行？
使用中发现依赖包package.json里的install根本没执行，云函数自己的package.json里的install也不执行，就算是写"exit 1"云函数也是部署成功的（本地npm install会直接报错）。这种和本地安装的差异，是刻意如此设计还是bug?
2021-09-04 - textara 单词换行被折断，同样的样式，在view中单词正常显示
textarea bug： 在微信开发工具、安卓环境下，textarea 中输入超过1行英文，行末尾的一个英文单词断在两行显示； 同样的样式，在view中，英文单词没有断行显示。 希望尽快给出答复。 .writing_textarea { width: 100%; box-sizing: border-box; word-break: keep-all; word-wrap: break-word; white-space: pre-wrap; } 微信开发工具中的截图： [图片]
2021-06-02 - 新富文本组件
mp-html小程序富文本组件 news欢迎加入 QQ 交流群：699734691示例小程序添加获取组件包功能[图片] 功能介绍 支持在多个平台使用 支持丰富的标签（包括 table、video、svg 等） 支持丰富的事件效果（自动预览图片、链接处理等） 支持锚点跳转、长按复制等丰富功能 支持大部分 html 实体 丰富的插件（关键词搜索、内容编辑等） 效率高、容错性强且轻量化使用方法1. npm 方式 在项目根目录下执行 npm install mp-html 开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件中添加 <mp-html content="{{html}}" /> 在需要使用页面的 js 文件中添加 Page({ onLoad() { this.setData({ html: 'Hello World!' }) } }) 2. 源码方式 将源码中的代码包（dist/mp-weixin）拷贝到 components 目录下，更名为 mp-html 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "/components/mp-html/index" } } 后续步骤同上 获取github 链接：https://github.com/jin-yufeng/mp-html npm 链接：https://www.npmjs.com/package/mp-html 文档链接：https://jin-yufeng.gitee.io/mp-html
2022-03-04 - 小程序canvas绘制海报
2020年第一篇文章，年初忙着复习刷题一直没空去写东西，书看的越多感觉越技不如人，始终徘徊在小菜鸡的行列中，最近项目里正好有一个canvas的业务，突然又燃起了我一个UI前端的火种，记下了踩坑和思考🤔。 踩坑💥 问题1:为什么在canvas上画图片模糊？ 在canvas上绘制图片/文字的时候，我们设定canvas：375*667的宽高，会发现绘制出来的图片很模糊，感觉像是一张分辨率很差的图片，文字看起来也会有叠影。 [图片] 注意：物理像素是指手机屏幕上显示的最小单元，而设备独立像素（逻辑像素）计算机设备中的一个点，css 中设置的像素指的就是该像素。 原因：在前端开发中我们知道一个属性叫[代码]devicePixelRatio（设备像素比）[代码]，该属性决定了在渲染界面时会用几个（通常是2个）物理像素来渲染一个设备独立像素。 举个例，一张100*100像素大小的图片，在retina屏幕下，会用2个像素点去渲染图片的一个像素点，相当于图片放大了一倍，因此图片会变得模糊，这也是1px在retina 屏上变粗的原因。 [图片] 解决： 将canvas-width和canvas-height都放大2倍，在通过style将canvas的显示width,height缩小2 倍. 例如： [代码]<canvas width="320" height="180" style="width:160px;height:90px;"></canvas> [代码] 问题2:如何处理px和rpx的转换？ rpx是小程序里特有的尺寸单位，可以根据屏幕的宽度进行自适应，而在iphone6/iphonex上，1rpx等于不同的px。所以很可能会导致在不同手机下，你的canvas展示不一致。 在绘制海报的之前，我们拿到的设计稿一般都是基于iphone6的2倍图。而且从上一个问题的解决，我们知道canvas的大小也是2倍的，所以我们可以直接量取2倍图的设计稿直接绘制canvas，而尺寸需要注意一下rpxtoPx. [代码]/** * * @param {*} rpx * @param {*} int //是否变成整数 factor => 0.5 //iphone6 pixelRatio => 2 像素比 */ toPx(rpx, int) { if (int) { return parseInt(rpx * this.factor * this.pixelRatio) } return rpx * this.factor * this.pixelRatio } [代码] 问题3:关于canvasContext.measureText计算纯数字的时候手机上为0 在小程序中提供[代码]this.ctx.measureText(text).width[代码]去计算文本的长度，但是如果你全[代码]数字[代码] 的话，你会发现该API永远都计算成0.所以，最后采用模拟measureText方法去计算文本长度。 [代码]measureText(text, fontSize = 10) { text = String(text) text = text.split('') let width = 0 text.forEach(function(item) { if (/[a-zA-Z]/.test(item)) { width += 7 } else if (/[0-9]/.test(item)) { width += 5.5 } else if (/\./.test(item)) { width += 2.7 } else if (/-/.test(item)) { width += 3.25 } else if (/[\u4e00-\u9fa5]/.test(item)) { // 中文匹配 width += 10 } else if (/\(|\)/.test(item)) { width += 3.73 } else if (/\s/.test(item)) { width += 2.5 } else if (/%/.test(item)) { width += 8 } else { width += 10 } }) return width * fontSize / 10 } [代码] 问题4:如何保证一行字体的居中展示？多行呢？ 字体的如果过长，会超出canvas画布，造成绘制难看，这个时候我们就应该让超出的部分变成[代码]...[代码] 你可以设置一个width并且循环计算计算出文本的宽度，如果超出则利用substring截取后补充[代码]...[代码]即可。 [代码]let fillText='' let width = 350 for (let i = 0; i <= text.length - 1; i++) { // 将文字转为数组，一行文字一个元素 fillText = fillText + text[i] // 判断截断的位置 if (this.measureText(fillText, this.toPx(fontSize, true)) >= width) { if (line === lineNum) { if (i !== text.length - 1) { fillText = fillText.substring(0, fillText.length - 1) + '...' } } if (line <= lineNum) { textArr.push(fillText) } fillText = '' line++ } else { if (line <= lineNum) { if (i === text.length - 1) { textArr.push(fillText) } } } } [代码] 文字剧中展示计算公式： 居中在canvas中可以用（canvas的宽度-文字宽度）/2 + x （x为字体的x轴的推移） [代码]let w = this.measureText(text, this.toPx(fontSize, true)) this.ctx.fillText(text, this.toPx((this.canvas.width - w) / 2 + x), this.toPx(y + (lineHeight || fontSize) * index)) [代码] 问题5:在小程序中如何处理网络图？ 关于在小程序里使用网络图片，比如cdn上的图片，是需要down到微信本地进行 LRU 管理，让后续绘制同样图片时，节省下载时间。所以首先需要你在微信小程序的后台配置downloadFile合法域名，其次你可以在canvas绘制之前，最好提前去down图片，等待图片下载好了，再开始绘制，以避免一些绘制失败的问题。 问题6:在 IDE 中可设置 base64 的图片数据进行绘制，但真机上无用？ 先把 base64 转成 [代码]Uint8ClampedArray[代码] 格式。然后再通过 [代码]wx.canvasPutImageData(OBJECT, this)[代码] 绘制到画布上，然后把画布导出为图片。 <!–### 问题6:如何画一个圆角图片？–> 问题7:关于wx.canvasToTempFilePath 使用 Canvas 绘图成功后，直接调用该方法生成图片，在IDE上没有问题，但在真机上会出现生成的图片不完整的情况，可以使用一个setTimeout来解决这个问题。 [代码]this.ctx.draw(false, () => { setTimeout(() => { Taro.canvasToTempFilePath({ canvasId: 'canvasid', success: async(res) => { this.props.onSavePoster(res.tempFilePath)//回调事件 // 清空画布 this.ctx.clearRect(0, 0, canvas_width, canvas_height) }, fail: (err) => { console.log(err) } }, this.$scope) }, time) }) [代码] 问题8:关于canvasContext.font fontsize 不能使用小数 如果设置 font 中字体大小部分包含小数，则会导致整个 font 设置无效。 问题9:安卓下字体渲染错位？ [图片] 这个问题出现在安卓手机上，ios表现正常。一开始看到这个问题，摸不着头脑，为什么有的正常居中有的却往前了很多。后面发现是安卓下[代码]this.ctx.setTextAlign(textAlign)[代码] 默认是为center，所以导致了错乱，改成left后就正常了。 问题10:绘制一个折线图 [图片] 利用canvas绘制一个简单的折线图，只需要利用[代码]lineTo[代码]和[代码]moveTo[代码]俩个API将点连接即可。利用[代码]createLinearGradient[代码]绘制阴影。 思考💡 思考1:用json配置表生成海报的局限 现在的海报生成只需要按照设计稿去量取尺寸就可以，但是量取的过程还是很繁琐的，在设计稿量不到的地方还需要手动微调一下。 后续还可以做一个web端使用拖拽的方式去完成设计稿的事情，自动生成json应用到小程序的海报上。 思考2:后端生成海报的局限 海报一开始是后端同学生成的，优点是不需要前端绘制时间，也不需要去踩微信API的坑，接口返回拿到url即可展示，但是在后端生成出来的效果不佳，毕竟这种工作更加前端一些。 思考3:前端生成海报的局限 前端生成海报的时候我发现耗时更长，包括图片的下载本地而且还需要给安卓一个特意写一个setTimeout去确保绘制正常。各种兼容性问题、手机的dpr、安卓和ios等不间断彩蛋踩到你头秃～ 哈哈哈哈～ 彩蛋 采用了最新的canvas-2d背景图确无法绘制全部？ 在canvas开发的过程中，小程序里一直有一束微光提醒我。 [图片] 我也试了试最新的canvas2d的api，的确同步了web端，写法也更流畅，在开发者工具中看是一切正常，跑在手机上则，只显示宽度的一半在各种机型下测试也是一样。 [图片] 后面改成原始的canvas就又好了。。。具体原因也还没有在微信社区里找到，后续迭代升级的时候再研究阿吧啊吧啊吧。 [图片]
2020-07-09 - 小程序图片裁剪插件 image-cropper
之前的插件类目没有了导致搜不到了，重新发个文章。 image-cropper 一款高性能的小程序图片裁剪插件，支持旋转。 [图片] 优势 [代码]1.功能强大。[代码] [代码]2.性能超高超流畅，大图毫无卡顿感。[代码] [代码]3.组件化，使用简单。[代码] [代码]4.点击中间窗口实时查看裁剪结果。[代码] ㅤ 初始准备 1.json文件中添加image-cropper [代码] "usingComponents": { "image-cropper": "../image-cropper/image-cropper" }, "navigationBarTitleText": "裁剪图片", "disableScroll": true [代码] 2.wxml文件 [代码]<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper> [代码] 3.简单示例 [代码] Page({ data: { src:'', width:250,//宽度 height: 250,//高度 }, onLoad: function (options) { //获取到image-cropper实例 this.cropper = this.selectComponent("#image-cropper"); //开始裁剪 this.setData({ src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg", }); wx.showLoading({ title: '加载中' }) }, cropperload(e){ console.log("cropper初始化完成"); }, loadimage(e){ console.log("图片加载完成",e.detail); wx.hideLoading(); //重置图片角度、缩放、位置 this.cropper.imgReset(); }, clickcut(e) { console.log(e.detail); //点击裁剪框阅览图片 wx.previewImage({ current: e.detail.url, // 当前显示图片的http链接 urls: [e.detail.url] // 需要预览的图片http链接列表 }) }, }) [代码] 参数说明 属性 类型 缺省值 取值 描述 必填 imgSrc String 无 无限制 图片地址(如果是网络图片需配置安全域名) 否 disable_rotate Boolean false true/false 禁止用户旋转(为false时建议同时设置limit_move为false) 否 limit_move Boolean false true/false 限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true) 否 width Number 200 超过屏幕宽度自动转为屏幕宽度 裁剪框宽度 否 height Number 200 超过屏幕高度自动转为屏幕高度 裁剪框高度 否 max_width Number 300 裁剪框最大宽度 裁剪框最大宽度 否 max_height Number 300 裁剪框最大高度 裁剪框最大高度 否 min_width Number 100 裁剪框最小宽度 裁剪框最小宽度 否 min_height Number 100 裁剪框最小高度 裁剪框最小高度 否 disable_width Boolean false true/false 锁定裁剪框宽度 否 disable_height Boolean false true/false 锁定裁剪框高度 否 disable_ratio Boolean false true/false 锁定裁剪框比例 否 export_scale Number 3 无限制 输出图片的比例(相对于裁剪框尺寸) 否 quality Number 1 0-1 生成的图片质量 否 cut_top Number 居中 始终在屏幕内 裁剪框上边距 否 cut_left Number 居中 始终在屏幕内 裁剪框左边距 否 [代码]img_width[代码] Number 宽高都不设置，最小边填满裁剪框 支持%(不加单位为px)(只设置宽度，高度自适应) 图片宽度 否 [代码]img_height[代码] Number 宽高都不设置，最小边填满裁剪框 支持%(不加单位为px)(只设置高度，宽度自适应) 图片高度 否 scale Number 1 无限制 图片的缩放比 否 angle Number 0 (limit_move=true时angle=n*90) 图片的旋转角度 否 min_scale Number 0.5 无限制 图片的最小缩放比 否 max_scale Number 2 无限制 图片的最大缩放比 否 bindload Function null 函数名称 cropper初始化完成 否 bindimageload Function null 函数名称 图片加载完成,返回值Object{width,height,path,type等} 否 bindtapcut Function null 函数名称 点击中间裁剪框,返回值Object{src,width,height} 否 函数说明 函数名 参数 返回值 描述 参数必填 upload 无 无 调起wx上传图片接口并开始剪裁 否 pushImg src 无 放入图片开始裁剪 是 getImg Function(回调函数) [代码]Object{url,width,height}[代码] 裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale) 是 setCutXY X、Y 无 设置裁剪框位置 是 setCutSize width、height 无 设置裁剪框大小 是 setCutCenter 无 无 设置裁剪框居中 否 setScale scale 无 设置图片缩放比例（不受min_scale、max_scale影响） 是 setAngle deg 无 设置图片旋转角度（带过渡效果） 是 setTransform {x,y,angle,scale,cutX,cutY} 无 图片在原有基础上的变化(scale受min_scale、max_scale影响) 根据需要传参 imgReset 无 无 重置图片的角度、缩放、位置(可以在onloadImage回调里使用) 否 GitHub https://github.com/wx-plugin/image-cropper/tree/master 如果有什么好的建议欢迎提issues或者提pr
2021-12-15 - 如何彻底解决小程序滚动穿透问题
背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。 如何改变底层解决该问题呢？ 不成熟方案： 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。 成熟方案 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。） page-meta组件： 通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] wx.setPageStyle方法： 调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // ‘auto’ } }) [代码] 老规矩，结尾放代码片段： https://developers.weixin.qq.com/s/U6ItgQmP7upQ 拓展 支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。
08-06 - 当正在播放中的音乐 调用seek跳转到指定位置后, 原先设置好的onTimeUpdate不再回调
打开代码首先播放音乐 [图片] [图片]
2021-02-14 - canvas2d绘制自定义字体使用measureText测量文字时 偶发性闪退！！！！！
https://developers.weixin.qq.com/s/QdEwAdmw7olK可复现的代码片段，偶发性闪退，一般1分钟内必退
2020-12-29 - 关于教育局部门批准文件的格式说明
文件的样式如下图所示，找所在区/市的教育局盖章即可 文件的样式如下图所示，找所在区/市的教育局盖章即可 文件的样式如下图所示，找所在区/市的教育局盖章即可 文件的样式如下图所示，找所在区/市的教育局盖章即可 文件的样式如下图所示，找所在区/市的教育局盖章即可 [图片]
2020-11-03 - 小程序关联公众号策略调整
各位开发者，大家好。 目前，小程序需要与公众号关联，才可被使用在公众号自定义菜单、模板消息、客服消息等场景中。而公众号关联小程序时，需要小程序管理员确认，该环节增加了开发者之间的沟通成本。 为了降低公众号与小程序间的合作门槛，我们将调整小程序关联公众号策略如下： 公众号关联小程序将无需小程序管理员确认。 取消“小程序最多关联500个公众号”的限制。 若希望小程序在被关联时保留管理员确认环节，可前往“小程序管理后台-设置-基本设置-关联公众号设置”修改设置项。 公众号文章中可直接使用小程序素材，无需关联小程序。 开发者可在“小程序管理后台-设置-关联设置”中管理已关联的公众号。 微信团队 2019.04.04
2019-04-08 - 【分享】小程序全景图片展示的几个方案
概述 以下方案均需要有全景照片后方可实现（自己拍的 or 网上下载）。 一、方案一：自建网页 自建网页，自己有服务器，可以用全景图转换器（如pano2vr）直接生成html代码，然后通过 webview 嵌入到小程序访问。 建议：图片可以放在七牛云或其他地方，CDN 能有效优化网页中全景图的打开速度（一般全景图片体积都是较大的）。 体验效果： [图片] 二、方案二：720yun 使用 720云，这也是大部分全景摄影社或爱好者最习惯用的平台了。他们也提供了小程序打开全景图的方案。但核心还是使用 webview，并且需要开通会员，具体参考： 建议：经费足的可以考虑一下这个方案，毕竟720云的操作和体验是真的是十分优秀的！ 参考：小程序校验指南 | 720yun https://bbs2.720yun.com/article?id=687 [图片] 三、方案三：小程序插件 以上两种方案都是借助webview来实现，也就是说必须要企业或其他单位的主体才能使用。个人的小程序如果要实现全景，建议使用这位大佬写的小程序插件——wxPano。项目一直在不断更新中，而且还免费，很值得期待！ 建议：①该插件限制全景图片分辨率需在2048*1024及以下，因此无法打开画质很高清的全景图片。②插件代码包超过1MB，对小程序打开速度有微小的影响。 链接：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx386c038238531f87 [图片] 结语 以上来自我自己开发时的一些经验，欢迎前辈老师们补充。 也欢迎社区三连——点赞收藏关注！！
2019-10-24 - 小程序搜索优化指南(SEO)
2019年上半年微信发布了基于小程序页面的搜索，为了让我们更好地发现及理解小程序的页面，结合过去一段时间来我们遇到的各种情况，我们强烈建议各位开发者花一些宝贵的时间认真阅读本文：） 爬虫访问小程序内页面时，会携带特定的 user-agent "mpcrawler" 及场景值：1129 1. 小程序里跳转的页面 (url) 可被直接打开。 小程序页面内的跳转url是我们爬虫发现页面的重要来源，且搜索引擎召回的结果页面 (url) 是必须能直接打开，不依赖上下文状态的。特别的：建议页面所需的参数都包含在url 2. 页面跳转优先采用navigator组件。 小程序提供了两种页面路由方式： a.navigator 组件 b. 路由 API，包括 navigateTo / redirectTo / switchTab / navigateBack / reLaunch 建议使用 navigator 组件，若不得不使用API，可在爬虫访问时屏蔽针对点击设置的时间锁或变量锁。 3.清晰简洁的页面参数。 结构清晰、简洁、参数有含义的 querystring 对抓取以及后续的分析都有很大帮助，但是将 JSON 数据作为参数的方式是比较糟糕的实现。 4. 必要的时候才请求用户进行授权、登录、绑定手机号等。 建议在必须的时候才要求用户授权（比如阅读文章可以匿名，而发表评论需要留名）。 5. 我们不收录 web-view 中的任何内容。 我们暂时做不到这一点，长期来看，我们可能也做不到。 6. 利用 sitemap 配置引导爬虫抓取，同时屏蔽无搜索价值的路径。 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html 7. 设置一个清晰的标题和页面缩略图。 页面标题和缩略图对于我们理解页面和提高曝光转化有重要的作用。 通过wx.setNavigationBarTitle或 自定义转发内容onShareAppMessage对页面的标题和缩略图设置，另外也为 video、audio 组件补齐 poster /poster-for-crawler属性。 8. 使用页面路径推送能力 可极大丰富微信可以收录的内容，进而提高小程序内容的曝光机会。请参考： https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/search/search.submitPages.html
2020-01-14 - 教你解决showLoading 和 showToast显示异常的问题
问题描述 当wx.showLoading 和 wx.showToast 混合使用时，showLoading和showToast会相互覆盖对方，调用hideLoading时也会将toast内容进行隐藏。 触发场景 当我们给一个网络请求增加Loading态时，如果同时存在多个请求（A和B），如果A请求失败需要将错误信息以Toast形式展示，B请求完成后又调用了wx.hideLoading来结束Loading态，此时Toast也会立即消失，不符合展示一段时间后再隐藏的预期。 解决思路 这个问题的出现，其实是因为小程序将Toast和Loading放到同一层渲染引起的，而且缺乏一个优先级判断，也没有提供Toast、Loading是否正在显示的接口供业务侧判断。所以实现的方案是我们自己实现这套逻辑，可以使用Object.defineProperty方法重新定义原生API，业务使用方式不需要任何修改。 代码参考 [代码]// 注意此代码应该在调用原生api之前执行 let isShowLoading = false; let isShowToast = false; const { showLoading, hideLoading, showToast, hideToast } = wx; Object.defineProperty(wx, 'showLoading', { configurable: true, // 是否可以配置 enumerable: true, // 是否可迭代 writable: true, // 是否可重写 value(...param) { if (isShowToast) { // Toast优先级更高 return; } isShowLoading = true; console.log('--------showLoading--------') return showLoading.apply(this, param); // 原样移交函数参数和this } }); Object.defineProperty(wx, 'hideLoading', { configurable: true, // 是否可以配置 enumerable: true, // 是否可迭代 writable: true, // 是否可重写 value(...param) { if (isShowToast) { // Toast优先级更高 return; } isShowLoading = false; console.log('--------hideLoading--------') return hideLoading.apply(this, param); // 原样移交函数参数和this } }); Object.defineProperty(wx, 'showToast', { configurable: true, // 是否可以配置 enumerable: true, // 是否可迭代 writable: true, // 是否可重写 value(...param) { if (isShowLoading) { // Toast优先级更高 wx.hideLoading(); } isShowToast = true; console.error('--------showToast--------') return showToast.apply(this, param); // 原样移交函数参数和this } }); Object.defineProperty(wx, 'hideToast', { configurable: true, // 是否可以配置 enumerable: true, // 是否可迭代 writable: true, // 是否可重写 value(...param) { isShowToast = false; console.error('--------hideToast--------') return hideToast.apply(this, param); // 原样移交函数参数和this } }); [代码] 调整后展示逻辑为： 优先级：Toast>Loading，如果Toast正在显示，调用showLoading、hideLoading将无效 调用showToast时，如果Loading正在显示，则先调用 wx.hideLoading 隐藏Loading
2019-10-30 - 小程序实现列表拖拽排序
小程序列表拖拽排序 [图片] wxml [代码]<view class='listbox'> <view class='list kelong' hidden='{{!showkelong}}' style='top:{{kelong.top}}px'> <view class='index'>?</view> <image src='{{kelong.xt}}' class='xt'></image> <view class='info'> <view class="name">{{kelong.name}}</view> <view class='sub-name'>{{kelong.subname}}</view> </view> <image src='/images/sl_36.png' class='more'></image> </view> <view class='list' wx:for="{{optionList}}" wx:key=""> <view class='index'>{{index+1}}</view> <image src='{{item.xt}}' class='xt'></image> <view class='info'> <view class="name">{{item.name}}</view> <view class='sub-name'>{{item.subname}}</view> </view> <image src='/images/sl_36.png' class='more'></image> <view class='moreiconpl' data-index='{{index}}' catchtouchstart='dragStart' catchtouchmove='dragMove' catchtouchend='dragEnd'></view> </view> </view> [代码] wxss [代码].map-list .list { position: relative; height: 120rpx; } .map-list .list::after { content: ''; width: 660rpx; height: 2rpx; background-color: #eee; position: absolute; right: 0; bottom: 0; } .map-list .list .xt { display: block; width: 95rpx; height: 77rpx; position: absolute; left: 93rpx; top: 20rpx; } .map-list .list .more { display: block; width: 48rpx; height: 38rpx; position: absolute; right: 30rpx; top: 40rpx; } .map-list .list .info { display: block; width: 380rpx; height: 80rpx; position: absolute; left: 220rpx; top: 20rpx; font-size: 30rpx; } .map-list .list .info .sub-name { font-size: 28rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #646567; } .map-list .list .index { color: #e4463b; font-size: 32rpx; font-weight: bold; position: absolute; left: 35rpx; top: 40rpx; } [代码] js [代码]data：{ kelong: { top: 0, xt: '', name: '', subname: '' }, replace: { xt: '', name: '', subname: '' }, }, dragStart: function(e) { var that = this var kelong = that.data.kelong var i = e.currentTarget.dataset.index kelong.xt = this.data.optionList[i].xt kelong.name = this.data.optionList[i].name kelong.subname = this.data.optionList[i].subname var query = wx.createSelectorQuery(); //选择id query.select('.listbox').boundingClientRect(function(rect) { // console.log(rect.top) kelong.top = e.changedTouches[0].clientY - rect.top - 30 that.setData({ kelong: kelong, showkelong: true }) }).exec(); }, dragMove: function(e) { var that = this var i = e.currentTarget.dataset.index var query = wx.createSelectorQuery(); var kelong = that.data.kelong var listnum = that.data.optionList.length var optionList = that.data.optionList query.select('.listbox').boundingClientRect(function(rect) { kelong.top = e.changedTouches[0].clientY - rect.top - 30 if(kelong.top < -60) { kelong.top = -60 } else if (kelong.top > rect.height) { kelong.top = rect.height - 60 } that.setData({ kelong: kelong, }) }).exec(); }, dragEnd: function(e) { var that = this var i = e.currentTarget.dataset.index var query = wx.createSelectorQuery(); var kelong = that.data.kelong var listnum = that.data.optionList.length var optionList = that.data.optionList query.select('.listbox').boundingClientRect(function (rect) { kelong.top = e.changedTouches[0].clientY - rect.top - 30 if(kelong.top<-20){ wx.showModal({ title: '删除提示', content: '确定要删除此条记录？', confirmColor:'#e4463b' }) } var target = parseInt(kelong.top / 60) var replace = that.data.replace if (target >= 0) { replace.xt = optionList[target].xt replace.name = optionList[target].name replace.subname = optionList[target].subname optionList[target].xt = optionList[i].xt optionList[target].name = optionList[i].name optionList[target].subname = optionList[i].subname optionList[i].xt = replace.xt optionList[i].name = replace.name optionList[i].subname = replace.subname } that.setData({ optionList: optionList, showkelong:false }) }).exec(); }, [代码]
2019-07-28 - 小程序模板消息能力调整通知
小程序模板消息能力在帮助小程序实现服务闭环的同时，也存在一些问题，如： 1. 部分开发者在用户无预期或未进行服务的情况下发送与用户无关的消息，对用户产生了骚扰； 2. 模板消息需在用户访问小程序后的 7 天内下发，不能满足部分业务的时间要求。 为提升小程序模板消息能力的使用体验，我们对模板消息的下发条件进行了调整，由用户自主订阅所需消息。 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后，后续服务环节的通知问题。用户自主订阅后，开发者可不限时间地下发一条对应的服务消息；每条消息可单独订阅或退订。 [图片] （一次性订阅示例） 长期性订阅消息 一次性订阅消息可满足小程序的大部分服务场景需求，但线下公共服务领域存在一次性订阅无法满足的场景，如航班延误，需根据航班实时动态来多次发送消息提醒。为便于服务，我们提供了长期性订阅消息，用户订阅一次后，开发者可长期下发多条消息。 目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。 调整计划 小程序订阅消息接口上线后，原先的模板消息接口将停止使用，详情如下： 1. 开发者可登录小程序管理后台开启订阅消息功能，接口开发可参考文档：《小程序订阅消息》 2. 开发者使用订阅消息能力时，需遵循运营规范，不可用奖励或其它形式强制用户订阅，不可下发与用户预期不符或违反国家法律法规的内容。具体可参考文档：《小程序订阅消息接口运营规范》 3. 原有的小程序模板消息接口将于 2020 年 1 月 10 日下线，届时将无法使用此接口发送模板消息，请各位开发者注意及时调整接口。 微信团队 2019.10.12
2019-10-13 - 使用BackgroundAudioManager背景音频实现一个音频播放器
说明 使用BackgroundAudioManager创建的实例，小程序切换到手机后台、小程序内页面间跳转，都不会影响音频的连续播放，可以很好的实现一个音频播放器。 BackgroundAudioManager是单实例，全局唯一，在任意页面任何位置调用wx.getBackgroundAudioManager()既可以获得。 效果 音频列表循环播放，支持上一首、下一首切换，实时进度展示，快进。 思路 将播放的音频列表放在app.globalData或本地做缓存，保证音频切换时找到对应列表。 将音频播放的实时状态放在app.globalData或本地做缓存，保证展示音频播放详情页的音频名称、实时进度等正确展示。 方法中BackgroundAudioManager.on*为监听事件，操作业务放在回调函数中处理。 BackgroundAudioManager的属性中，所有属性可以直接BackgroundAudioManager.获取值，非只读的属性可以通过BackgroundAudioManager. = ‘’ 方式赋值。 效果图 小程序界面 [图片] 手机后台，顶部下拉 [图片] 代码片段 详细代码请下载代码片段，可以直接运行demo。 https://developers.weixin.qq.com/s/VAmjRsmZ7090
2019-06-28 - 【优化】利用函数防抖和函数节流提高小程序性能
大家好，上次给大家分享了swiper仿tab的小技巧： https://developers.weixin.qq.com/community/develop/article/doc/000040a5dc4518005d2842fdf51c13 [代码]今天给大家分享两个有用的函数，《函数防抖和函数节流》 函数防抖和函数节流是都优化高频率执行js代码的一种手段，因为是js实现的，所以在小程序里也是适用的。 [代码] 首先先来理解一下两者的概念和区别： [代码] 函数防抖（debounce）是指事件在一定时间内事件只执行一次，如果在这段时间又触发了事件，则重新开始计时，打个很简单的比喻，比如在打王者荣耀时，一定要连续干掉五个人才能触发hetai kill '五连绝世'效果，如果中途被打断就得重新开始连续干五个人了。 函数节流（throttle）是指限制某段时间内事件只能执行一次，比如说我要求自己一天只能打一局王者荣耀。 这里也有个可视化工具可以让大家看一下三者的区别，分别是正常情况下，用了函数防抖和函数节流的情况下：http://demo.nimius.net/debounce_throttle/ [代码] 适用场景 函数防抖 搜索框搜索联想。只需用户最后一次输入完，再发送请求 手机号、邮箱验证输入检测 窗口resize。只需窗口调整完成后，计算窗口大小。防止重复渲染 高频点击提交，表单重复提交 函数节流 滚动加载，加载更多或滚到底部监听 搜索联想功能 实现原理 [代码] 函数防抖 [代码] [代码]const _.debounce = (func, wait) => { let timer; return () => { clearTimeout(timer); timer = setTimeout(func, wait); }; }; [代码] [代码] 函数节流 [代码] [代码]const throttle = (func, wait) => { let last = 0; return () => { const current_time = +new Date(); if (current_time - last > wait) { func.apply(this, arguments); last = +new Date(); } }; }; [代码] [代码] 上面两个方法都是比较常见的，算是简化版的函数 [代码] lodash中的 Debounce 、Throttle [代码] lodash中已经帮我们封装好了这两个函数了，我们可以把它引入到小程序项目了，不用全部引入，只需要引入debounce.js和throttle.js就行了，链接：https://github.com/lodash/lodash 使用方法可以看这个代码片段，具体的用法可以看上面github的文档，有很详细的介绍：https://developers.weixin.qq.com/s/vjutZpmL7A51[代码]
2019-02-22 - 想做一个旋转播放音乐的功能，旋转动画弄不太明白，跪求大神解决！！！
[图片]点击旋转播放音乐，再点击停止。 在线等！！！
2019-03-18 - 使用官方websocketAPI在部分安卓手机上无法连接
问题描述： 使用官方websocketAPI后，在ios手机上运行没有问题，但是在部分安卓手机上websocket无法连接。 部分机型： 在OPPO和vivo机型上尤为严重，包括： vivo y55 安卓6.0.1，以及华为荣耀6X 安卓8.0.0. 还包括魅族、华为手机使用的是安卓5.0.1 安卓5.1.0 现象描述： wx.connectSocket({ url: url, method: 'GET', success: function () { console.log("连接成功...") }, fail: function () { console.log("连接失败...") } }) 在后台检测查看后发现，连接后走了“连接成功”，但是过了大约60秒后，提示：连接超时。没有走到 wx.onSocketOpen()中。
2019-06-10 - 小程序多端框架全面测评
最近前端届多端框架频出，相信很多有代码多端运行需求的开发者都会产生一些疑惑：这些框架都有什么优缺点？到底应该用哪个？ 作为 Taro 开发团队一员，笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。但宥于利益相关，本文的观点很可能是带有偏向性的，大家可以带着批判的眼光去看待，权当抛砖引玉。 那么，当我们在讨论多端框架时，我们在谈论什么： 多端 笔者以为，现在流行的多端框架可以大致分为三类： 1. 全包型 这类框架最大的特点就是从底层的渲染引擎、布局引擎，到中层的 DSL，再到上层的框架全部由自己开发，代表框架是 Qt 和 Flutter。这类框架优点非常明显：性能（的上限）高；各平台渲染结果一致。缺点也非常明显：需要完全重新学习 DSL（QML/Dart），以及难以适配中国特色的端：小程序。 这类框架是最原始也是最纯正的的多端开发框架，由于底层到上层每个环节都掌握在自己手里，也能最大可能地去保证开发和跨端体验一致。但它们的框架研发成本巨大，渲染引擎、布局引擎、DSL、上层框架每个部分都需要大量人力开发维护。 2. Web 技术型 这类框架把 Web 技术（JavaScript，CSS）带到移动开发中，自研布局引擎处理 CSS，使用 JavaScript 写业务逻辑，使用流行的前端框架作为 DSL，各端分别使用各自的原生组件渲染。代表框架是 React Native 和 Weex，这样做的优点有： 开发迅速 复用前端生态 易于学习上手，不管前端后端移动端，多多少少都会一点 JS、CSS 缺点有： 交互复杂时难以写出高性能的代码，这类框架的设计就必然导致 [代码]JS[代码] 和 [代码]Native[代码] 之间需要通信，类似于手势操作这样频繁地触发通信就很可能使得 UI 无法在 16ms 内及时绘制。React Native 有一些声明式的组件可以避免这个问题，但声明式的写法很难满足复杂交互的需求。 由于没有渲染引擎，使用各端的原生组件渲染，相同代码渲染的一致性没有第一种高。 3. JavaScript 编译型 这类框架就是我们这篇文章的主角们：[代码]Taro[代码]、[代码]WePY[代码] 、[代码]uni-app[代码] 、 [代码]mpvue[代码] 、 [代码]chameleon[代码]，它们的原理也都大同小异：先以 JavaScript 作为基础选定一个 DSL 框架，以这个 DSL 框架为标准在各端分别编译为不同的代码，各端分别有一个运行时框架或兼容组件库保证代码正确运行。 这类框架最大优点和创造的最大原因就是小程序，因为第一第二种框架其实除了可以跨系统平台之外，也都能编译运行在浏览器中。(Qt 有 Qt for WebAssembly, Flutter 有 Hummingbird，React Native 有 [代码]react-native-web[代码], Weex 原生支持) 另外一个优点是在移动端一般会编译到 React Native/Weex，所以它们也都拥有 Web 技术型框架的优点。这看起来很美好，但实际上 React Native/Weex 的缺点编译型框架也无法避免。除此之外，编译型框架的抽象也不是免费的：当 bug 出现时，问题的根源可能出在运行时、编译时、组件库以及三者依赖的库等等各个方面。在 Taro 开源的过程中，我们就遇到过 Babel 的 bug，React Native 的 bug，JavaScript 引擎的 bug，当然也少不了 Taro 本身的 bug。相信其它原理相同的框架也无法避免这一问题。 但这并不意味着这类为了小程序而设计的多端框架就都不堪大用。首先现在各巨头超级 App 的小程序百花齐放，框架会为了抹平小程序做了许多工作，这些工作在大部分情况下是不需要开发者关心的。其次是许多业务类型并不需要复杂的逻辑和交互，没那么容易触发到框架底层依赖的 bug。 那么当你的业务适合选择编译型框架时，在笔者看来首先要考虑的就是选择 DSL 的起点。因为有多端需求业务通常都希望能快速开发，一个能够快速适应团队开发节奏的 DSL 就至关重要。不管是 React 还是 Vue（或者类 Vue）都有它们的优缺点，大家可以根据团队技术栈和偏好自行选择。 如果不管什么 DSL 都能接受，那就可以进入下一个环节： 生态 以下内容均以各框架现在（2019 年 3 月 11日）已发布稳定版为标准进行讨论。 开发工具 就开发工具而言 [代码]uni-app[代码] 应该是一骑绝尘，它的文档内容最为翔实丰富，还自带了 IDE 图形化开发工具，鼠标点点点就能编译测试发布。 其它的框架都是使用 CLI 命令行工具，但值得注意的是 [代码]chameleon[代码] 有独立的语法检查工具，[代码]Taro[代码] 则单独写了 ESLint 规则和规则集。 在语法支持方面，[代码]mpvue[代码]、[代码]uni-app[代码]、[代码]Taro[代码] 、[代码]WePY[代码] 均支持 TypeScript，四者也都能通过 [代码]typing[代码] 实现编辑器自动补全。除了 API 补全之外，得益于 TypeScript 对于 JSX 的良好支持，Taro 也能对组件进行自动补全。 CSS 方面，所有框架均支持 [代码]SASS[代码]、[代码]LESS[代码]、[代码]Stylus[代码]，Taro 则多一个 [代码]CSS Modules[代码] 的支持。 所以这一轮比拼的结果应该是： [代码]uni-app[代码] > [代码]Taro[代码] > [代码]chameleon[代码] > [代码]WePY[代码]、[代码]mpvue[代码] [图片] 多端支持度 只从支持端的数量来看，[代码]Taro[代码] 和 [代码]uni-app[代码] 以六端略微领先（移动端、H5、微信小程序、百度小程序、支付宝小程序、头条小程序），[代码]chameleon[代码] 少了头条小程序紧随其后。 但值得一提的是 [代码]chameleon[代码] 有一套自研多态协议，编写多端代码的体验会好许多，可以说是一个能戳到多端开发痛点的功能。[代码]uni-app[代码] 则有一套独立的条件编译语法，这套语法能同时作用于 [代码]js[代码]、样式和模板文件。[代码]Taro[代码] 可以在业务逻辑中根据环境变量使用条件编译，也可以直接使用条件编译文件（类似 React Native 的方式）。 在移动端方面，[代码]uni-app[代码] 基于 [代码]weex[代码] 定制了一套 [代码]nvue[代码] 方案 弥补 [代码]weex[代码] API 的不足；[代码]Taro[代码] 则是暂时基于 [代码]expo[代码] 达到同样的效果；[代码]chameleon[代码] 在移动端则有一套 SDK 配合多端协议与原生语言通信。 H5 方面，[代码]chameleon[代码] 同样是由多态协议实现支持，[代码]uni-app[代码] 和 [代码]Taro[代码] 则是都在 H5 实现了一套兼容的组件库和 API。 [代码]mpvue[代码] 和 [代码]WePY[代码] 都提供了转换各端小程序的功能，但都没有 h5 和移动端的支持。 所以最后一轮对比的结果是： [代码]chameleon[代码] > [代码]Taro[代码]、[代码]uni-app[代码] > [代码]mpvue[代码]、[代码]WePY[代码] [图片] 组件库/工具库/demo 作为开源时间最长的框架，[代码]WePY[代码] 不管从 Demo，组件库数量 ，工具库来看都占有一定优势。 [代码]uni-app[代码] 则有自己的插件市场和 UI 库，如果算上收费的框架和插件比起 [代码]WePy[代码] 也是完全不遑多让的。 [代码]Taro[代码] 也有官方维护的跨端 UI 库 [代码]taro-ui[代码] ，另外在状态管理工具上也有非常丰富的选择（Redux、MobX、dva），但 demo 的数量不如前两个。但 [代码]Taro[代码] 有一个转换微信小程序代码为 Taro 代码的工具，可以弥补这一问题。 而 [代码]mpvue[代码] 没有官方维护的 UI 库，[代码]chameleon[代码] 第三方的 demo 和工具库也还基本没有。 所以这轮的排序是： [代码]WePY[代码] > [代码]uni-app[代码] 、[代码]taro[代码] > [代码]mpvue[代码] > [代码]chameleon[代码] [图片] 接入成本 接入成本有两个方面： 第一是框架接入原有微信小程序生态。由于目前微信小程序已呈一家独大之势，开源的组件和库（例如 [代码]wxparse[代码]、[代码]echart[代码]、[代码]zan-ui[代码] 等）多是基于原生微信小程序框架语法写成的。目前看来 [代码]uni-app[代码] 、[代码]Taro[代码]、[代码]mpvue[代码] 均有文档或 demo 在框架中直接使用原生小程序组件/库，[代码]WePY[代码] 由于运行机制的问题，很多情况需要小改一下目标库的源码，[代码]chameleon[代码] 则是提供了一个按步骤大改目标库源码的迁移方式。 第二是原有微信小程序项目部分接入框架重构。在这个方面 Taro 在京东购物小程序上进行了大胆的实践，具体可以查看文章《Taro 在京东购物小程序上的实践》。其它框架则没有提到相关内容。 而对于两种接入方式 Taro 都提供了 [代码]taro convert[代码] 功能，既可以将原有微信小程序项目转换为 Taro 多端代码，也可以将微信小程序生态的组件转换为 Taro 组件。 所以这轮的排序是： [代码]Taro[代码] > [代码]mpvue[代码] 、 [代码]uni-app[代码] > [代码]WePY[代码] > [代码]chameleon[代码] 流行度 从 GitHub 的 star 来看，[代码]mpvue[代码] 、[代码]Taro[代码]、[代码]WePY[代码] 的差距非常小。从 NPM 和 CNPM 的 CLI 工具下载量来看，是 Taro（3k/week）> mpvue (2k/w) > WePY (1k/w)。但发布时间也刚好反过来。笔者估计三家的流行程度和案例都差不太多。 [代码]uni-app[代码] 则号称有上万案例，但不像其它框架一样有一些大厂应用案例。另外从开发者的数量来看也是 [代码]uni-app[代码] 领先，它拥有 20+ 个 QQ 交流群（最大人数 2000）。 所以从流行程度来看应该是： [代码]uni-app[代码] > [代码]Taro[代码]、[代码]WePY[代码]、[代码]mpvue[代码] > [代码]chameleon[代码] [图片] 开源建设 一个开源作品能走多远是由框架维护团队和第三方开发者共同决定的。虽然开源建设不能具体地量化，但依然是衡量一个框架/库生命力的非常重要的标准。 从第三方贡献者数量来看，[代码]Taro[代码] 在这一方面领先，并且 [代码]Taro[代码] 的一些核心包/功能（MobX、CSS Modules、alias）也是由第三方开发者贡献的。除此之外，腾讯开源的 [代码]omi[代码] 框架小程序部分也是基于 Taro 完成的。 [代码]WePY[代码] 在腾讯开源计划的加持下在这一方面也有不错的表现；[代码]mpvue[代码] 由于停滞开发了很久就比较落后了；可能是产品策略的原因，[代码]uni-app[代码] 在开源建设上并不热心，甚至有些部分代码都没有开源；[代码]chameleon[代码] 刚刚开源不久，但它的代码和测试用例都非常规范，以后或许会有不错的表现。 那么这一轮的对比结果是： [代码]Taro[代码] > [代码]WePY[代码] > [代码]mpvue[代码] > [代码]chameleon[代码] > [代码]uni-app[代码] 最后补一个总的生态对比图表： [图片] 未来 从各框架已经公布的规划来看： [代码]WePY[代码] 已经发布了 [代码]v2.0.alpha[代码] 版本，虽然没有公开的文档可以查阅到 [代码]2.0[代码] 版本有什么新功能/特性，但据其作者介绍，[代码]WePY 2.0[代码] 会放大招，是一个「对得起开发者」的版本。笔者也非常期待 2.0 正式发布后 [代码]WePY[代码] 的表现。 [代码]mpvue[代码] 已经发布了 [代码]2.0[代码] 的版本，主要是更新了其它端小程序的支持。但从代码提交， issue 的回复/解决率来看，[代码]mpvue[代码] 要想在未来有作为首先要打消社区对于 [代码]mpvue[代码] 不管不顾不更新的质疑。 [代码]uni-app[代码] 已经在生态上建设得很好了，应该会在此基础之上继续稳步发展。如果 [代码]uni-app[代码] 能加强开源开放，再加强与大厂的合作，相信未来还能更上一层楼。 [代码]chameleon[代码] 的规划比较宏大，虽然是最后发的框架，但已经在规划或正在实现的功能有： 快应用和端拓展协议 通用组件库和垂直类组件库 面向研发的图形化开发工具 面向非研发的图形化页面搭建工具 如果 [代码]chameleon[代码] 把这些功能都做出来的话，再继续完善生态，争取更多第三方开发者，那么在未来 [代码]chameleon[代码] 将大有可为。 [代码]Taro[代码] 的未来也一样值得憧憬。Taro 即将要发布的 [代码]1.3[代码] 版本就会支持以下功能： 快应用支持 Taro Doctor，自动化检查项目配置和代码合法性 更多的 JSX 语法支持，1.3 之后限制生产力的语法只有 [代码]只能用 map 创造循环组件[代码] 一条 H5 打包体积大幅精简 同时 [代码]Taro[代码] 也正在对移动端进行大规模重构；开发图形化开发工具；开发组件/物料平台以及图形化页面搭建工具。 结语 那说了那么多，到底用哪个呢？ 如果不介意尝鲜和学习 DSL 的话，完全可以尝试 [代码]WePY[代码] 2.0 和 [代码]chameleon[代码] ，一个是酝酿了很久的 2.0 全新升级，一个有专门针对多端开发的多态协议。 [代码]uni-app[代码] 和 [代码]Taro[代码] 相比起来就更像是「水桶型」框架，从工具、UI 库，开发体验、多端支持等各方面来看都没有明显的短板。而 [代码]mpvue[代码] 由于开发一度停滞，现在看来各个方面都不如在小程序端基于它的 [代码]uni-app[代码] 。 当然，Talk is cheap。如果对这个话题有更多兴趣的同学可以去 GitHub 另行研究，有空看代码，没空看提交： chameleon: https://github.com/didi/chameleon mpvue: https://github.com/Meituan-Dianping/mpvue Taro: https://github.com/NervJS/taro uni-app: https://github.com/dcloudio/uni-app WePY: https://github.com/Tencent/wepy (按字母顺序排序)
2019-03-19 - 线上错误，Failed get storage group..
[图片] webviewSDKScriptError Failed get storage group metadata; getGlobalStorage:fail:access denied Error: Failed get storage group metadata at Ke (:44:20578) at :44:23185 at Object.w (:41:2398) at Object.ret.invokeCallbackHandler (:21:28) at :1:67 小程序名称：【足球战术板】 开发框架：wepy 错误原因分析：我在onError()中设置了将错误信息发送到邮箱， 然后就看到这些错误，应该是获取storage数据出错，错误原因可能是这个小程序较为频繁的操作storage，但详细信息不清楚，错误堆栈也很模糊，请问这是程序问题还是小程序本身问题？
2018-09-21 - slider可以提供双向滑块吗？
- 需求的场景描述（希望解决的问题） 通过滑块选择价格区间 - 希望提供的能力 slider可以提供双向滑块吗？
2018-08-30 - 是否有API可以判断手机是否插入了耳机
- 需求的场景描述（希望解决的问题） 做音视频应用，希望知道用户是用耳机听，还是用手机扬声器听，从而用不同的逻辑 - 希望提供的能力 新增一个API，用于判断当前用户是否插入了耳机。
2018-06-23
获得过 0 次赞
回答过的问题获得 0 次赞
分享过的文章/案例获得 0 次赞
评论与回复获得 0 次赞