着急审合 [图片]

注意：服务商模式下，均是使用服务商的以下信息 1. 证书 1.1商户api证书（v2和v3接口都需要使用） 1.1.1获取方式： https://kf.qq.com/faq/161222NneAJf161222U7fARv.html （商户api证书 ），里面介绍了如何获取商户证书的详细步骤 1.1.2作用： v3接口： 使用商户api证书私钥用于生成签名（签名的官方文档: https://pay.weixin.qq.com/wiki/doc/apiv3/wechatpay/wechatpay4_0.shtml ） ,一共三个证书文件，一个说明文件（建议阅读一下），商户api证书私钥是apiclient_key.pem这个文件（代码加载，参考官方文档： https://pay.weixin.qq.com/wiki/doc/apiv3/wechatpay/wechatpay7_1.shtml [图片]），剩下的两个证书文件目前我个人是没有发现在v3接口需要使用，咨询技术支持也是这样回复的。 v2接口： v2接口需要使用证书的接口在文档会有特别提示： [图片] 一般开发语言使用的p12证书，详细信息参考链接：https://pay.weixin.qq.com/wiki/doc/api/jsapi_sl.php?chapter=4_3 [图片] 注意: 1.php使用方法参考文档 [图片] 2. .NET环境开发，请确认Framework版本大于2.0，必须在操作系统上双击安装证书apiclient_cert.p12后才能被正常调用。 [图片] 3.apiclient_cert.p12是商户证书文件，除PHP外的开发均使用此证书文件。官方sdk包含了示例代码，这里展示的是java语言的[图片] 1.1.3如何查看 证书使用是否正确（v2和v3接口通用检查方法）： 到证书解析的网站解析（ https://myssl.com/cert_decode.html ） apiclient_cert.pem这个文件，查看它的证书序列号，对比商户平台的证书序列号。（下载证书的时候这三个文件一般放在一起，根据apiclient_cert.pem文件判断使用的是否是正确的 1.1.4商户api证书序列号查看方式及作用（v3接口） 查看：管理员帐号登录微信商户管理后台，在API安全里面点击查看证书可以获取。 作用：构建签名，用于声明所使用的证书 1.2微信支付平台证书（v3接口使用） 1.2.1获取方式 1：接口获取（官方文档： https://pay.weixin.qq.com/wiki/doc/apiv3/wechatpay/wechatpay5_1.shtml ，代码（java）： https://github.com/wechatpay-apiv3/wechatpay-apache-httpclient[图片] 2：官方工具：（ https://pay.weixin.qq.com/wiki/doc/apiv3/wechatpay/wechatpay6_0.shtml ）[图片] 3：postman(https://github.com/wechatpay-apiv3/wechatpay-postman-script):配置好可以直接下载，然后解密（解密参考：https://pay.weixin.qq.com/wiki/doc/apiv3/wechatpay/wechatpay4_2.shtml[图片]即可使用（推荐在测试的时候使用，顺便检查了签名的参数是否正确） 1.2.2作用： 1、用户回调信息的验签（验签文档： https://pay.weixin.qq.com/wiki/doc/apiv3/wechatpay/wechatpay4_1.shtml ），验签的方法很多，这里就不提供了，【重要】：[图片]这个顺序不能改变，顺序改变会出现验签失败，接口返回的来的顺序不要修改，可能某些方法会修改顺序（亲测加咨询）。 2、敏感信息加解密（[https://pay.weixin.qq.com/wiki/doc/apiv3_partner/wechatpay/wechatpay4_3.shtml]） 1.2.3检查微信支付平台证书使用是否正确： 1：检查回调信息返回的微信支付平台证书序列号和商户现有的微信支付平台证书序列号是否一致，如果不一致，请重新下载 2：如果重新下载的微信支付平台证书序列号跟当前回调的微信支付平台证书序列号不一致，则应该是下载的微信支付平台证书的商户号不是当前回调订单的商户 1.2.4微信支付平台证书序列号获取方式及作用 获取：跟微信支付平台证书获取方式一致（对应字段：serial_no） 作用：1.回调参数返回给商户，用于验证回到的安全性（也可以用来区分是哪一个商户的回调，因为每个商户的微信支付平台证书序列号不一致） 2.用户敏感信息加密时，当作加密标识 注意：回调返回的和请求接口时返回的证书序列号是微信支付平台证书序列号，不是商户API证书序列号，二者不一样 2. apiv3密钥（v3接口使用） 2.1如何设置： https://kf.qq.com/faq/180830E36vyQ180830AZFZvu.html （文档说明了如何设置，这里就不提供商户平台的截图了） 2.2作用： v3接口下，商户对支付回调的解密（咨询技术支持说逻辑是发给我们的回调通知是使用我们商户平台设置的apiv3密钥进行加密的，所以也是使用它来解密，解密失败有三种可能：1.apiv3密钥错误，跟当时设置的不一样2.使用的apiv3的密钥不是当前订单对应商户号下设置的apiv3密钥）（官方解密： https://pay.weixin.qq.com/wiki/doc/apiv3/wechatpay/wechatpay4_2.shtml ，亲测报错AEADBadTagException: Tag mismatch! 检查就是apiv3密钥错误导致 ）3.解密的参数不完整，请检查回调参数的完整性 3.apiv2密钥（v2接口使用） 3.1如何设置： https://kf.qq.com/faq/180830UVRZR7180830Ij6ZZz.html （文档说明了如何设置，这里就不提供商户平台的截图了） 3.2作用： 商户调用v2接口时，使用api密钥进行签名，或者对v2接口返回的回调信息进行验签和解密（部分回调需要解密，比如退款回调） 注意：apiv3密钥和apiv2密钥不是同一个参数，作用不相同，二者独立设置，且互不影响

嵌套cover-view 使用wx:if无效，求大佬提供思路

leafletwx是基于leaflet，使用微信原生组件开发的一套开源地图组件，目的是替换小程序内的原生map组件，项目开源地址：leatletwx。 本示例开源地址在leafletwx的bdmap页面。 本示例使用的其他组件：1.tileLayer.baidu.js来自开源项目leaflet-tileLayer-baidugaode，将引入leaflet改为引入leafletwx。2.proj4.js、proj4leaflet.js以上组件都可以在dbmap页面中获取到 pages/bdmap/bdmap.js // pages/bdmap/bdmap.js var L = require('../../components/zhgeo/leafletwx') require('./tileLayer.baidu') import {createMap} from '../../components/zhgeo/base.map' import {DefaultIcons} from '../../components/zhgeo/config.js'; const defaultIcons = new DefaultIcons(); Page({   /**    * 页面的初始数据    */   data: {   },   /**    * 生命周期函数--监听页面加载    */   onLoad(options) {     const container = this.selectComponent('#bd-leafletwx')     createMap(container, {         crs: L.CRS.Baidu,         minZoom: 3,         maxZoom: 18,         zoom: 18       }, function(map) {       L.tileLayer.baidu({ layer: 'vec' }).addTo(map),       map.setView([31.300635, 120.632314]);              // 添加marker       let m = L.marker([31.300635, 120.632314], {         src: defaultIcons.locationNow,         width: 32,         height: 32,         showInCenter: false,       }).addTo(map);       // 删除marer       // map.removeLayer( m );     });   }, }) pages/bdmap/bdmap.json {   "usingComponents": {     "v-leaflet": "/components/zhgeo/zhgeo-component"   } } pages/bdmap/bdmap.wxml <!--pages/bdmap/bdmap.wxml--> <view class="container">     <v-leaflet id="bd-leafletwx"></v-leaflet> </view> pages/bdmap/bdmap.wxss /* pages/bdmap/bdmap.wxss */ 地图展示： [图片]

