这是一个神奇的网站，哦不，神奇的云函数，它只有三行代码：（真的只有三行哦） 云函数：login index.js： const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event) => { return { ...event, ...cloud.getWXContext() } } 神奇功能之四：获取电话号码： 还是这三行代码，获取用户的电话号码。 wxml: <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" >{{mobile||"获得电话号码"}}</button> js: getPhoneNumber: function (e) { wx.cloud.callFunction({ name: 'login', data: {weRunData: wx.cloud.CloudID(e.detail.cloudID)} }).then(res => { this.setData({ mobile: res.result.weRunData.data.phoneNumber }) }) } 其他功能： 神奇功能之一：获取openid： https://developers.weixin.qq.com/community/develop/article/doc/00080c6e3746d8a940f9b43e55fc13 神奇功能之二：不用授权获取unionid： https://developers.weixin.qq.com/community/develop/article/doc/000a0c6b580338e947f9db0c65b813 神奇功能之三：100%成功获取unionid： https://developers.weixin.qq.com/community/develop/article/doc/00066a967c4e384949f93fe1151413 神奇功能之五：获取群id： 将小程序分享到某群里，可获得该群的群id， https://developers.weixin.qq.com/community/develop/article/doc/000ea802c00f70894cf9fe72556013 [图片]

小程序导出数据到excel表，借助云开发后台实现excel数据的保存 我们在开发小程序的过程中，可能会有这样的需求：如何将云数据库里的数据批量导出到excel表里？ 这个需求可以用强大的云开发轻松实现！ 这里需要用到云函数，云存储和云数据库。可以说通过这一个例子，把小程序云开发相关的知识都用到了。下面就来介绍如何实现 实现思路 1，创建云函数 2，在云函数里读取云数据库里的数据 3，安装node-xlsx类库（node类库） 4，把云数据库里读取到的数据存到excel里 5，把excel存到云存储里并返回对应的云文件地址 6，通过云文件地址下载excel文件 一、创建excel云函数 关于如何创建云开发小程序，这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学，可以去翻看腾讯云云开发公众号内菜单【技术交流-视频教程】中的教学视频。 创建云函数时有两点需要注意的，给大家说下 1、一定要把app.js里的环境id换成你自己的 [图片] 2，你的云函数目录要选择你对应的云开发环境（通常这里默认选中的） 不过你这里的云开发环境要和你app.js里的保持一致 [图片] 二、读取云数据库里的数据 我们第一步创建好云函数以后，可以先在云函数里读取我们的云数据库里的数据。 1、先看下我们云数据库里的数据 [图片] 2、编写云函数，读取云数据库里的数据（一定要记得部署云函数） [图片] 3、成功读取到数据 [图片] 把读取user数据表的完整代码给大家贴出来。 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ env: "test-vsbkm" }) // 云函数入口函数 exports.main = async(event, context) => { return await cloud.database().collection('users').get(); } [代码] 三、安装生成excel文件的类库 node-xlsx 通过上面第二步可以看到我们已经成功的拿到需要保存到excel的源数据，我们接下来要做的就是把数据保存到excel 1、安装node-xlsx类库 [图片] 这一步需要我们事先安装node,因为我们要用到npm命令，通过命令行npm install node-xlsx[图片] 可以看出我们安装完成以后，多了一个package-lock.json的文件 [图片] 四、编写把数据保存到excel的代码， 下图是我们的核心代码： [图片] 这里的数据是我们查询的users表的数据，然后通过下面代码遍历数组，然后存入excel。这里需要注意我们的id,name,weixin要和users表里的对应。 [代码] for (let key in userdata) { let arr = []; arr.push(userdata[key].id); arr.push(userdata[key].name); arr.push(userdata[key].weixin); alldata.push(arr) } [代码] 还有下面这段代码，是把excel保存到云存储用的 [代码] //4，把excel文件保存到云存储里 return await cloud.uploadFile({ cloudPath: dataCVS, fileContent: buffer, //excel二进制文件 }) [代码] 下面把完整的excel里的index.js代码贴给大家,记得把云开发环境id换成你自己的。 [代码]const cloud = require('wx-server-sdk') //这里最好也初始化一下你的云开发环境 cloud.init({ env: "test-vsbkm" }) //操作excel用的类库 const xlsx = require('node-xlsx'); // 云函数入口函数 exports.main = async(event, context) => { try { let {userdata} = event //1,定义excel表格名 let dataCVS = 'test.xlsx' //2，定义存储数据的 let alldata = []; let row = ['id', '姓名', '微信号']; //表属性 alldata.push(row); for (let key in userdata) { let arr = []; arr.push(userdata[key].id); arr.push(userdata[key].name); arr.push(userdata[key].weixin); alldata.push(arr) } //3，把数据保存到excel里 var buffer = await xlsx.build([{ name: "mySheetName", data: alldata }]); //4，把excel文件保存到云存储里 return await cloud.uploadFile({ cloudPath: dataCVS, fileContent: buffer, //excel二进制文件 }) } catch (e) { console.error(e) return e } } [代码] 五、把excel存到云存储里并返回对应的云文件地址 经过上面的步骤，我们已经成功的把数据存到excel里，并把excel文件存到云存储里。可以看下效果。 [图片] 接着，就可以通过上图的下载地址下载excel文件了。 [图片] 其实到这里就差不多实现了基本的把数据保存到excel里的功能了，但是为了避免每次导出数据都需要去云开发后台下载excel的麻烦，接下来介绍如何动态获取下载地址。 六、获取云文件地址下载excel文件 [图片] 通过上图我们可以看出，我们获取下载链接需要用到一个fileID,而这个fileID在我们保存excel到云存储时，有返回，如下图。我们把fileID传给我们获取下载链接的方法即可。 [图片] 1、我们获取到了下载链接，接下来就要把下载链接显示到页面 [图片] 2、代码显示到页面以后，我们就要复制这个链接，方便用户粘贴到浏览器或者微信去下载。 [图片] 下面是完整代码： [代码]Page({ onLoad: function(options) { let that = this; //读取users表数据 wx.cloud.callFunction({ name: "getUsers", success(res) { console.log("读取成功", res.result.data) that.savaExcel(res.result.data) }, fail(res) { console.log("读取失败", res) } }) }, //把数据保存到excel里，并把excel保存到云存储 savaExcel(userdata) { let that = this wx.cloud.callFunction({ name: "excel", data: { userdata: userdata }, success(res) { console.log("保存成功", res) that.getFileUrl(res.result.fileID) }, fail(res) { console.log("保存失败", res) } }) }, //获取云存储文件下载地址，这个地址有效期一天 getFileUrl(fileID) { let that = this; wx.cloud.getTempFileURL({ fileList: [fileID], success: res => { // get temp file URL console.log("文件下载链接", res.fileList[0].tempFileURL) that.setData({ fileUrl: res.fileList[0].tempFileURL }) }, fail: err => { // handle error } }) }, //复制excel文件下载链接 copyFileUrl() { let that=this wx.setClipboardData({ data: that.data.fileUrl, success(res) { wx.getClipboardData({ success(res) { console.log("复制成功",res.data) // data } }) } }) } }) [代码] 梳理下上面代码的逻辑： 1、先通过getUsers云函数去云数据库获取数据。 2、把获取到的数据通过excel云函数把数据保存到excel，然后把excel保存的云存储。 3、获取云存储里的文件下载链接。 4、复制下载链接，到浏览器里下载excel文件。 到这里我们就完整的实现了把数据保存到excel的功能了。 文章有点长，知识点有点多，但是大家理解上述内容后，就可以对小程序云开发的云函数、云数据库、云存储有一个较为完整的了解过程。 如果你想要了解更多关于云开发CloudBase相关的技术故事/技术实战经验，请扫码关注【腾讯云云开发】公众号 ～ [图片]

