[图片] [图片] [图片] [图片] 点击购物车图标跳转到购物车页面，怎么再返回详情页？在购物车页面添加返回按钮  返回上一级没用啊  求大佬指教！

微信小程序在微信开发工具中清除了用户授权，但是查询wx.getSetting，返回的还是用户信息已授权。

开门见山 工具地址 点我直达>>painter-custom-poster 由于挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题 背景 在做小程序时候，我们经常会有一个需求，需要将小程序分享到朋友圈，但是朋友圈是不允许直接分享小程序，那我们还有其他的办法解决吗?答案肯定是有的，即 canvas 生成个性化海报分享图片到朋友圈 分析 小程序中有大量的生成图片需求，但是使用过 canvas 的人，都会发现一些难以预料的问题>>有关小程序的坑 直接在 canvas 上绘制图形，对于普通开发者来说代码会特别凌乱并且难以维护，经常会花费很久的时间去优化代码 不同的环境渲染问题，例如在开发者工具看起来好好的，一到 Android 真机，就出现图片不显示，位置不对应等等问题 解决 那可不可以开发一款生成海报的插件库呢? 首先，只需要提供一份简单的参数配置文件即可 解决掉小程序Canvas遇到的一些大大小小的坑 有严苛的测试环节，解决各种环境和各种机型遇到的问题，并提供稳定的线上版本 长期维护，并有专人更新迭代更新颖的功能 以上的要求当然是可以的，曾经的我也想尝试开发一款出来，但是后来尝试了几款现成的工具之后就放弃了，毕竟轮子这个东西，是需要不断维护更新的，另外已经有这么多优秀现成的插件了，我为何还要费力去写呢，贡献代码岂不更美哉，以下是我收集的几款 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter 小程序组件-小程序海报组件>>wxa-plugin-canvas 微信小程序：一个 json 帮你完成分享朋友圈图片>>mp_canvas_drawer 我想干什么 唠了这么多，好像提供给大家插件就没我什么事情了…想走是不可能的 为了能够制作出更酷炫的海报，我思考了许久 虽然有了插件后，只需要提供配置代码就能够制作出一款海报来，但是我发现还是有些许问题 制作海报效率还是不够高，微调一个元素的大小和位置，就需要不断的修改保存代码，等待片刻，查看效果，真的烦 一个小小的位置调整可能就需要来回调整无数次，这种最简单的机械化劳动，这辈子是不可能的 拿着完美的稿子，递给设计师看，这个位置不对，这个线太粗，这个颜色太重…你信不信我打死你 对于一些精美复杂的海报，实现起来真的不太现实 那我需要怎么做呢，请点击这个链接体验>>painter-custom-poster 点击左侧例子展示中的任意一个例子，然后导入代码就能看到效果图，这下你应该能猜到了我的想法了 如何实现 刚开始我想用简单的html和css加拖动功能实现，通过简单尝试之后就放弃了，因为这个功能真的太复杂了，简单的工具肯定是不行的 中间这个计划停滞了很长时间，一度已经放弃 直到发现了这个库fabric.js，真的太太优秀了，赞美之词无以言表，唯一的缺点就是中文教程太少，必须生啃英文加谷歌翻译 fabric介绍，你可以很容易地创建任何一个简单的形状，复杂的形状，图像;将它们添加到画布中，并以任何你想要的方式进行修改：位置、尺寸、角度、颜色、笔画、不透明度等 How To Use 目前工具一共分成4部分 例子展示 用来将一些用户设计的精美海报显示出来，通过点击对应的例子并将代码导入画布中 画布区 显示真实的海报效果，画布里添加的元素，都可以直接用鼠标进行拖动，旋转，缩放操作 操作区 第一排四个按钮 复制代码 将画布的展示效果转化成小程序海报插件库所需要的json配置代码，目前我使用的是Painter库，默认会转化成这个插件的配置代码，将代码直接复制到card.js即可 查看代码 这个功能用不用无所谓，可以直观的看到生成的代码 导出json 将画布转化成fabric所需要的json代码，方便将自己设计的海报代码保存下来 导入json 将第3步导出的json代码导入，会在画布上显示已设计的海报样式 第二排五个按钮 画布 画布的属性参数 详解见下方 文字 添加文字的属性参数 详解见下方 矩形 添加矩形的属性参数 详解见下方 图片 添加图片的属性参数 详解见下方 二维码 添加二维码的属性参数 详解见下方 第三排 各种元素的详细设置参数 激活区 激活对象是指鼠标点击画布上的元素，该对象会被蓝色的边框覆盖，此时该对象被激活，可以执行拖动 旋转 缩放等操作 激活区只有对象被激活才会出来，用来设置激活对象的各种配置参数，修改value值后，实时更新当前激活对象的对应状态，点击其他区域，此模块将隐藏 快捷键 ‘←’ 左移一像素 ‘→’ 右移一像素 ‘↑’ 上移一像素 ‘↓’ 下移一像素 ‘ctrl + z’ 撤销 ‘ctrl + y’ 恢复 ‘delete’ 删除 ‘[’ 提高元素的层级 ‘]’ 降低元素的层级 布局属性 通用布局属性 属性 说明 默认 rotate 旋转，按照顺时针旋转的度数 0 width、height view 的宽度和高度 top、left 如 css 中为 absolute 布局时的作用 0 background 背景颜色 rgba(0，0，0，0) borderRadius 边框圆角 0 borderWidth 边框宽 0 borderColor 边框颜色 #000000 shadow 阴影 ‘’ shadow 可以同时修饰 image、rect、text 等 。在修饰 text 时则相当于 text-shadow；修饰 image 和 rect 时相当于 box-shadow 使用方法： [代码]shadow: 'h-shadow v-shadow blur color'; h-shadow: 必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值。 blur: 必需。模糊的距离。 color: 必需。阴影的颜色。 举例: shadow:10 10 5 #888888 [代码] 渐变色支持 你可以在画布的 background 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 中点，半径为最长边，目前不支持自己设置。 [代码]linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%) radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%) [代码] ！！！注意：颜色后面的百分比一定得写。 画布属性 属性 说明 默认 times 控制生成插件代码的宽度大小，比如画布宽100，times为2，生成的值为200 1 文字属性 属性名称 说明 默认值 text 字体内容 别跟我谈感情，谈感情伤钱 maxLines 最大行数 不限，根据 width 来 lineHeight 行高（上下两行文字baseline的距离） 1.3 fontSize 字体大小 30 color 字体颜色 #000000 fontWeight 字体粗细。仅支持 normal， bold normal textDecoration 文本修饰，支持none underline、 overline、 linethrough none textStyle fill： 填充样式，stroke：镂空样式 fill fontFamily 字体 sans-serif textAlign 文字的对齐方式，分为 left， center， right left 备注: fontFamily，工具中的第一个例子支持文字字体，但是导入小程序为什么看不到呢，小程序官网加载网络字体方法>> 加载字体教程>> 文字高度 是maxLines lineHeight2个字段一起计算出来的 图片属性 属性 说明 默认 url 图片路径 mode 图片裁剪、缩放的模式 aspectFill mode参数详解 scaleToFill 缩放图片到固定的宽高 aspectFill 图片裁剪显示对应的宽高 auto 自动填充 宽度全显示 高度自适应居中显示 Tips（一定要看哦～） 本工具不考虑兼容性，如发现不兼容请使用google浏览器 painter现在只支持这几种图形，所以暂不支持圆，线等 如果编辑过程，一个元素被挡住了，无法操作，请选择对象并通过[ ]快捷键提高降低元素的层级 文字暂不支持直接缩放操作，因为文字大小和元素高度不容易计算，可以通过修改激活栏目maxLines lineHeight fontSize值来动态改变元素 如发现导出的代码一个元素被另一个元素挡住了，请手动调整元素的位置，json数组中元素越往后层级显示就越高，由于painter没有提供层级参数，所以目前只能这样做 本工具导出代码全是以px为单位，为什么不支持rpx， 因为painter在rpx单位下，阴影和边框宽会出现大小计算问题，由于原例子没有提供px生成图片方案，可以下载我这里修改过的demo>>Painter即可解决 文本宽度随着字数不同而动态变化，想在文本后面加个图标根据文本区域长度布局， 请参考Painter文档这块教程直接修改源码 由于本工具开发有些许难度，如出现bug，建议或者使用上的问题，请提issue，源码地址>>painter-custom-poster 海报贡献 如果你设计的海报很好看，并且愿意开源贡献，可以贡献你的海报代码和缩略图，例子代码文件在example中，按顺序排列，例如现在库里例子是example2.js，那你添加example3.js和example3.jpg图片，事例可以参考一下文件夹中源码，然后在index.js中导出一下 导出代码 代码不要格式化，会报错，请原模原样复制到json字段里 生成缩略图 刚开始我想在此工具中直接生成图片，但是由于浏览器图片跨域问题导致报错失败 所以请去小程序中生成保存图片，图片质量设置0.2，并去tinypng压缩一下图片 找到painter.js，替换下边这个方法，可以生成0.2质量的图片，代码如下 [代码] saveImgToLocal() { const that = this; setTimeout(() => { wx.canvasToTempFilePath( { canvasId: 'k-canvas', fileType: 'jpg', quality: 0.2, success: function(res) { that.getImageInfo(res.tempFilePath); }, fail: function(error) { console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`); that.triggerEvent('imgErr', { error: error }); } }, this ); }, 300); } [代码] TODO 颜色值选择支持调色板工具 文字padding支持 缩放位置弹跳问题优化 假如需求大的话，支持其他几款插件库代码的生成 ~ 创作不易，如果对你有帮助，请给个星星 star✨✨ 谢谢 ~