需求 最近项目甲方想把PC端的地图线路绘制在手机上，并且还要在小程序上，听得我心里一惊，那么多线，那么多点符号，我该如何画啊，小程序最大setData也有1M的限制。但是需求来了就得想办法解决。 寻找方法 1、小程序方法[代码]polyline[代码]+[代码]marker[代码]（适用普通的点位渲染） 小程序文档翻了翻，发现map组件文档有个 “聚合能力” 我似乎看见了新大陆，觉得肯定可以满足，经过一番研究，还是不能满足，因为这种方法只能用[代码]polyline[代码]来画线，而点或符号用[代码]marker[代码]来画，这种方法数据要处理大多了，因为我的项目线多，符号也多还不同形状的符号，PC端的显示是使用瓦片来渲染，没有分那么多符号和点位，这个方法以失败告终。有兴趣可以看下这个博客写的内容和我这里讲的差不多：微信小程序添加外部地图服务数据 2、自定义图层WMSLayer 上面方法不行，于是我找了gis，跟他讨论了我这个需求，看看有没有办法可以满足我的需求，他们就给我推荐了自定义图层WMSLayer，他说PC端就是用这种方式实现，导入一份数据就可以了。我就说好的，我自己回去研究了一番，发现是需要引入GL的包，但是小程序不支持dom操作，和普通web页面还是有区别，于是我就放弃了该方法。 3、Leaflet插件 这个方法也是gis那边介绍的一个插件库，我寻找了很多遍，发现没有支持小程序的插件库，只是支持web网页开发，还是无法使用到小程序中。传送门leaflet地址 4、小程序个性化图层 这个方法我研究过，就是可以直接导入图层瓦片，最终腾讯生成一个个性化地图id，然后小程序调用个性化图层id。该方法好像还行，但是我没有具体操作，因为我的数据不是固定的，随时会改变，如果每次改变又去改个性化地图就惨了，这种方法适用于景区景点类型。 腾讯地图个性化图层 看见社区有人发的web效果图地址 个性化地图使用指南 我使用的方法 思来索去既然瓦片是图，那能不能让gis那边直接返回一张图片呢？我这边就贴图就行？因为小程序刚好有个[代码]自定义图片图层[代码]可以跟着地图变大变小[图片] 感觉这个方法挺好的，联想了加入是一张张瓦片我也可以对准位置贴上去，连在一起就是我想要的效果了。于是找了gis那边的同事，发现他们有这种方法可以获取图片。addGroundOverlay文档地址 思路 先看下addGroundOverlay的参数 [图片] 单独一个参数抽出来 [图片] 由图可见，有一个很重要的参数[代码]bounds[代码]这个参数，这个参数就是获取地图的对角点，用来确定当前地图视野范围，有了这个参数，我们就叫gis那边生成一张图片，然后粘贴到我们小程序的地图上面就完成了渲染。这里需要注意几点： gis那边生成的图片需要几个参数， a、需要对角点即[代码]bounds[代码]一样的参数，可以通过小程序提供的MapContext.getRegion获取当前地图的视野范围 b、需要获取你当前手机全屏屏幕宽高（windowWidth这个），用这个宽高传给gis那边生成图片的宽高 c、使用地图map组件提供的方法[代码]bindregionchange[代码]来监听，当前缩放或者中心点移动，然后去请求最新视野的图片粘贴上去 d、这里有个不好的问题就是用[代码]MapContext.updateGroundOverlay[代码]方法，更新上一张的贴图会出现闪动问题（即更新最新的图片会发生显示原来图片位置、然后隐藏才显示最新的图片位置），为了解决这个问题，我使用了每次变动位置请求最新图片，都用增加方法[代码]MapContext.addGroundOverlay[代码]去添加贴图到地图，然后把旧的贴图全部删除，为了效果看起来像懒加载，等加载完最新的图片在去删除旧的图片，这样就不会出现闪动的问题 核心代码如下： [代码]onReady: function (options) { this.MapContext = wx.createMapContext('mapId', this) this.getSystemInfo = wx.getSystemInfo().then(res => { this.getSystemInfo = res }) this.indexId = 1 }, bindregionchange: function (e) { if (e.type === 'end') { const northeast = e.detail.region.northeast const southwest = e.detail.region.southwest if (mapTimer) clearTimeout(mapTimer) mapTimer = setTimeout(()=> { this.updataMap(southwest, northeast) }, 100) } }, updataMap(southwest, northeast) { const northeast1 = { longitude: CoordTransformUtil.GCJ02ToWGS84(northeast.longitude, northeast.latitude)[0], latitude: CoordTransformUtil.GCJ02ToWGS84(northeast.longitude, northeast.latitude)[1] } const southwest1 = { longitude: CoordTransformUtil.GCJ02ToWGS84(southwest.longitude, southwest.latitude)[0], latitude: CoordTransformUtil.GCJ02ToWGS84(southwest.longitude, southwest.latitude)[1] } overlayId.push(this.indexId) this.indexId = this.indexId + 1 this.MapContext.addGroundOverlay({ id: this.indexId, src: `https://xxx/export?bbox=${northeast1.longitude},${northeast1.latitude},${southwest1.longitude},${southwest1.latitude}&bboxSR=4490&layers=&layerDefs=&size=${this.getSystemInfo.windowWidth},${this.getSystemInfo.windowHeight}`, bounds: { southwest: southwest, northeast: northeast }, success: async (res) => { // 由于使用updata图层会出现每次闪图渲染问题，所以每次获取图层都是新增的，故这里需要把每次渲染的图层删除，只留最后一次 if (mapTimer2) clearTimeout(mapTimer2) mapTimer2 = setTimeout(async() => { await Promise.all(overlayId.map(async (item) => { await this.MapContext.removeGroundOverlay({ id: item }); overlayId = overlayId.filter(fil => fil != item) })); }, 500) }, fail: (err) => { console.error(err, 'fail...addGroundOverlay') } }) } [代码] 总结 抱歉了，其实我这是不讲武德，把技术点给gis那边处理了，我这边只需要把他们处理好的图片粘贴上去就好了，经过验证该方法确实可行的哦 解决问题才是王道 代码片段：https://developers.weixin.qq.com/s/taAR41mz7GHT

概述 本文介绍了微信小程序视音视频和WebRTC的技术特征、差异等，并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC互通的实现思路以及技术方案。 关于作者 rexchang（常青）：腾讯视频云终端技术总监，2008 年毕业加入腾讯，一直从事客户端研发相关工作，先后参与过 PC QQ、手机QQ、QQ物联 等产品项目，目前在腾讯视频云团队负责音视频终端解决方案的优化和落地工作。 分别介绍一下小程序音视频和WebRTC 小程序音视频是什么？ 2017年腾讯视频云团队跟微信团队联合，将视频云 SDK 跟微信小程序整合在一起，并通过 <live-pusher> 和 <live-player> 两个标签的形式开放内部的功能。通过这两个标签，开发者可以实现在线直播、低延时监控、双人视频通话以及多人视频会议等功能 [图片] WebRTC又是什么？ WebRTC（Web Real-Time Communication），是一个支持网页浏览器进行实时语音对话或视频对话的技术，是谷歌收购 GIPS 公司而获得的一项技术，在 Chrome 浏览器上无需安装插件，通过 javascript 就可以编写实时音视频通话程序。 小程序音视频和WebRTC的区别在哪里？ 如果您跟我一样是一个实用主义者，那我就简单从实用主义角度说一下我的结论：小程序搞定了手机，WebRTC拿下了PC。 如果你对技术原理比较感兴趣，那我们就可以从多个技术的角度去列举两者的区别，下面是一张详细对比的表格： [图片] （区别一）：内部原理 小程序音视频是将腾讯视频云的 liteavsdk 嵌入到微信内部实现的，然后通过 <live-pusher> 和 <live-player> 两个标签将 SDK 内部的音视频能力开放出来。所以小程序的标签起到了开发者 API 的作用，而内部的 SDK 则是真正用来实现音视频功能。 WebRTC 由谷歌收购 GIPS 得来（这里不得不提一下，我加入腾讯时所在的第一个团队就是 QQ 团队，当时 QQ 的音视频还是购买的 GIPS 公司的产品，不过由于技术支持不能满足需求，后来我们就转为自研路线了）。所以其技术被完整的保留并且加入到了 Google 的 Chrome 浏览器内核当中。而且最近苹果也已经开始在 Safari 浏览器中支持 WebRTC 的相关能力。 （区别二）：传输协议 小程序音视频在直播场景使用了 RTMP 推流协议以及 FLV 播放协议，这两种协议都已经有多年的沉淀而且在互联网上的资料也是汗牛充栋。 小程序音视频在视频通话场景则使用了经过 UDP 改造的 RTMP 协议，相比于普通 RTMP 有更强的抗弱网能力和更低的卡顿率。 小程序音视频内核 LiteAVSDK 的抗弱网演示 WebRTC的底层则是使用RTP和RTCP两种数据协议，其中RTP主要用于音视频数据传输，而 RTCP 则用于传输控制。 （区别三）：移动端碎片化问题 小程序音视频由于是微信统一实现的，而且微信团队每个版本都尽量要求功能对齐，否则宁可不上，所以在碎片化问题上基本不存在。 相比之下，WebRTC在这里则要尴尬的多，一方面Android系统的碎片化本身让WebRTC的具体表现呈现“百花齐放”的景象，同时，iOS 目前的内嵌WebView（也就是在微信等APP里打开的各种内嵌网页）不支持WebRTC也还是个很麻烦的问题。 （区别四）：未来扩展性 小程序音视频跟随微信的版本发布，有什么问题一般是当前代码流修正，然后跟随下一个版本发布，所以一般一个功能点（比如给 pusher 加一个美颜的功能）或者一个问题点（比如不支持手势放大）从确立到最终实现（或解决）仅需要一个月的时间，而且微信APP新版本的覆盖速度也确实挺快。 相比之下，WebRTC则不是一个团队或者一家公司的问题了，因为它现在已经走标准路线，所以每一个新特性都是先确定标准，然后再推动浏览器厂商（包括苹果）进行跟随。 （区别五）： 桌面浏览器 在前面几个问题的分析上，我的观点都倾向于小程序音视频。确实，在目前国内的移动领域里，谷歌和苹果都不能一家说了算，真正说了算的还是微信。 但是在桌面浏览器这个部分，Chrome目前在PC浏览器市场上留到地位的存在决定了 WebRTC 的优势就很大了，开发者可以在不安装插件的情况下就可以实现自己想要的功能。 所以，实现同 Chrome 浏览器的音视频互通，成为了小程序音视频的一个必不可少的能力特性。 互联互通 小程序音视频和WebRTC支架并非零和博弈，双方都有自己的优势和不足，实现两者的互通就能实现 1 + 1 > 2 的效果。 PC 端 用户可以使用 Chrome 浏览器直接使用音视频能力，免去安装桌面应用程序的痛苦。 移动端 用户可以使用微信小程序直接使用音视频能力，减少安装App的等待时间。 两者结合，可以将原本局限于小应用场景下的音视频能力扩展到各行各业中。 当然，要实现互联互通，并不是特别容易，首先，我们需要对 WebRTC 协议本身有一个全面的了解： 剖析WebRTC 就像结婚一样，既然你决定要选择另一个人作为人生下半辈子的伴侣，那你肯定会先深入地了解一下TA这个人，比如性格，脾气，爱好等各个方面。 同样，我们要想很好的将小程序音视频和WebRTC打通，那也必须要多了解一下WebRTC，对其知根知底，方能和平相处。 WebRTC 的设计思路是open的 WebRTC 的接口设计一开始就尽可能把内部细节更多的暴露出来，而不是简单封装一套傻瓜式的接口。这种方案的好处是二次开发的灵活度比较高，比如您可以发现 WebRTC 的 API 可以灵活到操作很多连接细节。 但任何事情都有另一面，WebRTC的学习成本并不低，虽然Google做了很多浅显易懂的PPT来教你怎么 Getting Start，但真要完整的学进去，还是需要静下心来，慢慢啃下去。 WebRTC 有多种后台接入方案 说WebRTC喜欢迁就比人，也是一种比喻，WebRTC所支持的后台架构非常多（比如 Mixer， Mesh，Router），而且谷歌认为这些后台实现方案并不需要给出什么限制和标准，因此也就没有提供统一的后台解决方案。 这种开放式的设计思路非常好，但副作用就是实现成本高。在真刀真枪的项目落地时，没有踩坑经验的开发者就很容易被这种技术门槛挡在门外。尤其是想要将 WebRTC 真正应用到企业级解决方案中，面对录制和存档的刚性需求，就需要花费大量时间进行定制开发。 互通方案 了解到 WebRTC 的这些特点后，我们的互通方案也就比较清晰了： 首先，小程序音视频的特点是接口简单，快速上手，这是小程序的优势；而这一点恰恰是WebRTC的劣势，所以我们没有必要在小程序端为WebRTC暴露十几组接口函数，而是继续采用小程序音视频的<live-pusher> 和 <live-player> 标签来解决问题。 其次，WebRTC 的后台没有官方实现，那就意味着这里有很大的发挥空间，腾讯视频云就可以实现一套WebRTC后台并将其同小程序音视频所使用RTMP后台进行打通。简单来说，腾讯视频云要在小程序音视频和WebRTC之间充当红娘（更确切的说，应该是翻译员）的角色。 但是看过《新闻联播》里国家领导人之间谈话镜头的人都知道，这种翻译是会影响交流速度的。小程序音视频和WebRTC之间互通，中间引入一个翻译员，是不是通讯延时也就增加了？ 其实不会，因为小程序音视频和WebRTC的视频编码标准在常规应用场景中是一致的，都是H.264标准，只是音频格式不同而已。这就意味着，翻译员要做的事情很少，两边基本都能听懂对方在说什么，所以延时不会增加多少。 协议握手 下图所展示的就是腾讯视频云在小程序音视频和WebRTC互通问题上所采取的方案： [图片] （1）首先，微信端的小程序通过腾讯视频云SDK将音视频流推送到腾讯云 RTMP 服务器。 （2）其次，腾讯云 RTMP 服务器的会对音视频数据进行初步的转化处理，然后透传给腾讯视频云的实时音视频后台集群。 （3）再次，实时音视频后台会再次将数据交给一个叫做 WebRTC-Proxy 的模块，就在这里， WebRTC-Proxy 要将来自小程序音视频的音视频数据翻译成 WebRTC 理解的“语言”。 （4）最后，在PC上的Chrome浏览器，就可以通过浏览器内置的WebRTC模块跟 WebRTC-Proxy 通讯，进而看到小程序端的视频影像。 （5）上面的四个过程倒过来，就可以实现双向视频通话；而将腾讯视频云作为星型结构的中心节点，多个端（不管是小程序还是Chrome浏览器）都接入进来，那就可以形成多人音视频解决方案。 打通房间逻辑 仅仅完成了音视频数据在小程序和WebRTC之间的握手还远远不够，因为在一次成功的音视频通话背后，不仅仅是把一端的音视频数据传递到另一端这么简单，还有状态的同步和成员间的状态协同。 比如多人视频通话中，涉及到呼叫和接通的流程，其中一方如果挂断了，其他人要收到挂断的通知。同时，如果有新的参与者加入，那么其他人也要收到相应的通知。WebRTC 中有很多组件，比如 RTCPeerConnection 就负责处理网络连接中各种密密麻麻的逻辑细节。但是 WebRTC 的接口中引入的新名词非常多，对于初学者来说还是有一定的门槛，为了简化这里的逻辑，我们引入一个叫做“房间”的概念。 所谓房间（Room），就是把同时参与视频通话的各方圈在一起的一个东西。比如双人通话中，通话中的两个人 A 和 B 就可以认为在一个房间中。再比如在多人通话中，通话中的五个人（A B C D E）也可以认为是在一个房间里。 有了房间的概念，那我们就可以对刚才说的状态协同用两个简单的动作描述一下：如果有一个人加入了视频通话，那么就可以理解为他/她已经进房（EnterRoom）了；如果有一个退出了视频通话，那么就可以理解为他/她已经离开房间（LeaveRoom）了。而房间的门板上始终写着：“目前在房间里有哪几个人”。 有了房间的概念，我们就可以将小程序的两个简单的<live-pusher> 和 <live-player>标签，同 WebRTC 那一套复杂的 API 进行功能上的对齐，我们甚至不需要修改我们在第一版中定义的接口，就可以达成这个目标： <live-pusher> 标签：代表房间中的“我”。 <live-player> 标签：代表房间中的“其他人”。 内部逻辑细节 [图片] （1）<live-pusher> 的 url 接口不再传递 rtmp:// 协议的推流地址，而是传递 room:// 协议的推流地址。 （2）<live-pusher> 标签在 start 成功之后，就相当于成功进入一个 room，之后，您可以通过 onPushEvent (PUSH_EVT_ROOM_USERLIST = 1020) 事件，收到房间里还有那些人的信息。在视频通话期间，房间内各个成员的进进出出，也都会通过这个事件通知给您的小程序代码。 （3）ROOM_USERLIST 里每一项都是一个二元组（如果是 1v1 的视频通话，ROOM_USERLIST 里只会有一个人）: userid 和 playurl。 userid 代表是哪个用户， playurl 则是这个用户远程画面的播放地址。您要做的只是使用 <live-player> 标签播放这些远程画面的图像和声音而已。 （4）在 WebRTC 这一端，您可以参考我们的 webrtc API，这套 API 相对于 WebRTC 原生的 API，更适合初学者使用。 呃… 您可能会说：“你这也叫简单呀，我感觉还是要写几十行代码，能不能真的做到像一个标签一样简单呢？” 好吧，其实上面四步是我们第一个版本的接入流程，就在我们昨晚这套方案之后，小程序团队刚好推出了自定义组件的机制，于是，我们有了更好的接入方案。 能不能更简单? 如果您希望一天内就打通 webrtc 和 小程序音视频 的互通，那么我推荐您不要从零开始，因为那会耗费您太多时间去踩坑和 bugfix，推荐您直接使用我们封装好的 <webrtc-room> ，这套方案既可以帮助您完成快速接入，又能满足一定的定制需求。 另外，不要忘记在微信=>发现=>小程序=>腾讯云视频云，体验一下腾讯云官方 Demo 中的 WebRTC 互通效果哦。 [图片] <webrtc-room> 功能说明 <webrtc-room> 标签是基于 <live-pusher> 和 <live-player> 实现的用于 WebRTC 互通的自定义组件。用于实现跟 Chrome 和 App SDK 之间的视频通话功能。 版本要求 微信 6.6.6 版本开始支持。 Demo体验 (1) Chrome: 用谷歌浏览器打开 体验页面。 (2) 微信端：发现=>小程序=>搜索“腾讯视频云”，点击 视频通话 页卡，输入相同的房间号。 对接资料 源码地址 源码说明 小程序端源码 Github Chrome端源码 Github 属性定义 属性 类型 默认值 说明 template String ‘float’ 必要，标识组件使用的界面模版。 demo中内置 bigsmall，float，grid三种布局 sdkAppID String   必要，开通实时音视频服务创建应用后分配的 sdkAppID userID String   必要，用户 ID userSig String   必要，身份签名，相当于登录密码的作用 roomID Number   必要，房间号 beauty Number 0 可选， 美颜指数，取值 0 - 9，数值越大效果越明显 whiteness String 0 可选， 美白指数，取值 0 - 9，数值越大效果越明显 muted Boolean false 可选，true 静音 false 不静音 debug Boolean false 可选，true 打印推流 debug 信息 fales 不打印推流 debug 信息 bindRoomEvent Function   必要，监听 <webrtc-room> 组件返回的事件 enableIM Boolean false   可选，是否启用IM bindIMEvent Function   当IM开启时必要，监听 IM 返回的事件 aspect String 9:16 可选， 宽高比3:4, 9:16 minBitrate String 200 可选，最小码率，该数值决定了画面最差的清晰度表现 maxBitrate String 400 可选，最大码率，该数值决定了画面最好的清晰度表现 autoplay Boolean false 可选，进入房间后是否自动显示远程画面 enableCamera Boolean true 可选，开启\关闭摄像头 pureAudioPushMode Number   可选，纯音频推流模式 recordId Number   可选，自动录制时业务自定义id enableCamera Boolean true 是否开启摄像头 smallViewLeft String ‘1vw’ 小窗口距离大画面左边的距离，只在template设置为bigsmall有效 smallViewTop String ‘1vw’ 小窗口距离大画面顶部的距离，只在template设置为bigsmall有效 smallViewWidth String ‘30vw’ 小窗口宽度，只在template设置为bigsmall有效 smallViewHeight String ‘40vw’ 小窗口高度，只在template设置为bigsmall有效 waitingImg String   当微信切到后台时的垫片图片 loadingImg String   画面loading图片 操作接口 <webrtc-room> 组件包含如下操作接口，您需要先通过 selectComponent 获取 <webrtc-room> 标签的引用，之后就可以进行相应的操作了。 函数名 说明 start() 启动 pause() 暂停 resume() 恢复 stop() 停止 switchCamera() 切换摄像头 sendC2CTextMsg(receiveUser, msg, succ, fail) 发送C2C文本消息 sendC2CCustomMsg(receiveUser, msgObj, succ, fail) 发送C2C自定义消息 sendGroupTextMsg(msg, succ, fail) 发送群组文本消息 sendGroupCustomMsg(msgObj, succ, fail) 发送群组自定义消息 [代码]var webrtcroom = this.selectComponent("#webrtcroomid") webrtcroom.pause(); [代码] 事件通知 <webrtc-room> 标签通过 onRoomEvent 返回内部事件，通过 onIMEvent返回 IM 消息事件，事件参数格式如下: [代码]"detail": { "tag": "事件tag标识，具有唯一性", "code": "事件代码", "detail": "对应事件的详细参数" } [代码] 如何快速接入? 上面说了很多细节的技术原理和内部细节，如果您想要快速尝试一下，建议您阅读下面三篇文章就可以了。 一分钟跑通demo 我们准备了一个简单上手的小程序音视频Demo，输入房间号即可开始通话，这篇文章主要介绍如何把Demo快速地 run 起来。 一分钟集成组件 这篇文章主要介绍如何快速地将 <webrtc-room> 组件集成到您的小程序工程项目中。 快速调通基本功能 这篇文档就主要介绍如何二次开发了，它介绍了<webrtc-room> 中主要 API 的使用。 总结 本篇文章主要介绍了小程序音视频和Chrome浏览中重要的WebRTC技术的互通方案，希望能对您的项目开发有所帮助，期待您的反馈。

需求 做项目的时候需要用到一种日历，看完设计师的设计稿总结成：可以左右滑动切换显示的日历，能够在某一个日期下显示文字和标签，并且提供选择某一个范围内的日期和单选两种功能。 刚开始看到，想着这种组件网上也是一大堆。然而，查找了一番才知道大部分的日历组件都是上下滚动类型的，能够符合项目需求的组件不多。当然也有一些复杂的日历组件，但是我不想学习使用方法（懒）,又因为偶然间看到了日历的简单实现思路,自己花了点时间写这个组件 解析原件 根据项目需求，我得先清楚我的日历应该具备哪些信息： [代码]1. 标题，旨在说明日历的用途，如选择购票时间，选择团期等 2. 副标题，用来显示当前的年月 3. 左右切换按钮，用来翻阅日历 4. 星期（日-六） 5. 一个月的天数的排列，通过循环，只要设置好每个格子的大小，就可以按照顺序排下去，但是我们得知道几点： 5.1）每月的1号是星期几，即从哪个位置开始排 5.2）每月有多少天，即要排多少个格子 6. 按照这种排列，肯定会出现前面几个格子是空白的，后面几个格子是空白的，即上下月的残余天数 6.1）上个月的最后一天是几号，有多少 6.2）下个月的残余天数有多少 7. 底部是否存在按钮，用来操作 [代码] 分析出上面的几点，基本上可以确定为自己的日历应该是张什么样子 [图片] 分析日历的显示： [代码]1. 可以显示文字和标签，因为日历每个日期相当于一个块，所以利用定位可以很快解决显示的问题，颜色也可以根据传过来的属性进行自定义 2. 可以选择日期，从这可以分析出每一个块至少有三种颜色变化：没有选中状态，选中状态以及中间状态 [代码] 从上面的分析可以知道，我们的数据结构应该长成这样子(展示部分)： [代码]/** * 日历副标题 */ subTitle: { year: '' month: '' } /** * 日历信息 */ calendarInfo: { last: { year: -1, month: -1, list: [], swiperHeight: 999 }, cur: { year: -1, month: -1, day: -1, select: -1, //选中的时间,位置 swiperHeight: 999, //滚动框的高度 }, next: { year: -1, month: -1, list: [], swiperHeight: 999 } }, /** * 提示信息 */ tipData: [ { value: '2020-10-1', text: '国庆节', type: 'text', //文本类型 color: 'red' //文本颜色 }, { vlaue: '2020-10-1', text: '休', type: 'tag', //标签类型 color: 'lightblue'， //标签颜色 } ] [代码] 那么此时的日历应该是长成这样 [图片] 开始封装 首先我选择的组件是微信小程序的swiper 确定每个月的1号是星期几 [代码] /** * 获取某月1号是星期几 * @param {Object} date * @returns {Number} */ getFirstDayWeek(date) { return new Date(date.year, date.month - 1, 1).getDay() }, [代码] 确定每个月的天数 [代码] /** * 获取某年某月的总天数 * @param {Object} date * @returns {Number} totalDays */ getTotalDays(date) { return new Date(date.year, date.month, 0).getDate() }, [代码] 根据第二点和第三点可以轻松知道当前月份的上个月的残余天数和下个月的残余天数（日历上显示的总天数是7的倍数,且最多显示6行） [代码]/** * 根据这个月，计算上下两个月的残余天数 * @param {Object} date */ calculateResidualDays(date) { // 计算上月残余天数,需要知道1号是星期几(个数)且上月最后一天是几号(起始数值) let last_value = dateUtil.getTotalDays({ year: date.year, month: date.month - 1 }) for (let i = 0; i < date.firstDayWeek; i++) { date.list.unshift({ value: this.properties.showRemnantDays ? last_value - i : '', type: 'last' }) } // 计算下月残余天数,需要知道本月显示多少行 let total = Math.floor(date.list.length / 7) if (date.list.length % 7 > 0) { ++total } if (this.properties.fixRow) { // 设置了每月固定显示6行 total = 6 } let next_value = total * 7 - date.list.length // 设置滚动框的高度,设置变化的过渡动画 date.swiperHeight = total * 107 for (let i = 1; i <= next_value; i++) { date.list.push({ value: this.properties.showRemnantDays ? i : '', type: 'next' }) } // 格式化显示的提示信息 this.formatShowTip(date) }, [代码] 大致上日历已经显示出来了，配置显示的文字和标签 [代码] /** * 格式化文字标签 * @param {Object} date */ formatShowTip(date) { // 判断是否显示相关的节假日 if (this.properties.showHoliday) { this.formatHolidayTip(date) } // 循环遍历找出对应的要显示的文字日期 this.properties.dateText.forEach((item, index) => { date.list.forEach((arr, temp) => { let value = date.year + '-' + date.month + '-' + arr.value if (item.value === value && arr.type === 'cur') { arr.tip = item } }) }) }, [代码] 设置选中日期 点击按钮 最后 因为代码的篇幅比较大，所以没有粘贴全部，只是一部分，详细的代码可见小程序业务组件日历。 github里面的组件目前只是单纯的提供日历的显示，暂时还没有提供获取后端数据并且格式化的方法，这个可自行添加，也可以在切换月份的时候回调事件处理。 组件整体的效果变现为： [图片] 原文链接

[图片] 使用Canvas画布制作的九宫格大转盘。 九宫格思路如下： 1，画背景图，背景图由9个方块组成。第五个方块为开始方块，起按钮作用。 2，转动动画，顺时针计算8个方块的位置，清除方块，然后重绘方块。 3，开始动画按钮，canvas绑定点击事件，然后计算点击的位置，如果点击的位置处于矩形内，调用第2步，转动动画。 参考https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas.html 这里无法保存太多内容，文章请查看https://mp.weixin.qq.com/s/37WQa7uwDpvXLTi8lig06A 演示效果请浏览小程序 [图片]

因业务需求；需要在微信小程序中实现一个table，作为一个cv工程师，当然不会重复造轮子了~ 基于https://github.com/muzixiaojun/lrjTable 组件做的优化、修改；支持动态调整列宽，首列冻结、操作列冻结；左右滑动；按钮优化；表头固定； 组件源码地址：https://github.com/zss823158062/senx-table [图片]

一.背景需求及分析基于微信用户又有人跑来ask the question,emm，写了个简易版本开屏广告看看吧 🚺:小程序启动页有做过吗？ 🚹:放在page 第一页，定时跳转完事， setInterval， page:['启动页']， onShow(){  wx.redirectTo}, 导航使用custom wx.redirectTo(这时候考虑页面栈的问题), 会出现HOME导航logo,那么使用 [图片] wx.hideHomeButton可以解决 🚺:斗地主小程序，初次进来会有启动页，再次进来就没有了？ 🚹: wx.setStorageSync、app().globaldata 试试 这两个能力自己看咯，做个缓存机制就OK了，不知道斗地主啥效果，你自己完善吧。 二.效果图[图片] 三.代码片段https://developers.weixin.qq.com/s/x4CExcmQ7lAb 四.知识点参考链接小程序导航'Home'按钮知识库：https://developers.weixin.qq.com/community/develop/doc/000406fe6f41381173397478e5b809wx.setStorageSync:https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html app().globaldata:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html TIPS：emm，ヾ(•ω•`)o，拿去吧你，emm

本文章积累收集一些开发者工具异常问题的解决方案，帮助用户能够自助且更高效率地解决问题。 1.win10 21H2 系统版本开发者工具卡死（文件监听 ms-wx-file-watcher的进程卡死导致） 相关帖子： 开发者工具文件监听导致打不开，卡死怎么办？ | 微信开放社区 系统更新后，开发工具打不开，关不掉，什么问题？ | 微信开放社区 表现：开启工具会卡死，查看进程管理器，发现 ms-wx-file-watcher 进程一直卡死，停掉该进程能够正常走下去 问题原因：win10 21H2 系统版本更新，涉及对 .NEt Framework 的更新，导致编译的最简单的 C# exe 也会直接卡死 解决方案：卸载相关的更新记录，重启电脑即可 [图片] 2.win10 微信开发者工具安装完打不开（点击无反应） 表现：安装工具后打不开,查看日志：查看日志 C:\Users\用户名\AppData\Local\微信开发者工具\User Data\80d774828fc67c7dafc59cd74ce70db0\WeappLog\launch.log 下如果看到有 NUL 相关报错日志： [图片] 通常是系统NUL这个驱动缺失或者不正确。 可以通过在 cmd （使用管理员权限打开）输入 sc start null 进行验证查看表现，正常情况执行上面命令是要出现“服务实例已在运行或者成功运行的展示” [图片] 解决方案 1. 如果出现“ OpenService 失败 1060,指定的服务未安装” 则通常是注册表没有注册到 NULL 驱动。可以打开注册表首先确认下 NULL 驱动是否注册了，可以打开注册表 "计算机\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Null"  是否存在 [图片] 如果不存在，则可以使用下面的文件 https://dldir1.qq.com/WechatWebDev/test/null.reg，注册后，可以在 cmd （使用管理员权限打开）输入 sc start null 查看表现，如果能正常启动则无需下一步 2.如果出现 StartService 失败 则需要考虑是 NULL 驱动的问题 [图片] 可尝试拷贝 https://dldir1.qq.com/WechatWebDev/test/null.sys（null.sys）到 C:\Windows\System32\drivers  目录下，然后重启电脑，可以在 cmd （使用管理员权限打开）输入 sc start null 查看表现，如果能正常启动则无需下一步 3. 如果出现签名有问题，可能先关闭驱动强制签名 [图片] 可以参考下面的解决方案（如下面教程无法解决，可自行搜索下） https://jingyan.baidu.com/article/29697b917cc86cea21de3c1c.html 3.win 32 位系统打开工具到登录页面闪退 目前工具 1.06.xxx 版本 32 位支持存在问题，遇到该问题的用户可先降级使用 1.05.xxxx 工具版本 https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html [图片] 4.打开工具项目窗口卡在 loading all files 流程 该问题通常可以先打开菜单-》微信开发者工具-》调试-》调试微信开发者工具，看看调试面板错误信息。 存在几种出现情况：用户设置了系统变量 NODE_OPTIONS 值为 4.1 因为用户设置了 NODE_OPTIONS 环境变量导致 出现报错信息 --openssl-legacy-provider is not allowed in NODE_OPTIONS ，这个参数是 node17+ 版本才支持，目前工具node 版本最高为16+，无必要可去除该参数设置 [图片] 4.2 因为用户设置了 NODE_EXTRA_CA_CERTS 环境变量. [图片] 出现报错信息 stderr: Warning: Ignoring extra certs from XXX ，这个参数 NODE_EXTRA_CA_CERTS 存在可能因为设置不存在的盘符文件夹导致在文件列表获取时启动的 Node.js 进程读取不到导致报错 5.windows 图标展示不到的问题 [图片] 遇到这个问题，通常是由于看不到 svg 图标导致，此时可以打开 注册表 找到 “计算机\HKEY_CLASSES_ROOT\.svg”  看看此时的 Content Type 的数据，如果不是  image/svg+xml 的话需要修改下，然后重启工具看看。 [图片] 6. Mac 13-14 工具打开不了立即闪退问题 (signal: trace/BPT trap) 此时可以看看工具的日志信息目录有没有日志信息  ~/Library/Application\ Support/微信开发者工具/50a7d9210159a32f006158795f893857/WeappLog 如果 launch.log 中出现类似这样的日志 signal: trace/BPT trap 的。可以考虑是系统侧的拦截，大多数情况可以通过终端输入 csrutil status 看看是否是正常开启了SIP，即预期是出现  System Integrity Protection status: enabled. 的状态文案的。如果不是的话，可输入   csrutil enable 开启 SIP 并且重启电脑和工具看看 若上述案例无法解决，可加入下面的反馈群，进行问题反馈。反馈前，可以先通过打开菜单-》微信开发者工具-》调试-》调试微信开发者工具，看看有无具体报错信息。 [图片]

前言 最近在愉快的开发微信小程序的时候碰到了一个体验需求，需要在 Android 侧的滚动也需要带回弹效果，类似于在 Web 端可以使用的 better-scroll，查阅微信小程序内置组件 [代码]scroll-view[代码] 无法满足这种场景，没办法，需求得做呀，只能自己动手撸了！ 在微信小程序中，我们可以通过 WXS响应事件 来替代逻辑层处理从而有效的提高交互流畅度，其中使用到的 WXS语法 也是非常类似我们非常熟悉 JavaScript，不过很多的 JavaScript 高级语法在 WXS 模块中不能使用，具体可以点击链接进入微信小程序提供的文档。 思路 以横向滚动为例，内容的宽度大于容器的宽度时可以发生滚动，如图 [图片] 接着通过监听三个触摸事件[代码]touchstart[代码]、[代码]touchmove[代码]、[代码]touchend[代码]来实时的改变 content 的 CSS translate，从而从视觉上达到滚动的目的。 WXS 示例 我们先从一个简单的 WXS 使用示例来了解回顾一下使用方式，WXS 的模块系统类似 CommomJS 规范，使用每个模块内置的 [代码]module[代码] 对象中的 [代码]exports[代码] 属性进行变量、函数导出： [代码]// helper.wxs module.exports = { // 注意 WXS 模块中不支持函数简写 touchstart: function touchstart() { console.log('touchstart called') } } [代码] [代码]<!-- index.wmxl --> <!-- module 为模块名，可按规范任意取名 --> <wxs src="./helper.wxs" module="helper" /> <!-- 与普通的逻辑层事件不同，这里需要加上 {{}} --> <view bind:touchstart="{{ helper.touchstart }}">view</view> [代码] 这样就给 [代码]view[代码] 绑定了一个 [代码]touchstart[代码] 事件，在事件触发后，会在控制台打印出字符串 "touchstart called" 好了，现在正式进入滚动容器的逻辑实现 开工 新建 [代码]scroll.wxml[代码] 文件，准备符合上图中结构的 WXML 内容来构造出一个正确的可以滚动条件 [代码]<!-- scroll.wxml --> <!-- 即图中的 container --> <view class="container" style="width: 100vw;"> <!-- 即图中的 content --> <view class="content" style="display: inline-block; white-space: nowrap;"> <view wx:for="{{ 10 }}" wx:key="index" style="width: 200rpx; height: 300rpx; border: 1px solid; display: inline-block;">{{ item }}</view> </view> </view> [代码] 新建 [代码]scroll.wxs[代码] 文件，里边用于存放我们实现滚动的所有逻辑 接下来进行初始化操作，首先需要获取到 container 和 content 组件实例，在上一节 “WXS 示例” 中我们知道可以通过在组件中触发一个事件来调用 WXS 模块中的方法，但有没有什么方式可以不用等到用户来触发事件就可以执行吗？ 通过阅读 WXS 响应事件 文档，可以了解到，另外一种调用 WXS 模块方法就是可以通过 [代码]change:[prop][代码] 监听某一个组件的 Prop 的改变来执行 WXS 模块中指定的方法，且这个方法会立即执行一次，如下面一个示例 [代码]// helper.wxs module.exports = { setup: function setup() { console.log('setup') } } [代码] [代码]<!-- index.wxml --> <wxs src="./helper.wxs" module="helper"></wxs> <!-- 例如我们指定一个 prop 为 prop1，值为 {{ prop1Data }} --> <!-- 通过 change:prop1 语法对这个 prop 的变化进行监听 --> <view prop1="{{ prop1Data }}" change:prop1="{{ helper.setup }}"></view> [代码] [代码]// index.js Page({ data: { prop1Data: {} } }) [代码] 上面示例中，在页面初始化或 [代码]prop1Data[代码] 发生改变时（准确来说是在逻辑层对 [代码]prop1Data[代码] 调用了 [代码]setData[代码] 方法后，即使 [代码]prop1Data[代码] 的内容不变化），都会调用 [代码]hepler.wxs[代码] 模块中的 setup 方法。 现在我们可以通过 [代码]change:prop[代码] 会立即执行一次的特点，来对我们的滚动逻辑进行一次初始化操作 [代码]// scroll.wxs var exports = module.exports // 页面实例 var ownerInstance // container BoundingClientRect var containerRect // content 实例，通过此实例设置 CSS 属性 var slidingContainerInstance // content BoundingClientRect var slidingContainerRect // X方向的最小、最大滚动距离。如 -200 至 0（手势往右时，元素左移，translateX 为负值） var minTranslateX var maxTranslateX = 0 /** * @param newValue 最新的属性值 * @param oldValue 旧的属性值 * @param ownerInstance 页面所在的实例 * @param instance 触发事件的组件实例 */ exports.setup = function setup(newValue, oldValue, _ownerInstance, instance) { ownerInstance = _ownerInstance containerRect = instance.getBoundingClientRect() slidingContainerInstance = ownerInstance.selectComponent('.content') slidingContainerRect = slidingContainerInstance.getBoundingClientRect() minTranslateX = (slidingContainerRect.width - containerRect.width) * -1 } [代码] [代码]<!-- scroll.wxml --> <wxs src="./scroll.wxs" module="scroll" /> <!-- 因本案例只利用 change:[prop] 首次执行的机制，传递的给 _ 的参数是个对象字面量 --> <view class="container" style="width: 100vw;" _="{{ { k: '' } }}" change:_="{{ scroll.setup }}" bind:touchstart="{{ scroll.touchstart }}" bind:touchmove="{{ scroll.touchmove }}" bind:touchend="{{ scroll.touchend }}" > <view class="content" style="display: inline-block; white-space: nowrap;"> <view wx:for="{{ 10 }}" wx:key="index" style="width: 200rpx; height: 300rpx; border: 1px solid; display: inline-block;">{{ item }}</view> </view> </view> [代码] 完成基本的跟随手指移动 [代码]// scroll.wxs var exports = module.exports // 页面实例 var ownerInstance // container BoundingClientRect var containerRect // content 实例，通过此实例设置 CSS 属性 var slidingContainerInstance // content BoundingClientRect var slidingContainerRect // X方向的最小、最大滚动距离。如 -200 至 0（手势往右时，元素左移，translateX 为负值） var minTranslateX var maxTranslateX = 0 /** * @param newValue 最新的属性值 * @param oldValue 旧的属性值 * @param ownerInstance 页面所在的实例 * @param instance 触发事件的组件实例 */ exports.setup = function setup(newValue, oldValue, _ownerInstance, instance) { ownerInstance = _ownerInstance containerRect = instance.getBoundingClientRect() slidingContainerInstance = ownerInstance.selectComponent('.content') slidingContainerRect = slidingContainerInstance.getBoundingClientRect() minTranslateX = (slidingContainerRect.width - containerRect.width) * -1 } // 实时记录 content 位置 var pos = { x: 0 } // 记录每次触摸事件开始时，content 的位置，后续的移动都是基于此值增加或减少 var startPos = { x: 0 } // 记录触摸开始时，手指的位置，后续需要通过比较此值来计算出移动量 var startTouch = { clientX: 0 } function setTranslate(pos0) { slidingContainerInstance.setStyle({ transform: 'translateX(' + pos0.x + 'px)' }) pos.x = pos0.x } exports.touchstart = function touchstart(event) { startTouch.clientX = event.changedTouches[0].clientX startPos.x = pos.x } exports.touchmove = function touchmove(event) { var deltaX = event.changedTouches[0].clientX - startTouch.clientX var x = startPos.x + deltaX setTranslate({ x: x }) } exports.touchend = function touchend() {} [代码] 效果图： [图片] 处理松手后移动超出的情况，需要对其归位： 添加 clamp 工具方法 [代码]// 给出最小、最大、当前值，返回一个在最下-最大范围之间的结果 // 如： -100, 0, -101 => -100 function clamp(min, max, val) { return Math.max(min, Math.min(max, val)) } [代码] 在 touchend 事件中，添加位置校验的逻辑 [代码]// scroll.wxs exports.touchend = function touchend() { setTranslate({ x: clamp(minTranslateX, maxTranslateX, pos.x) }) } [代码] 看看效果： [图片] 回去是能回去了，有点生硬~ 加上松手回弹动画 其中动画可以使用两种实现方式 CSS Transition：在松手后，给 content 元素设置一个 [代码]transition[代码]，然后调整 [代码]translateX[代码] 值归位 JS 帧动画：在松手后，利用动画函数不断调整 [代码]translateX[代码] 来进行归位 两种方式通过给相同的动画函数可以达到一样的体验，但 CSS Transition 在我的理解中不太好处理中止的情况，如在动画过程中，又有了新的触摸事件，这里就会产生抖动或未预期到的结果，但 JS 动画可以很简单的应对 因此后续的动画部分打算采用 JS 动画实现，先准备一些动画函数 [代码]// scroll.wxs // 下面内容通过 better-scroll 借鉴 ~ // 可以理解为入参是一个 [0, 1] 的值，返回也是一个 [0, 1] 的值，用来表示进度 var timings = { v1: function (t) { return 1 + --t * t * t * t * t }, v2: function(t) { return t * (2 - t) }, v3: function(t) { return 1 - --t * t * t * t } } [代码] 定义 [代码]moveFromTo[代码] 方法来实现从一个点通过指定的动画函数运动到另一点 [代码]// scroll.wxs /** * @param fromX 起始点xx * @param toX 目标点 x * @param duration 持续时长 * @param timing 动画函数 */ function moveFromTo(fromX, toX, duration, timing) { if (duration === 0) { setTranslate({ x: fromX }) } else { var startTime = Date.now() var disX = toX - fromX var rAFHandler = function rAFHandler() { var progressX = timing(clamp(0, 1, (Date.now() - startTime) / duration)) setTranslate({ x: disX * progressX + fromX }) if (progressX < 1) { ownerInstance.requestAnimationFrame(rAFHandler) } } ownerInstance.requestAnimationFrame(rAFHandler) } } [代码] 调整 touchend 事件处理逻辑，添加归位的动画效果 [代码]// scroll.wxs exports.touchend = function touchend() { moveFromTo( pos.x, clamp(minTranslateX, maxTranslateX, pos.x), 800, timings.v1 ) } [代码] 看看效果： [图片] 看起来达到了目的，再优化一下，在滑动超出边界后，需要给一些阻力，不能滑的“太简单了” 给超边界的滚动加阻力 [代码]// scroll.wxs exports.touchmove = function touchmove(event) { var deltaX = event.changedTouches[0].clientX - startTouch.clientX var x = startPos.x + deltaX // 阻尼因子 var damping = 0.3 if (x > maxTranslateX) { // 手指右滑导致元素左侧超出，超出部分添加阻尼行为 x = maxTranslateX + damping * (x - maxTranslateX) } else if (x < minTranslateX) { // 手指左滑导致元素右侧超出，超出部分添加阻尼行为 x = minTranslateX + damping * (x - minTranslateX) } setTranslate({ x: x }) } [代码] 瞅瞅： [图片] 效果达到了，手指都划出屏幕了，才移动了这么一点距离 到现在已经完成了一个带回弹效果的滚动容器，但还没有做到“平滑”，即在滑动一段距离松手后，需要给 content 一些“惯性”来继续移动一些距离，体验起来就不会那么生硬 加滑动惯性 在这之前，还有一些准备工作需要做 [代码]// scroll.wxs // 记录触摸开始的时间戳 + var startTimeStamp = 0 // 增加动画完成回调 + function moveFromTo(fromX, toX, duration, timing, onComplete) { if (duration === 0) { setTranslate({ x: fromX }) + ownerInstance.requestAnimationFrame(function() { + onComplete && onComplete() + }) } else { var startTime = Date.now() var disX = toX - fromX var rAFHandler = function rAFHandler() { var progressX = timing(clamp(0, 1, (Date.now() - startTime) / duration)) setTranslate({ x: disX * progressX + fromX }) if (progressX < 1) { ownerInstance.requestAnimationFrame(rAFHandler) + } else { + onComplete && onComplete() + } } ownerInstance.requestAnimationFrame(rAFHandler) } } exports.touchstart = function touchstart(event) { startTouch.clientX = event.changedTouches[0].clientX startPos.x = pos.x + startTimeStamp = event.timeStamp } [代码] 因为是在松手后加动量，所以继续处理 touchend [代码]// scroll.wxs exports.touchend = function touchend(event) { // 记录这一轮触摸动作持续的时间 var eventDuration = event.timeStamp - startTimeStamp var finalPos = { x: pos.x } var duration = 0 var timing = timings.v1 var deceleration = 0.0015 // 计算动量，以下计算方式“借鉴”于 better-scroll，有知道使用什么公式的朋友告知以下~ var calculateMomentum = function calculateMomentum(start, end) { var distance = Math.abs(start - end) var speed = distance / eventDuration var dir = end - start > 0 ? 1 : -1 var duration = Math.min(1800, (speed * 2) / deceleration) var delta = Math.pow(speed, 2) / deceleration * dir return { duration: duration, delta: delta } } // 此次滑动目的地还在边界中，可以进行动量动画 if (finalPos.x === clamp(minTranslateX, maxTranslateX, finalPos.x)) { var result = calculateMomentum(startPos.x, pos.x) duration = result.duration finalPos.x += result.delta // 加上动量后，超出了边界，加速运动到目的地，然后触发回弹效果 if (finalPos.x > maxTranslateX || finalPos.x < minTranslateX) { duration = 400 timing = timings.v2 var beyondDis = containerRect.width / 6 if (finalPos.x > maxTranslateX) { finalPos.x = maxTranslateX + beyondDis } else { finalPos.x = minTranslateX + beyondDis * -1 } } } moveFromTo(pos.x, finalPos.x, duration, timing, function () { // 若动量动画导致超出了边界，需要进行位置修正，也就是回弹动画 var correctedPos = { x: clamp(minTranslateX, maxTranslateX, pos.x) } if (correctedPos.x !== pos.x) { moveFromTo( pos.x, correctedPos.x, 800, timings.v1 ) } }) } [代码] 继续看看效果： [图片] 有了有了 只是现在的滚动容器还很“脆弱”，在进行动量动画、回弹动画时，如果手指继续开始一轮新的触摸，就会出现问题，也就是最开始我们在选择 CSS 过渡和 JS 动画考虑到的问题 解决连续触摸滑动问题 在 [代码]moveFromTo[代码] 方法中，添加强制中止的逻辑 [代码]// scroll.wxs + var effect = null function moveFromTo(fromX, toX, duration, timing, onComplete) { + var aborted = false if (duration === 0) { setTranslate({ x: fromX }) ownerInstance.requestAnimationFrame(function () { onComplete && onComplete() }) } else { var startTime = Date.now() var disX = toX - fromX var rAFHandler = function rAFHandler() { + if (aborted) return var progressX = timing(clamp(0, 1, (Date.now() - startTime) / duration)) setTranslate({ x: disX * progressX + fromX }) if (progressX < 1) { ownerInstance.requestAnimationFrame(rAFHandler) } else { onComplete && onComplete() } } ownerInstance.requestAnimationFrame(rAFHandler) } + if (effect) effect() + effect = function abort() { + if (!aborted) aborted = true + } } exports.touchstart = function touchstart(event) { startTouch.clientX = event.changedTouches[0].clientX startPos.x = pos.x startTimeStamp = event.timeStamp + if (effect) { + effect() + effect = null + } } [代码] 体验一下： [图片] 这样一个带回弹的平滑滚动容器就处理的可以使用啦，有问题的地方欢迎大家指出讨论 结尾 完整源码托管在 Github 中：weapp-scroll 其中功能、逻辑更为完善，并同时支持横向、竖向方向的滚动，适合在 Android、PC 场景的使用（毕竟 IOS 侧可以直接使用微信内置组件 [代码]scroll-view[代码]~）。若有帮到希望可以给个星星~ 完~

在JavaScript世界里，有些操作会让你无法理解，但是却无比优雅! 有时候读取变量属性时，他可能不是Ojbect。这个这个你就要判断这个变量是否为对象，如果是在如引用 [代码]var obj; if(obj instanceof Object){ console.log(obj.a); }else{ console.log('对象不存在'); } [代码] ES6中有简便写法，可以帮我们简短代码，从而更加明确 [代码]var obj; console.log(obj?.a || '对象不存在'); [代码] 1,2,3,4,5,6…10,11,12 小于10的前面补0 其实我们用slice函数可以巧妙解决这个问题 slice(start,end); start:必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 end :可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 [代码]var list=[1,2,3,4,5,6,7,8,9,10,11,12,13]; list=list.map(ele=>('0' + ele).slice(-2)); console.log(list); [代码] [图片] 打印可视化console.table() [代码]var obj = { name: 'Jack' }; console.table(obj); obj.name= 'Rose'; console.table(obj); [代码] [图片] 获取数组中的最后的元素 数组方法slice()可以接受负整数，如果提供它，它将从数组的末尾开始截取数值，而不是开头。 [代码]let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1)); // Result: [9] console.log(array.slice(-2)); // Result: [8, 9] console.log(array.slice(-3)); // Result: [7, 8, 9] [代码] es6模板字符串 [代码]let name = "Charlse" let place = "India"; let isPrime = bit =>{ return (bit === 'P'? 'Prime' : 'Nom-Prime') } let messageConcat = `Mr.name' is form ${place} .He is a ${isPrime('P')} member`; [代码] H5语音合成 在网页端实现将指定的文字进行语音合成并进行播报。 使用HTML5的Speech Synthesis API就能实现简单的语音合成效果。 [代码]<input id="btn1" type="button" value="点我" onclick="test();" /> <script> function test() { const sos = `阿尤！不错哦`; const synth = window.speechSynthesis; let msg = new SpeechSynthesisUtterance(sos); synth.speak(msg) } </script> [代码] 然后点击按钮，就会触发test方法的执行实现语音合成 这里推荐使用Chrome浏览器，因为HTML5的支持度不同 数字取整 [代码]let floatNum = 100.5; let intNum = ~~floatNum; console.log(intNum); // 100 [代码] [图片] 字符串转数字 [代码]let str="10000"; let num = +str; console.log(num); // 10000 [代码] 交换对象键值 [代码]let obj = { key1: "value1", key2: "value2" }; let revert = {}; Object.entries(obj).forEach(([key, value]) => revert[value] = key); console.log(revert); [代码] [图片] 数组去重 [代码]let arrNum = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ]; let arrString = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0" ]; let arrMixed = [ 1, "1", "2", true, false, false, 1, 2, "2" ]; arrNum = Array.from(new Set(arrNum)); arrString = [...new Set(arrString)]; arrMixed = [...new Set(arrMixed)]; console.log(arrNum); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] console.log(arrString); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"] console.log(arrMixed); // [1, "1", "2", true, false, 2] [代码] 数组转化为对象 [代码]const arr = [1,2,3] const obj = {...arr} console.log(obj) [代码] 合并对象 [代码]const obj1 = { a: 1 } const obj2 = { b: 2 } const combinObj = { ...obj1, ...obj2 } console.log(combinObj) [代码] 也就是通过展开操作符(spread operator)来实现。 获取数组中的最后一项 [代码]let arr = [0, 1, 2, 3, 4, 5]; const last = arr.slice(-1)[0]; console.log(last); [代码] 一次性函数，适用于初始化的一些操作 [代码]var sca = function() { console.log('msg')//永远只会执行一次 sca = function() { console.log('foo') } } sca() // msg sca() // foo sca() [代码] 提高工作效率，减少代码量，降低键盘磨损程度 我希望你喜欢它并学到了一些新东西 感谢你的阅读，编程快乐！

为什么用wxs格式化时间呢？ 使用小程序的wxs格式化时间可以使代码更简洁、易读，并且可以避免在多个地方使用相同的时间格式化代码，提高了代码的可维护性和可重用性。此外，wxs运行在渲染层，可以减少渲染层和逻辑层之间的通信开销，提高小程序的性能。 只需要三步，就可以做一个格式化时间的过滤器（代码亲测可用） 1 在小程序的工程目录中，创建一个名为“filters”的文件夹，然后在该文件夹下创建一个名为“timeFilter.wxs”的文件，用于实现时间格式化过滤器。 2 在“timeFilter.wxs”文件中，定义一个名为“timeFormat”的函数，用于格式化时间。该函数接收一个时间参数（可以是当前时间、时间戳、毫秒时间戳或Date格式的时间），以及一个格式化字符串参数（例如“yyyy-MM-dd HH:mm:ss”），返回格式化后的时间字符串。 function timeFormat(timestamp, format) { if (!format) { format = "yyyy-MM-dd hh:mm:ss"; } var realDate if ((timestamp + '').length == 10 || (timestamp + '').length == 13) { if ((timestamp + '').length == 10) timestamp = timestamp * 1000; timestamp = parseInt(timestamp); realDate = getDate(timestamp); } else { timestamp = timestamp.replace(getRegExp("T", 'g'), ' '); timestamp = timestamp.replace(getRegExp("-", 'g'), '/'); realDate = timestamp; } var realDate = getDate(timestamp); function timeFormat(num) { return num < 10 ? '0' + num : num; } var date = [ ["M+", timeFormat(realDate.getMonth() + 1)], ["d+", timeFormat(realDate.getDate())], ["h+", timeFormat(realDate.getHours())], ["m+", timeFormat(realDate.getMinutes())], ["s+", timeFormat(realDate.getSeconds())], ["q+", Math.floor((realDate.getMonth() + 3) / 3)], ["S+", realDate.getMilliseconds()], ]; var reg1 = regYear.exec(format); if (reg1) { format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length)); } for (var i = 0; i < date.length; i++) { var k = date[i][0]; var v = date[i][1]; var reg2 = getRegExp("(" + k + ")").exec(format); if (reg2) { format = format.replace(reg2[1], reg2[1].length == 1 ? v : ("00" + v).substring(("" + v).length)); } } return format; } var regYear = getRegExp("(y+)", "i"); module.exports = { timeFormat: timeFormat }; 3 在需要使用过滤器的页面的.wxml文件中，引入“timeFilter.wxs”文件，使用<wxs>标签将其定义为一个模块，然后在需要格式化时间的地方使用过滤器。 <wxs module="timeFilter" src="../test/fimeFilter.wxs"></wxs> <!-- 格式化时间戳 --> <view>{{timeFilter.timeFormat(1613509857, 'yyyy-MM-dd hh:mm:ss')}}</view> <!-- 格式化毫秒时间戳 --> <view>{{timeFilter.timeFormat(1613509857123, 'yyyy-MM-dd hh:mm:ss')}}</view> <!-- 格式化Date格式的时间 --> <view>{{timeFilter.timeFormat('2022-02-12T12:00:00', 'yyyy-MM-dd hh:mm:ss')}}</view> <view>{{timeFilter.timeFormat('2022/02/12 12:00:00', 'yyyy-MM-dd hh:mm:ss')}}</view> 当然，小程序的wxs不仅仅可以格式化时间，还可以用于实现一些数据的计算、格式化、过滤等功能，主要包括以下方面： 数据的格式化：可以将时间、货币、数字等数据进行格式化，例如将时间转换为指定格式的字符串，将数字保留指定位数的小数等。数据的计算：可以进行简单的数学运算，例如加减乘除、求余数等。数据的过滤：可以实现对数据的筛选和过滤，例如过滤出符合条件的数组元素、去除字符串中的空格等。数据的操作：可以对数据进行一些简单的操作，例如获取数组的长度、获取字符串的子串等。 需要注意的是，小程序的wxs并不是完整的JavaScript语言，它是在JavaScript的基础上进行了一定的限制和扩展。因此，在使用wxs时需要遵守小程序的规范和限制，例如不能使用全局变量、不能直接访问页面的DOM元素等。 更多关于wxs的详细说明，可以移步官方文档 《WXS介绍》

今天在page页面上使用map组件，出现显示卡顿的情况，后来发现cpu占用过高 经过多次尝试，即使只是增加<map></map>，并且整个页面只有map一个组件，也会导致cpu占用过高 后来打开一个老项目，却并没有这种卡顿的情况 无意中发现其调试库的版本为 2.10.4，尝试调整新项目的版本库，结果情况好转。 后来再往上调整，到2.11.3不会卡顿，再往上就卡 请教各位，这是否属于我个人情况？如果不是，有没有什么好的解决办法？

今天在使用picker时，发现回调的值不正常。不管选什么，e.detail.value都没有变化。检查环境，检查代码，换设备，折腾了一下午，天黑了，才发现是分离模拟器引发的问题。唉。。请大家避坑吧。 分离模拟器后，picker回调的值，将会失效，固定为index的值。把模拟器恢复到开发工具内后，回调的值恢复正常。 [图片][图片]

前言 在这个“全民读图”的时代，传统的地图样式已经很难满足人们多样化的需求。腾讯位置服务一直在让地图变“美”的路上持续探索，力求提供更好的地图视觉体验。 信息时代数据为王，将抽象的数据以直观生动的可视化效果呈现出来，可以让人们更容易发现数据背后的规律，提升业务决策的效率。如果这些数据同时带有地理位置属性，那么可视化与地图的结合就更加浑然天成了。 近年以来，腾讯位置服务在数据可视化方面持续发力，不仅对Web端的数据可视化效果进行了全新升级，还在业内首发了APP端的数据可视化图层。 最近上线的可视化图层编辑平台，为开发者提供了一个非常便捷的工具。鼠标轻点之间，一个专业美观的图层样式便呼之欲出，大大降低了开发者配置可视化图层的难度，提升了创建图层的效率。 一、强大编辑平台，配置轻松掌握 1.1风格配置 辐射半径、热力高度、蜂窝类型、蜂窝高度等参数的开放，让多变的数据规模和分布都有一个合理的表达；颜色、透明度、生长动画等参数的设置更是给予了开发者个性化定制的充足空间。 [图片] 另外，编辑平台还预置了多套配色模板，包括通用、暖色系、冷色系、强烈对比等。开发者无需繁琐的配置，选择对应的模板即可直接拥有“高颜值”的可视化效果。 [图片] 1.2显示控制 编辑平台支持控制图层与POI的上下层叠关系、极值的显示区间等；同时，还支持设置图层在哪些地图级别中显示。开发者可以根据业务需要，自由控制图层在什么条件下、以什么样的方式显示出来。掌控，随心所欲！ [图片] 1.3修改底图样式 图层编辑平台做到了与个性化样式的完美结合。开发者在编辑数据图层之前，可以选择任意一套个性化样式作为底图，让你的可视化效果更加出类拔萃、别具一格。平台内置了11套个性化样式的模板，总有一款适合你！ [图片] 1.4快速预览，所见即所得 上面提到的所有配置修改，都可以在编辑平台的右侧预览界面实时看到效果。如果下载了我们的SDK Demo，还可以在移动端预览效果。随时预览，随时调整，帮助开发者轻松的将可视化效果调至最佳。 [图片] 二、支持小程序，全平台通用 之前我们的可视化图层已经覆盖了Web端和移动端，最近我们也打通了微信小程序端的开发接口，真正做到了全平台通用，成为腾讯位置服务的独特优势！一次编辑，多端共用，将大大节省开发者的配置成本。 详情可参考可视化图层使用指南，了解各应用端如何调用。 [图片] 三、丰富应用场景 可视化数据图层的应用场景非常广泛，已经有多家客户接入了这项功能。 比如飞常准的飞行记录模块，就是基于我们弧线图的可视化效果，绘制出专属于每一个用户的航线网络图，为用户织出一张以家为中心的网。 [图片] 而像热力图这种可视化样式，则广泛的应用于各类后台管理系统当中，比如景区、商场、机场车站等等，用于管理人员对人流量进行实时监控，提高管理效率。 [图片] 还有像蜂窝热力图，则被我们的出行行业客户用到了司机端APP上，用来显示司机周边区域的订单分布情况，让司机做到“有的放矢”，增加接单成功率。 [图片] 总结 相信看到这里，有很多的开发者已经准备跃跃欲试了。我们期待着数据可视化产品能够与你的业务场景深度结合，助力客户业务高速发展。欢迎大家登录腾讯位置服务官网，进入控制台-数据图层，立即体验数据图层编辑平台，让你的数据“活”起来，跃然“图”上！

最近动态 wx.getUserProFile() 在2.16.0成功回调有iv、encryptedData，具体看这里https://developers.weixin.qq.com/community/develop/doc/000c04d0490118d8a6ebf675a56c00 调整背景 很多开发者在打开小程序时就通过组件方式唤起 getUserInfo 弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。详情可以点击官方调整链接(https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801) 调整前后API功能的对比[图片] [图片] 能力检测 两个前提条件： 1.开发者工具版本不低于 1.05.21030222.基础库版本不低于 2.10.4[图片] 代码片段: https://developers.weixin.qq.com/s/odMs3wmX7Ko3 测试过程 step1: 在开发工具设置清除全部缓存step2: 点击 getUserInfo 按钮，会弹出用户授权，允许后会得到这些信息，见截图[图片] step3: 在终端输入下面代码，也可以获取上面截图数据（今天还不到截止时间，还能获取完整的用户头像和昵称）wx.getUserInfo({ complete: (res) => { console.log(res) } }) step4: 点击 getUserProfile 按钮，会弹出用户授权，允许后会得到这些信息，见截图（只有用户昵称和头像信息）[图片] step5: 通用在终端输入下面代码，获取不到任何信息，符合`若开发者需要获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取，且开发者每次通过该接口获取用户个人信息均需用户确认`wx.getUserProfile({ complete: (res) => { console.log(res) } }) step6: 可以重复点击 getUserInfo 按钮和 getUserProfile 按钮进行测试。功能对比讲解 1.4月13日前未发布的，wx.getUserInfo 能力 wx.getUserInfo(Object object) 会返回 encryptedData、signature、rawData，通过将返回的数据传递给服务器，服务端能解析出用户的身份标识，即 unionId(unionId 获取机制：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/union-id.html) 【对我们业务来说】 从 wx.getUserInfo 就是要两样东西：unionId和用户信息（头像和昵称）。 但从 2021年2月23日起，可以通过 wx.login 接口获取的登录凭证可直接换取 unionID，可以替代一部分wx.getUserInfo 的功能了。 2.新增 getUserProfile 能力 wx.getUserProfile 能获取到头像和昵称，可以替代 wx.getUserInfo 的另外一部分功能。 3.小结 从这里是不是可以得出，wx.login + wx.getUserProfile 基础可以替代之前的 4月13日前未发布的，wx.getUserInfo 能力。其实不然，如果真是这样的，官方是不是没必要这样搞，咱们接着看。 4.wx.getUserInfo 和 wx.getUserProfile 区别 1.功能上是 wx.getUserInfo  不在返回用户授权的头像昵称，只返回匿名信息，但 wx.getUserProfile 会返回用户授权的头像昵称。2.wx.getUserInfo 授权成功后，当下次调用时，可以直接获取授权成功返回数据，不需要每次都需要用户确认，但 wx.getUserProfile 每次都需要用户确认允许后才能拿到用户信息3.对于业务来说，可以通过 wx.getUserProfile 获取用户信息和昵称后，要存在自己服务器，不能像之前那样每次都通过 wx.getUserInfo 方式获取，否则体验会比较差疑问 1.4月13日后发布的新版本小程序，如果用户未更新到新版本，此时调用 wx.getUserInfo 会不会返回用户授权的头像昵称（如果不确定，业务可能需要兼容处理）2.4月13日后发布的新版本小程序，用户更新到新版本，调用 wx.getUserInfo 返回匿名的头像昵称支持服务器解密吗？ 常见问题汇总 1.wx.canIUse 判断getUserProfile结果是false，可以通过直接判断 wx.getUserProfile 即可，类似问题可以查看官方知识库（https://developers.weixin.qq.com/community/develop/doc/000cac40cf0eb8d3e429647c351c09?_at=1614912876047）

UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]

写在前面 今天你可以在小程序中使用 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 参考文档

前言 在开发小程序的过程中，很多时候会需要使用富文本内容，然而现有的方案都有着或多或少的缺陷，如何更好的显示富文本将是一个值得继续探索的问题。 [图片] 现有方案 WxParse [代码]WxParse[代码] 作为一个应用最为应用最广泛的富文本插件，在很多时候是大家的首选，但其也明显的存在许多问题。 格式不正确时标签会被原样显示 很多人可能都见到过这种情况，当标签里的内容出现格式上的错误（如冒号不匹配等），在[代码]WxParse[代码]中都会被认为是文本内容而原样输出，例如：[代码]<span style="font-family:"宋体"">Hello World!</span> [代码] 这是由于[代码]WxParse[代码]的解析脚本中，是通过正则匹配的方式进行解析，一旦格式不正确，就将导致无法匹配而被直接认为是文本[代码]//WxParse的匹配模式 var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/, endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/, attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; [代码] 然而，[代码]html[代码] 对于格式的要求并不严格，一些诸如冒号不匹配之类的问题是可以被浏览器接受的，因此需要在解析脚本的层面上提高容错性。 超过限定层数时无法显示 这也是一个让许多人十分苦恼的问题，[代码]WxParse[代码] 通过 [代码]template[代码] 迭代的方式进行显示，当节点的层数大于设定的 [代码]template[代码] 数时就会无法显示，自行增加过多的层数又会大大增加空间大小，因此对于 [代码]wxml[代码] 的渲染方式也需要改进。 对于表格、列表等复杂内容支持性差 [代码]WxParse[代码] 对于 [代码]table[代码]、[代码]ol[代码]、[代码]ul[代码] 等支持性较差，类似于表格单元格合并，有序列表，多层列表等都无法渲染 rich-text [代码]rich-text[代码] 组件作为官方的富文本组件，也是很多人选择的方案，但也存在着一些不足之处 一些常用标签不支持 [代码]rich-text[代码] 支持的标签较少，一些常用的标签（比如 [代码]section[代码]）等都不支持，导致其很难直接用于显示富文本内容 ps：最新的 2.7.1 基础库已经增加支持了许多语义化标签，但还是要考虑低版本兼容问题 不能实现图片和链接的点击 [代码]rich-text[代码] 组件中会屏蔽所有结点事件，这导致无法实现图片点击预览，链接点击效果等操作，较影响体验 不支持音视频 音频和视频作为富文本的重要内容，在 [代码]rich-text[代码] 中却不被支持，这也严重影响了使用体验 共同问题 不支持解析 [代码]style[代码] 标签 现有的方案中都不支持对 [代码]style[代码] 标签中的内容进行解析和匹配，这将导致一些标签样式的不正确 [图片] 方案构建 因此要解决上述问题，就得构建一个新的方案来实现 渲染方式 对于该节点下没有图片、视频、链接等的，直接使用 [代码]rich-text[代码] 显示（可以减少标签数，提高渲染效果），否则则继续进行深入迭代，例如： [图片] 对于迭代的方式，有以下两种方案： 方案一 像 [代码]WxParse[代码] 那样通过 [代码]template[代码] 进行迭代，对于小于 20 层的内容，通过 [代码]template[代码] 迭代的方式进行显示，超过 20 层时，用 [代码]rich-text[代码] 组件兜底，避免无法显示，这也是一开始采用的方案[代码]<!--超过20层直接使用rich-text--> <template name='rich-text-floor20'> <block wx:for='{{nodes}}' wx:key> <rich-text nodes="{{item}}" /> </block> </template> [代码] 方案二 添加一个辅助组件 [代码]trees[代码]，通过组件递归的方式显示，该方式实现了没有层数的限制，且避免了多个重复性的 [代码]template[代码] 占用空间，也是最终采取的方案[代码]<!--继续递归--> <trees wx:else id="node" class="{{item.name}}" style="{{item.attrs.style}}" nodes="{{item.children}}" controls="{{controls}}" /> [代码] 解析脚本 从 [代码]htmlparser2[代码] 包进行改写，其通过状态机的方式取代了正则匹配，有效的解决了容错性问题，且大大提升了解析效率 [代码]//不同状态各通过一个函数进行判断和状态跳转 for (; this._index < this._buffer.length; this._index++) this[this._state](this._buffer[this._index]); [代码] 兼容 [代码]rich-text[代码] 为了解析结果能同时在 [代码]rich-text[代码] 组件上显示，需要对一些 [代码]rich-text[代码]不支持的组件进行转换[代码]//以u标签为例 case 'u': name = 'span'; attrs.style = 'text-decoration:underline;' + attrs.style; break; [代码] 适配渲染需要 在渲染过程中，需要对节点下含有图片、视频、链接等不能由 [代码]rich-text[代码]直接显示的节点继续迭代，否则直接使用 [代码]rich-text[代码] 组件显示；因此需要在解析过程中进行标记，遇到 [代码]img[代码]、[代码]video[代码]、[代码]a[代码] 等标签时，对其所有上级节点设置一个 [代码]continue[代码] 属性用于区分[代码]case 'a': attrs.style = 'color:#366092;display:inline;word-break:break-all;overflow:auto;' + attrs.style; element.continue = true; //冒泡：对上级节点设置continue属性 this._bubbling(); break; [代码] 处理style标签 解析方式 方案一 正则匹配[代码]var classes = style.match(/[^\{\}]+?\{([^\{\}]*?({[\s\S]*?})*)*?\}/g); [代码] 缺陷： 当 [代码]style[代码] 字符串较长时，可能出现栈溢出的问题 对于一些复杂的情况，可能出现匹配失败的问题 方案二 状态机的方式，类似于 [代码]html[代码] 字符串的处理方式，对于 [代码]css[代码] 的规则进行了调整和适配，也是目前采取的方案 匹配方式 方案一 将 [代码]style[代码] 标签解析为一个形如 [代码]{key:content}[代码] 的结构体，对于每个标签，通过访问结构体的相应属性即可知晓是否匹配成功[代码]if (this._style[name]) attrs.style += (';' + this._style[name]); if (this._style['.' + attrs.class]) attrs.style += (';' + this._style['.' + attrs.class]); if (this._style['#' + attrs.id]) attrs.style += (';' + this._style['#' + attrs.id]); [代码] 优点：匹配效率高，适合前端对于时间和空间的要求 缺点：对于多层选择器等复杂情况无法处理 因此在前端组件包中采取的是这种方式进行匹配 方案二 将 [代码]style[代码] 标签解析为一个数组，每个元素是形如 [代码]{key,list,content,index}[代码] 的结构体，主要用于多层选择器的匹配，内置了一个数组 [代码]list[代码] 存储各个层级的选择器，[代码]index[代码] 用于记录当前的层数，匹配成功时，[代码]index++[代码]，匹配成功的标签出栈时，[代码]index--[代码]；通过这样的方式可以匹配多层选择器等更加复杂的情况，但匹配过程比起方案一要复杂的多。 [图片] 遇到的问题 [代码]rich-text[代码] 组件整体的显示问题 在显示过程中，需要把 [代码]rich-text[代码] 作为整体的一部分，在一些情况下会出现问题，例如： [代码]Hello <rich-text nodes="<div style='display:inline-block'>World!</div>"/> [代码] 在这种情况下，虽然对 [代码]rich-text[代码] 中的顶层 [代码]div[代码] 设置了 [代码]display:inline-block[代码]，但没有对 [代码]rich-text[代码] 本身进行设置的情况下，无法实现行内元素的效果，类似的还有 [代码]float[代码]、[代码]width[代码](设置为百分比时)等情况 解决方案 方案一 用一个 [代码]view[代码] 包裹在 [代码]rich-text[代码] 外面，替代最外层的标签[代码]<view style="{{item.attrs.style}}"> <rich-text nodes="{{item.children}}" /> </view> [代码] 缺陷：当该标签为 [代码]table[代码]、[代码]ol[代码] 等功能性标签时，会导致错误 方案二 对 [代码]rich-text[代码] 组件使用最外层标签的样式[代码]<rich-text nodes="{{item}}" style="{{item.attrs.style}}" /> [代码] 缺陷：当该标签的 [代码]style[代码] 中含有 [代码]margin[代码]、[代码]padding[代码] 等内容时会被缩进两次 方案三 通过 [代码]wxs[代码] 脚本将顶层标签的 [代码]display[代码]、[代码]float[代码]、[代码]width[代码] 等样式提取出来放在 [代码]rich-text[代码] 组件的 [代码]style[代码] 中，最终解决了这个问题[代码]var res = ""; var reg = getRegExp("float\s*:\s*[^;]*", "i"); if (reg.test(style)) res += reg.exec(style)[0]; reg = getRegExp("display\s*:\s*([^;]*)", "i"); if (reg.test(style)) { var info = reg.exec(style); res += (';' + info[0]); display = info[1]; } else res += (';display:' + display); reg = getRegExp("[^;\s]*width\s*:\s*[^;]*", "ig"); var width = reg.exec(style); while (width) { res += (';' + width[0]); width = reg.exec(style); } return res; [代码] 图片显示的问题 在 [代码]html[代码] 中，若 [代码]img[代码] 标签没有设置宽高，则会按照原大小显示；设置了宽或高，则按比例进行缩放；同时设置了宽高，则按设置的宽高进行显示；在小程序中，若通过 [代码]image[代码] 组件模拟，需要通过 [代码]bindload[代码] 来获取图片宽高，再进行 [代码]setData[代码]，当图片数量较大时，会大大降低性能；另外，许多图片的宽度会超出屏幕宽度，需要加以限制 解决方案 用 [代码]rich-text[代码] 中的 [代码]img[代码] 替代 [代码]image[代码] 组件，实现更加贴近 [代码]html[代码] 的方式 ；对 [代码]img[代码] 组件设置默认的效果 [代码]max-width:100%;[代码] 视频显示的问题 当一个页面出现过多的视频时，同时进行加载可能导致页面卡死 解决方案 在解析过程中进行计数，若视频数量超过3个，则用一个 [代码]wxss[代码] 绘制的图片替代 [代码]video[代码] 组件，当受到点击时，再切换到 [代码]video[代码] 组件并设置 [代码]autoplay[代码] 以模拟正常效果，实现了一个类似懒加载的功能 [代码]<!--视频--> <view wx:if="{{item.attrs.id>'media3'&&!controls[item.attrs.id].play}}" class="video" data-id="{{item.attrs.id}}" bindtap="_loadVideo"> <view class="triangle_border_right"></view> </view> <video wx:else src='{{controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index]:item.attrs.src}}' id="{{item.attrs.id}}" autoplay="{{item.attrs.autoplay||controls[item.attrs.id].play}}" /> [代码] 文本复制的问题 小程序中只有 [代码]text[代码] 组件可以通过设置 [代码]selectable[代码] 属性来实现长按复制，在富文本组件中实现这一功能就存在困难 解决方案 在顶层标签上加上 [代码]user-select:text;-webkit-user-select[代码] [图片] 实现更加丰富的功能 在此基础上，还可以实现更多有用的功能 自动设置页面标题 在浏览器中，会将 [代码]title[代码] 标签中的内容设置到页面标题上，在小程序中也同样可以实现这样的功能[代码]if (res.title) { wx.setNavigationBarTitle({ title: res.title }) } [代码] 多资源加载 由于平台差异，一些媒体文件在不同平台可能兼容性有差异，在浏览器中，可以通过 [代码]source[代码] 标签设置多个源，当一个源加载失败时，用下一个源进行加载和播放，在本插件中同样可以实现这样的功能[代码]errorEvent(e) { //尝试加载其他源 if (!this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > 1) { this.data.controls[e.currentTarget.dataset.id] = { play: false, index: 1 } } else if (this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > (this.data.controls[e.currentTarget.dataset.id].index + 1)) { this.data.controls[e.currentTarget.dataset.id].index++; } this.setData({ controls: this.data.controls }) this.triggerEvent('error', { target: e.currentTarget, message: e.detail.errMsg }, { bubbles: true, composed: true }); }, [代码] 添加加载提示 可以在组件的插槽中放入加载提示信息或动画，在加载完成后会将 [代码]slot[代码] 的内容渐隐，将富文本内容渐显，提高用户体验，避免在加载过程中一片空白。 最终效果 经过一个多月的改进，目前实现了这个功能丰富，无层数限制，渲染效果好，轻量化（30.0KB），效率高，前后端通用的富文本插件，体验小程序的用户数已经突破1k啦，欢迎使用和体验 [图片] github 地址 npm 地址 总结 以上就是我在开发这样一个富文本插件的过程大致介绍，希望对大家有所帮助；本人在校学生，水平所限，不足之处欢迎提意见啦！ [图片]

[图片] 为什么要做这个？ 主要是在项目中，智酷君发现的一些问题 一些页面是通过扫码和订阅消息访问后，没有直接可以点击去首页的，需要添加一个home链接 需要添加自定义搜索功能 需要自定义一些功能按钮 [图片] 其实,第一个问题，在最近的微信版本更新中已经优化了，通过 小程序模板消息 过来的，系统会自动加上home按钮，但对于其他的访问方式则没有支持~ 一个不大不小的问题：两边ICON不对齐问题 [图片] 智酷君之前尝试了各种解决方法，发现有一个问题，就是现在手机屏幕太多种多样，有 传统头部、宽/窄刘海屏、水滴屏等等，无法八门，很多解决方案都无法解决特殊头部，系统**“胶囊按钮”** 和 自定义按钮在Android屏幕可能有 几像素不对齐 的问题（强迫症的噩梦）。 下面分享下一个相对比较完善的解决方案： [图片] 小程序代码段DEMO Link: https://developers.weixin.qq.com/s/cuUaCimT72cH ID: cuUaCimT72cH 智酷君做了一个demo代码段，方便大家直接用IDE工具查看源码~ [图片] 页面配置 1、页面JSON配置 [代码]{ "usingComponents": { "NavComponent": "/components/nav/common" //以插件的方式引入 }, "navigationStyle": "custom" //自定义头部需要设置 } [代码] 如果需要自定义头部，需要设置navigationStyle为 “custom” 2、页面代码 [代码]<!-- home 类型的菜单 --> <NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent> <!-- 搜索菜单 --> <NavComponent is-search="true" bind:commonNavAttr="commonNavAttr"></NavComponent> [代码] 可以在自定义导航标签上添加属性配置来设置功能，具体按照实际需要来 3、目录结构 [代码]│ ├─components │ └─nav │ common.js │ common.json │ common.wxml │ common.wxss │ ├─images │ back.png │ home.png │ └─index index.js index.json index.wxml index.wxss search.js search.json search.wxml search.wxss [代码] 仅供参考 插件对应的JS部分 components/nav/common.js部分 [代码]const app = getApp(); Component({ properties: { vTitle: { type: String, value: "" }, isSearch:{ type: Boolean, value: false } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 }, cusnavH: 0, //title高度 }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { if (!app.globalData.systeminfo) { app.globalData.systeminfo = wx.getSystemInfoSync(); } if (!app.globalData.headerBtnPosi) app.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect(); console.log(app.globalData) let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 console.log(statusBarHeight) console.log(headerPosi) let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） right: app.globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right } let haveBack; if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入 haveBack = false; } else { haveBack = true; } var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度 console.log( app.globalData.systeminfo.windowWidth, headerPosi.width) this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi, cusnavH: cusnavH }); //将实际nav高度传给父类页面 this.triggerEvent('commonNavAttr',{ height: headerPosi.bottom + btnPosi.bottom }); }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, bindKeyInput:function(e){ console.log(e.detail.value); } } }) [代码] 解决不同屏幕头部不对齐问题的终极办法是 wx.getMenuButtonBoundingClientRect() 这个方法从微信7.0.0开始支持，通过这个方法我们可以获取到右边系统胶囊的top、height、right等属性，这样无论是水滴屏、刘海屏、异形屏，都能完美对齐右边系统默认的胶囊bar，完美治愈强迫症~ APP.js 部分 [代码]//app.js App({ /** * 加载页面 * @param {*} options */ onShow: function (options) { }, onLaunch: async function () { let self = this; //设置默认分享 this.globalData.shareData = { title: "智酷方程式" } // this.getSysInfo(); }, globalData: { //默认分享文案 shareData: {}, qrCodeScene: false, //二维码扫码进入传参 systeminfo: false, //系统信息 headerBtnPosi: false, //头部菜单高度 } }); [代码] 将获取的参数存储在一个全局变量globalData中，可以减少反复调用的性能消耗。 插件HTML部分 [代码]<view class="custom_nav" style="height:{{navbarHeight}}px;"> <view class="custom_nav_box" style="height:{{navbarHeight}}px;"> <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;"> <!-- 搜索部分--> <block wx:if="{{isSearch}}"> <input class="navSearch" style="height:{{navbarBtn.height-2}}px;line-height:{{navbarBtn.height-4}}px; top:{{navbarBtn.top+1}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;" maxlength="10" bindinput="bindKeyInput" placeholder="输入文字搜索" /> </block> <!-- HOME 部分--> <block wx:else> <view class="custom_nav_icon {{!haveBack||'borderLine'}}" style="height:{{navbarBtn.height}}px;line-height:{{navbarBtn.height-2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;"> <view wx:if="{{haveBack}}" class="icon-back" bindtap='_goBack'> <image src='/images/back.png' mode='aspectFill' class='back-pre'></image> </view> <view wx:if="{{haveBack}}" class='navbar-v-line'></view> <view class="icon-home"> <navigator class="home_a" url="/pages/home/index" open-type="switchTab"> <image src='/images/home.png' mode='aspectFill' class='back-home'></image> </navigator> </view> </view> <view class="nav_title" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;"> {{vTitle}} </view> </block> </view> </view> </view> [代码] 主要是对几种状态的判断和定位的计算。 插件CSS部分 [代码]/* components/nav/test.wxss */ .custom_nav { width: 100%; background: #3a7dd7; position: relative; z-index: 99999; } .custom_nav_box { position: fixed; width: 100%; background: #3a7dd7; z-index: 99999; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); } .custom_nav_bar { position: relative; z-index: 9; } .custom_nav_box .nav_title { font-size: 28rpx; color: #fff; text-align: center; position: absolute; max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } .custom_nav_box .custom_nav_icon { position:absolute; z-index: 2; display: inline-block; border-radius: 50%; vertical-align: top; font-size:0; box-sizing: border-box; } .custom_nav_box .custom_nav_icon.borderLine { border: 1rpx solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.1); } .navbar-v-line { width: 1px; margin-top: 14rpx; height: 32rpx; background-color: rgba(255, 255, 255, 0.3); display: inline-block; vertical-align: top; } .icon-back { display: inline-block; width: 74rpx; padding-left: 20rpx; vertical-align: top; /* margin-top: 12rpx; vertical-align: top; */ height: 100%; } .icon-home { /* margin-top: 8rpx; vertical-align: top; */ display: inline-block; width: 80rpx; text-align: center; vertical-align: top; height: 100%; } .icon-home .home_a { height: 100%; display: inline-block; vertical-align: top; width: 35rpx; } .custom_nav_box .back-pre, .custom_nav_box .back-home { width: 35rpx; height: 35rpx; vertical-align: middle; } .navSearch { width: 200px; background: #fff; font-size: 14px; position: absolute; padding: 0 20rpx; z-index: 9; } [代码] 总结： 通过微信API: getMenuButtonBoundingClientRect(),结果各类手机屏幕的适配问题 将算好的参数存储在全局变量中，一次计算全局使用，爽YY~ ​ 往期回顾： [填坑手册]小程序PC版来了，如何做PC端的兼容？！ [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

在小程序开发过程中经常涉及到一些图表类需求，其中环形进度条比较属于比较常见的需求 [图片] [中间的文字部分需要自己实现，因为每个项目不同，本工具只实现进度条] 上图中，一方面我们我们需要实现动态计算弧度的进度条，还需要在进度条上加上渐变效果，如果每次都需要自己手写，那需要很多重复劳动，所以决定为为小程序生态圈贡献一份小小的力量，下面来介绍一下整个工具的实现思路，喜欢的给个star咯 https://github.com/lucaszhu2zgf/mp-progress 环形进度条由灰色底圈+渐变不确定圆弧+双色纽扣组成，首先先把页面结构写好： .canvas{     position: absolute;     top: 0;     left: 0;     width: 400rpx;     height: 400rpx; } 因为进度条需要盖在文字上面，所以采用了绝对定位。接下来先把灰色底圈给画上： const context = wx.createContext(); // 打底灰色曲线 context.beginPath(); context.arc(this.convert_length(200), this.convert_length(200), r, 0, 2*Math.PI); context.setLineWidth(12); context.setStrokeStyle('#f0f0f0'); context.stroke(); wx.drawCanvas({     canvasId: 'progress',     actions: context.getActions() }); 效果如下： [图片] 接下来就要画绿色的进度条，渐变暂时先不考虑 // 圆弧角度 const deg = ((remain/total).toFixed(2))*2*Math.PI;      // 画渐变曲线 context.beginPath(); // 由于外层大小是400，所以圆弧圆心坐标是200,200 context.arc(this.convert_length(200), this.convert_length(200), r, 0, deg); context.setLineWidth(12); context.setStrokeStyle('#56B37F'); context.stroke(); // 辅助函数，用于转换小程序中的rpx convert_length(length) {     return Math.round(wx.getSystemInfoSync().windowWidth * length / 750); } [图片] 似乎完成了一大部分，先自测看看不是满圆的情况是啥样子，比如现在剩余车位是120个 [图片] 因为圆弧函数arc默认的起点在3点钟方向，而设计想要的圆弧的起点从12点钟方向开始，现在这样是没法达到预期效果。是不是可以使用css让canvas自己旋转-90deg就好了呢？于是我在上面的canvas样式中新增以下规则： .canvas{     transform: rotate(-90deg); } 但是在真机上并不起作用，于是我把新增的样式放到包裹canvas的外层元素上，发现外层元素已经旋转，可是圆弧还是从3点钟方向开始的，唯一能解释这个现象的是官方说：小程序中的canvas使用的是原生组件，所以这样设置css并不能达到我们想要的效果 [图片] 所以必须要在canvas画图的时候把坐标原点移动到弧形圆心，并且在画布内旋转-90deg [图片] // 更换原点 context.translate(this.convert_length(200), this.convert_length(200)); // arc原点默认为3点钟方向，需要调整到12点 context.rotate(-90 * Math.PI / 180); // 需要注意的是，原点变换之后圆弧arc原点也变成了0,0 真机预览效果达成预期 [图片] 接下来添加环形渐变效果，但是canvas原本提供的渐变类型只有两种： 1、LinearGradient线性渐变 [图片] 2、CircularGradient圆形渐变 [图片] 两种渐变中离设计效果最近的是线性渐变，至于为什么能够形成似乎是随圆形弧度增加而颜色变深的效果也只是控制坐标开始和结束的坐标位置罢了 const grd = context.createLinearGradient(0, 0, 100, 90); grd.addColorStop(0, '#56B37F'); grd.addColorStop(1, '#c0e674'); // 画渐变曲线 context.beginPath(); context.arc(0, 0, r, 0, deg); context.setLineWidth(12); context.setStrokeStyle(grd); context.stroke(); 来看一下真机预览效果： [图片] 非常棒，最后就剩下跟随进度条的纽扣效果了 [图片] 根据三角函数，已知三角形夹角根据公式radian = 2*Math.PI/360*deg，再利用cos和sin函数可以x、y，从而计算出纽扣在各部分半圆的坐标 const mathDeg = ((remain/total).toFixed(2))*360; // 计算弧度 let radian = ''; // 圆圈半径 const r = +this.convert_length(170); // 三角函数cos=y/r，sin=x/r，分别得到小点的x、y坐标 let x = 0; let y = 0; if (mathDeg <= 90) {   // 求弧度   radian = 2*Math.PI/360*mathDeg;   x = Math.round(Math.cos(radian)*r);   y = Math.round(Math.sin(radian)*r); } else if (mathDeg > 90 && mathDeg <= 180) {   // 求弧度   radian = 2*Math.PI/360*(180 - mathDeg);   x = -Math.round(Math.cos(radian)*r);   y = Math.round(Math.sin(radian)*r); } else if (mathDeg > 180 && mathDeg <= 270) {   // 求弧度   radian = 2*Math.PI/360*(mathDeg - 180);   x = -Math.round(Math.cos(radian)*r);   y = -Math.round(Math.sin(radian)*r); } else{   // 求弧度   radian = 2*Math.PI/360*(360 - mathDeg);   x = Math.round(Math.cos(radian)*r);   y = -Math.round(Math.sin(radian)*r); } [图片] 有了纽扣的圆形坐标，最后一步就是按照设计绘制样式了 // 画纽扣 context.beginPath(); context.arc(x, y, this.convert_length(24), 0, 2 * Math.PI); context.setFillStyle('#ffffff'); context.setShadow(0, 0, this.convert_length(10), 'rgba(86,179,127,0.5)'); context.fill(); // 画绿点 context.beginPath(); context.arc(x, y, this.convert_length(12), 0, 2 * Math.PI); context.setFillStyle('#56B37F'); context.fill(); 来看一下最终效果 [图片] 最后我重新review了整个代码逻辑，并且已经将代码开源到https://github.com/lucaszhu2zgf/mp-progress，欢迎大家使用

前言：看完了比赛项目，感觉像是经历了一场头脑风暴，项目的起名、涉足行业、内容、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 地热监测-流量计设备性能测试平台 （四）官方公布的复赛名单 校园赛道： [图片] 职业赛道： [图片] （五）官方公布的决赛名单 校园赛道： [图片] 职业赛道： [图片] （六）最终决赛成绩 校园赛道： [图片] 职业赛道： [图片]

前言 花了3个月，一共输出 40 篇文章，这也算是一个阶段性的总结。在此做个文章分类集合，希望对大家有所帮助。 小程序前端 《专治按钮效果不明显（扩散动画效果）》 《小程序开发必备，这 5 款超实用开源插件！》 《仿抽奖助手奖品详情页面向上翻页效果》 《推荐 5 款高仿知名应用的开源项目！》 《生成海报很复杂？有它轻松搞定！》 《推荐一个自定义导航栏开源库》 《前端开发，必备的学习网站！》 《情侣券-领取动画分析》 《通过玩游戏来学习CSS》 《CSS不规范导致的布局显示问题》 《微信小程序如何引入npm包？》 《情侣券-选中卡片翻转动画》 《CSS：实现卡片洗牌效果》 《情侣券 v2.0 使用的 4 款开源组件》 小程序云开发 《使用聚合函数实现打卡排行榜》 《使用云开发做内容安全检查》 《云开发-实现分页功能》 《云开发-实现维护用户表》 《云开发-实现模糊搜索》 《云开发实战：实现订阅消息推送》 《如何优雅的调用云函数？》 《云开发实战-如何维护用户表？（优化版）》 《推荐 10 款使用云开发的开源项目》 《云开发：CloudBase CMS 实战使用指南》 小程序产品 《如何利用小程序提高10倍活动效果？》 《实战：让数据说话之自定义埋点分析》 《#小程序云开发挑战赛#-情侣券》 《小程序运营必备的 3 款官方小程序》 《小程序云开发挑战赛：情侣券 v1.1 版本迭代》 《云开发挑战赛复赛：情侣券介绍PPT》 《参加#小程序云开发挑战赛#复赛收获》 《云开发挑战赛决赛：情侣券介绍PPT》 通用知识 《如何重构？》 《如何高效学习？》 《如何看懂时序图？》 《为什么优秀的程序员都写博客？》 《我从 Android 转到 微信小程序 的思考》 最后 后续计划会写更多云开发相关的文章以及小程序基础系列学习文章。

介绍一下情况:   我是前端,我是先getUserInfo然后再去调用wx.login,几乎每次只要调用到app.js的时候都会调用以上两个接口,然后现在的问题是: 后台拿着我给的 code iv encryptData ,解密不了session_key,解密的时候都是空的,后台说要拿到其中的union_id还是什么,总之是必须要以上这几个参数. 现在的问题是,解密不出来,跟我这边login和getUserInfo的顺序以及频率有关系么,频率差不多是两三分钟一次,同事是把code缓存了起来并没有发生这种事情 wx.getUserInfo({             success: function (e) {                 console.log(e);                 jrWxLogin().then((res) => {                     console.log("wxLogin" + res.code);                     jrFetchPost(api.userLogin, {                         code: res.code,                         iv: e.iv,                         encryptedData: e.encryptedData,                     }, true).then((res) => { 剩下来的就是业务代码,不贴了

小程序选择本地文件上传，如何选择相应的文件进行上传？？？？？不是图片！！！

概述 微信小程序为了提高小程序的服务质量，提供了客服消息能力，目的是为了让用户快捷地与小程序服务提供方进行沟通。小程序的客服消息回复有两种方式：一种是接入用户消息到微信公众平台网页版客服工具和客服小助手小程序进行客服消息回复，接入后客服可以看到用户留言，根据用户问题进行专门解答。一种是开启消息推送，当客服无法及时回复的时候能够指导用户联系客服人员或者解决问题。 如果需要接入微信公众平台网页版客服工具和客服小助手，只需要在小程序后台->客服里头添加客服人员就可以，客服人员就可以实时接收到用户消息并且与用户沟通。 如果需要开启消息推送可以参考下文的接入过程。 消息推送开发准备条件 在小程序中设置button组件并且把open-type属性设置为contact 前往小程序后台开发->开发设置->消息推送配置相关信息，可在此指定消息加密方式和数据格式。注意当开启了消息推送，普通微信用户向小程序客服发消息时，微信服务器会先将消息 POST 到开发者填写的 URL 上。在此处的填写我选择的是明文模式和JSON数据格式。 开发过程 处理初次验证 填写完消息推送的配置并且提交后，微信服务器将发送GET请求到填写的URL地址进行校验。因此首先要进行的就是针对微信服务器的初次校验做处理。微信官方在消息推送章节已经提出了校验代码此处便不再重复。 [代码]//微信服务器验证处理 if (isset($_GET['echostr'])) { //调用微信提供的校验代码 if ($this->checkSignature() == false) { exit(); } $echoStr = $_GET['echostr']; echo $echoStr; exit; } [代码] 处理消息 校验成功后，微信服务器会将用户在客服会话中的消息转发到开发者的服务器上，针对微信服务器传入的消息的类型，开发者们可以编写不同的业务逻辑处理。以用户在客服会话中写入文本为例：根据选择的数据格式JSON或者XML，微信服务器会传入相应格式的数据包。根据"MsgType"可以分辨微信服务器转发的是何种类型消息，并编写不同的业务逻辑。 [代码]//1接受微信推送消息 $message = $GLOBALS["HTTP_RAW_POST_DATA"]; $message = json_decode($message, true); //2判定用户发送消息的类型 if (!empty($message['MsgType']) && $message['MsgType'] == 'text') { //do something } [代码] 在处理完微信转发的消息之后，开发者可以根需要调用服务端的客服消息发送接口发送消息给用户。 [代码]$fromUsername = $message['FromUserName']; //发送者openid $url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=$access_token";//根据需要获取access_token $data = array( "touser" => $fromUsername, "msgtype" => "text", "text" => array( "content" => "客服消息推送测试" ) ); $data = json_encode($data, JSON_UNESCAPED_UNICODE); $result = httpRequest($url, "post", $data); $result = json_decode($result, true); if ($result['errcode'] == 0) { //当处理成功之后返回空字符串或者success都可以防止微信服务器重新发起请求 echo ""; exit; } [代码] 转发客服消息 小程序设置了推送消息之后，还可以接入到网页版客服工具中，只需要设置返回数据的MsgType为transfer_customer_service返回给微信服务器。 [代码]//设置转发数据 $transferData = array( "ToUserName" => $message['FromUserName'],//用户的OpenID "FromUserName" => $message['ToUserName'],//小程序原始id "CreateTime" => $message['CreateTime'],//创建时间 "MsgType" => "transfer_customer_service",//指定为transfer_customer_service 消息将会转发到客服工具中 ); $transferData = json_encode($transferData, JSON_UNESCAPED_UNICODE); [代码] 完整代码演示 [代码]//接受微信服务器转发的请求。 public function getMessage() { // 判断是否为微信验证消息 if (isset($_GET['echostr'])) { if ($this->checkSignature() == false) { exit(); } $echoStr = $_GET['echostr']; echo $echoStr; exit; } //接受微信推送消息 $message = $GLOBALS["HTTP_RAW_POST_DATA"]; if (!empty($message)) { $access_token = $this->getAccess();//根据需要获取小程序对应的 access_token //设置转发客服消息 $fromUsername = $message['FromUserName'];//消息发起用户的open_id $transferData = array( "ToUserName" => $fromUsername,//接收方帐号（用户的OpenID） "FromUserName" => $message['ToUserName'],//小程序原始id "CreateTime" => $message['CreateTime'],//创建时间 "MsgType" => "transfer_customer_service",//指定为transfer_customer_service 消息将会转发到客服工具中 ); $transferData = json_encode($transferData, JSON_UNESCAPED_UNICODE); $message = json_decode($message, true); //判定消息类型并处理 if (!empty($message['MsgType']) && $message['MsgType'] == 'text') { //调用send接口发送相对应的消息 $url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=$access_token"; $data = array( "touser" => $fromUsername, "msgtype" => "text", "text" => array( "content" => "客服消息推送测试" ) ); $data = json_encode($data, JSON_UNESCAPED_UNICODE); $result = httpRequest($url, "post", $data); $result = json_decode($result, true); //回复消息之后 不转发消息到客服系统 返回success 或者空字符串 避免微信提示严重错误 if ($result['errcode'] == 0) { echo ""; exit; } //回复消息之后 转发客服消息到客服系统 将$transferData['MsgType']设置为transfer_customer_service //if ($result['errcode'] == 0) { //echo $transferData; //exit; //} } } } /** * 处理微信验证函数 */ public function checkSignature() { $signature = $_GET['signature']; $timestamp = $_GET['timestamp']; $nonce = $_GET['nonce']; $token = "customer12"; //填写在后台配置的Token(令牌) $tmpArr = array($token, $timestamp, $nonce); sort($tmpArr, SORT_STRING); $tmpStr = implode($tmpArr); $tmpStr = sha1($tmpStr); //加密 if ($tmpStr == $signature) { return true; } else { return false; } } /** * CURL请求 * @param $url 请求url地址 * @param $method 请求方法 get post * @param null $postfields post数据数组 * @param array $headers 请求header信息 * @param bool|false $debug 调试开启 默认false * @return mixed */ function httpRequest($url, $method, $postfields = null, $headers = array(), $debug = false) { $method = strtoupper($method); $ci = curl_init(); curl_setopt($ci, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_0); curl_setopt($ci, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.2; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0"); curl_setopt($ci, CURLOPT_CONNECTTIMEOUT, 60); /* 在发起连接前等待的时间，如果设置为0，则无限等待 */ curl_setopt($ci, CURLOPT_TIMEOUT, 7); /* 设置cURL允许执行的最长秒数 */ curl_setopt($ci, CURLOPT_RETURNTRANSFER, true); switch ($method) { case "POST": curl_setopt($ci, CURLOPT_POST, true); if (!empty($postfields)) { $tmpdatastr = is_array($postfields) ? http_build_query($postfields) : $postfields; curl_setopt($ci, CURLOPT_POSTFIELDS, $tmpdatastr); } break; default: curl_setopt($ci, CURLOPT_CUSTOMREQUEST, $method); /* //设置请求方式 */ break; } $ssl = preg_match('/^https:\/\//i', $url) ? TRUE : FALSE; curl_setopt($ci, CURLOPT_URL, $url); if ($ssl) { curl_setopt($ci, CURLOPT_SSL_VERIFYPEER, FALSE); // https请求 不验证证书和hosts curl_setopt($ci, CURLOPT_SSL_VERIFYHOST, FALSE); // 不从证书中检查SSL加密算法是否存在 } curl_setopt($ci, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($ci, CURLOPT_MAXREDIRS, 2);/*指定最多的HTTP重定向的数量，这个选项是和CURLOPT_FOLLOWLOCATION一起使用的*/ curl_setopt($ci, CURLOPT_HTTPHEADER, $headers); curl_setopt($ci, CURLINFO_HEADER_OUT, true); $response = curl_exec($ci); $requestinfo = curl_getinfo($ci); $http_code = curl_getinfo($ci, CURLINFO_HTTP_CODE); if ($debug) { echo "=====post data======\r\n"; var_dump($postfields); echo "=====info===== \r\n"; print_r($requestinfo); echo "=====response=====\r\n"; print_r($response); } curl_close($ci); return $response; } [代码]

在开发环境进行客服消息的接入测试，需要用到内网穿透工具，如ngrok或者花生壳，推荐前者。在开发页面设置好回调服务器地址，选择好数据格式，这里特别说明一下，客服消息转发到客服工具（注：微信网页客服端）和加不加密无关，和那种数据格式无关。 推荐文章：微信小程序客服消息回复开发 这是社区里面的一篇接入文章，写的通俗易懂，不知道如何接入的话，强烈建议先看这篇文章。我遇到的问题是，原样返回接收到的客服消息之后并没有在客服助手处收到待接入的信息，所以这篇文章的目的在于说清楚理解上的奇异点。 1.服务器签名验证，以下是正确的排序代码，文档中写的是将token,nonce,timestamp按字典序进行排序，指的是按照值得字典序进行排序拼接，而不是对应得参数字段名[token,timestamp,nonce]。当然在某些服务中，也有采用后面这种这是我在接入中遇到得第一个问题。 [代码] List<String> strings = Lists.newArrayList(token, nonce, timestamp); strings.sort(Comparator.naturalOrder()); String txt = String.join("", strings); if(signature.equals(DigestUtils.sha1Hex(txt)){ return true; } return false; [代码] DigesUtils是apache commons-codec包下得工具类。 2.转发到客服工具，在这里的奇异点是，将MsgType改为transfortransfer_customer_service然后原样返回就好，是的我仅仅将接收到的json数据中的MsgType改成transfortransfer_customer_service然后返回，由于这是在同一个http请求中完成的，所以一旦完成之后，得不到反馈，就没法根据错误码进行差错。这里需要注意的两点 ①需要将ToUserName指定为接收数据中的FromUserName，FromUserName 指定为接受到数据中的ToUserName，然后CreateTime为接受到数据的CreateTime，MsgType为transfortransfer_customer_service。 ②在接收到该客服消息的HTTP请求的response应答体、只能包含上述的4个字段。格式的你接受的是什么数据格式，返回的就是什么数据格式。 [代码] Map<String, Object> rs = Maps.newHashMap(); rs.put("MsgType","transfer_customer_service"); rs.put("ToUserName", app.getFromUserName()); rs.put("FromUserName", app.getToUserName()); rs.put("CreateTime", app.getCreateTime()); return JSON.toJSONString(rs); [代码] 总结：思维的固式让我在接入的时候，会按照自己的习惯去思考微信的接口。 3.将信息转发给某个指定的客服，方式有两种，可以去接入三方客服工具如回复中的所提到的。或者参官方文档中的 转发指定接入客服以下截图一段官方文档内容 在响应包中返回MsgType为transfer_customer_service的消息，微信服务器收到响应后会把当次发送的消息转发至客服系统。您也可以在返回transfer_customer_service消息时，在XML中附上TransInfo信息指定分配给某个客服帐号。 [代码] <xml> <ToUserName><![CDATA[touser]]></ToUserName> <FromUserName><![CDATA[fromuser]]></FromUserName> <CreateTime>1399197672</CreateTime> <MsgType><![CDATA[transfer_customer_service]]></MsgType> <TransInfo> <KfAccount><![CDATA[test1@test]]></KfAccount> </TransInfo> </xml> [代码] 有趣的是，这段文档是我在公众号开发的文档中找到的，在小程序客服消息中并没有指定客服消息的描述，不过看字段和配置方式一致，再加上三方工具也说明支持，那么我们可以大胆的说yes。有个疑问是这里的KfAccount 看上去像是账号，是微信号吗？这里的@又让人觉得是邮箱。如果有知道的小伙伴，欢迎补充以下。