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

线下门店利用小程序日销翻9倍的秘诀~ 作者丨Suvi [图片] 如今，人人都在讲“数字化”。到底，什么才是数字化运营呢？开通了公众号，开发了小程序，就一定会有流量吗？投放了广告，发放了优惠券，就一定会有转化吗？这些数字化的工具，究竟该怎么用，才能效益最大化？ 今天，给大家带来服装品牌“三福时尚”的数字化转型案例。它们通过对“触点”的优化，聚焦用户获取、转化与留存，让三福小程序UV环比提升了50%以上，订单转化率和GMV双双实现三位数增长，小程序日销量提升了整整9倍。 01 用户获取：全触点布局是关键 何为触点？简单来说，就是触达用户的渠道。小程序在微信生态的触点超过60个。而据三福时尚数字营销部总经理江平介绍，三福小程序目前部署了多达三十几个触点。触点布局的优化，是三福小程序短时间内销售额增势迅猛的关键。 譬如，针对公众号菜单栏这一入口，三福根据其活动的进度和节奏，定制了不同阶段的菜单。在铺设活动的同时，及时更新菜单栏，这个小小的举动大大提高了三福对新老用户的唤醒能力。 [图片] 很多人做了小程序，却等不到流量。那么，不妨想一想：小程序都有哪些入口？这些入口你都好好利用了吗？这些入口如何触达用户？面对不同的人群和不同的场景，如何进行区别化设计？ [图片] 在流量越来越贵，越来越难获取的今天，我们愈发要对流量来源进行甄别、筛选和优化。三福小程序经过一段时间的摸索，发现对他们来说，最有效的触点是公众号菜单、公众号图文、朋友圈广告。因此，针对这些核心触点，他们进行了精准化、个性化的运营。 例如，在投放朋友圈广告时，三福会发放出小程序的线上专享券，引流用户进入小程序，实现短链转化。此外，三福还集中了线下导购的力量，发挥成千上万私人导购的“辐射能力”，在导购朋友圈进行推文分发，针对用户一对一回复，促进购买。经过优化设计之后，朋友圈广告投放的优惠券核销率高达33%。 [图片] 02 用户转化：玩转营销组合拳 对于电商来说，刺激新客户成交第一单，最有效的策略无疑是活动优惠。优惠力度越大，时间限定越短，越能提升新客的转化率。但活动怎么设置，优惠怎么发放，也是需要运营技巧的。 三福的策略是，用丰富多样的营销玩法，多维度刺激新老用户。在活动期间，三福小程序设置了免单日、返券日、拔草日、超级品类日等系列活动，配合积分、抽奖、返钱、免单等多种玩法，以串联起整个营销周期。 [图片] 三福的拟人化品牌形象——福宝 当然，在这个过程中，也少不了对触点的优化。譬如，三福充分利用公众号后台自带的功能，利用分组，给不同的用户推送不同的图文内容，发送不同的优惠券。这样的精准推送，大大提高了三福公众号图文的点击率与转化率。活动中，公众号点击率环比提升4.3%，三福小程序UV环比递增50%，订单转化率提高了7.5倍。 对于三福来说，光有线上的流量还不够，实现线上带动线下，才是最终目的。针对线上的各类活动，三福在线下也打造了相应的活动氛围：通过商城会场、线下POP等全渠道，大肆渲染活动狂欢气氛，以充分刺激用户的消费心理。 [图片] 三福数字营销部总经理江平 而在线下门店的管理环节中，不仅仅要考虑到顾客，更要考虑到各个门店的导购与店长。因此，三福举行了区域销售占比PK赛，每日播报各区最新销售业绩，通过虚拟广告金+现金激励，以充分调动门店店员的主观能动性。活动期间，排名前两名的区域小程序销售日环比增长分别为4123%和2990%，小程序销售占比递增575%和394%。 03 用户留存：给用户一个“回头”的理由 对于一款电商小程序来说，用户留存可以分为两部分：首先，吸引用户持续回到小程序，保持一定的活跃度；其次，刺激用户完成复购，成为“回头客”。而在用户留存方面，三福也颇有心得。 自去年年底，三福实现了“六通”——会员通，渠道通，订单通，促销通，服务通，商品通。这些环节的数据打通，为三福的数字化运营打下了基础。 许多商家在做小程序的时候，运用的还是“平台思维”，对基础的数据建设不够重视，总认为用上了“数字化工具”就等于“数字化转型”了。但是，只有真正去运用数据、分析数据，对各个环节的用户行为数据、交易数据进行深度解剖，才能得出最适合自己的运营策略。 三福从用户的“消费动线”出发，对用户从萌生购物想法，到实施购物行为，再到持续活跃、复购，乃至主动传播的全链路进行了精心设计和扩展，形成了一个完整的闭环体验。 [图片] 为了让用户持续回到小程序中，三福在小程序首页加入了许多实用功能板块，如：超值拼团、上新播报、热卖排行。当然，吸引留存的重中之重乃是优惠券中心与福币商城。三福小程序的优惠券中心设计简洁，还能将券按照使用渠道进行区分。而福币商城中的积分，有着兑券、抽奖等多种玩法。这两个板块都放在了首页相当显眼的地方，能够有效地刺激用户产生复购冲动。 在腾讯智慧倍增行动的第三期颁奖典礼上，三福凭借其公众号+小程序+朋友圈广告+门店导购大赛四大板块的操盘运营，拿下了当期的第一名。 [图片] 很多时候，他人的”增长秘诀“，其实并不是什么新颖的营销策略，也不是什么刁钻的活动规则。相反，拼团、秒杀、店庆……这些设计和玩法，并不是秘密。如何让这些活动的效果最大化，才是关键。 但难点就在于，思维层面的东西，无法一成不变地照搬。各种触达用户的渠道，已经不再有原始的“红利流量”，开了个公众号什么文章都不发就“蹭蹭”涨粉的时代已经过去了。但是这些渠道还在，触点还在，用户也还在。 不妨，从现在起，开始布局属于你的“全链路闭环”。针对经营全流程，从拉新到激活，从转化到留存，从回头复购到主动传播，对每一个环节进行梳理和优化，加强高质量的渠道，砍掉无效、低效的环节，针对客户的兴趣点去引导转化，试着实现属于你的“翻倍增长”吧~。

