🍙代码片段：https://developers.weixin.qq.com/s/Xache9mO7MmE 🧂写在前面：由于在编辑器插入代码撤销后导致的bug太过于诡异， 我放弃在文本内插入代码，遂在语雀上写了文章，需要代码分析的可去语雀查看。文章地址：https://www.yuque.com/docs/share/ee2856e2-93f3-4cc2-92b8-81fcb051074a?# 《微信小程序 《canvas2d实践》》 🍪业务需要拍摄照片后，添加坐标、时间水印，压缩图片后上传。 微信小程序官方文档里： CanvasContext wx.createCanvasContext(string canvasId, Object this)本接口从基础库版本 1.9.6 起支持在小程序插件中使用从基础库 2.9.0 开始，本接口停止维护，请使用 Canvas 代替创建 canvas 的绘图上下文 CanvasContext 对象那肯定得用Canvas 2d来实现啊！ 实现： 选择图片，需通过wx.getImageInfo()拿到图片的宽高；压缩图片，需注意分辨率；绘制图片，需通过canvas.createImage()创建图片，在onload中绘制图片到canvas；添加水印，设置字体时需注意书写语法规范；canvas转为图片并上传，需在onload图片加载完后再转，destWidth和destHeight是实际转出的宽高，canvas2d中需配置canvas而非canvasId；参考链接： 圣殿骑士：https://developers.weixin.qq.com/community/develop/article/doc/000242073903a04e082ab595b52013 https://developers.weixin.qq.com/community/develop/doc/000c4c00f703a84043ba6bf0058c00?highLine=canvas%25202d中的纸玫瑰

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 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即可。

实现一个简单登录页（账号、密码输入框、确定按钮），ios手机打开设置 密码与账户 打开自动填充密码， 进入小程序登录页输入账户、输入密码（让密码输入框失去焦点），此时系统拉起存储密码弹窗，点任意地方将此弹窗关闭， 此时再点击按钮，按钮事件没响应，再点一次按钮事件才响应

请问不想写这么多if else 怎么办？ if (params.username == '' && params.company == '' && params.project == '' && params.bigclassname == '') {       wx.cloud.database().collection("demoorder").where({         date: _.gte(new Date(params.startDate)).and(_.lte(new Date(params.endDate)))       })         .skip(len)         .limit(20)         .get({           success(res) {           },           fail(res) {                      }         })     } else if (params.username != "" && params.company == "" && params.project == "" && params.bigclassname == "") {       wx.cloud.database().collection("demoorder").where({         date: _.gte(new Date(params.startDate)).and(_.lte(new Date(params.endDate)))       })         .skip(len)         .limit(20)         .get({           success(res) {           },           fail(res) {                      }         })     } else if (params.username == "" && params.company != "" && params.project == "" && params.bigclassname == "") {       wx.cloud.database().collection("demoorder").where({         date: _.gte(new Date(params.startDate)).and(_.lte(new Date(params.endDate)))       })         .skip(len)         .limit(20)         .get({           success(res) {           },           fail(res) {                      }         })     }else if{}等等

问题报错地点：云开发路径cloudfunctions中； 自行追述问题：云开发路径cloudfunctions中确实使用了动态引用，但是小程序本地核心代码没有使用动态引用，况且开发者工具不是应该跳过对于cloudfunctions的代码检查么？ 目前暂时的解决方案：提交代码时把云函数中的相关代码在本地注释了就跳过该BUG了。 引申阅读： [图片] https://developers.weixin.qq.com/miniprogram/dev/devtools/project.html#%E4%B8%8A%E4%BC%A0%E6%97%B6%E8%BF%9B%E8%A1%8C%E4%BB%A3%E7%A0%81%E4%BF%9D%E6%8A%A4 开发工具报错信息： [图片] message：cloudfunctions/quickstartFunctions/index.js: 无法使用代码保护功能 in cloudfunctions/quickstartFunctions/index.js 'require' requires one and only one static string literal   12 |   try {   13 | // 尝试执行执行方法，直接通过名称读取文件，获取其中的执行函数 > 14 |     res.data = await require(`./function/${type}`)(event, context, cloud)      |                     ^   15 |   } catch (e) {   16 |     res.errmsg = e.toString()   17 |     res.data = false appid: wx53efdc*** openid: o6zAJs1HW*** ideVersion: 1.06.2209062 osType: win32-x64 time: 2022-09-09 23:07:03

