小程序架构介绍 我们都知道小程序本质上是运行在安卓端，苹果端的混合APP，只是微信提供了一套JSBridge，方便用户对一些原生功能和微信相关的功能的进行调用。而微信为了安全和性能的需要，一改以往网络架构中的单线程架构，改为小程序的双线程架构。分别是AppServie 和 Webview 两个线程，我们在小程序中编写的JS代码就是运行在AppService线程的JSCore引擎（类似V8 引擎，一个Js解释器）中，而我们的Wxml和Wxss则会依赖WebView线程进行渲染。 [图片] 目前架构存在的问题 这样的架构虽然已经极大了提高了webview的渲染性能，但是依然会存在一些问题比如： 当页面节点数目过多，很容易发生卡顿 当我们新建一个页面，就要新建一个Webview进行渲染 页面之间共享资源，需要使用Native进行通信，就会消耗更多性能 当AppService（逻辑层）与Webview（视图层）通信也需要依赖Native 所以为了解决这些问题小程序推出Skyline渲染引擎 Skyline引擎介绍 在Skyline环境中，Skyline 会创建了一条渲染线程来负责 Layout, Composite 和 Paint 等渲染任务，并在 AppService 中划出一个独立的上下文，来运行之前 WebView 承担的 JS 逻辑、DOM 树创建等逻辑。说白了就是之前的样式计算是放到渲染线程来处理，现在把和样式相关的逻辑也放到AppService线程中处理，个人猜测这个渲染线程很有可能很有可能就是flutter，这样的架构就极大减少内存的消耗，和线程上通信时间的消耗。原本wxs中的逻辑，也可以移到Appservice线程中运行 [图片] 使用Skyline引擎的使用步骤 在app.json 文件添加 [代码]"lazyCodeLoading": "requiredComponents"[代码] 属性，这是因为Skyline 依赖按需注入的特性。 [代码] { "pages": [ "pages/index/index", "pages/logs/logs", "pages/test/test" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json", // 在 app.json 文件添加 "lazyCodeLoading": "requiredComponents" } [代码] 在全局或页面配置中声明为 Skyline 渲染，即 app.json 或 page.json 配上[代码]"renderer": "skyline"[代码] Skyline 不支持页面全局滚动，需在页面配置项加上 [代码]"disableScroll": true[代码]，在需要滚动的区域使用scroll-view 实现 Skyline 不支持原生导航栏，需在页面配置项加上 [代码]"navigationStyle": "custom"[代码]，并自行实现自定义导航栏 [代码] { "usingComponents": {}, // 在 app.json 文件添加或者page页面的json中添加 "disableScroll": true, "navigationStyle": "custom" //也可以放在App.json文件中 "renderer": "skyline" } [代码] 组件适配，参考 Skyline 基础组件支持与差异 WXSS 适配，参考 Skyline WXSS 样式支持与差异 在本地设置中勾选Skyline渲染调试，如果看不到这个选项框，看一下是否在app.json中配置了[代码]"renderer": "skyline"[代码] [图片] Skyline的 worklet 动画介绍 小程序采用双线程架构，渲染线程（UI 线程）和逻辑线程（JS 线程）分离。[代码]JS[代码] 线程不会影响 [代码]UI[代码] 线程的动画表现，如滚动效果。但引入的问题是，[代码]UI[代码] 线程的事件发生后，需跨线程传递到 [代码]JS[代码] 线程，进而触发开发者回调，当做交互动画（如拖动元素）时，这种异步性会带来较大的延迟和不稳定，[代码]worklet[代码] 动画正是为解决这类问题而诞生的，使得小程序可以做到类原生动画般的体验 worklet函数定义 [代码]function helloWorklet() { 'worklet'; //'worklet'声明该函数为work函数，可以在js线程和UI线程中调用 console.log('hello worklet'); } Page({ onLoad(options) { helloWorklet('hello') // print: hello wx.worklet.runOnUI(helloWorklet)() }, }) [代码] 在小程序控制台可以看到如下输出 [图片] 如果看见SkylineGlobal is not defined错误看看是否开启了Skyline渲染调试 [图片] worklet函数间的相互调用 [代码]function slave() { 'worklet'; return "I am slave" } function master() { 'worklet'; const value = slave() console.log(value); } [代码] 从 UI 线程调回到 JS 线程 [代码]const {runOnUI ,runOnJS} = wx.worklet function jsFun(message) { // 普通函数不需要声明为worklet console.log(message) } function uiFun() { 'worklet'; runOnJS(jsFun)('I am from UI') } [代码] 使用shared共享数据 由worklet函数捕获的静态变量，会在编译期间序列化后生成在UI线程的拷贝环境之中，这就导致我们在JS线程中后续更新了变量，但是在UI线程中时得不到最新的数值的。 [代码]const obj = { name: 'skyline'} function someWorklet() { 'worklet' console.log(obj.name) // 输出的仍旧是 skyline } obj.name = 'change name' wx.worklet.runOnUI(someWorklet)() [代码] 因此shyline使用shared来实现线程之间数据的共享 [代码]const { shared, runOnUI } = wx.worklet const offset = shared(0) function someWorklet() { 'worklet' console.log(offset.value) // 输出的是新值 1 } offset.value = 1 runOnUI(someWorklet)() [代码] 简单案例–实现探探的卡片功能 注意：编辑器版本：1.06.2303162 基础库版本：2.30.2 先看效果 [图片] 代码如下 <br> wxml 代码 [代码]<navigation-bar title="探探" /> <view class="page"> <block wx:for="{{containers}}" wx:key="*this"> <pan-gesture-handler data-id="container-{{index}}" onGestureEvent="handlePan"> <view id="container-{{index}}" class="container" style="z-index: {{zIdnexes[index]}};background-image: url({{partContentList[index]}});"> </view> </pan-gesture-handler> </block> </view> [代码] scss代码 [代码].page{ display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; position: relative; .container{ height: 80vh; width: 95vw; background-color: burlywood; position: absolute; border-radius: 16rpx; display: flex; justify-content: center; align-items: center; background-size: cover; .image{ display: block; height: 1067rpx; width: 712rpx; margin: 0 0; } } } [代码] 核心逻辑 [代码]import { useAnimation, setAni, Animation, GestureState } from "./method" Page<{ pos: Animation }, any>({ /** * 页面的初始数据 */ data: { containers: [ "burlywood", "blue", "cyan", "black" ], zIdnexes:[], current:0, partContentList:[] }, /** * 生命周期函数--监听页面加载 */ onLoad() { this.initNode() // 当前node的下标 this.active = wx.worklet.shared(0) // 当前contentList的下标 this.current = wx.worklet.shared(0) this.zIndex = 100000 }, initNode() { // 用与保存shared值 this.Nodes = {} // 图片文件 this.contentList = [ "https://i.hexuexiao.cn/up/ca/63/4a/a32912fc26b8445797c8095ab74a63ca.jpg", "https://th.bing.com/th/id/OIP.kSrrRGx6nqOgWzbaEvVD9AHaNK?pid=ImgDet&rs=1", "https://img.zmtc.com/2019/0806/20190806061552744.jpg", "https://img.zmtc.com/2019/0806/20190806061000600.jpg", "https://img.ratoo.net/uploads/allimg/190523/7-1Z5231J058.jpg", "https://th.bing.com/th/id/R.47de9dfcc25d579d84850d4575d24a6a?rik=%2fGkmrewzIEY4Iw&riu=http%3a%2f%2fimg3.redocn.com%2ftupian%2f20150930%2fqizhimeinvlisheyingtu_5034226.jpg&ehk=rG9Ks2QRzj81mZl38gVGmWVAgCHVLWppoDezpfwdxjo%3d&risl=&pid=ImgRaw&r=0", "https://th.bing.com/th/id/R.95f8e6f6bd5b660ae3ad4f3e0d712276?rik=ELKcha%2bE5ryuiw&riu=http%3a%2f%2f222.186.12.239%3a10010%2fwlp_180123%2f003.jpg&ehk=mVN7AzIRR%2fmVPJYWrWOFbEiher3QWtwSdH%2f%2fe4lE7n8%3d&risl=&pid=ImgRaw&r=0" ] this.data.containers.forEach((_: string, index: number) => { if (index == 0) { this.Nodes[`#container-${index}`] = useAnimation(`#container-${index}`, { x: 0, y: 0 }, this) this.setData({ [`zIdnexes[${index}]`]:100000-index, [`partContentList[${index}]`]:this.contentList[index] }) } else { console.log("10123") this.Nodes[`#container-${index}`] = useAnimation(`#container-${index}`, { x: 0, y: 20, scale: 0.95 }, this) this.setData({ [`zIdnexes[${index}]`]:100000-index, [`partContentList[${index}]`]:this.contentList[index] }) } }); }, handlePan(evt: any) { "worklet"; console.log(evt) const now = this.Nodes[`#container-${this.active.value}`] as Animation const next = this.Nodes[`#container-${(this.active.value+1)%4}`] as Animation if (evt.state == GestureState.ACTIVE) { // 滑动激活状态 // 设置当前的滑动块 now.x.value += evt.deltaX now.y.value += evt.deltaY now.rotate.value = now.x.value * 10 / 360 // 设置下一个滑动块 let rate = Math.abs(now.x.value) / 150 rate = rate > 1 ? 1 : rate next.y.value = (20 - rate * 20) < 0 ? 0 : (20 - rate * 20) next.scale.value = 0.95 + rate * 0.05 } if (evt.state == GestureState.END) { // 滑动结束 if (Math.abs(now.x.value) < 150) { // 判断是否超过界限值 setAni(now.x, 0) setAni(now.y, 0) setAni(now.rotate, 0) } else if (now.x.value < 0) { // 判断判断左划还是右划 setAni(now.x, -2000) setAni(now.y, -2000) setAni(now.rotate, 0) // 通知js线程进行数据的更新 wx.worklet.runOnJS(this.toNext.bind(this))() } else if (now.x.value > 0) { setAni(now.x, 2000) setAni(now.y, -2000) setAni(now.rotate, 0) wx.worklet.runOnJS(this.toNext.bind(this))() } } }, // 将当前序号的跳转到下一个 toNext(){ const current = this.current.value+1 this.active.value = current%4 this.current.value = current this.setData({ current }) if(current-2>=0){ wx.worklet.runOnUI(this.toReset)((current-2)%4) this.setData({ [`zIdnexes[${(current-2)%4}]`]:99998-current, [`partContentList[${(current-2)%4}]`]:this.contentList[current+2] }) } }, // 将动画归位 toReset(index:number){ "worklet"; const reset = this.Nodes[`#container-${index}`] as Animation setAni(reset.x, 0,0) setAni(reset.y, 20,0) setAni(reset.rotate, 0,0) setAni(reset.scale, 0.95,0) } }) [代码] 参考 skyline worklet 动画

场景： 在小程序中大家应该都有这样的场景，在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哦

[图片] 在小程序里实现一个知乎浮动按钮 前言 逛知乎App，点进一个回答，有一个很好用的 [代码]浮动[代码]的按钮，可以点击到下一个回答。这个按钮有什么特点呢？ 点击触发下一篇 width y轴过渡动画 可拖动，左右轴吸附，拖动有安全范围，能记忆位置 可变形，有 [代码]tooltip[代码] 那么我们如何在小程序里实现这种 [代码]App[代码] 类似的效果呢？ 思路分解 下一篇过渡动画与点击可以依靠 [代码]css[代码] + [代码]js[代码] 解决 拖动,吸附,安全范围 [代码]movable-area[代码] + [代码]movable-view[代码] + [代码]js[代码] 解决 变形加 [代码]tooltip[代码] , [代码]css[代码] + 预置弹出解决 这样分析下来，其实就第二点难度稍微大一些。 可拖动 [代码]h5[代码] 中直接就可以使用 [代码]css[代码] + [代码]touch events[代码]，来实现拖动的效果。小程序也已经有了现成的 [代码]movable-area[代码] 和 [代码]movable-view[代码] 组件来实现这样的功能。 其中 [代码]movable-area[代码] 为内部 [代码]movable-view[代码] 的可移动区域。 [代码]movable-view[代码] 必须在 [代码]movable-area[代码] 组件中，且必须是直接子节点，否则不能移动。 这里有官方的文档和demo , 通过预览还是很容易理解这2个组件的运作方式的。 其中对于 [代码]movable-view[代码] 来说，在不考虑 [代码]out-of-bounds[代码] 的情况下，[代码]view[代码] 是只能在 [代码]area[代码] 的范围内移动的。 [代码]movable-area[代码],[代码]movable-view[代码] 都必须设置 [代码]width[代码]和 [代码]height[代码]属性，不设置默认为[代码]10px[代码]。 设置安全范围 [代码]movable-view[代码] 默认为绝对定位，[代码]top[代码] 和[代码]left[代码]属性为0px。 而 [代码]movable-area[代码] 默认为相对定位，这意味着我们完全可以这么写: [代码]<view class="pointer-events-none fixed z-50 left-4 right-4 top-4 bottom-4"> <movable-area class="h-full w-full"> <movable-view direction="all" @change="fabSync" @touchend="touchend" :x="btn.x" :y="btn.y" class="w-10 h-10" > </movable-view> </movable-area> </view> [代码] 上述这段 [代码]wxml[代码] 中，我们在页面中套上了一个 [代码]fixed[代码] 的遮罩层，通过设置 [代码]z-index[代码], 将它的层级提高，再通过 [代码]pointer-events-none[代码],来保证交互事件的穿透。最后通过内部的 [代码]h-full[代码] 和 [代码]w-full[代码]，把 [代码]movable-area[代码] 的大小撑开。 最后再通过对外层 [代码]fixed[代码] 遮罩层的大小做限制 ([代码]left-4 right-4 top-4 bottom-4[代码])。来达到对浮动按钮拖动区域进行限制的目的。 如图所示: [图片] 左右侧吸附 [代码]movable-view[代码] 天生是带动画效果([代码]animation[代码])的，但是这个动画的触发机制，是和 [代码]input[代码] 的 [代码]focus[代码] 获取焦点很像。也就是说 [代码]movable-view[代码] 组件的[代码]x[代码],[代码]y[代码]属性本身必须发生变化，才能触发动画。 举个例子， [代码]input[代码] 的 [代码]focus[代码]属性 默认为 [代码]false[代码], 在设置为 [代码]true[代码] 时，会获取焦点。但是当 [代码]focus[代码] 本身为 [代码]true[代码] 时，再去 [代码]setData[代码] 为 [代码]true[代码] 是没有作用的，因为控件本身并没有监测到属性值的 变化。 同样，[代码]movable-view[代码] 的 [代码]x(y)[代码] 也需要监测这样的 变化 同时出于[代码]x[代码]轴吸附动画的考量，我们不得不进行位置信息的同步。 不然就会出现，拖动按钮松开后，触发吸附行为时，按钮先闪现到初始位置(比如坐标 [代码](0,0)[代码]) ，然后再播放动画的情况。 防抖的同步 我们知道,对 [代码]setData[代码]的滥用，很容易造成性能瓶颈。针对高频触发的 [代码]touchmove[代码] , [代码]bindchange[代码] or [代码]onPageScroll[代码] 这类，我们往往会加一层 [代码]防抖(debounce)[代码] 处理，来减小频繁更新的影响。 此时就可以给同步方法套一层 [代码]壳[代码]: [代码]debounce(function (x, y, source) { this.btn.x = x this.btn.y = y }, 100), [代码] 来保证高频的拖动时，减少 [代码]setData[代码] 的调用。 边界吸附 这个经过前面的分析，这个行为已经被简化成了一个属性变化的问题了。 吸附这个行为往往发生在 [代码]touchend[代码] 后的几百毫秒内。所以我们可以在 [代码]touchend[代码] 中创建一个宏(macro)任务。同时保证 这个宏任务 要在 [代码]防抖同步坐标[代码] 这个过程完成后，进行触发。 这意味着我们 [代码]setTimeout[代码] 的 [代码]delay[代码] 必须大于 [代码]debounce[代码] 的 [代码]wait[代码] 时间！ 比如之前我们的 [代码]debounce[代码] 设置为 [代码]100ms[代码] ，现在 [代码]setTimeout[代码] 的 [代码]delay[代码] 设置为 [代码]250ms[代码]。这样做是为了保证偏移动画的位置准确性。 向左走，向右走 接下来，我们把安全区域分为左右 2 边。用户在左边松手，吸附在左轴，右边亦然。 [代码]movable-view[代码] 的 [代码]x(y)[代码] 是从 [代码]view[代码] 左上角开始算起的，这意味着我们需要把 [代码]view[代码] 本身的大小也考虑进去，才能做出精确的吸附行为。不然就会出现，用户把按钮拖到了，屏幕中线靠右的位置，却还是往左边吸附的奇葩行为。 此时我们就要去计算，这个中间线坐标究竟在哪？ 以 [代码]px[代码] 单位为例，这个 [代码]x[代码] 坐标往往是在 [代码]const mid = (windowWidth - viewWidth - leftEdgeWidth - rightEdgeWidth) / 2 // `y` 轴同理 [代码] 也就是说，用户拖动行为结束并同步坐标后，假如此时的 [代码]x[代码] > [代码]mid[代码]，则吸附在右侧，反之则吸附在左侧。 记忆位置 记忆位置这个可以在吸附行为完成后，单独创建一个任务，和 [代码]localstorage[代码] 进行同步，此处不再叙述。 大致实现 [代码]setTimeout(() => { if ( this.btn.x > (windowWidth - btnWidth - edgeWidth * 2) / 2 ) { this.btn.x = rightEdge } else { this.btn.x = 0 // leftEdge } setTimeout(() => { ls.sync('float-btn-position',this.btn) }, 0) }, 250) [代码] 效果 见作者博客小程序 破冰客 文章详情页面 [图片] 源码 https://github.com/sonofmagic/universal-vue-library-template/blob/main/src/components/uni-float-button/src/index.vue

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次放入到高度最低的那一栏。 先上代码：https://developers.weixin.qq.com/s/Fgm5s1mz7Wdm 所谓简单，是指只考虑图片，图片之外的其他元素高度固定，不在考虑范围内。 说一下基本的实现思路： 1、加载列表数据 2、在一个隐藏的view中加载图片，通过image组件的bindload获取图片的实际宽高并存储 3、等所有图片加载完成后遍历列表，将图片插入到高度低的那一栏，同时更新该栏高度 我也考虑过在第二步bindload获取到宽高后就直接插入到栏位中，但是会出现小的图片先加载完先出现到页面中，虽然瀑布流不是普通的列表那样的排序，但是也不能小的图片在上面这样太乱顺序，所以就改成了获取宽高先存储，等所有图片加载完成后再往页面上渲染。 来看看实际的代码 不需要渲染到wxml中的数据，我放到了jsData中，主要是两栏的高度和是否在加载数据的标记。 tempPics是第一次加载的数据，临时存放，用于加载图片宽高 columns是两个栏位的实际展示数据 [代码]jsData: { columnsHeight: [0, 0], isLoading: false }, data: { columns: [ [], [] ], tempPics: [] } [代码] 1、加载列表数据 这一步没什么好说的，主要是触发方式，我的代码里是放在页面加载以及拉到页面底部时触发 [代码]onLoad: function() { this.loadData() }, onReachBottom: function() { this.loadData() } [代码] 加载后将列表数据存到tempPics中，用于页面加载获取宽高 2、在一个隐藏的view中加载图片，通过image组件的bindload获取图片的实际宽高并存储 [代码]<view class="hide"> <image wx:for="{{tempPics}}" src="{{item.pic}}" bindload="loadPic" binderror="loadPicError" data-index="{{index}}" /> </view> [代码] 主要是image组件的bindload来获取实际宽高，这里还增加了binderror，防止出现图片加载出错的时候卡死 [代码]loadPic: function(e) { var that = this, data = that.data, tempPics = data.tempPics, index = e.currentTarget.dataset.index if (tempPics[index]) { //以750为宽度算出相对应的高度 tempPics[index].height = e.detail.height * 750 / e.detail.width tempPics[index].isLoad = true } that.setData({ tempPics: tempPics }, function() { that.finLoadPic() }) } [代码] 获取到宽高后，以750为宽度计算出相对应的高度并存储，然后增加一个加载完成的标记。加载出错后就强制高度为750，这样展示的时候就是一个正方形。 单个图片加载完成并存储后调用finLoadPic方法来判断所有图片是否都加载完成。 遍历列表，只要有一个图片没有加载完成的标记，就判断为没有加载完成。 加载完成后进入下一步。 [代码]finLoadPic: function() { var that = this, data = that.data, tempPics = data.tempPics, length = tempPics.length, fin = true for (var i = 0; i < length; i++) { if (!tempPics[i].isLoad) { fin = false break } } if (fin) { wx.hideLoading() if (that.jsData.isLoading) { that.jsData.isLoading = false that.renderPage() } } } [代码] 3、等所有图片加载完成后遍历列表，将图片插入到高度低的那一栏，同时更新该栏高度 这里需要再便利一遍列表，根据当前栏位的高度情况，将图片插入到高度底的那一栏，同时把这一栏高度加上当前图片的高度（不是实际高度，是上一步以750为宽度算出来的高度） [代码]renderPage: function() { var that = this, data = that.data, columns = data.columns, tempPics = data.tempPics, length = tempPics.length, columnsHeight = that.jsData.columnsHeight, index = 0 for (var i = 0; i < length; i++) { index = columnsHeight[1] < columnsHeight[0] ? 1 : 0 columns[index].push(tempPics[i]) columnsHeight[index] += tempPics[i].height } that.setData({ columns: columns, tempPics: [] }) that.jsData.columnsHeight = columnsHeight } [代码] 在wxml中展示的时候image组件的mode要使用widthFix，同时wxss中图片的高度和宽度一样，这样加载出错的图片可以正方形展示 11月21日增加： 根据@杨泉的建议，也尝试了使用wx.getImageInfo来获取图片的宽高（具体代码可以参考评论区），代码也精简了很多。但是实际比较下来速度要比用image组件慢，初步推测原因是[代码]wx.getImageInfo[代码]会返回本地路径，多了写本地临时文件的时间 ps：用到瀑布流的地方，最好能后端直接返回图片的宽高，省去小程序端获取宽高的麻烦 再ps：我个人并不建议小程序端使用瀑布流

聚合是云开发 CloudBase 数据库中非常重要的一种数据批处理操作方式。聚合操作可以将数据分组（或者不分组，即只有一组/每个记录都是一组），然后对每组数据执行多种批处理操作，最后返回结果。 有了聚合能力，可以方便的解决很多没有聚合能力时无法实现或只能低效实现的场景，包括分组查询、只取某些字段的统计值或变换值返回、流水线式分阶段批处理、获取唯一值（去重）等。 本文就以一个简单的实例解释如何在云数据库中，实现十分常用的联表+聚合查询操作。 场景说明假设数据库内存在两个集合：[代码]class[代码] 与 [代码]student[代码]，存在以下数据： class（班级信息）： [图片] student（学生信息）： [图片] 现在需要查询徐老师所带的班级里面所有学生的平均成绩。 代码示例1、lookup 联表查询首先我们需要把 student 内的所有数据，按照 class_id 进行分组，这里我们使用云数据库的 lookup 操作符： lookup({ from: "student", //要关联的表student localField: "id", //class表中的关联字段 foreignField: "class_id", //student表中关联字段 as: "stu" //定义输出数组的别名 }).end(); 这个语句会查出来下面的结果，会查出班级的信息以及该班级所对应的所有学生的信息： {"list": [{ "id":1, "teacher":"王老师", "cname":"一班", "stu":[ { "sname":"宁一", "class_id":1, "score":90 } ] }, { "id":2, "teacher":"徐老师", "cname":"二班", "stu":[ { "class_id":2, "sname":"张二", "score":100 }, { "class_id":2, "sname":"李二", "score":80 } ] }] } 但是我们只需要徐老师所在班级学生的数据，所以需要进一步过滤。 2、match 条件匹配现在就只是返回徐老师所在班级的学生数据了，学生数据在 stu 对应的数组里面： .lookup({ from: 'student', localField: 'id', foreignField: 'class_id', as: 'stu' }) .match({ teacher:"徐老师" }) .end() 现在就只是返回徐老师所在班级的学生数据了，学生数据在 stu 对应的数组里面： { "list": [ { "_id": "5e847ab25eb9428600a512352fa6c7c4", "id": 2, "teacher": "徐老师", "cname": "二班", //学生数据 "stu": [ { "_id": "37e26adb5eb945a70084351e57f6d717", "class_id": 2, "sname": "张二", "score": 100 }, { "_id": "5e847ab25eb945cf00a5884204297ed8", "class_id": 2, "sname": "李二", "score": 80 } ] } ] } 接下来我们继续优化代码，直接返回学生的平均分数。 3、直接返回学生成绩平均值如果想要在被连接的表格中（本课程中的 student）做聚合操作，就用 pipeline 方法： .lookup({ from: 'student', pipeline: $.pipeline() .group({ _id: null, score: $.avg('$score') }) .done(), as: 'stu' }) .match({ teacher:"徐老师" }) .end() 现在输出的数据是这样的： { "list": [ { "_id": "5e847ab25eb9428600a512352fa6c7c4", "id": 2, "teacher": "徐老师", "cname": "二班", "stu": [{ "_id": null, "score": 90 }] } ] } 但是现在输出的数据有点复杂，如果只想显示 teacher 和 score 这两个值，我们再进行下面的操作。 4. 只显示 teacher 和 score 这两个值我们使用 replaceRoot、mergeObjects 和 project 进行最后的处理： .lookup({ from: 'student', pipeline: $.pipeline() .group({ _id: null, score: $.avg('$score') }) .done(), as: 'stu' }) .match({ teacher:"徐老师" }) .replaceRoot({ newRoot: $.mergeObjects([$.arrayElemAt(['$stu', 0]), '$$ROOT']) }) .project({ _id:0, teacher:1, score:1 }) .end() 现在输出的数据是这样的： { "list": [{ "score": 90, "teacher": "徐老师" }] } 相关文档：云开发聚合搜索：https://docs.cloudbase.net/database/aggregate.html 产品介绍云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等serverless化能力，可用于云端一体化开发多种端应用（小程序，公众号，Web 应用，Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。 开通云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite 产品文档：https://cloud.tencent.com/product/tcb?from=12763 技术文档：https://cloudbase.net?from=10004 技术交流加Q群：601134960 最新资讯关注微信公众号【腾讯云云开发】

本文主要用来记录下自己这段时间折腾云开发CMS对接小程序的一些个人经验，可能因为新上手，踩的坑实在是有点“多”，而且有些在网上也没找到回答，觉得很有记录下来的必要。 第一个问题：什么是云开发CMS？ 说实话，估计没人会回答这个问题，但确实初期还真有点困扰我，因为我遇到的一个问题就是我按照教程安装好云开发CMS之后，发现不知道怎么和小程序对接数据。 其实简单说，就是小程序开发者工具上那个云开发开通后的数据库的一个管理工具，所以其实它就是用来管理云开发数据库的，增删改查的一个后台。对接上和小程序云开发没有什么差异。你也可以手动在小程序开发者工具后台的数据库里面手动添加数据，但是那样有点反操作。从产品经理的角度来看，简直毫无体验感可言。 ok，那么知道云开发CMS是什么之后，接下来的事就好办了。 第二个问题：云开发如何开通并和小程序对接？ 这个其实官方有开通教程，具体我就不详细说了，主要我遇到的有几个地方的坑（也不算坑，就有时候刚好卡在那儿了），可以和大家说下。 1、后台云开发开通后，在腾讯云后台cloudbase的扩展应用里面没找到云开发CMS的扩展？ 产生这个的原因是云开发后台没开通静态页面，还有需要更改计费方式为按量付费，改好后刷新就可以看到云开发CMS的扩展，直接点击安装就可以成功安装了。 [图片] 改为按量计费就可以了 [图片] 静态网页那个也记得开通 2、在云开发后台建立模型添加数据后，前端调用不出来？ 这个我也是试了好久才搞定，其实问题也不难，就是我建数据库的时候，字段命名格式为content-title，后面改为contentTtitle驼峰命名后就好了，后面正好看到一篇文章说云开发的字段命名就是驼峰命名。具体为啥我也不清楚，但这样命名就准没错了。 [图片] [图片] [图片] 上面截图文章的原文链接：https://my.oschina.net/u/4180986/blog/4347302 大概就是这些了，总算在昨晚把整个流程跑通了。部署好后，整体体验还是挺爽的，就是不知道后面的费用方面坑不坑，这个有待测试。 后面继续更新，下一步想看下云开发CMS能不能做数据采集方面的事，待我研究研究。 ----------------- 更新分割线 -------------------- 补充一个，云开发CMS后台更新某些字段名称的时候，看似成功了，但是去云开发数据库看的时候你会发现那个字段还在，你更新的字段其实只是新增了而已。

小程序·云开发的云调用能力，让用户可以免鉴权快速调用微信的开放能力，极大节约了开发成本。现在，大家期待已久的云开发 CMS 内容管理系统，终于上线啦！顺便提示，接下来还可以二次开发哦！ 云开发 CMS 管理系统是什么？ 云开发 CMS 内容管理系统是云开发提供的一个扩展程序，可以在云开发控制台一键安装在自己的云开发环境中，方便开发人员和内容运营者随时随地管理小程序 / Web 等多端云开发内容数据。不用编写代码就可以使用，还提供了 PC /移动端浏览器访问支持，支持文本、富文本、图片、文件、关联类型等多种类型的可视化编辑。 [图片] 先来看看云开发CMS的"庐山真面目" 首先我们通过几张截图来直观感受一下 CMS 内容管理系统扩展： 图1 云开发控制台的安装界面截图 [图片] 图2 安装并配置好内容的 CMS 内容管理系统界面演示 [图片] 图3 CMS 内容管理系统界面的移动端演示 [图片] 云开发 CMS 内容管理系统有哪些功能特性 ？ 特性 介绍 免开发 基于后台建模配置生成内容管理界面，无须编写代码 多端适配 支持 PC/移动端访问和管理内容 功能丰富 支持文本、富文本、图片、文件 等多种类型内容的可视化编辑，并且支持内容关联 权限控制 系统基于管理员/运营者两种身份角色的访问控制 外部系统集成 支持 Webhook 接口，可以用于在运营修改修改内容后通知外部系统，如自动构建静态网站、发送通知等 数据源兼容 支持管理小程序/ Web / 移动端的云开发数据，支持管理已有数据集合，也可以在 CMS 后台创建新的内容和数据集合 部署简单 可在云开发控制台扩展管理界面一键部署和升级 什么场景下适合使用 CMS ？ 1. 适用于需要为小程序应用增加一个运营管理后台的业务 小程序应用有偏运营方面的文章编辑和发布、运营活动配置、素材管理等数据管理需求，使用 CMS 扩展之后，不用手动线上修改 db 数据，也不用投入人力物力开发管理后台，可以随时随地使用自己环境下部署的 CMS 内容管理系统来管理，同时还支持区分管理员和运营者的身份权限。 2. 适用于快速开发内容型的网站应用、小程序应用等场景 CMS 内容管理系统还可以帮助开发者提升开发网站应用、小程序应用的效率，省去一部分后端开发工作。例如安装了CMS 扩展之后，解决了内容和数据的管理和生产问题，直接可以结合前端应用框架读取 db 数据进行渲染。例如基于 CMS 可以快速开发博客、企业官网等小程序/网站应用，最后悄悄透露一下，云开发的官网 (http://cloudbase.net/) 就是基于 CMS 扩展 + Next.js + 云开发静态托管搭建和部署的。 如何安装和使用 CMS ？ 第一步：切换为按量付费 由于 CMS 扩展需要用到静态网站托管资源，必须在按量计费的环境下才可以部署，因此首先要切换计费方式为按量付费。 1. 微信小程序开发者 登录微信开发者工具-云开发控制台 在【云开发控制台】-【设置】-【环境设置】-【支付方式】中点击切换【按量付费】即可。 注意：这里需要先保证腾讯云账户中是有充值金额的哦~ [图片] 2. 腾讯云开发者 登录腾讯云云开发控制台 在【云开发 CloudBase 控制台】-【环境】-【资源购买】-【计费模式】中点击【切换按量付费】即可。 [图片] 第二步：在腾讯云控制台安装扩展 登录腾讯云控制台 微信小程序开发者需要使用微信公众号登录! [图片] 在【云开发 CloudBase 控制台】-【扩展能力】-【扩展管理】中找到 CMS内容管理系统 扩展进行安装 安装时需要进行资源的授权和扩展程序的配置，比如管理员和运营者的账号密码配置等，同时需要提供自定义登录的密钥，可以点击自定义登录密钥旁边的小图标了解如何填写。 [图片] 第三步：使用 CMS 内容管理系统 完成【CMS内容管理系统】的安装以后，然后访问该扩展的管理页，可以在【扩展运行方式】Tab 查看使用指引，依照文档完成 CMS 的使用，下面简单介绍一下快速上手的步骤，更多细节可以参考运行方式。 [图片] 访问 CMS 系统 CMS 扩展已经部署在当前环境下的静态网站托管中，访问路径为“静态托管的默认域名+安装设置的部署路径” 访问地址的格式如下： [代码]云开发静态托管默认域名/部署路径[代码]，例如 [代码]https://xxxx.tcloudbaseapp.com/tcb-cms/[代码] 账号登录 打开 CMS 系统后首先会提示需要登录，我们首先使用使用安装扩展时设置的管理员账号和密码进行登录 内容建模 登录成功后，首先需要进行内容的建模设置，例如我们想为自己的博客应用（小程序/网站）来生成管理界面。 假设当前已有一个管理 文章的数据库集合 [代码]articles[代码]，我们可以在 CMS 管理后台新建一个 “文章” 内容（如果新建内容的时候指定的集合名不存在，CMS 扩展会自动新建集合）来生成“文章”类型的内容管理界面。 假设数据库集合 [代码]articles[代码] 的结构如下： 字段名 类型 描述 _id ID 文章唯一 id name String 文章标题 cover String 封面图，这里存放云开发的存储的文件的 cloudID content String 文章内容，采用 markdown 格式 author ID 作者的用户 id createTime DateTime 创建时间 updateTime DateTime 更新时间 tag String[] 标签，例如 [代码]["serverless","cms"][代码] category String[] 分类，例如 [代码]["前端","开发"][代码] 我们在“内容设置”中点击“新建”来创建“文章”类型时，可以对照上面的集合数据把字段类型和字段的限制进行配置，例如封面图可以直接选择 “图片”字段类型，文章内容可以直接选择 “Markdown” 类型，这样在生成的管理界面里可以直接上传图片和通过编辑器编写文章，保存在数据库集合的时候，依然会保存为数据库支持的类型，图片会存储为云存储的 CloudID, 内容会存储为字符串等。 [图片] 创建并保存之后会自动刷新生成”文章“的运营界面 管理内容 接下来就可以进行运营管理内容操作了，可以使用运营者身份登录，对新创建的“文章”进行操作，我们可以新建一篇文章。 [图片] 文章发布成功后，即可在文章列表中看到这篇文章 [图片] 使用内容数据 采用 CMS 管理的内容，依然可以通过云开发各端 SDK 进行访问（需要注意的是在前端访问时，需要正确设置数据库的安全规则设置，例如设置为所有用户可读，仅创建者可写）。 例如，在上面的例子里，我们需要在云函数中获取文章的标签是 [代码]CloudBase[代码] 的最新 10 条文章，可以采用以下代码来获取数据： [代码]db.collection("articles") .where({ tag: "CloudBase" }) .orderBy("createTime", "desc") .limit(10) .get(); [代码] 获取到内容数据就可以在各种场景使用了，比如在小程序/ Web 中构建应用和网站，具体的CMS + 应用开发的实践可以关注后期我们的实践教程。 [图片] 后续，云开发CMS内容管理系统将支持二次开发，用户可以自由定制自己的管理后台。云开发将始终坚持，为开发者提供一站式云服务！ [图片] 最后，小编赠上《5分钟部署云开发CMS系统》教程，帮助大家快快上车！ 视频链接： https://v.qq.com/x/page/f09687on1qv.html 文档链接 ：（CMS 内容管理系统链接） https://cloud.tencent.com/document/product/876/44547

最近小程序上线了一个超级流量的新入口：URL Scheme。通过小程序页面的URL Scheme，可以在短信、邮件或微信外部的网页中打开小程序。 那么如何实现呢？官方文档已经写的很清楚啦，这里简单介绍一下。 首先，获取URL Scheme，通过服务端接口可以获取打开小程序任意页面的URL Scheme，支持生成到期失效和永久有效的URL Scheme。 [图片] 然后，通过短信群发平台将获取的URL Scheme + 营销文案发送到用户的手机上。 最后，用户收到短信后，直接点击URL Scheme唤起微信，跳转到对应小程序页面，就是这么简单。 除此之外，还可以通过邮件或外部浏览器打开跳转小程序。 由于部分操作系统仍不支持直接识别URL Scheme，因此直接将Scheme发送给用户可能存在无法打开小程序的情况。 为此，我们可以先准备一个H5页面，再从H5页面跳转到URL Scheme实现打开小程序。 [代码]location.href = 'weixin://dl/business/?ticket= *TICKET*' [代码] H5的示例代码我已经更新到Github，可以复用起来，基于官方的案例做了些改动，增加PC端打开时生成二维码方便手机扫码使用。 这次新能力的更新将使微信小程序不再局限于微信内部的流量，天花板被掀开啦。 而且短信和邮件营销的触达成本非常低，营销成本的压低也会催生出很多新的流量玩法，我们敬请期待吧。

写在前面如果你想要自主开发，但没有云开发相关经验，可以采用演示视频来学习本教程： [视频] 一、能力介绍境内非个人主体的认证的小程序，开通静态网站后，可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接，用户打开页面后可一键跳转至你的小程序。 这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。 总之，短信跳转能力的实现分为两个步骤，「配置拉起网页」和「发送短信」。本教程将介绍如何执行操作完成短信跳转小程序的能力。 如果你想要无需写代码就能完成短信跳转小程序的能力，可以参照无代码版教程进行逐步实现。 二、操作指引1、网页创建首先我们需要构建一个基础的网页应用，在任何代码编辑器创建一个 html 文件，在教程这里命名为 index.html 在这个 html 文件中输入如下代码，并根据注释提示更换自己的信息： window.onload = function(){ window.web2weapp.init({ appId: 'wx999999', //替换为自己小程序的AppID gh_ID: 'gh_999999',//替换为自己小程序的原始ID env_ID: 'tcb-env',//替换小程序底下云开发环境ID function: { name:'openMini',//提供UrlScheme服务的云函数名称 data:{} //向这个云函数中传入的自定义参数 }, path: 'pages/index/index.html' //打开小程序时的路径 }) } 以上引入的 web2weapp.js 文件是教程封装的有关拉起微信小程序的极简应用，我们直接引用即可轻松使用。 如果你想进一步学习和修改其中的一些WEB展示信息，可以前往 github 获取源码并做修改。 有关于网页拉起小程序的更多信息可以访问官方文档 如果你只想体验短信跳转功能，在执行完上述文件创建操作后，继续以下步骤。 2、创建服务云函数在上面创建网页的过程中，需要填写一个UrlScheme服务云函数。这个云函数主要用来调用微信服务端能力，获取对应的Scheme信息返回给调用前端。 我们在示例中填写的是 openMini 这个命名的云函数。 我们前往微信开发者工具，定位对应的云开发环境，创建一个云函数，名称叫做 openMini 。 在云函数目录中 index.js 文件替换输入以下代码： const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event, context) => { return cloud.openapi.urlscheme.generate({ jumpWxa: { path: '', // 打开小程序时访问路径，为空则会进入主页 query: '',// 可以使用 event 传入的数据制作特定参数，无需求则为空 }, isExpire: true, //是否到期失效，如果为true需要填写到期时间，默认false expire_time: Math.round(new Date().getTime()/1000) + 3600 //我们设置为当前时间3600秒后，也就是1小时后失效 //无需求可以去掉这两个参数（isExpire，expire_time） }) } 保存代码后，在 index.js 右键，选择增量更新文件即可更新成功。 接下来，我们需要开启云函数的未登录访问权限。进入小程序云开发控制台，转到设置-权限设置，找到下方未登录，选择上几步我们统一操作的那个云开发环境（注意：第一步配置的云开发环境和云函数所在的环境，还有此步操作的环境要一致），勾选打开未登录 [图片] 接下来，前往云函数控制台，点击云函数权限，安全规则最后的修改，在弹出框中按如下配置： [图片] 3、本地测试我们在本地浏览器打开第一步创建的 index.html ；唤出控制台，如果效果如下图则证明成功！ 需要注意，此处本地打开需要时HTTP协议，建议使用live server等扩展打开。不要直接在资源管理器打开到浏览器，会有跨域的问题！ [图片] 4、上传本地创建好的 index.html 至静态网站托管将本地创建好的 index.html 上传至静态网站托管，在这里静态托管需要是小程序本身的云开发环境里的静态托管。 如果你上传至其他静态托管或者是服务器，你仍然可以使用外部浏览器拉起小程序的能力，但会丧失在微信浏览器用开放标签拉起小程序的功能，也不会享受到云开发短信发送跳转链接的能力。 如果你的目标小程序底下有多个云开发环境，则不需要保证云函数和静态托管在一个环境中，无所谓。 比如你有A、B两个环境，A部署了上述的云函数，但是把 index.html 部署到B的环境静态托管中了，这个是没问题的，符合各项能力要求。只需要保证第一步 index.html 网页中的云开发环境配置是云函数所在环境即可。 部署成功后，你便可以访问静态托管的所在地址了，可以通过手机外部浏览器以及微信内部浏览器测试打开小程序的能力了。 5、短信发送云函数的配置在上面创建 openMini 云函数的环境中再来一个云函数，名字叫 sendsms 。 在此云函数 index.js 中配置如下代码： const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }) exports.main = async (event, context) => { try { const config = { env: event.env, content: event.content ? event.content : '发布了短信跳转小程序的新能力', path: event.path, phoneNumberList: event.number } const result = await cloud.openapi.cloudbase.sendSms(config) return result } catch (err) { return err } } 保存代码后，在 index.js 右键，选择增量更新文件即可更新成功。 6、测试短信发送能力在小程序代码中，在 app.js 初始化云开发后，调用云函数，示例代码如下： App({ onLaunch: function () { wx.cloud.init({ env:"tcb-env", //短信云函数所在环境ID traceUser: true }) wx.cloud.callFunction({ name:'sendsms', data:{ "env": "tcb-env",//网页上传的静态托管的环境ID "path":"/index.html",//上传的网页相对根目录的地址，如果是根目录则为/index.html "number":[ "+8616599997777" //你要发送短信的目标手机，前面需要添加「+86」 ] },success(res){ console.log(res) } }) } }) 重新编译运行后，在控制台中看到如下输出，即为测试成功： [图片] 你会在发送的目标手机中收到短信，因为短信中包含「退订回复T」字段，可能会触发手机的自动拦截机制，需要手动在拦截短信中查看。 需要注意：你可以把短信云函数和URLScheme云函数分别放置在不同云开发环境中，但必须保证所放置的云开发环境属于你操作的小程序 另外，出于防止滥用考虑，短信发送的云调用能力需要真实小程序用户访问才可以生效，你不能使用云端测试、云开发JS-SDK以及其他非wx.cloud调用方式（微信侧WEB-SDK除外），会提示如下错误： [图片] 如果你想在其他处使用此能力，可以使用服务端API来做正常HTTP调用，具体访问官方文档 7、查看短信监控图表进入 云开发控制台 > 运营分析 > 监控图表 > 短信监控，即可查看短信监控曲线图、短信发送记录。 [图片] 三、总结短信跳转小程序核心是静态网站中配置的可跳转网页，外部浏览器通过URL Scheme 来实现的，这个方式不适用于微信浏览器，需要使用开放标签才可以URL Scheme的生成是云调用能力，需要是目标小程序的云开发环境的云函数中使用才可以。并且生成的URL Scheme只能是自己小程序的打开链接，不能是任意小程序（和开放标签的任意不一致）短信发送能力的体验是每个有免费配额的环境首月100条，如有超过额度的需求可前往开发者工具-云开发控制台-对应按量付费环境-资源包-短信资源包，进行购买。如当前资源包无法满足需求也可通过云开发 工单 提交申请[图片]短信发送也是云调用能力，需要真实小程序用户调用才可以正常触发，其他方式均报错返回参数错误，出于防止滥用考虑云函数和网页的放置可以不在同一个环境中，只需要保证所属小程序一致即可。（需要保证对应环境ID都能接通）如果你不需要短信能力，可以忽略最后两个步骤CMS配置渠道投放、数据统计可参考官方文档

xquery基于原生小程序，是一套类似于jquery的小程序开发工具库，方便引用且无破坏小程序原生模式。 支持组件元素选取 方便的结构嵌套 弱模板化，方便维护 事件方法重新封装，支持query传递参数 支持钩子方法 支持LRU缓存 支持MARKDOWN富文本 支持HTML富文本 [图片] 无侵入的Pager 使用Pager方法替换小程序Page，其他用法一致。无侵入性语法 [代码]const Pager = require('components/aotoo/core/index') Pager({ data: { itemElement: {...} }, onReady(){ ... } }) [代码] 完整的目录结构 [图片] 实例抓取 类似于在web开发中可以使用[代码]getElementsById[代码]抓取html dom元素对象，下列针对item组件对象实现 wxml模板 [代码]<ui-item item="{{itemElement}}" /> [代码] js [代码]const Pager = require('components/aotoo/core/index') Pager({ data: { itemElement: { $$id: 'item-id', title: '这是一个item组件' } }, onReady(){ let $item = this.getElementsById('item-id') $item.addClass('active') } }) [代码] onReay类似于web中的body.onLoad，所有dom元素都已经准备妥当，使用[代码]getElementsById[代码]去抓取实例 事件封装 query传递参数更贴近web前端开发（事件封装是基于Pager及xquery定义的组件才有效，不会影响原生开发） wxml模板 [代码]<ui-item item="{{itemElement}}" /> [代码] js [代码]Pager({ data: { itemElement: { title: '按钮', tap: 'onTap?username=张三' // 允许query参数 // tap => bind:tap的别名 // aim => catch:tap的别名 // longpress => bind:longpress的别名 // longtap => bind:longtap的别名 // touchstart => bind:touchstart 别名 // touchmove => bind:touchmove的别名 // touchend => bind:touchend的别名 // touchcancel => bind:touchcancel的别名 // catchlongpress => catch:longpress的别名 // ...其他catch方法以此类推 } }, onTap(e, param, inst){ // e => 原生event事件对象 // param => {username: '张三'} // inst => <ui-item />组件实例对象，支持update, addClass, removeClass等方法 inst.update({ title: param.username+'的按钮' }, function(){ let $data = inst.getData() console.log($data.title) // 张三的按钮 }) } }) [代码] 数据缓存及数据过期 [代码]const Pager = require('components/aotoo/core/index') const lib = Pager.lib const dataEntity = lib.hooks('DATA-ENTITY', true) // true表示缓存数据到storage onReay(){ // 将用户信息缓存一天 dataEntity.setItem('names', {name: '', sex: ''}, 24*60*60*1000) setTimeout(()=>{ let namesData = dataEntity.getItem('names') console.log(namesData) // {name: '', sex: ''} },3000) } [代码] LRU缓存设置 小程序本地缓存10M，内存128M，因此数据缓存到本地受到很多限制，比如图片，需要使用LRU缓存机制来对图片/文件进行管理 [代码]const Pager = require('components/aotoo/core/index') const lib = Pager.lib const imgEntity = lib.hooks('IMG-ENTITY', { localstorage: true, // 开启本地缓存 expire: 24 * 60 * 60 * 1000, // 过期时间为1天，所有缓存的数据 max: 50 // 最大缓存数为50条，即当前hooks实例只会存储最常用的50条数据 }) onReay(){ // 将用户信息缓存一天 // img-src => 图片的具体地址或者一个唯一地址 // 挂载一个方法，当该钩子存储数据时 imgEntity.setItem('image-src', {img: 'cloude://....'}) saveImgToLocal('cloude://...') setTimeout(()=>{ let imgsData = imgEntity.getItem('image-src') console.log(imgsData) // {img} || undefined if (!imgsData) { imgEntity.setItem('image-src', {img: 'cloude://....'}) saveImgToLocal('cloude://...') } },3000) } [代码] markdown支持 有两种方式支持markdown文本 组件方式 嵌入方式 嵌入方式比较简单，下面示例markdown文本以嵌入方式实现 [代码]const Pager = require('components/aotoo/core/index') Pager({ data: { itemElement: { "@md": ` ## 马克党标题 基于xquery的基类开发的组件可以直接内嵌使用马克党文档 ` } }, onReady(){ ... } }) [代码] html支持 前端从后端拿去富文本数据，直接转化成小程序模板结构输出，下面示例html文本以嵌入方式实现 [代码]const Pager = require('components/aotoo/core/index') Pager({ data: { itemElement: { "@html": ` <div class="container"> <img src="http://..." /> <span>...</span> <br /> <section> ... ... </section> </div> ` } }, onReady(){ ... } }) [代码] github地址：https://github.com/webkixi/aotoo-xquery 小程序demo演示，下列小程序基于xquery的个人开发，公司的就不放了 xquery [图片] saui [图片] 嘟嘟倒计时 [图片]

edit at 11/12 代码传到了：https://github.com/eclipseglory/zasi-components , DEMO演示在文章结尾 小程序没有提供color-picker类似的组件，只能自己做。 可传统的RGB颜色选择器，真的腻了，而且在手机上也不是很操作，就跑网上搜了一圈，发现有一种圆环形的(基于HSV)我很喜欢： [图片] 我自诩对canvas2d和webgl很熟悉，做个这玩意儿很轻松，开始做！没想到痛苦开始了。 从上周5开始，一共做了三个版本： 1.纯canvas版本 2.canvas+组件版本 3.纯组件版本 纯canvas版本这个版本做了整整一天！ [图片] 由于canvas绘制性能问题，特别是因为没有requestAnimationFrame可以调用，别说在真机上测试特别不流畅，就是在模拟器上也小卡小卡的。而且，在纯的canvas进行触摸定位等事件响应处理，计算起来太麻烦，bug不断，只能放弃了。 混合版本因为wxs模块是提供requestAnimationFrame接口的，所以我就想，使用canvas作为底部颜色环，上面就直接用view作为指针，这样，事件触发和处理比起纯canvas要简单得多，而且还能利用rAF回调页面接口去绘制其他canvas。 的确，我的想法得到了证实，这个混合版本比起第一个要流畅得多！ 可就要完工的时候，我却发现，在真机上，cover-view的鼠标事件有很大问题，坐标值飘忽不定，也就是说拖动指针会发生鬼畜般的抖动！加上我不知道怎么debug到wxs模块中，于是跟个sb一样fix，找了半天也没找到问题在哪儿，直到我搜索时，返现有人也遇到和我一样的问题，我才安心了：这是小程序的问题。 动手改！既然cover-view有不行，那就不用它。 实际上canvas在该组件中的作用无非就是绘制一个圆环而已，如果我利用离屏canvas事先画好，然后保存成图片，再用image加载它，这样就可以避免使用canvas来显示圆环了，也就可以不用cover-view放到其顶部！ 想法是好的，可是到了真机上，绘制保存出来的图片时好时坏： [图片] 只能放弃，又耽误我一天。 无canvas版本刚才说了，canvas在该组件中的作用，仅仅是绘制一个颜色环而已，除此之外真没什么用。 那我就用css模拟一个类似圆环就好了，精确到每一度一个颜色一点意义没有。 所以就利用css的background-image属性，做了4个四分之一圆弧，然后拼在一起，得到了一个彩色原版，再用一个小的view遮挡，让它们只露出一部分，圆环就做好了。 之前的代码都不用改，直接用新作的圆环views替换canvas的标签即可。主体框架和功能，不到一天就完成了，不得不说，比起纯的canvas绘制，要方便太多太多。 这是截图： [图片] 代码片段这里是 演示DEMO，要使用的话，复制里面的组件出来用就好。 有些代码我混淆过，但不耽误使用。 有问题找我

前言 产品说什么也要在大图预览下加图片描述，我说微信小程序不支持，wx.previewImage和wx.previewMedia都是我们自己改不了的。但是无奈非得要，那我说：加可以，但是做不到像wx.preview那样完美，右上角会有胶囊按钮，其它体验也会也些差距。为了加这个图片描述，我是抽业余时间搞了好多天才搞出来，真是。。。 示例动图 [图片] 实现思路和方案： 将navigationBar隐藏掉，然后黑色背景一搞，左右切换使用swiper。因为考虑到swiper加载item太多会有渲染问题，我们在这里使用之前写的库swiper-limited-load。图片使用movable-view来实现双指缩放和移动功能，此外图片还应该有双击缩放，单击退出等功能视频使用video组件，要考虑到只有滑动到当前item，才去渲染当前item的video组件，要不然出现左右两个video也跟着一起播放的情况就尴尬了。视频要实现宽度铺满，按宽高比例显示，需要知道视频的宽高比，这里可以用wx.getImageInfo来获取视频封面图片的信息（网络图片需要配置download域名），或者如果你们的接口会返回视频的宽高信息，根据屏幕宽度，直接设置高度也行。总结 微信自带的wx.previewImage和wx.previewVideo其实已经挺好用了。就为了一个图片描述，我们自己造这么个轮子，得好几天时间，而且这个轮子还不如原来的好用。面对这种情况，这就看是要如何取舍了，是要开发效率，还是要用户体验。既然产品需要，那就硬刚吧。。。 项目地址：https://github.com/pengboboer/preview-media-desc 如果错误，欢迎指出。 如有新的需求也可以提出来，如果有时间的话，我会帮你们完善。 如果能帮到你们，记得给一个star，谢谢。

小程序的视频内容流自动播放 啊啊啊，又解决一个问题 0、起因 这个需求产生的起因，是在做内容流（包含文本，图片，视频）的时候，需要如果流里面有视频，则滚动到一定位置时自动播放视频，类似朋友圈、微博等等的自动播放效果。 [图片] 1、第一版尝试 第一版的思路是： 收集当前所有内容流相对于页面头部的高度，做成一个Array 滚动过程中，监听页面滚动事件，当达到某个高度要求，则播放对应的索引视频 这个操作缺点太多了，捡几个主要的说 缺点： 内容流是一个个的组件，获取距离顶部高度不方便，也不太准。并且组件内需要通过事件传播到列表页，在列表页进行高度Array整理、事件监听、切换索引等等（如果有几种列表页，就要写几遍，很麻烦） 监听滚动事件本身就消耗性能，做了节流也不是那么优秀 2、第二版尝试 突然，就发现了[代码]wx.createIntersectionObserver[代码]这个属性，它的作用是：返回[代码]intersectionObserver[代码]对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见（创建一个目标元素，根据目标元素和视窗的相交距离来判断当前页面滚动的情况。通常这个方案也用于页面图片的懒加载）。参考https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.html 怎么解释呢，就是可以理解为，做一个监听，如果当前被监听的元素，进入了你规定的视界或者离开你规定的视界，就触发。 那么，怎么做到监听呢，参考如下代码： [代码]/** 监控视频是否需要播放 */ let {screenWidth, screenHeight} = this.extData.systemInfo //获取屏幕高度 let topBottomPadding = (screenHeight - 80)/2 //取屏幕中间80的高度作为播放触发区域，然后计算上下视窗的高度 topBottomPadding // 80这个高度可以根据UI样式调整，我这边基本两个视频间隔高度在100左右，超过了两个视频之间的间隔，就会冲突，两个视频会同时播放，不建议过大 const videoObserve = wx.createIntersectionObserver() videoObserve.relativeToViewport({bottom: -topBottomPadding, top: -topBottomPadding}) .observe(`#emotion${this.data.randomId}`, (res) => { let {intersectionRatio} = res if(intersectionRatio === 0) { //离开视界，因为视窗占比为0，停止播放 this.setData({ playstart: false }) }else{ //进入视界，开始播放 this.setData({ playstart: true }) } }) [代码] 其中，[代码]observe[代码] 是对应你需要监听的视频（也就是滚动进入视窗的元素） 那么，为什么选择[代码]relativeToViewport[代码]呢，是因为我们需要对它进入某一个视窗进行监听，而不是对进入整个屏幕视窗监听（因为可能整个视窗里会有多个视频）。 以上，就是整个逻辑思路。 最开始用的[代码]relativeTo[代码]监听视频进入某个元素(如[代码].view-port[代码])，但是后来发现每个页面都要写这个元素，太麻烦，并且容易遮盖操作区域 [代码]// 太麻烦，后来舍弃了这个方案 <view class="view-port" style="height: 100rpx; position: fixed; z-index: 1;width: 100%;letf:0;top:50%;transform: translateY(-50%);"></view> [代码]

我做了一个人脸识别的小程序，上传图片，返回图片中人脸的位置和相应位置识别的信息。返回结果是这样的： [{location={"height":600,"rotation":5,"width":516,"left":-6.61,"top":503.13}, user_id=aaaa}, {location{"height":303,"rotation":-2,"width":268,"left":805.64,"top":729.71}, user_id=bbbb}] 我想要在原图上抠出识别的人脸图片，要怎么实现啊？

概述点击右上角分享朋友圈[图片] 分享到朋友圈样式[图片] 朋友圈打开样式[图片] 这个功能目前只支持Android(在IOS高版本微信支持朋友圈打开小程序能力，但不能分享)。 用户打开朋友圈分享的小程序，看到不是真正的小程序，而是原本页面的“单页模式”。 什么是“单页模式”？以下是微信官方对于“单页模式”的描述： “单页模式”下，页面顶部固定有导航栏，标题显示为当前页面 JSON 配置的标题。底部固定有操作栏，点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。“单页模式”默认运行的是小程序页面内容，但由于页面固定有顶部导航栏与底部操作栏，很可能会影响小程序页面的布局。因此，请开发者特别注意适配“单页模式”的页面交互，以实现流畅完整的交互体验。限制另外，“单页模式”存在着很多限制。以下是官方给出的禁用能力列表： [图片] 限制主要包括以下几点： 页面无登录态，与登录相关的接口，如 [代码]wx.login[代码] 均不可用不允许跳转到其它页面，包括任何跳小程序页面、跳其它小程序、跳微信原生页面若页面包含 tabBar，tabBar 不会渲染，包括自定义 tabBar本地存储与小程序普通模式不共用这些限制，让“单页模式”只适用于内容展示，不适用于有较多交互。 配置针对“单页模式”，新增了单页模式相关配置。目前这个配置里只有一个navigationBarFit属性: [图片] navigationBarFit属性主要是针对原页面设置了自定义导航栏的情况。也就是原页面的json文件中配置了这个属性: { // ... "navigationStyle":"custom" // ... } 给大家看一下普通导航栏和自定义导航栏的区别，下图是普通导航栏页面： [图片] 下图是自定义导航栏页面，我们在原本的导航栏位置使用了banner： [图片] [代码]"navigationStyle":"custom"[代码]这个设置在“单页模式”下也会生效。前文微信官方对“单页模式”的描述有说到“顶部导航栏与底部操作栏均不支持自定义样式”。如果我们在原页面设置了自定义导航栏。那么“单页模式”样式就会变成这样： [图片] 通过设置navigationBarFit为 [代码]squeezed[代码]就可以解决这个问题: { // ... "singlePage": { "navigationBarFit": "squeezed" } // ... } 设置后的样式： [图片] 开发 接下来介绍如何在小程序中实现这个功能。 第一步在需要转发朋友圈的页面中注册用户点击右上角转发功能，这是实现转发朋友圈功能的必要满足条件。 onShareAppMessage: function () { return { title: '转发标题', path: '/pages/home/index', imageUrl: '自定义图片路径' } } 第二步注册分享朋友圈功能(从基础库 [代码]2.11.3[代码] 开始支持)： onShareTimeline: function () { return { title: '转发标题', query: 'from=pyq', imageUrl: '自定义图片路径' } } 注意，这里有个问题，分享朋友圈功能不支持自定义页面路径，意味着只能转发当前页面。如果当前页面存在较多“单页模式”限制功能，就可能让我们的页面不能按预期展示。 当页面存在限制功能时，我们存在两个方案，第一个方案，针对“单页模式”做改动，不调用那些限制的功能。第二个方案，另外写一个针对“单页模式”的页面。 这两种方案都需要能判断当前是否正处在小程序“单页模式”。 我们通过判断场景值(场景值用来描述用户进入小程序的路径)是否等于 1154 来判断当前是否正处在小程序“单页模式”。场景值可以在 [代码]App[代码] 的 [代码]onLaunch[代码] 获取。 // app.js App({ // ... onLaunch(options) { const { scene } = options; this.isSinglePage = scene === 1154; } // ... }) 我们将是否正处在“单页模式”的Boolean值放入App实例，方便全局拿到值。 接下来说说两种方案。 第一种方案，在“单页模式”不调用那些限制功能(这是一种不推荐的方案，代码耦合性太强)。举个例子: const app = getApp(); Page({ // ... onLoad() { if (!app.isSinglePage) { wx.login({ // ... }) } } // ... }) 第二种方案，针对“单页模式”另写一个页面。因为分享朋友圈功能并不支持自定义页面路径，我们只能另外写一个组件来作为“单页模式”的内容承载。 将isSinglePage放入页面的初始数据，方便在wxml中拿到： // pages/home/index.js const app = getApp(); Page({ data: { isSinglePage: app.isSinglePage, } // ... }) home-single-page就是分享到朋友圈的内容承载组件： // pages/home/index.json { // ... "usingComponents": { "home-single-page": "components/home-single-page/index" }, } 当“单页模式”时，我们展示 [代码]home-single-page[代码]组件，否则就展示普通页面内容： // pages/home/index.wxml 样式上虽然搞定了，但是在原本的生命周期中可能会调用一些限制功能，或者跑一些其它“单页模式”用不上的内容。我们得停止原本生命周期函数调用。 建议对传入Page的对象进行统一处理，当“单页模式”时，不调用原本的生命周期： // pages/home/index.js import ExtendPage from 'common/extend-page/index' const app = getApp(); ExtendPage({ data: { isSinglePage: app.isSinglePage, } // ... }) ExtendPage函数针对“单页模式”进行统一处理： // common/extend-page/index.js const app = getApp(); const PAGE_LIFE = [ 'onLoad', 'onReady', 'onShow', 'onHide', 'onError', 'onUnload', 'onResize', 'onPullDownRefresh', 'onReachBottom', 'onPageScroll' ]; export default function(option) { let newOption = {}; if(app.isSinglePage) { newOption = PAGE_LIFE.reduce((res, lifeKey) => { if (option[lifeKey]) { res[lifeKey] = undefined; } return res; }, {}) } return Page({ ...option, ...newOption, }); } 在“单页模式”下，我们将原本的生命周期都停止了调用。这样就能很好的将“单页模式”下的页面和普通页面进行解耦。 如果”单页模式“页面比较复杂，需要使用生命周期。我们也可以添加 [代码]singlePageLife[代码]属性，当处在“单页模式”下，就调用 [代码]singlePageLife[代码]内的生命周期: // pages/home/index.js import ExtendPage from 'common/extend-page/index' const app = getApp(); ExtendPage({ data: { isSinglePage: app.isSinglePage, }, singlePageLife: { onLoad() { // ... }, } // ... }) // common/extend-page/index.js const app = getApp(); const PAGE_LIFE = [ 'onLoad', 'onReady', 'onShow', 'onHide', 'onError', 'onUnload', 'onResize', 'onPullDownRefresh', 'onReachBottom', 'onPageScroll' ]; export default function(option) { let newOption = {}; if(app.isSinglePage) { const { singlePageLife } = option; newOption = PAGE_LIFE.reduce((res, lifeKey) => { if (singlePageLife[lifeKey]) { res[lifeKey] = singlePageLife[lifeKey]; } else if(option[lifeKey]) { res[lifeKey] = undefined; } return res; }, {}) } return Page({ ...option, ...newOption, }); } 文章如有疏漏、错误欢迎批评指正。