适应场景： 小程序页面跳转redirect/navigate/其它方式 分析： 从用户触发跳转行为到下一个页面onload生命周期函数内时间差会有500ms左右，如果在页面跳转之后进行onload函数内才开始去加载页面数据，那么这500ms左右的时间就浪费了。 改进： 在页面触发跳转行为的处理函数里结合promise预先加载下个页面的数据，并将promise对象缓存，此时页面跳转和加载数据同时进行，到了目标页面再取出缓存的promise对象进行判断和取数据操作。 效果： 跳转页面加载速度提高了600ms。 示例： 代码结构 [图片] pageManager.js [代码]// 写在utils里的公用方法 const pageList = {}; module.exports = { putData:function(pageName, data){ pageList[pageName] = data; }, getData:function(pageName){ return pageList[pageName]; } } [代码] util.js [代码]const myPromise = fn => obj => { return new Promise((resolve, reject) => { obj.complete = obj.success = (res) => { resolve(res); } obj.fail = (err) => { reject(err); } fn(obj); }) } module.exports = { myPromise : myPromise } [代码] index.js [代码]// 跳转页面 const {myPromise} = require('../../utils/util'); const pageManager = require('../../utils/pageManager'); page({ data: { }, onLoad:function(){ }, gotoPageA:function(){ const PromisePageA = myPromise(wx.request)({ url : '' }).then((res)=>{ return res.data; }) pageManager.putData('pageA',promisePageA); wx.navigateTo({ url: 'pages/pageA/pageA' }) } }) [代码] pageA.js [代码]// 被跳转页面 const util = require('../../utils/util.js'); const pageManager = require('../../utils/pageManager'); const {myPromise} = require('../../utils/util'); Page({ data:{ logs:[] }, onLoad: function(){ const promisePageA = pageManager.getData('pageA'); if(promisePageA){ const resData = promisePageA.then( function(data){ }, function(){ console.log("err"); } ) } } }) [代码]