[图片]这是实战分享: 小程序云开发玩转订阅消息的第二部分 第一部分链接 《实战分享: 小程序云开发玩转订阅消息（一）》 将订阅消息存入云开发数据库接下来我们创建一个云函数 [代码]subscribe[代码] ，这个云函数的作用是将用户的订阅信息存入云开发数据库的集合 [代码]messages[代码] 中，等待将来需要通知用户时进行调用。 在微信开发者工具的云开发面板中创建数据库集合 [代码]messages[代码] [图片]微信开发者工具新增数据库集合 创建一个 [代码]subscribe[代码] 云函数，在云函数中我们将小程序端发送过来的课程订阅信息，存储在云开发数据库集合中，开发完成后，在微信开发者工具中右键上传并部署云函数。 cloudfunctions/subscribe/index.js [代码]const cloud = require('wx-server-sdk'); cloud.init(); const db = cloud.database(); exports.main = async (event, context) => {  try {    const {OPENID} = cloud.getWXContext();    // 在云开发数据库中存储用户订阅的课程    const result = await db.collection('messages').add({      data: {        touser: OPENID, // 订阅者的openid        page: 'index', // 订阅消息卡片点击后会打开小程序的哪个页面        data: event.data, // 订阅消息的数据        templateId: event.templateId, // 订阅消息模板ID        done: false, // 消息发送状态设置为 false      },    });    return result;  } catch (err) {    console.log(err);    return err;  } }; [代码]利用定时触发器来定期发送订阅消息接下来我们需要实现一个定时执行的云函数[代码]send[代码]，来检查数据库中是否有需要发送给用户的订阅消息。如果有需要发送的订阅消息，会通过云调用 [代码]cloud.openapi.subscribeMessage.send[代码] 将订阅消息发送给用户。 创建一个名叫 [代码]send[代码] 的云函数，首先要配置云函数，在 [代码]config.json[代码] 的 [代码]permissions[代码] 中新增 [代码]subscribeMessage.send[代码]的云调用权限，然后新增一个 [代码]sendMessagerTimer[代码] 的定时触发器，定时触发器的语法和 [代码]linux[代码] 的 [代码]crontab[代码] 类似，比如，我们配置的 [代码]"0 * * * * * *"[代码] 代表每分钟执行一次云函数。 cloudfunctions/send/config.json [代码]{  "permissions": {    "openapi": ["subscribeMessage.send"]  },  "triggers": [    {      "name": "sendMessagerTimer",      "type": "timer",      "config": "0 * * * * * *"    }  ] } [代码]接下来是实现发送订阅消息的云函数，这个云函数会从云开发数据库集合[代码]messages[代码]中查询等待发送的消息列表，检查数据库中是否有需要发送给用户的订阅消息，发送条件可以根据自己的业务实现，比如开课提醒可以根据课程开课日期来检查是否需要发送订阅消息，在我们下面的代码示例里做了简化，筛选条件只检查了状态为未发送。 查询到待发送的消息列表之后，我们会循环消息列表，依次发送每条订阅消息，发送成功后将数据库中消息的状态改为已发送。 cloudfunctions/send/index.js [代码]const cloud = require('wx-server-sdk'); exports.main = async (event, context) => {  cloud.init();  const db = cloud.database();  try {    // 从云开发数据库中查询等待发送的消息列表    const messages = await db      .collection('messages')      // 查询条件这里做了简化，只查找了状态为未发送的消息      // 在真正的生产环境，可以根据开课日期等条件筛选应该发送哪些消息      .where({        done: false,      })      .get();    // 循环消息列表    const sendPromises = messages.data.map(async message => {      try {        // 发送订阅消息        await cloud.openapi.subscribeMessage.send({          touser: message.touser,          page: message.page,          data: message.data,          templateId: message.templateId,        });        // 发送成功后将消息的状态改为已发送        return db          .collection('messages')          .doc(message._id)          .update({            data: {              done: true,            },          });      } catch (e) {        return e;      }    });    return Promise.all(sendPromises);  } catch (err) {    console.log(err);    return err;  } }; [代码]最终效果 [图片]开课提醒订阅消息截图 源代码https://github.com/binggg/tcb-subscribe-demo[3] 参考资料 [1]注册小程序帐号: https://tencentcloudbase.github.io/2019-09-03-wx-dev-guide-register/ [2]开通云开发服务: https://tencentcloudbase.github.io/2019-09-03-wx-dev-guide-service/ [3]https://github.com/binggg/tcb-subscribe-demo: https://github.com/binggg/tcb-subscribe-demo

[图片] 微信官方为提升小程序模板消息能力的使用体验，对模板消息的下发条件进行了调整。原有的小程序模板消息接口于 2020 年 1 月 10 日下线，届时将无法使用旧的小程序模板消息接口发送模板消息，取而代之的是新的一次性订阅消息和长期订阅消息。 订阅消息给小程序开发者带来了更好的触达用户的能力，在具体实施过程中，开发者如何把模板消息换成新的订阅消息，是否需要购买服务器来实现服务器鉴权，怎样才能在用户订阅之后一段时间后，给用户发送长期或一次性订阅消息呢？ 小程序·云开发最近支持了通过云调用免 access_token 发送订阅消息，还新增支持了在定时触发器中实现云调用，这些能力可以帮助开发者轻松玩转小程序订阅消息。 我们今天会利用小程序·云开发进行一个小程序中实现订阅开课提醒的实战，帮助大家了解如何基于小程序·云开发快速接入小程序订阅消息。 [图片]整体时序图[图片]开课提醒订阅消息时序图环境准备注册小程序帐号[1]开通云开发服务[2]获取订阅消息模板 ID在微信小程序管理后台中，新增一个订阅消息的模板，这里我们新增了一个开课提醒的模板。 [图片]新增模板引导用户订阅微信小程序提供了[代码]wx.requestSubscribeMessage[代码] 接口来发起申请订阅权限界面。 [图片]微信申请订阅权限界面在 "订阅开课提醒" 的按钮上绑定 tap 事件，事件处理器我们这里用的 [代码]onSubscribe[代码] index.wxml [代码]<button  class="btn"  data-item="{{ item }}"  bindtap="onSubscribe"  hover-class="btn-hover" >  订阅开课提醒 </button> [代码]在 [代码]onSubscribe[代码] 函数内，我们会调用微信 API [代码]wx.requestSubscribeMessage[代码] 申请发送订阅消息权限，当用户在弹窗同意订阅之后，我们会收到 [代码]success[代码] 回调，将订阅的课程信息调用云函数 [代码]subscribe[代码] 存入云开发数据库，云函数 [代码]subscribe[代码] 的实现在下文会讲。 index.js [代码]onSubscribe: function(e) {    // 获取课程信息    const item = e.currentTarget.dataset.item;    // 调用微信 API 申请发送订阅消息    wx.requestSubscribeMessage({      // 传入订阅消息的模板id，模板 id 可在小程序管理后台申请      tmplIds: [lessonTmplId],      success(res) {        // 申请订阅成功        if (res.errMsg === 'requestSubscribeMessage:ok') {          // 这里将订阅的课程信息调用云函数存入云开发数据          wx.cloud            .callFunction({              name: 'subscribe',              data: {                data: item,                templateId: lessonTmplId,              },            })            .then(() => {              wx.showToast({                title: '订阅成功',                icon: 'success',                duration: 2000,              });            })            .catch(() => {              wx.showToast({                title: '订阅失败',                icon: 'success',                duration: 2000,              });            });        }      },    }); [代码][代码]  },[代码] 文章字数超出 50000 字，后半部分链接 《实战分享: 小程序云开发玩转订阅消息（二）》

简介答题活动小程序v2.0，是一个微信小程序答题软件，它基于微信原生小程序+云开发实现。 它使用了最新的前端技术栈，具有原生APP体验服务的小程序框架，小程序视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，响应的数据绑定，提供了丰富的基础组件和API。 提炼了典型的业务模型，它可以帮助你快速搭建各种形式的答题软件产品。相信不管你的需求是什么，本项目都能帮助到你。 [图片] [图片] 目录结构小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件（app.js、app.json、app.wxss）组成，必须放在项目的根目录。目录结构如下： [图片] 一个小程序页面由这四个文件组成，你可以留意到这个项目里边有不同类型的文件: .json 后缀的 JSON 配置文件；.wxml 后缀的 WXML 模板文件；.wxss 后缀的 WXSS 样式文件；.js 后缀的 JS 脚本逻辑文件； 功能主要包含六大功能模块页面，首页、答题页、结果页、活动规则页、答题记录页、排行榜页。适用于交通安全答题、 消防安全知识宣传、 安全生产知识学习、百年历史知识答题活动、学法守法有奖答题等。 - 首页 - 微信授权登录 - 获取微信头像和昵称等 - 活动规则页 - 答题页 - 实现用云开发实现查询题库功能 - 题库随机抽题 - 实现动态题目数据绑定 - 答题交互逻辑 - 切换下一题 - 提交答卷保存到云数据库集合 - 系统自动判分 - 结果页 - 答题结果页从云数据库查询答题成绩 - 实现转发分享答题成绩功能 - 答题记录页 - 查询历史成绩 - 排行榜页 - 成绩由高到低进行排名 - 实现页面间跳转功能 - 路由 - 界面交互 - 消息提示框 - loading 提示框 源码地址uem/答题活动小程序v2 https://gitee.com/uemeng/answer-activity-applet-v2.0 作品体验[图片]

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

开门见山 工具地址 点我直达>>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✨✨ 谢谢 ~

weapp-qrcode-canvas-2d weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码（外部二维码）的js包。canvas 2d 接口支持同层渲染且性能更佳，建议切换使用，可大幅提升生成图片的速度。 仓库地址 weapp-qrcode-canvas-2d【码云gitee】 weapp-qrcode-canvas-2d【github】 [图片] 测试环境 微信小程序基础库版本：2.10.4 开发者工具版本：Stable 1.03.2101150 Usage 先在 wxml 文件中，创建绘制的 [代码]canvas[代码]，并定义好 [代码]width[代码], [代码]height[代码], [代码]id[代码] , [代码]type[代码] ，其中type的值必须为[代码]2d[代码] [代码]<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas> [代码] 安装方法1：直接引入 js 文件 直接引入 js 文件，使用 [代码]drawQrcode()[代码] 绘制二维码 [代码]// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目中。路径根据实际引用的页面路径自行改变 import drawQrcode from '../../utils/weapp.qrcode.esm.js' [代码] 安装方法2：npm安装 [代码]npm install weapp-qrcode-canvas-2d --save [代码] // 然后需要在小程序开发者工具中：构建npm [代码]import drawQrcode from 'weapp-qrcode-canvas-2d' [代码] 安装完成后调用 例子1：没有使用叠加图片 [代码]const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node // 调用方法drawQrcode生成二维码 drawQrcode({ canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, background: '#ffffff', foreground: '#000000', text: 'abc', }) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ canvasId: 'myQrcode', canvas: canvas, x: 0, y: 0, width: 260, height: 260, destWidth: 260, destHeight: 260, success(res) { console.log('二维码临时路径：', res.tempFilePath) }, fail(res) { console.error(res) } }) }) [代码] 例子2：使用叠加图片(在二维码中加logo) [代码]const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node var img = canvas.createImage(); img.src = "/image/logo.png" img.onload = function () { // img.onload完成后才能调用 drawQrcode方法 var options = { canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, paddingColor: '#fff', background: '#fff', foreground: '#000000', text: '123456789', image: { imageResource: img, width: 80, // 建议不要设置过大，以免影响扫码 height: 80, // 建议不要设置过大，以免影响扫码 round: true // Logo图片是否为圆形 } } drawQrcode(options) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ x: 0, y: 0, width: 260, height: 260, destWidth: 600, destHeight: 600, canvasId: 'myQrcode', canvas: canvas, success(res) { console.log('二维码临时路径为：', res.tempFilePath) }, fail(res) { console.error(res) } }) }; }) [代码] API drawQrcode([options]) options Type: Object 参数 必须 说明 示例 canvas 必须 画布标识，传入 canvas 组件实例 canvasId 非 绘制的[代码]canvasId[代码] [代码]'myQrcode'[代码] text 必须 二维码内容 ‘123456789’ width 非 二维码宽度，与[代码]canvas[代码]的[代码]width[代码]保持一致 260 padding 非 空白内边距 20 paddingColor 非 内边距颜色 默认与background一致 background 非 二维码背景颜色，默认值白色 [代码]'#ffffff'[代码] foreground 非 二维码前景色，默认值黑色 [代码]'#000000'[代码] typeNumber 非 二维码的计算模式，默认值-1 8 correctLevel 非 二维码纠错级别，默认值为高级，取值：[代码]{ L: 1, M: 0, Q: 3, H: 2 }[代码] 1 image 非 在 canvas 上绘制图片，层级高于二维码，v1.1.1+版本支持。具体使用见：例子2 [代码]{imageResource: '', width:80, height: 80, round: true}[代码]

最近在文档中偶然发现了这么一段，测试完之后，居然情不自禁的想要夸一下腾讯： [图片] 故事是这样的： 很久之前，我们小程序上有图片上传前做安全检测的需求，选择的是云函数的实现方案，图片压缩后直接以Buffer的形式传递。刚上线的几个月，一切运行正常，可是突然某一天（几个月前）开始，陆续有用户反馈上传会失败，当然也不是100%失败，个别幸运儿还是可以成功的。排查发现，是小程序在调用云函数的时候报错了（为了写文章，异常都是最新截图的）， 第一种形式的异常（安卓）：errCode: -404012 polling exceed max timeout retry. 说“ 超过了超时重试的最大次数”，如果真的以为是暂时的网络不好或者云函数那边临时出了什么状况，等待你的将是现实的沉痛一击，因为它从此再也没有好过： [图片] 第二种形式的异常（iOS）：errCode: -1 | errMsg: cloud.callFunction:fail Error: data exceed max size. 说“数据超限了”，意思是嫌弃传的图片太大了，恐怕这也是导致安卓上报超时的原因： [图片] 以前都是好的，突然从某一天开始就不行了，后来，终于在等待中明白，应该是腾讯收紧了cloud.callFunction的数据大小限制，再也没有放宽... 由于这个功能比较次要，用得也少，就一直没改，直到最近才腾出手来。本来已经决定要采取图片先临时传到COS，再把COS URL传给云函数的方案了，但是在做之前想搞明白callFunction的数据大小限制上限到底是多少，居然几十K的图片都传不了，以前的文档是啥也没写的，但出于习惯，我又翻了下文档，于是看到了那段让人惊喜的文字，它的意思是，我们准备要做的这个功能，腾讯用"wx.cloud.CDN"已经提供了！！！ 跳到对应的文档链接，说是从2.12.0也就是最新版的基础库开始支持，虽然2.12.0现在占比只有60%多，但会一天天增加。 [图片]https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/utils/Cloud.CDN.html 那就来看看它的效果如何吧，调用超级简单： [图片] 调用结果如下，图片会先传到CDN，然后再拿返回的临时图片URL传给cloud.callFunction: [图片] [图片] 完美！callFunction的传输上限我已经不再关心了~

背景需求： 我个人做了一款小程序的小游戏，本质是小程序。里面有个自定义图片的功能。用户从本地相册选一张图片进行裁剪，之后保存到缓存中或者上传到服务器。然后用户再用这张图片作为素材进行其它操作。这里就涉及到内容安全了，提交审核没有通过也是因为这个没有做内容安全。防止一些色情低俗的事情发生。 正文： 思路：相册选图片 --> 裁剪小的图片 --> 内容安全检测 --> 通过 --> 裁剪大的图片 --> 保存。 失败的原因：绝大多数是因为检测图片不能大于1M，而导致超时，或者是errCode：-1，又或者是其它问题。 [图片] [图片] 核心代码图片： [代码]默认裁剪小尺寸图片 （我的业务需求是正方形图片，也可动态计算宽高比例） [代码] [图片] 检测图片 部分iOS不兼容encoding: ‘ucs2’。注释掉就好了 [图片] [图片] 云函数 [图片] 测试情况： 正常图片不含违法违规，测试20次，全部通过。小程序上线后暂无发现检测失败情况。百度搜索的“人体油画”等等均可通过。 PS:第一次写经验分享哈，看不懂可以问我。体验一下我的小程序想问我这个小程序其它的功能点也可以喔！ 技术会迭代更新，用到的技术会有时效性，看编辑时间，可能当时的技术现在不适用了

源码 点此领取 技术栈 云开发 CloudBase：云端一体化的 Serverless 后端服务解决方案。Taro：一套遵循 React 语法规范的 多端开发 解决方案开发工具 建议提前安装好 微信开发者工具Node LTS 版本VS Code 编辑器CloudBase VS Code 插件需求分析 只考虑基本的功能： 商品列表与下单：展示商品信息，创建订单订单列表：展示订单列表 资源准备 1. 在微信开发者工具中开通云开发，请选择按量付费 如果你的环境是预付费，请到设置中，将支付方式转换为按量付费 [图片] 2. 安装 CMS 系统 （1）更新到最新的 Nightly 版本工具，在工具顶部 Tab 栏中，点击「更多」-「内容管理」。 [图片] （2）点击开通，勾选同意协议后，点击确定。 [图片] （3）开通内容管理需要填写管理员账号，填写账号后，点击「确定」完成。 [图片] （4）开通拓展需要一定时间，请耐心等待。 （5）完成后，点击「更多」-「内容管理」，即可看到内容管理的入口和相关信息。点击访问地址，即可在弹出的窗口中进行内容管理的相关配置。 [图片] 3. 登录 CMS 系统，创建资源 CloudBase CMS 已经部署在当前环境下的静态网站托管中，访问地址的格式如下：云开发静态托管默认域名/部署路径，例如 https://envid.ap-shanghai.app.tcloudbase.com/tcb-cms/（结尾有 / 符号）。默认域名可以访问控制台查看。 打开 CloudBase CMS 后，你需要先登录，账号密码为安装时设置的管理员账号和密码。 在开始管理内容数据前，我们需要先创建一个项目。CloudBase CMS 使用项目划分不同类的内容，便于区分内容数据用途，进行权限管理。 首先，我们需要点击新建项目下方的创建新项目按钮，创建一个名为小商店，Id 为 shop 的项目。 [图片] 创建完项目后，点击项目卡片，进入项目的管理页面，我们会看到项目的欢迎页面。 [图片] 创建商品类型，管理商品信息 创建一个名称为商品的内容模型，数据库名为 goods，即将商品数据存储到 goods 数据集合中。如果新建内容的时候指定的集合不存在，CloudBase CMS 会自动新建集合。 [图片] 在创建完内容模型后，我们会得到一个空的内容模型。接下来，我们需要为商品添加商品名称，商品图片，价格，库存数量等字段。 为商品添加商品名称属性，因为商品名称通常是比较短的文字，所以我们可以选择单行字符串字段，点击右侧的单行字符串卡片，填写商品名称的字段信息。除了基本的名称，数据库字段名之外，我们还可以为此字段添加其他的限制，如最大长度，限制填写商品名称时的最大长度，创建商品时，是否必需填写商品等。 [图片] 类似的，我们可以创建数字类型的价格字段以及库存数量，图片类型的商品图片字段。在创建图片字段时，考虑到商品的图片可能有多张，我们可以打开允许多个内容按钮，表明可以上传多张图片。 [图片] 创建的 goods 数据库集合的结构如下： [图片] 同上，类似的创建一个名称为订单列表，数据库集合名为 order 的内容模型，来管理订单信息。创建的 order 数据库集合的结构如下： [图片] 添加一个商品 [图片] 创建项目 1、拉取模板 # 安装 taro cli 工具 npm install -g @tarojs/cli@2.2.7 # 拉取模板 git clone https://github.com/TencentCloudBase/cloudbase-minishop.git 使用微信开发者工具导入项目，进入 client 目录，安装依赖： npm i 项目目录 cloud/functions 包含写好的微信支付的两个云函数， pay 和接收支付消息推送的 pay-callback 云函数。使用时需使用微信开发者工具上传这两个云函数。 2、项目目录 . ├── client // 小程序源码 │ ├── config │ └── src │ ├── assets │ ├── components │ └── pages │ ├── index │ └── order-list └── cloud // 云开发相关源码 │ └── functions │ ├── pay │ └── pay-callback ├── cloudbaserc.json // 云开发配置 ├── project.config.json // 小程序配置  微信支付下单流程 1、小程序调用云函数，在云函数中调用统一下单接口，参数中带上接收异步支付结果的云函数名和其所在云环境 Id。 const cloud = require("wx-server-sdk"); const res = await cloud.cloudPay.unifiedOrder({ envId: '', subMchId: '', body: "商品名", totalFee: 100, outTradeNo: '订单号', spbillCreateIp: "127.0.0.1", functionName: "pay-callback" }); // 返回 res.payment 支付结果回调的云函数必须返回如下一个对象，否则会视为回调不成功，云函数会收到重复的支付回调。 { errcode: '', errmsg: '', } 2、统一下单接口返回的成功结果对象中有 payment 字段，该字段即是小程序端发起支付的接口（wx.requestPayment）所需的所有信息。 3、小程序端拿到云函数结果，调用 wx.requestPayemnt 发起支付 wx.requestPayment({ ...payment, success (res) { }, fail (res) { }tt })https://docs.cloudbase.net/ 4、支付完成后，在统一下单接口中配置的云函数将收到支付结果通知。 多端支持 - 跨平台 小程序Web 相关文献 云开发文档 云开发微信支付 支付接口

发现一家做课程的，有vip及单独的课程售卖，这应该都属于虚拟物品啊，有大佬们知道是怎么实现的吗？ [图片][图片][图片]

平台鼓励公众号开发者为用户提供优质的内容和服务。近期，我们发现部分以引导用户领取外卖优惠券为主要业务的公众号（简称为外卖优惠券类公众号）存在违规行为，对用户造成骚扰并引发用户的反感和投诉。 为提升用户体验，自2021年12月9日起，平台将规范此类公众号相关违规行为，并梳理如下几类违规示例供开发者们参考： 1.以任何形式诱导用户点击菜单栏、回复文本内容等： 违规案例一：利用客服消息和群发消息明示或暗示用户点击自定义菜单栏或主动回复文字内容，绕过单一场景的客服消息额度限制，向用户发送外卖营销信息。 [图片] [图片] 违规案例二：临近客服消息额度失效时间，诱导用户再次主动回复文字内容 [图片] 违规案例三：明示或暗示用户点击菜单消息，产生互动。 [图片] 2.在用户无接受服务意愿的情况下，发送营销内容： 违规案例：利用模版消息下发外卖营销信息 [图片] 请开发者自查是否存在以上几类或其他形式的违规行为，并及时整改。一经发现将根据违规程度封禁公众号相关能力直至封号。 如发现恶意对抗行为，将加重处理。 平台会根据现实情况更新规则。

官方文档 地址：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html [图片] 每个都有案例，代码copy过来改一改参数就直接能用， 相信这让会让你更快的上手实践。 视频教程 地址：https://cloud.tencent.com/edu/learning/courses?cid=10161&roleId=1&p=1 [图片] 如果你不喜欢看文档，腾讯云大学还出品了云开发的优质视频教程。 文档可以作为类似字典的存在，用于查询具体技术的细节。 开放社区 地址：https://developers.weixin.qq.com/community/develop/mixflow [图片] 我在开发的时候就在这里提了不少问题，问题响应速度非常快。 还有就是无论是文档还是教学视频，总会有些无法覆盖的问题。 这个时候遇到问题就到社区提问。 这里除了有很多官方人员回答，还有很多优秀的小程序开发者也会在这里去解答问题和分享一些开发经验，社区整体氛围很不错。 [图片] 我在这个社区也比较活跃，回答过上千个问题，在这里我想说两个提问技巧，能有效帮助你提高解决问题的速度。 第一，提问之前先搜索，也许你的问题已经有解决方案了，就没必要再次提出重复的问题。 第二，提问尽量把问题描述清晰一些，如果有关代码的问题，最好附带上代码片段。这样便于回答者更快速定位问题。 推荐阅读 《【集合】花了 3 个月，写了 40 篇小程序文章》

写在前面你可以通过视频演示的方式学习本教程，更加利于学习和理解。 [视频] 一、能力介绍境内非个人主体的认证的小程序，开通静态网站并后，可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接，用户打开页面后可一键跳转至你的小程序。 这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。 本教程将介绍如何操作开通CMS内容管理系统进而操作使用短信跳转小程序能力，全程无需写代码。 如果你想要进行自定义开发，可以参照自定义开发教程进行逐步实现。 二、操作步骤1.下载微信开发者工具访问微信公众平台工具下载页，按照自己的系统版本下载安装开发者工具。建议安装【开发版 Nightly Build】版本。  [图片] 2.打开开发者工具并登录安装完开发者工具后，打开工具会弹出二维码登录框。使用你目标小程序具有开发者权限的微信号扫码登录。 点击创建小程序+号，会有自动填写默认名称和目录，你可以直接默认，当然也可以自定义路径和名称；在APPID处填写你目标小程序的appid；后端服务选择【小程序·云开发】 [图片] 设置完毕后，点击新建，等待项目创建完成并全部加载完毕，最终效果如下：  [图片] 3.开通云开发并创建环境如果你之前从未使用过云开发，点击左上角工具栏中的【云开发】按钮，会弹出一个窗口，显示如下：  [图片] 此时只需要点击开通按钮，并在弹出提示框中同意【服务协议】，即可开通云开发。 注意这里的开通是创建一个新的腾讯云账号，如果你不想有太多的账号，可以选择通过已有的腾讯云账号开通，会绑定你目前的已有腾讯云账号，在统一管理和计费方面更加方便。 开通之后需要创建一个云开发环境，上一步同意之后会自动弹出创建窗口，效果如下：  [图片] 这个时候，我们需要选择【按量付费：腾讯云账户扣款】，创建一个按量付费环境。 如果你之前已经使用过云开发了，建议可以创建一个新的环境。每一个微信小程序有两个免费环境，所以可以创建一个新的按量付费环境（有免费额度），或者2个环境转其中一个为按量付费环境（依然有免费额度）。 4.开通内容管理CMS我们创建一个按量计费环境之后，就进入这个环境的控制台了。我们只需要在顶部导航栏中选择【更多-内容管理】，进入内容管理开通页面，效果如下：  [图片] 我们点击开通按钮，会弹出一个确认窗口，告诉我们是在环境中部署CMS应用，需要的资源。  [图片] 点击下一步后，会弹出管理员设置框，我们输入管理员的ID和密码即可。  [图片] 确定之后，内容管理就进入部署阶段，大约3分钟左右。完成之后效果如下：  [图片] 我们只需要打开访问地址，通过浏览器进入内容管理平台，输入我们设置的密码就可以进入内容管理的主页了  [图片] 我们在上图所示页面，点击【创建新项目】，弹出创建项目信息框，随意输入名称和ID，比如在这里我们输入名称为「短信」，id为「SMS」 创建成功后会在我的项目中有对应名字的项目，如下图所示：  [图片] 我们点击项目，进入项目的详情，如下图所示：  [图片] 4.创建短信活动项目进入项目详情后，我们发现左侧栏会有【营销工具】，我们点击其中的营销活动  [图片] 在右上角点击【新建】按钮，创建一个新的活动，内容信息如下： 活动名：用来标记描述活动的名称。活动开启：是否开启活动，如果关闭活动，将不能通过页面拉起小程序。活动开闭时间：在开启时间内，才可以正常的拉起小程序。跳转中间页图片：建议海报，用于在跳转页中展示大图，可以不上传，会有默认样式。小程序跳转路径：已发布上线的小程序中页面路径，不填则默认首页。小程序跳转参数：附带路径的传入参数，一般配合小程序代码联动。我们创建一个活动后展示如上图所示 5.创建短信群发任务在左侧栏点击【群发短信】，进入群发短信页面，点击右上角新建群发，进入信息页。  [图片] 我们需要填写以下3个信息： 短信内容：实际发送时目标手机收到的短信内容，短信的前后缀无法自定义。手机号码包：发送的目标手机号，可以填写一个或多个手机号，用回车或者逗号分割。活动：选择刚才我们创建的活动。填写完毕后，我们点击【创建】按钮，系统会自动进行短信发送，此时我们便可以在目标手机号中收到短信了。 [图片] 在群发短信的页面列表中，可以查看短信的发送状态，以及每一个手机的接收情况。  6.测试短信跳转小程序点击短信的链接后，会跳转到浏览器打开链接，展示如下效果（左默认、右海报）  [图片] 一般页面会自动拉起微信打开小程序，个别机型或浏览器有拦截会导致打开失败，需要手动点击按钮才可以打开。 7.投放外部平台短信的链接可以复制发布到其他外部平台。 8.查看短信监控图表打开微信开发者工具并登录，进入 云开发控制台 > 运营分析 > 监控图表 > 短信监控，即可查看短信监控曲线图、短信发送记录。 [图片] 总结短信发送能力的体验是每个有免费配额的环境首月100条，如有超过额度的需求可前往开发者工具-云开发控制台-对应按量付费环境-资源包-短信资源包，进行购买。如当前资源包无法满足需求也可通过云开发 工单 提交申请[图片]短信发送时间：8:00 - 22:00短信发送能力支持小程序和小游戏发送国内短信的号码是1069开头，尾数是运营商随机号的号码发送成功代表请求发送短信成功，短信异步下发，实际状态以运营商回执为准。没有发送成功的短信不计费,可用性参阅服务等级协议相同内容短信对同一个手机号，30 秒内发送短信条数不超过1条；对同一个手机号，1自然日内发送短信条数不超过10条CMS配置渠道投放、数据统计可参考官方文档

小程序开通流量主的门槛不高，需要1000个独立 UV ,也就是说有1000个微信注册用户进入过你的小程序。一般来说，通过自己朋友圈转发二维码，或者通过在微信大群分享你的小程序，差不多一周就可以达到门槛要求。最重要的是，个人是可以发布小程序的，千万不要以为只有企业可以发布小程序。 登录小程序mp.weixin.qq.com，左边栏选择流量主-开通即可。当日满1000用户，次日可开通（好像是早晨8点以后） [图片] 小程序项目的核心，在于批量化操作，只做一两个赚钱是不容易的（千万不要以为自己是大神，自己开发一个小程序就觉得这个小程序无敌了），把自己的位置摆正，一步一步走，循序渐进。小程序矩阵项目赚钱的方式，并不在于运营单个小程序赚取服务佣金，而在于批量运营多个小程序下，基于流量赚取的广告佣金。 小程序项目的盈利来源，主要来自于微信流量主的广告费。具体玩法，即建立多个小程序，形成流量矩阵，小程序与小程序之间互相导入流量（小程序A>小程序B>小程序C>小程序A），这样收益就能实现倍增。小程序项目的优势：收益稳定、启动成本低、长期稳定。 [图片] [图片] [图片] 小程序最大的问题，就在于留存，虽然打开即代表关注，但能否使关注用户二次打开，要看小程序是否满足用户需求，所以在小程序源码购买前，一定要先扫码体验，深入分析用户需求及产品体验。（小程序代码是不具备唯一性的，同一套代码可以不限主体，不限数量上线） 其次就是用户来源问题，一个好的名字会给你不断的创造惊喜，名字注册推荐工具“微信指数小程序”，可自行查看关键字的搜索指数，个人建议稳定再1000W以上的搜索量可以作为小程序名字关键字。 [图片] http://aldwx.com(阿拉丁小程序平台)，提供了排行榜，在这里可以看到各分类下，排行靠前的小程序，以此可以给我们一些选择模块时的参考。这里切忌，不要选择电商类的小程序，因为这类小程序后面需要运营，会花费很多的时间精力，且价格较高，游戏类与工具类的小程序是我们可以优先选择的。 [图片] 那么小程序初期如何推广，首先利用自身朋友圈与微信群的资源，多数小程序开发者在开发时已考虑过，小程序的分享裂变机制，基于小程序的特性，有一定用户数后，也很容易一传十，十传百。 本文部分文字内容转载来自公众号：黑帽星球，以及个人见解。

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

我做的群登记助手，最高日活达到了4w，600万登记数据，数千万访问 这款小程序是我今年2月份做的，主要是用于登记用户信息，学生作业，等等。 当时由于疫情原因，我看到了很多线下登记需求，所以就想到了做这款小程序。 通常我决定做一个小程序会3个前置步骤。 观察身边的需求 思考有没有需求量很大的，然后能不能程序化。 如果答案是：有，可以，那就下一步。 用数据论证这个需求 通过百度指数，微信指数，搜索相关的关键词，看热度。 如果热度曲线在不断的上升，那就下一步。 找同类型程序，做MVP。 把所有相关小程序都先过来，很多同类小程序可能都是比较成熟功能比较强大的。 这个时候我们要利用抽象思维，找到最基础的功能，就是没有就不能用的功能。然后开发MVP版本上线。 做完以上3步，你肯定还会有以下两个问题 第一波流量如何获取呢？ 一个好名字，好名字自带流量。 如果做工具就叫：关键词+助手/管家/工具。 好的关键词，可以用微信指数小程序来查。 总结： 利用好程序员的优势，想到就可以去做 观察并发现身边需求，解决一个点就行 数据论证自己的假设，看指数进行决策 以上步骤重复再重复，次数多概率才大 扩展视频：从想法到上线千万访问量产品，1个开发就搞定，我是怎么做到的？

项目耗时:3小时内完成（第一版本） 应用场景：对于年纪比较大的叔叔阿姨一般都不会去记自己家个wifi密码，移动运营商的默认密码是随机的比较麻烦，家里有朋友来每次只有去看路由器后面的默认密码，如果是久了密码也改过就很麻烦，有了这个小程序就方便多了。 实现思路：手动新增--》储存在云数据库中--》随时随地都可以查看/分享 效果截图 [图片][图片] 功能代码展示 connectWifi: function () {     var that = this;     wx.showLoading({       title: '获取手机配置中...',     })     //检测手机型号     wx.getSystemInfo({       success: function (res) {         var system = '';         if (res.platform == 'android') system = parseInt(res.system.substr(8));         if (res.platform == 'ios') system = parseInt(res.system.substr(4));         if (res.platform == 'android' && system < 6) {           wx.showToast({             title: '手机版本不支持',           })           return         }         if (res.platform == 'ios' && system < 11.2) {           wx.showToast({             title: '手机版本不支持',           })           return         }         //2.初始化 Wi-Fi 模块         that.startWifi();       }     })   }, //初始化 Wi-Fi 模块   startWifi: function () {     var that = this     wx.startWifi({       success: function () {         wx.showLoading({           title: 'WIFi启动中...',         })         //请求成功连接Wifi         that.Connected();       },       fail: function (res) {         console.log(res)           wx.showToast({             title: '接口调用失败',           })       }     })   },   Connected: function () {     var that = this     wx.connectWifi({       SSID: this.data.ssid,//wifi名       BSSID: '',       password: this.data.pass,//wifi密码       success: function (res) {         console.log(res)         wx.showToast({           title: 'wifi连接成功',         })       },       fail: function (res) {         console.log(res)         wx.showToast({           title: 'wifi连接失败',         })       },complete(res){         console.log(res)       }     })   }, 团队简介 自己平时比较喜欢专研，小程序基本算是自学，有了云开发这东西后更方便自己做一些简单的小工具。 码云地址：https://gitee.com/SteveAndy/my-wifi 寄语 云开发大大简化了前后端交互的繁琐流程，当自己有想法的时候也能快速且低成本的方式实现，不得不说腾讯这里做得很好,很优秀！最后再感谢下ColorUI组件作者晓港同学对小程序前端组件美化事业做出的卓越贡献！

微信支付竟然跟云开发发生了关系，手残党又迎来福音喽！ [图片] 但！本着跟着官方教程复制粘贴就能跑的心态，拎包哥慢慢发现事情并不简单。。。 [图片] 下面列出几个填过的小坑。 1. 退款API权限 [图片] 1.1 如果只是想进行微信支付，退款API权限不需要授权的， 只要在微信支付商家助手（公众号）上授权了JSAPI权限就可以进行微信支付。 1.2 如果要对退款API进行授权，就得在登录商户平台后，再打开 https://pay.weixin.qq.com/index.php/extend/product/submch  ，才能看到“我授权的产品" 这他喵竟然是在首页你敢信？ [图片] [图片] 所以产品中心根本就没有的，不要再瞎找了。 [图片] 2. 两个云函数 不要被官方文档所蒙蔽了，其实我们需要写两个云函数。 [图片] [图片] functionName就是官方文档没有写的第二个云函数的名字。如果你不写这个函数， 就会出现各种莫名其妙的报错，不要试图从这些报错上找出答案，都是扯淡。 functionName对应函数代码 exports.main = async (event, context) => {   return(event,context) } 踩过这两个坑，再跟着教程走基本上就可以进行微信支付的云调用了。 欢迎大哥们批评指正错误。 最后感谢这些知识的来源： 1.微信问答 https://developers.weixin.qq.com/community/pay/doc/0002ce8b3007d89db65aa98f655c00 2.bilibili李东教学 https://www.bilibili.com/video/BV1uz411B7Kb ================点个赞，是拎包哥继续瞎逼逼的动力哦================= 番外坑 outTradeNo要放在exports.main里面，放在外面则会得到相同而不是随机的值。 老张哥或者各路大神如果你看到这个问题，请帮忙解释一下为啥，谢谢！ exports.main = async(event,context)=>{ var randomNo = Math.random().toString(36).subStr(2,15) var timeStamp = parseInt(Date.now()/1000) + '' var outTradeNo = 'otn' + timeStamp + randomNo } ================2020/5/27更新=================

人生看似很长实则从一出生就在倒计时，余生珍贵好好珍惜！

给赞小程序已于2020年5月5号暂停小程序服务，本文章仅起纪念意义 - 关于小程序接入给赞赞赏功能 背景：由于个人小程序没有支付功能，无法让用户直接通过调用支付接口直接打赏，喵咪咪科技专门开发了一款打赏小程序：‘给赞’：它可以每个用户创建一个独立的打赏账户，还可以编辑各种打赏样式风格,废话不多说上图； 1. 觉得有用可以先打赏个啦！没事就算1分钱也是支持！（长按识别） [图片] 2. 首先微信搜索‘给赞’小程序完成授权注册（也可直接扫上面我的赞赏码直接进入后点击左下角：我也要收赞赏 即可），然后再关注‘给赞’公众号：回复‘路径’二字如图，系统会自动返回一个小程序带参跳转地址，将这个地址放在跳转路径里面即可； [图片] [图片] 3.前端页面代码如下图： app_id : wx18a2ac992306a5a4 路径：path=“pages/apps/largess/detail?id=cTq9h%2BdgXUU%3D” 你到时候自己填入自己的就行了，我比较懒就不打码了别填错了； [图片] 4.运行示意图（闪图有些粗糙）： [图片] 5.体验程序： [代码]a.此生余时（生命话题）（长按识别） [代码] [图片] [代码] b.心疑（恋爱话题）（长按识别） [代码] [图片] 6. 到此收工，确实觉得有用可以打赏个啦！没事就算1分钱也是支持！（长按识别） [图片]