作者：祈澈姑娘 小程序扫码实现读取isbn，获取图书的各种信息 接触到云函数已经有一段时间了，之前一直在看api，现在自己跟着网络上的资料和视频学习，受到豆瓣读书系列的启发，决定用云函数做一个项目，获取图书信息并存入云数据库。 基本流程 [图片] 1.用户端小程序调用 wx.scanCode接口,获取到ISBN码。 2.使用ISBN码调用云函数，在请求云函数的时候，云函数会请求豆瓣的API，获取豆瓣图书信息。 3.图书信息请求到之后，会将其中无用的信息返回给小程序中，小程序中再拿出获取到的信息，创建图书条目。 4.将对应的数据直接存储到云开大的数据库里面。 具体步骤 下面对该项目的步骤进行一些具体的讲解以及部分关键代码的呈现。 一、扫一扫获取图书ISBN码 二、准备环境、安装依赖     1.安装Node.js准备环境     2.在cmd打开云函数目录中，安装依赖 三、编写云函数代码     1.在云函数中用获取到的ISBN传参     2.编写用户端（小程序端代码）     3.编写云函数端代码 四、调用豆瓣API获取具体数据 五、将获取到的API数据存入云数据库里面     1.初始化     2.添加数据 六、云数据库读取的数据显示在小程序端列表里     1.获取res.data     2.设置界面相关数据     3.显示和布局     4.小程序wxml界面（主要demo） 七、【云开发】首页列表跳转详情页     1.新建一个详情页     2.按钮跳转事件     3.跳转到具体详情页     4.关于详情页的一些代码 一、扫一扫获取图书ISBN码 用户端小程序调用 wx.scanCode接口,获取到图书ISBN码（图书条形码），在办公室找了一圈，找到了一本图书ISBN码，可以自动忽略我这渣渣的像素。 [图片] 关键代码 [代码]// pages/scanCode/scanCode.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, scanCode: function (event) { console.log(1) // 允许从相机和相册扫码 wx.scanCode({ onlyFromCamera:true, scanType:['barCode'], success:res=>{ console.log(res.result) }, fail:err=>{ console.log(err); } }) } }) [代码] ok，获取到信息： [图片] 二、准备环境、安装依赖 1.安装Node.js准备环境 安装nodejs,准备好环境，这一步就不细说了，没有安装的可以自行百度，不知道有没有安装的可以输入 node -v 查看一下。 2.在cmd打开云函数目录中，安装依赖 输入命令： [代码]npm install --production [代码] 依赖安装成功之后，文件里面多会出现 [代码]package-lock.json[代码]这个文件。 三、编写云函数代码 1.在云函数中用获取到的ISBN传参 云函数API： https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/functions/callFunction.html 通过看文档可以学会，在云函数里，我们可以通过传递一份data来获取这里面的数据，然后再通过event来拿到对应的数据。 复制这个api里面的方法： [图片] 打开实战一里面写的小程序端的扫码的js界面，把这个方法放在 [代码]success[代码]里面。 要调用的云函数的名称 [代码]name[代码]要改成成实战二教程里面建立的云函数[代码]bookinfo[代码]： [图片] 传递的参数是 [代码]isbn[代码]，结果是扫码得到的[代码]result[代码]： [图片] 2.编写用户端（小程序端代码） 将 [代码]result[代码]的结果打印出来，ok,用户端（小程序端）代码写好了。 用户端（小程序端）代码写完了，就这些： [代码]// pages/scanCode/scanCode.js Page({ /** * 页面的初始数据 */ data: { }, scanCode: function(event) { console.log(1) // 允许从相机和相册扫码 wx.scanCode({ onlyFromCamera: true, scanType: ['barCode'], success: res => { console.log(res.result) // wx.cloud.callFunction({ // 要调用的云函数名称 name: 'bookinfo', // 传递给云函数的参数 data: { isbn: res.result }, success: res => { console.log(res) }, fail: err => { console.error(res) } }) }, fail: err => { console.log(err); } }) } }) [代码] 3.编写云函数端代码 打开 [代码]bookinfo[代码]里面的 [代码]index.js[代码],将 [代码]event[代码]结果打印出来,请求云函数，将云函数之中的 [代码]isbn[代码]返回回来。 [代码]// 云函数入口文件 // const cloud = require('wx-server-sdk') // cloud.init() // 云函数入口函数 //var rp = require('request-promise') exports.main = async (event, context) => { console.logI(event); return event.isbn // var res = rp('https://api.douban.com/v2/book/isbn/' + event.isbn).then(html => { // return html; // }).catch(err => { // console.log(err) // }) //return res // const wxContext = cloud.getWXContext() // return { // event, // openid: wxContext.OPENID, // appid: wxContext.APPID, // unionid: wxContext.UNIONID, // } } [代码] 上传并且部署云函数。 测试一下，云函数调用成功,返回的结果(控制台打印)是isbn： [图片] 四、调用豆瓣API获取具体数据 在网上找了一下，找到了一个可以用的豆瓣API： https://api.douban.com/v2/book/isbn/:9787111128069 打开云函数文件夹，index.js里面编写代码，引用request promise: [代码]var rp = require('request-promise') [代码] 自定义的isbn，使用一个+号来连接，在传递一个catch来处理错误情况： [代码]var res = rp( 'https://api.douban.com/v2/book/isbn/'+event.isbn).then(html=>{ return html;}).catch(err=>{ console.log(err)}) [代码] [代码]returnres[代码]res就是对应的html,将html传给用户端后，上传云函数。 继续测试一下，拿到这个条形码的信息了（书本的信息）： [图片] [图片] 对于这些信息，进一步处理，拿到自己想要的信息。 打开小程序端scanCode.js： [代码] //进一步的处理方法 var bookString=res.result; console.log(JSON.parse(bookString)) [代码] [图片] 看到了整本图书上面的所有信息，修改这些信息，存入云数据库之中即可。 五、将获取到的API数据存入云数据库里面 1.初始化 使用数据库的时候，首先要进行初始化： 云开发数据库文档： https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html 打开云开发控制台创建一个集合books。 打开小程序端js,初始化数据库： [代码] //云数据库初始化 const db = wx.cloud.database({}); const book = db.collection('books'); [代码] 2.添加数据 js代码流程： [代码]// pages/scanCode/scanCode.js Page({ data: { }, scanCode: function (event) { console.log(1) // 允许从相机和相册扫码 wx.scanCode({ onlyFromCamera: true, scanType: 'barCode', success: res => { console.log(res.result) wx.cloud.callFunction({ // 要调用的云函数名称 name: 'bookinfo', // 传递给云函数的参数 data: { isbn: res.result }, success: res => { // console.log(res) //进一步的处理 var bookString = res.result; console.log(JSON.parse(bookString)) //云数据库初始化 const db = wx.cloud.database({}); const book = db.collection('books') db.collection('books').add({ // data 字段表示需新增的 JSON 数据 data: JSON.parse(bookString) }).then(res => { console.log(res) }).catch(err => { console.log(err) }) }, fail: err => { console.error(res) } }) }, fail: err => { console.log(err); } }) } }) [代码] 六、云数据库读取的数据显示在小程序端列表里 1.获取res.data 参考的读取api,请点击： https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html 初始化实例和book方法： [代码] //云数据库初始化 const db = wx.cloud.database({}); const book = db.collection('books') [代码] 复制API这段代码获取多个记录的数据的方法，放在项目到onload方法之中。 打印在控制台： [图片] 2.设置界面相关数据 拿到res.data之后，要赋值给page实例里面的data，所以在data里面设置一个默认的空数组： [图片] 创建一个变量来保存页面page示例中的this,方便后续使用，也可以使用箭头函数来打印一下this,看是不是page示例： [代码]const db = wx.cloud.database({}); const cont = db.collection('books'); Page({ data: { book\_list:[] }, onLoad: function(options) { // 创建一个变量来保存页面page示例中的this, 方便后续使用 var _this=this; db.collection('books').get({ success: res =>{ console.log(res.data); console.log(this); } }) }, }) [代码] [图片] 直接使用this来设置data： [图片] 3.显示和布局 使用组件库引入，可以省略自己写很多代码的样式，简单方便，当然也可以自己写：https://youzan.github.io/vant-weapp/#/card 因为数据不止一条，循环，所以要用到小程序框架的列表渲染： https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html 写好之后 wxml如下： [代码]<text>私家书柜</text> <view wx:for="{{book\\_list}}"> <van-card num="2" price="2.00" desc="描述信息" title="商品标题" /> </view> [代码] 4.小程序wxml界面（主要demo） wxml： [代码]<view wx:for="{{book\\_list}}"> <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}" /> </view> [代码] js： [代码]const db = wx.cloud.database({}); const cont = db.collection('books'); Page({ data: { book_list:[] }, onLoad: function(options) { // 创建一个变量来保存页面page示例中的this, 方便后续使用 var _this=this; db.collection('books').get({ success: res =>{ console.log(res.data[0]); this.setData({ book_list:res.data }) } }) }, }) [代码] ok，云数据库读取的数据显示在小程序端列表里。 七、【云开发】首页列表跳转详情页 1.新建一个详情页 打开app.json, [代码]"pages/details/details",[代码]，自动生成了一个详情页： [图片] 2.按钮跳转事件 打开首页列表页代码，绑定详情按钮跳转事件。 wxml: [代码]<view wx:for="{{book\\_list}}"> <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}"> <view slot="footer"> <van-button size="mini" bind:click="viewitem">详情按钮</van-button> </view> </van-card> </view> [代码] [图片] 继续写js里面的绑定事件，在控制台打印一下event，方便后续测试： [代码]viewitem: function(event) { console.log(event) } [代码] 3.跳转到具体详情页 要在云开发里面写一个特定的id，打开云开发控制台，数据库，需要用到这个下划线是_id的字段： [图片] 给这个字段设置一个值，[代码]data-id="{{item._id}}"[代码]： [图片] 点击按钮，可以看到，点击不同的列表，打印的是不同的id，通过不同的id就可以看到不同的内容了： [图片] 4.关于详情页的一些代码 初始化db的实例： [代码]const db = wx.cloud.database({}); [代码] 打开云函数文档里面的读取数据api： https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html 复制此段读取数据记录的代码，放在onload里面： [图片] 可以看到，具体数据已经打印过来了： [图片] 这个时候还没有将数据传递到一个具体的页面实例中： [图片] 所以，success开始改成使用箭头函数，进入页面的时候，可以看到appdata里面的book： [图片] 具体展示：在wxml里面写上想要拿到的数据，ok，详情页面展示的数据： [图片] 效果如下： [图片] 这样，我们就完成了利用云开发扫码读取ISBN码并获取图书各种信息的全部步骤啦~