实现方法：Animation.rotate() 代码示例 .wxml [代码]<!-- 转盘 --> <image animation="{{cs_an}}" src="https://wx1.sbimg.cn/2020/09/24/GzvuO.png" class="pan_img" /> <!-- 操作 --> <button bindtap="kai">开始抽奖</button> <button bindtap="zhi">重置</button> [代码] .wxss [代码]/* 转盘图片 */ .pan_img { width: 750rpx; height: 750rpx; } [代码] .js [代码]kai: function () { console.log("开始"); var animation = wx.createAnimation({ duration: 5000, // 转圈时间 timingFunction: "ease", }); // 转25圈+60° animation.rotate(360 * 25 + 60).step(); this.setData({ cs_an: animation.export(), }); }, zhi: function () { console.log("重置"); var animation = wx.createAnimation({ duration: 0, }); animation.rotate(0).step(); this.setData({ cs_an: animation.export(), }); }, [代码] [图片]

最近在用到小程序的字体，用起是真的有一丝烦躁，各种莫名其妙的bug。下面做一些总结，免得大家犯同样的错误，同样也希望官方能出一个详细的字体解决说明。 问题原因： 首先使用字体无非就是用font-family，在网页上是有很多很好的探讨的文章。但是在小程序中，我们并不知道font-family支持哪些字体，据我这一周的查找，官方也没有详细的说明。 因此如果我们想使用某种字体，最好的方法只有通过font-face外部引入字体。 但是小程序是不支持引入本地的字体文件，即font-face中的src属性的值不能是本地路径。否则会报do-not-use-local-path错： [图片]     因此我所知道的最终的解决方案就有两种     1.引入网络路径     2.通过base64编码引入     ①引入网络路径的方法是将你的字体文件放在服务器中，然后通过网络路径引入，需要注意跨域的问题（可能因为我把字体文件放在腾讯云的对象存储中了，因此没有专门处理跨域也没有问题，但是不排除你可能会遇到跨域问题）。使用这种方法时要注意字体文件不能太大，具体限制我也不清楚。这里我只测试过3M的中文字体，会报ERR_CACHE_MISS[图片]，这个情况下，虽然在开发工具上显示的字体是正确的，但是预览到真机上就直接表现为字体文件没有加载的效果。（另外，即使你的字体文件很小，也会在 清除缓存后第一次编译 报这个错，但这种情况下预览到真机上是没有问题的） ②第二种方式就是通过base64编码引入。使用这种方法时需要注意一点，很多转base64编码的工具（例如我这里使用的font-min）会自动帮你兼容ie，生成的代码像这样：[图片] 在网页上这样用是没有问题的，还兼容其他浏览器。 但是在小程序中是不行的，必须把多余的部分全部删除，只留base64那一行，不然在开发工具上显示直接没有加载字体的效果，像这样： [图片] 另外据说base64编码不能太大，否则也会出错；这里由于我的需求只是需要几个固定文字，因此生成的base64很小，没有遇到这个问题。 以上就是我在处理小程序字体时遇到的问题总结，希望大家遇到时能少走弯路； 总结的不对的地方，欢迎大家讨论指正。

mpvue开发的小程序使用ononShareTimeline自定义标题和图片不生效，还是采用的默认名称和图片[图片][图片]

生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 [图片] 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false }, // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw }) }, getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 }) }, fail: err => { console.log(err) } }) } }) [代码] 最后绘制分享图的自定义组件就完成啦~效果图如下： [图片] tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

预期表现：通知展现为隶书 实际表现：在开发者工具中可以展现，在真机调试时无法展现隶书字体

[图片] 引子：微盟第三届编程比赛今年的日期定于12月19号，我们组了一个叫“NAZA”的小队，然后参赛项目定了《拍卖》，开发周期一周半，测试时间半周。团队成员全部为前端组的，所以产品的原型、数据库、接口、小程序、测试全部自己完成(ps:UI实在没人会所以找了场外私人支持)，技术选型为了图快速和方便就选择了“云开发”(开赛前2天才学的文档😂)。这篇文章就以叙事的风格纪录一下我们完整的开发流程，内容主要涉及产品介绍、数据库设计、接口设计、接口开发、小程序页面开发，以及实时数据推送和定时触发器。 一、产品设计 这一期编程比赛的主题是：小技术、大营销，主要聚焦于商业创新、赋能商家，所以在综合考虑了类似公益项目、众筹项目、活动项目、游戏项目等之后选择了“拍卖”这个主题，主要是为了赋予商家针对其“爆款商品”或者“活动商品”去吸引用户，让其停留在该小程序中，并在各种激励、引导下让客户去购买商家真正“热销”“高利润”的商品。所以主要的设计模块如下： 1、后台管理，包括：拍卖商品列表、拍卖商品编辑页、商品列表、商品编辑页 2、拍卖中心，包括：首页、拍卖详情页、拍卖纪录页 3、商品展示，包括：商品列表页、商品详情页、订单页 4、个人中心，包括：个人中心页、收支明细页、竞拍商品&订单商品展示 5、其他页面，包括：拍卖币获取引导页、大转盘页、刮刮卡页、其他说明页等 二、开发准备 1、创建云开发模版，新建项目选择一个空目录，填入 AppID（使用云开发能力必须填写 AppID），勾选创建 “云开发 QuickStart 项目”，点击创建即可得到一个展示云开发基础能力的示例小程序。 2、小程序准备，这里使用了私人的一个小程序，然后开通云开发，在小程序开发者工具中点击“云开发”按钮，打开云控制台、根据提示开通云开发、创建云环境。 [图片] 3、微信公众平台，小程序后台中加入小伙伴的微信账号到“项目成员”中。 三、产品原型 从网上搜索了一下好的原型开发工具，然后选择了“墨刀”，坑的是我只有2天的原型设计时间，因为我用的是试用版(本屌丝比较qiong～)，试用期过了之后不能再导出html文件了😂。原型导出来之后放到了同事的云服务器上：《拍卖》项目原型。大家感兴趣的可以看看。 四、UI设计 团队成员只会照着UI开发页面，自己作图短时间内学不会啊啊啊啊啊！！！！所以找了我的表妹一个超萌的妹子帮忙设计，篇幅以及本文章的重点内容不在此，所以只展示我们的首页让大家看一下吧～ [图片] 五、数据库设计 哈哈哈哈，为了大家看的更加方便，我直接罗列了一个表格放下面了 [图片] 在云开发操作界面的“数据库”中，先增加好这些“集合” [图片] 六、接口设计 嗯。。。。罗列如下 [图片] [图片] 七、开发 开发主要分为两个部分：云函数(接口开发)、小程序页面开发，这里罗列几个技术点吧供大家参考～ 1、我们开发的时候云开发的“事务”还不支持😢，在12月24号的时候看官方人员回复已经支持。事务官方文档 [图片] 在12月13号的那一周他们还在灰度，所以我们找了替代方案，代码找一个简单的罗列如下吧～ [图片] 2、数据实时推送 针对拍卖的这种玩法，对数据实时更新要求很高，做好的解决方案其实是用websocket来做，我们用云开发，所以只能使用云开发提供的数据实时推送。该功能使用场景为：1)、拍卖详情页，多人打开这个页面时，A用户出价后，其他的B用户、C用户、D用户......等看到的页面上的当前拍卖加个实时更新成最新数据、拍卖纪录列表更新最新的数据；2)、拍卖商品的最后5分钟内如果有人出价，那么该拍卖的最终结束时间顺延5分钟，所有其他用户都更新这个拍卖的结束时间。 小程序端的拍卖详情页的代码实现如下： [图片] 此处有两个坑，1)：第一个是从监听开始的那一刻，之后每增加一条都会推送一条消息，第一次一条数据，第二次有两条数据且最新数据是在最后，即：当数据库跟你监听的状态对比下来所有不一样的数据都会推送到用户端；2)：第二个坑是，需要设置该数据表(集合)的权限为“所有用户可读，仅创建者可写”，不然获取不到数据的实时推送 [图片] 3、定时触发器，可以查看官方文档 我们的业务使用场景为保证金的返还。每天的中午12点，会把前一天结束的需要先缴纳保证金的拍卖统计出来，然后把保证金返还给每个参与了这些拍卖且未最后竞价未成功的用户。这里主要是给大家看一下这个云函数的定时器的设置 [图片] 4、云函数的本地调试，官方文档 一开始看完文档自己本地调试去勾选“开启本地调试”的时候，每次都说未安装node modules [图片] 这里需要先本地安装npm包 [图片] 5、拍卖详情页的一个效果展示，可以更直观的看到数据的实时更新，本视频在本篇文章的最后～ 八、测试 当时项目比较紧张，抽了半下午加一晚上的时间测试，解决了80%的bug，比赛当天还在边展示边该代码，哈哈哈哈😂 九、参赛ppt & 演讲 这个过程主要靠我们的演讲打动评委，就不详细记载了～ 十、后记 两周的时间，我们在不影响项目排期的情况下，每天加班来做，大约有8000行代码吧，从一开始没有选题的茫然和不自信、到开发过程中的边学边做、到项目完成后满满的成就感，挺辛苦的，但是也学到了很多东西。最后，我们获得了二等奖，我们公司是一个卧虎藏龙的地方。哈哈哈哈，欢迎各路大神大牛加入我们公司、加入我们团队～ [视频]