common_list.js：一个放着重复代码的文件。刷新onPullDownRefresh、加载onReachBottom、设置列表数据setList，这三个方法是最基础的，当然如果业务还有其他的方法也可以放到这个文件。 [代码]//common_list.js module.exports = { data: { page: 1, loadend: false, list: [], listLength: 0 }, onPullDownRefresh() { // console.log(11111) this.setData({ page: 1, loadend: false }) this.getList(true); setTimeout(function () { wx.stopPullDownRefresh(); }, 200); }, onReachBottom() { if (this.data.loadend) return this.setData({ page: ++this.data.page }); this.getList(); }, /** * initType 刷新为true，加载为false或undefined * list 初始/加载的数据 * loadend 数据库加载完毕 */ setList(initType, list) { if (initType) { this.setData({ list: list.length ? [list] : [], listLength: list.length ? 1 : 0 }); return } if (!list.length) { this.setData({ loadend: true }) return } let len = this.data.list.length; this.setData({ [`list[${len}]`]: list, listLength: len + 1 }); }, // 返回顶部 onScrollTop() { wx.pageScrollTo({ scrollTop: 0, }); }, } [代码] app.js:小程序全局配置，把公共方法放到这。 [代码]//app.js module.exports = { listMix: require("./common_list.js"), http,//自己封装的wx.request } [代码] mypage.js mypage.wxml:业务页面 [代码]//mypage.wxml <block wx:for="{{list}}" wx:for-item="listItem" wx:for-index="pid" wx:key="{{pid}}"> <block wx:for="{{listItem}}" wx:for-item="item" wx:for-index="cid" wx:key="{{cid}}"> <item item="{{item}}" pid="{{pid}}" cid="{{cid}}"></item> </block> </block> <!-- 数据加载完毕 --> <divider content="数据已完全加载" wx:if="{{loadend}}" /> [代码] [代码]//mypage.js const App = getApp(); Page({ ...App.listMix, data:Object.assign(App.listMix.data,{}), async getList(initType){ let {page} = this.data; let data = {page} let res = await App.http('url', data); this.setList(initType, res.list); }, }) [代码]

数据是无价的，我们通常会把重要的业务数据存放在数据库中，并需要对数据库做定时的自动备份工作，防止数据异常丢失，造成无法挽回的损失。 小程序云开发提供了方便的云数据库供我们直接使用，云开发使用了腾讯云提供的云数据库，拥有完善的数据保障机制，无需担心数据丢失。但是，我们还是不可避免的会担心数据库中数据的安全，比如不小心删除了数据集合，写入了脏数据等。 还好，云开发控制台提供了数据集合的导出，导入功能，我们可以手动备份数据库。不过，总是手动备份数据库也太麻烦了点，所有重复的事情都应该让代码去解决，下面我们就说说怎么搞定云开发数据库自动备份。 通过查阅微信的文档，可以发现云开发提供了数据导出接口databaseMigrateExport [代码]POST https://api.weixin.qq.com/tcb/databasemigrateexport?access_token=ACCESS_TOKEN [代码] 通过这个接口，结合云函数的定时触发功能，我们就可以做数据库定时自动备份了。梳理一下大致的流程： 创建一个定时触发的云函数 云函数调用接口，导出数据库备份文件 将备份文件上传到云存储中以供使用 1. 获取 access_token 调用微信的接口需要 access_token，所以我们首先要获取 access_token。通过文档了解到使用 auth.getAccessToken 接口可以用小程序的 appid 和 secret 获取 access_token。 [代码]// 获取 access_token request.get( `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, (err, res, body) => { if (err) { // 处理错误 return; } const data = JSON.parse(body); // data.access_token } ); [代码] 2. 创建数据库导出任务 获取 access_token 后，就可以使用 [代码]databaseMigrateExport[代码] 接口导出数据进行备份。 [代码]databaseMigrateExport[代码] 接口会创建一个数据库导出任务，并返回一个 job_id，这个 job_id 怎么用我们下面再说。显然数据库的数据导出并不是同步的，而是需要一定时间的，数据量越大导出所要花费的时间就越多，个人实测，2W 条记录，2M 大小，导出大概需要 3~5 S。 调用 [代码]databaseMigrateExport[代码] 接口需要传入环境 Id，存储文件路径，导出文件类型（1 为 JSON，2 为 CSV），以及一个 query 查询语句。 因为我们是做数据库备份，所以这里就导出 JSON 类型的数据，兼容性更好。需要备份的数据可以用 query 来约束，这里还是很灵活的，既可以是整个集合的数据，也可以是指定的部分数据，这里我们就使用 [代码]db.collection('data').get()[代码] 备份 data 集合的全部数据。同时我们使用当前时间作为文件名，方便以后使用时查找。 [代码]request.post( `https://api.weixin.qq.com/tcb/databasemigrateexport?access_token=${accessToken}`, { body: JSON.stringify({ env, file_path: `${date}.json`, file_type: '1', query: 'db.collection("data").get()' }) }, (err, res, body) => { if (err) { // 处理错误 return; } const data = JSON.parse(body); // data.job_id } ); [代码] 3. 查询任务状态，获取文件地址 在创建号数据库导出任务后，我们会得到一个 job_id，如果导出集合比较大，就会花费较长时间，这时我们可以使用 databaseMigrateQueryInfo 接口查询数据库导出的进度。 当导出完成后，会返回一个 [代码]file_url[代码]，即可以下载数据库导出文件的临时链接。 [代码]request.post( `https://api.weixin.qq.com/tcb/databasemigratequeryinfo?access_token=${accessToken}`, { body: JSON.stringify({ env, job_id: jobId }) }, (err, res, body) => { if (err) { reject(err); } const data = JSON.parse(body); // data.file_url } ); [代码] 获取到文件下载链接之后，我们可以将文件下载下来，存入到自己的云存储中，做备份使用。如果不需要长时间的保留备份，就可以不用下载文件，只需要将 job_id 存储起来，当需要恢复备份的时候，通过 job_id 查询到新的链接，下载数据恢复即可。 至于 job_id 存在哪，就看个人想法了，这里就选择存放在数据库里。 [代码]await db.collection('db_back_info').add({ data: { date: new Date(), jobId: job_id } }); [代码] 4. 函数定时触发器 云函数支持定时触发器，可以按照设定的时间自动执行。云开发的定时触发器采用的 [代码]Cron[代码] 表达式语法，最大精度可以做的秒级，详细的使用方法可以参考官方文档：定时触发器 | 微信开放文档 这里我们配置函数每天凌晨 2 点触发，这样就可以每天都对数据库进行备份。在云函数目录下新建 [代码]config.json[代码]文件，写入如下内容： [代码]{ "triggers": [ { "name": "dbTrigger", "type": "timer", "config": "0 0 2 * * * *" } ] } [代码] 完整代码 最后，贴出可以在云函数中使用的完整代码，只需要创建一个定时触发的云函数，并设置好相关的环境变量即可使用 appid secret backupColl：需要备份的集合名称，如 ‘data’ backupInfoColl：存储备份信息的集合名称，如 ‘db_back_info’ 注意，云函数的默认超时时间是 3 秒，创建备份函数时，建议将超时时间设定到最大值 20S，留有足够的时间查询任务结果。 [代码]/* eslint-disable */ const request = require('request'); const cloud = require('wx-server-sdk'); // 环境变量 const env = 'xxxx'; cloud.init({ env }); // 换取 access_token async function getAccessToken(appid, secret) { return new Promise((resolve, reject) => { request.get( `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, (err, res, body) => { if (err) { reject(err); return; } resolve(JSON.parse(body)); } ); }); } // 创建导出任务 async function createExportJob(accessToken, collection) { const date = new Date().toISOString(); return new Promise((resolve, reject) => { request.post( `https://api.weixin.qq.com/tcb/databasemigrateexport?access_token=${accessToken}`, { body: JSON.stringify({ env, file_path: `${date}.json`, file_type: '1', query: `db.collection("${collection}").get()` }) }, (err, res, body) => { if (err) { reject(err); } resolve(JSON.parse(body)); } ); }); } // 查询导出任务状态 async function waitJobFinished(accessToken, jobId) { return new Promise((resolve, reject) => { // 轮训任务状态 const timer = setInterval(() => { request.post( `https://api.weixin.qq.com/tcb/databasemigratequeryinfo?access_token=${accessToken}`, { body: JSON.stringify({ env, job_id: jobId }) }, (err, res, body) => { if (err) { reject(err); } const { status, file_url } = JSON.parse(body); console.log('查询'); if (status === 'success') { clearInterval(timer); resolve(file_url); } } ); }, 500); }); } exports.main = async (event, context) => { // 从云函数环境变量中读取 appid 和 secret 以及数据集合 const { appid, secret, backupColl, backupInfoColl } = process.env; const db = cloud.database(); try { // 获取 access_token const { errmsg, access_token } = await getAccessToken(appid, secret); if (errmsg && errcode !== 0) { throw new Error(`获取 access_token 失败：${errmsg}` || '获取 access_token 为空'); } // 导出数据库 const { errmsg: jobErrMsg, errcode: jobErrCode, job_id } = await createExportJob(access_token, backupColl); // 打印到日志中 console.log(job_id); if (jobErrCode !== 0) { throw new Error(`创建数据库备份任务失败：${jobErrMsg}`); } // 将任务数据存入数据库 const res = await db.collection('db_back_info').add({ data: { date: new Date(), jobId: job_id } }); // 等待任务完成 const fileUrl = await waitJobFinished(access_token, job_id); console.log('导出成功', fileUrl); // 存储到数据库 await db .collection(backupInfoColl) .doc(res._id) .update({ data: { fileUrl } }); } catch (e) { throw new Error(`导出数据库异常：${e.message}`); } }; [代码]