最近做一个刮刮卡，需要将文字在canvas中水平、垂直居中 [图片] wxml [代码]<canvas type='2d' id="myCanvas" width="300" height="150" style="background:yellow;" \> [代码] 使用canvas2d构建画布 [图片] 蓝色线为水平中线 红色线为垂直中线 文本设置方法 [代码]fillText[代码]方法为canvas设置文本方法，使用如下所示 [代码]ctx.fillText('文本内容', x, y) [代码] x为横轴坐标 y为纵轴坐标 上例将文本内容设置在canvas画布的坐标位置上，跳脱web的开发思维，我们可以认为X点相对于文本有左，中，右三种布局，Y点相对于文本有上、中、下的布局，这样就很好理解文本在canvas上是如何绘制了 水平居中 找到X轴的中点位置，如上图，在150px这个点上 注意X点相对于文本的位置 [代码]ctx.fillStyle = '#aaa' ctx.font = 'bold 30px "Gill Sans Extrabold"' ctx.textAlign = 'center' ctx.fillText('文本内容', 150, 0) [代码] [图片] 图示只作说明 垂直居中 找到Y轴的中点位置，如上上张图，在75px这个点上 注意Y点相对于文本的位置 [代码]ctx.fillStyle = '#aaa' ctx.font = 'bold 30px "Gill Sans Extrabold"' ctx.textBaseline = 'middle' ctx.fillText('文本内容', 0, 75) [代码] [图片] 图示只作说明 完美居中 [代码]ctx.fillStyle = '#aaa' ctx.font = 'bold 30px "Gill Sans Extrabold"' ctx.textAlign = 'center' ctx.textBaseline = 'middle' ctx.fillText('文本内容', 150, 75) [代码] 源码戳这里 小程序戳这里 [图片]