实现个人收款是一件很麻烦的事，可以通过 paybob 注册个人收款接口，帮助签约个人微信支付接口（不需要营业执照），几分钟就可以开通，申请开通后，获取商户号和通信密钥，然后开始对接，本章主要说一下扫码支付 扫码支付请求步骤： 构建请求参数 POST 参数到请求地址 根据返回内容展示二维码 用户支付成功后接收异步通知 扫码对接 php代码如下： [代码] <?php $order = [ 'mchid' => 'xxxxxxxxxxx', 'body' => 'test', // 订单标题 'out_trade_no' => time(), // 订单号 'total_fee' => 120, // 金额,单位:分 ]; $order['sign'] = sign($order); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://paybob.cn/api/native'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, $order); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); $rst = curl_exec($ch); curl_close($ch); print_r($rst); function sign(array $attributes) { ksort($attributes); $sign = strtoupper(md5(urldecode(http_build_query($attributes)) . '&key=' . 'xxxxxxxxxxxx')); return $sign; } [代码] 把上面的商户号和通信密钥换成自己的。最终即可打印出扫码接口返回结果。 扫码接口返回的结果中，其中的 code_url 是二维码内容，可通过二维码生成的类转化为二维码。或者接口返回的 qrcode 参数即是二维码的图片地址,把该二维码展示给用户，用户可通过手机微信的扫一扫功能，进行扫码支付。 需要注意的是，上面演示代码中未演示异步通知。如果需要异步通知，可以增加一个 notify_url 参数，那么在支付完成后，服务器会收到支付成功的异步通知。可自行进一步进行业务逻辑的触发和处理。 最后和大家分享一下签名生成的通用步骤如下：（详细举例） 设所有发送或者接收到的数据为集合M，将集合M内非空参数值的参数按照参数名ASCII码从小到大排序（字典序），使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串stringA。 在stringA最后拼接上 &key=密钥 得到stringSignTemp字符串，并对stringSignTemp进行MD5运算，再将得到的字符串所有字符转换为大写，得到sign值 以后会陆续和大家分享收银台模式，jsapi模式的支付，希望能给大家提供更多的参考。

最近在开发中，需要生成自定义的二维码，于是做了一个包出来，分享给大家一起使用。适用于微信小程序的二维码生成器，基于Canvas生成，支持中文的输入。可在原生小程序，mpvue，taro中使用。（文末有一个使用示例）[图片] github地址(wxmp-qrcode)[https://github.com/Z-HNAN/wxmp-qrcode] 安装 [代码]npm install wxmp-qrcode [代码] 使用 创建一个canvas,设置其[代码]id[代码],与[代码]canvas-id[代码]， 并设置canvas的样式，二维码基于其大小生成并居中 [代码]<canvas id="cav-qrcode" canvas-id="cav-qrcode"></canvas> [代码] 引入包并使用 [代码]import QR from 'wxmp-qrcode' QR.draw(str, canvasId, () => { console.log('draw success') } ) [代码] api [代码]/** * 根据canvas尺寸，画出合适居中的qrcode * @param {Object} str 二维码的内容 (必须) * @param {Object} canvasId canvasId的值 (必须) * @param {Object} $this 传入组件的this,兼容在组件中生成二维码 （可选，可省略该参数） * @param {Object} callback 回调函数 (可选) */ draw: function (str, canvasId, $this, callback) /** * 清除canvas内容 * @param {Object} canvasId canvasId (必须) * @param {Object} callback 回调函数 （可选） */ clear: function (canvasId, callback) [代码] 注意 canvas中 id, canvas-id必须保持一致 id 获取canvas节点，自动计算大小使用, 二维码大小基于canvas自动生成 canvas-id 绘制二维码使用 如果在组件中使用，需要传入组件的this，[代码]draw(str, canvasId, componentThis)[代码] 具体参见 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html 可以保存二维码为临时图片地址 具体可参见 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html bug: 该方法有时保存的图片会有一个竖条。 [代码]createQrCode: function (content, canvasId) { QR.draw(content, canvasId) this.canvasToTempImage(canvasId) }, //获取临时缓存图片路径 canvasToTempImage: function (canvasId) { wx.canvasToTempFilePath({ canvasId, success: function (res) { let tempFilePath = res.tempFilePath; // 临时图片地址，可在放入图片src中使用 } }) } [代码] 原生小程序wxmp中使用 在项目设置中选择 [代码]使用npm模块[代码] [图片] 如果第一次使用npm模块，需要首先在根目录中[代码]npm init[代码], 之后再安装模块 [代码]npm i wxmp-qrcode[代码] 在工具中选择 [代码]构建npm[代码] [图片] index.wxml [代码]<view class="container"> <canvas id="{{canvasId}}" canvas-id="{{canvasId}}"></canvas> <button bindtap="creatQRCode"> 生成二维码 </button> </view> [代码] index.wxss [代码]canvas { border: 1rpx solid #eee; width: 400rpx; height: 400rpx; } button { margin-top: 100rpx; } [代码] index.js [代码]import QR from './qrcode' Page({ data: { canvasId: 'canvasId', QRdata: '你好 wxmp-qrcode' }, creatQRCode () { let str = this.data.QRdata let canvasId = this.data.canvasId QR.draw(str, canvasId) } }) [代码]

让小程序制作像“搭积木”一样简单！ 作者丨Tsai [图片] 微信小程序最近可谓动作频频。7月25日，微信团队在开发者小课堂上透露即将推出“小程序消息提醒可订阅”等新能力，助力开发者提升用户留存； 同一天，微信广告团队在流量主大会上表示正在内测“小程序视频前贴广告组件”、“流量主报表”等新功能，旨在帮助开发者实现更好的变现… 不得不说，留存与变现，一直都是小程序开发者重点关注的两大话题，大家从近期行业对小程序留存和变现新能力的讨论热情可窥一二。 不过，就在整个行业都将目光聚焦于留存和变现新能力的时候，我反而对微信小游戏近期悄悄推出的这款可视化制作工具更感兴趣，甚至在制作体验过程中“欲罢不能”。 01让小游戏制作流程“积木化” 游戏可视化编辑并不新奇，比如十分火热的K12少儿编程赛道，基本都在发力图形化编程工具，如编程猫、scratch等的游戏编辑器。 微信这款可视化制作工具和这些游戏编辑器差不多，同样无需下载，在网页中即开即用；并且用户开发时也无需代码，只需像搭建积木一样拖动元素即可快速构造小游戏。 [图片] 同时，我们可以看到，在这款可视化制作工具中，微信还提供了丰富的官方组件和个性化素材，并支持用户实时预览分享以及发布到微信公众平台。 [图片] 而且在用户分享和发布的时候，还可以自定义微信分享小游戏时的卡片文案，比如可以设置为：“这是我的第一款游戏，哈哈哈！”，效果如下： [图片] 不过，目前微信小游戏这款可视化制作工具还处于内测阶段，用户可以通过 https://gamemaker.weixin.qq.com/ 申请内测资格。 02小程序可视化工具早已有之 说到小游戏可视化制作工具，大家脑中可能会快速浮现这样的问题：小程序是不是也能进行可视化制作？ 答案是肯定的，而且很早就有相关玩家入局。作为首家推出小程序可视化工具的服务商，即速应用在这方面已经走在了行业前列。 据其创始人陈俊梁介绍，“公司把相应功能都模块化了。企业在生成小程序时无需编程，只需根据相应行业属性拖拽相关可视化组件，即可生成专属于自己公司的小程序。” [图片] 此外，根据数据、用户、功能、店铺、订单、营销、系统等不同的使用场景，即速应用还给商家提供了丰富的行业模板，帮助商家跳过自由拖拽编辑的过程，直接一键生成。 “零基础用户也可生成自己的小程序，”创始人陈俊梁如是说道。 03不是消灭小程序开发者，而是让人人都能成为小程序开发者 无论是微信小游戏正在内测的可视化工具，还是即速应用等小程序服务商已经推出的可视化制作工具，它们的目的不在于消灭小程序开发者，而在于消除小程序制作的门槛。 因为对于大部分个人和企业来说，自己开发一款小程序的成本太高，从最初的开发、设计，到后续的运维、功能更新等，都是一笔不菲的费用支出，特别对于“一笔钱很难掰开两半用”的中小企业而言，这准入门槛限制了太多对小程序有着强烈兴趣或需求的用户。 而小程序可视化制作工具的出现，就是将这一门槛拉至普通人水平，让每个人都能成为小程序开发者。借助可视化制作工具，不论是一款用来自娱自乐的小游戏，还是一款垂直行业的商用小程序，它们都可以在我们的“指尖拖拽”中轻松诞生。 “人人都可以成为小程序开发者”的时代正在到来！

微信小程序实现注册、登录页面的小功能整理，希望对大家有帮助。 1. 正则验证手机号码 [代码]var[代码] [代码]mobile = that.data.phone;[代码][代码]    [代码][代码]var[代码] [代码]myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;[代码][代码]    [代码][代码]if[代码] [代码](!myreg.test(mobile)) {[代码][代码]      [代码][代码]wx.showToast({[代码][代码]        [代码][代码]title: [代码][代码]'手机号有误！'[代码][代码],[代码][代码]        [代码][代码]icon: [代码][代码]'success'[代码][代码],[代码][代码]        [代码][代码]duration: 1500[代码][代码]      [代码][代码]})[代码][代码]      [代码][代码]return[代码] [代码];[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]wx.showToast({[代码][代码]      [代码][代码]title: [代码][代码]'手机号正确！'[代码][代码],[代码][代码]      [代码][代码]icon: [代码][代码]'success'[代码][代码],[代码][代码]      [代码][代码]duration: 1500[代码][代码]    [代码][代码]})[代码]2. 60秒倒计时 [图片] 发送短信验证码后会有60秒的倒计时功能。 网上有很多这种插件，很方便 比如: http://smsow.zhenzikj.com/doc/sdk.html [图片] 使用方法1.引入插件countdown.js [代码]var[代码] [代码]CountDown = require([代码][代码]'../../utils/countdown.js'[代码][代码]);[代码] 2.在 onLoad 周期初始化 [代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码]   [代码][代码]this[代码][代码].countdown = [代码][代码]new[代码] [代码]CountDown([代码][代码]this[代码][代码]);[代码][代码]}[代码] 3. 在获取验证码的按钮上增加captchaDisabled、captchaTxt 分别用于控制倒计时过程中是否可以点击、倒计时秒数提示 [代码]<button class=[代码][代码]'codeBtn'[代码] [代码]bindtap=[代码][代码]'getSmsCaptcha'[代码] [代码]disabled=[代码][代码]'{{captchaDisabled}}'[代码][代码]>{{captchaTxt}}</button>[代码] 4. 调用start方法触发倒计时 [代码]getSmsCaptcha(e) {[代码][代码]   [代码][代码]this[代码][代码].countdown.start();[代码][代码]}[代码] 3. 发送短信验证码 小编使用的是榛子云短信(http://smsow.zhenzikj.com/doc/sdk.html)的发送验证码短信。 目前提供了普通版和云函数版，建议下载云函数版的。两个版本中都提供了对验证码的支持，你无需生成验证码，SDK已经帮你都弄好了。 如何使用 1）配置域名 在微信公众平台-小程序管理中配置域名https://smsdeveloper.zhenzikj.com,如下图: [图片] 2) 引入sdk [代码]var[代码] [代码]zhenzisms = require([代码][代码]'../../utils/zhenzisms.js'[代码][代码]);[代码] 3）初始化 [代码]zhenzisms.client.init([代码][代码]'https://sms_developer.zhenzikj.com'[代码][代码], [代码][代码]'你的榛子云appId'[代码][代码], [代码][代码]'你的榛子云appSecret'[代码][代码]);[代码] 4) 发送验证码短信 [代码]zhenzisms.client.sendCode([代码][代码]function[代码] [代码](res) {[代码][代码]      [代码][代码]wx.showToast({[代码][代码]        [代码][代码]title: res.data.data,[代码][代码]        [代码][代码]icon: [代码][代码]'none'[代码][代码],[代码][代码]        [代码][代码]duration: 2000[代码][代码]      [代码][代码]})[代码][代码]    [代码][代码]}, that.data.phone, [代码][代码]'验证码为:{code}'[代码][代码], [代码][代码]''[代码][代码], 60 * 5, 4);[代码] 参数1:请求后的用于接收返回结果的回调函数 参数number:接收者手机号码 参数3:短信模板，其中{code}为验证码占位符，会自动替换 参数messageId:该条信息的唯一标识，可用于查询 参数seconds:验证码有效期，单位是秒 参数length:验证码长度，比如4位或6位 返回结果是json格式的字符串, code: 发送状态，0为成功。非0为发送失败，可从data中查看错误信息 当然，你也可以使用云函数版的，请参考文档: http://smsow.zhenzikj.com/doc/weixinmp_yun_sdk_doc2.html

小程序官网: https://www.weitimes.com 小程序地址 https://www.wpstorm.cn 联系微信: hackdxd WordPress多端开源小程序,这是丸子团队在发布丸子社区小程序之后，首次打造一款免费简洁的开源小程序。 要维持丸子社区小程序的升级，又要开发一款支持微信和 QQ的小程序前端，真的挺不容易的。 但是，我们还是坚持了下来，希望能够帮助到想要基于 WordPress 程序创建小程序的用户。 这次的开源小程序功能不多，界面清新，简洁。 开源小程序功能： 文章资源实时同步 支持视频在线播放 支持海报生成 支持分享朋友圈 支持搜索关键词文章 支持文章点赞 / 收藏 / 评论 支持查看个人点赞 / 收藏 / 评论文章列 没有太复杂的功能，除了简洁还是简洁，除了清新还是清新，重要的是，如此优雅的小程序，加载性能好，适用性强。 小程序演示截图: [图片] [图片] 我们已经把开源小程序发布到了WordPress小程序主题资源平台上，如果你对小程序有兴趣。 可以访问 WordPress小程序主题资源平台下载: https://www.wpstorm.cn 我们已经把这款开源小程序发布到了开源平台上，如果你对这款小程序有兴趣，可以上以下两个平台下载: 地址; 如何下载开源小程序？ 复制以上地址在你的浏览器打开，选择下载即可,了解详情（ 记得给我们的开源小程序 Star 哦 _）。 GitHub地址:https://github.com/dchijack/Travel-Mini-Program GiTee地址：https://gitee.com/izol/Travel-Mini-Program 丸子WodPress小程序付费版本(丸子社区/丸子资讯) 强大的后台功能以及简化的小程序设置，几乎不需要更改小程序源码，只要在网站后台简单的配置信息，就能拥有一个漂亮又功能强大的社区小程序。 在线体验扫码： wseywt.jpg 基本功能 网站小程序数据实时同步更新； 首页推荐文章展示； 文章/动态/点赞/评论/收藏/转发； 文章海报生成； 评论跟随； 强大的广告功能； 支持文章内容转换语音朗诵， 采用百度语音/讯飞语音技术，支持用户自行选择平台； 社区功能 小程序端发表社区话题，发布文章; 小程序文章链接分享，可自动获取分享链接的内容，支持的分享链接包括:微信公众号、抖音、微博、B站文章内容; 小程序视频链接分享，可自动获取分享视频地址，支持的分享视频包括：微博视频、抖音、VueVideo及特定的腾讯视频链接； 支持用户关注，可以互相关注，随时可以了解你喜欢的人发布的内容; 积分功能：支持阅读、评论、发布及签到积分，可以设定每天最高可增加积分额度; 新增功能 微信小程序扫码登录网站，专属小程序在线扫码 基于位置信息的动态发布及文章推荐，可以让你快速找到附近的人。 丸子社区新版做了整体UI界面优化 圈子 新增了仿微信视频号功能 新增了发文章功能 新增了解析接口调整 新增了支持拼多多带货一键发布 小程序演示截图: wsVr1H.png wsVfN8.png wsVI3Q.png 一款UI设计精美的自媒体小程序目前支持四端两款模板，完全后台一键式配置，直接使用，基本不懂编程的小白都可以使用。 在线体验扫码NO1： wsmp01.jpg 在线体验扫码NO2： wsmn0I.jpg 基础功能 增加自定义文章类型-公众号推文 支持创建焦点幻灯片图文显示 支持腾讯视频 / 微博视频解析 支持积分功能，签到打卡积分 支持多端积分付费阅读文章 支持 QQ 小程序消息模板通知 支持百度小程序消息模板通知 支持微信小程序关联公众号文章 支持网站后台下载小程序 小程序演示模板NO1: wsVTjs.png wsVbBq.png 小程序演示模板NO2: wsVz34.png wsZpv9.png wsZPD1.png