前言 你还在下载源码复制到项目中去使用吗？现在已经不需要了！ 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 接下来我们以npm引用 dayjs 库为案例。 dayjs：一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js。 Moment.js 的 2kB 轻量化方案，拥有同样强大的 API [代码] dayjs() .startOf('month') .add(1, 'day') .set('year', 2018) .format('YYYY-MM-DD HH:mm:ss') [代码] 🕒 和 Moment.js 相同的 API 和用法 💪 不可变数据 (Immutable) 🔥 支持链式操作 (Chainable) 🌐 国际化 I18n 📦 仅 2kb 大小的微型库 👫 全浏览器兼容 地址：https://github.com/iamkun/dayjs 引用步骤 打开调试器区域的【终端】面板。 [图片] 输入[代码]npm init[代码]，然后填写初始化信息，默认值可以按回车。 填写完成后，会生成一个package.json文件。 [图片] 安装 dayjs：在终端输入 [代码]npm install dayjs --save[代码] 点击开发者工具中的工具栏：详情 --> 本地设置 --> 勾选【使用 npm 模块】 [图片] 点击开发者工具中的菜单栏：工具 --> 构建 npm [图片] 引入使用 [图片] dayjs 详细使用文档：https://day.js.org/zh-CN/

在开发者工具中新建项目，修改project.config.json时弹出如下弹窗[图片] 代码内部只删了pages/logs还有utils，如下图：[图片] 调试微信开发者截图如下：[图片] 环境：电脑是win7系统，开发者工具版本1.03.2005140，稳定版。 项目目录：A:\项目\小程序\测试项\test02 采取方法：重登开发者工具，卸载开发者工具，更换开发者工具安装目录方式都没起作用。 还请哪位大神或官方有时间帮忙看下，谢谢。

用云开发来做一个小程序的功能与实战教程，讲解核心能力如何用云开发实现，例如：用户管理、小程序码、短信应用、分享卡片等。

1 云函数应用课程·在云函数中查询数据 [视频] 2 云函数应用课程·在云函数中新增数据 [视频] 3 云函数应用课程·在云函数中删除数据 [视频] 4 云函数应用·在云函数中编辑数据 [视频] 5 云函数应用课程·在云函数中使用存储资源 [视频] 6 云函数应用课程·在云函数中访问第三方服务 [视频] 7 访问数据库 [视频]

重磅打造的小程序学习路径课，从微信小程序到微信云开发体系化的学习，带来更加顺畅的学习体验。

作者：祈澈姑娘 小程序扫码实现读取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码并获取图书各种信息的全部步骤啦~

云数据库、云存储、云函数、云调用等云开发基础能力的使用介绍 [视频] 点此跳转：小程序云开发训练营活动页面

该课程为个人店的店铺运营指南，包括后台各功能模块的使用和操作指引。 助力您开店后成功卖货，快来看看吧~ [视频] [图片][图片] 以下是「个人店-店铺运营」模块操作指引的PPT版本，欢迎大家继续对照查看~ [图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片][图片] 更多资讯，欢迎到【交流专区】微信小商店主页发帖和寻找答案。

[图片] [图片]

很多小伙伴想在春节放假期间学小程序，但是小程序学习的资源和教程可能不太好找。所以小助手精心整理了一期，全是干货！认真学，开启美妙的小程序开发之旅，做一个属于自己的微信小程序。有需要的小伙伴收藏好这期文章哦~ 本文收集整理了微信小程序开发资源，包括官方文档，云开发训练营文档，视频教程以及实战源码推荐，会不间断更新。。 欢迎添加云开发小助手CloudBase微信：Tcloudedu1 ，一起加入技术交流群~ 小程序云开发官方公众号 [图片] 目录 官方文档 云开发训练营 视频教程 小程序·云开发Demo 技术交流群 官方文档 小程序开发者工具 小程序设计指南 小程序开发教程 小程序框架 小程序组件 小程序API 小程序开发者工具 小程序云开发文档 云开发训练营 小程序开发入门 小程序与JavaScript 云开发快速入门 [图片] 视频教程 腾讯云云开发B站:https://space.bilibili.com/447496276 [图片] 小程序·云开发Demo 技术博客小程序 包括文章的发布及浏览、评论、点赞、浏览历史、分类、排行榜、分享、生成海报图等。 网盘小程序 兼具文件存储与分享功能的专属网盘小程序。 教务助手小程序 用完即走，查个成绩和课表，无需下载app或去翻看公众号内的历史内容。 功能日历小程序 既能查看日历又能备注事项，看云开发如何支持功能性日历小程序的快速开发。 客户业务需求收集小程序 用云开发快速制作客户业务需求收集小程序，教你用云开发实现小程序版“朋友圈”的发布与展示。 小程序朋友圈 把朋友圈装进小程序需要几步？借助云开发实现小程序朋友圈的发布与展示。 南苑导览 一款由学生独立开发的以地图为载体，提供中山大学南方学院具体地点的位置信息、导航、校园历史及文化介绍的小程序。 互动打卡小程序 用云开发轻松构建精美互动打卡小程序，交互式双人打卡，快乐加倍。 个性头像小程序 别再@官方啦！云开发教你轻松制作个性头像小程序，趣味挂件、个性icon。 二手书商城小程序 云开发轻松制作二手书交易商城小程序，让智慧延续，让温暖传递。 后台数据批量导出 小程序开发过程中如何将云数据库中的数据批量导出至excel。 发送邮件 初学者福音，手把手教你用小程序云开发实现邮件发送功能。 高考查分小程序 实现高考分数轻松查，小程序源码。 mini论坛 仅需两天轻松搭建mini论坛小程序。 运动圈小程序 打造运动圈小程序（以乒乓球为例），实现球友间高效互动。 心情日记小程序 我能想到最浪漫的事，可能就是“你的心事我全知晓”。 最美恋爱小程序 小程序前端用的是taro框架写的，后台用的云开发。教你用云开发为心爱的人做个小程。 校园约拍小程序 校园场景下，小程序·云开发大显身手，校园约拍小程序源码。 体重记录小程序 只想记录每日体重还得下个APP，不用那么麻烦！用云开发做个专属体重记录小程序，看看你每天瘦了多少。 口袋工具 口袋工具之历史上的今天。一个基于云开发的小程序，看看历史上的今天都发生了啥。 迷你微博 独立做个精简版微博出来让你刷刷刷吗？而且，它还兼具搜索、点赞、主页的功能 多媒体小程序 使用小程序·云开发构建多媒体小程序。 技术交流群 交流技术为主，开发学习工作中遇到问题可以在群内交流，欢迎有需要的朋友加群。 添加小助手微信（Tcloudedu1），回复“技术群”，即可加入云开发技术群。 最后 如果你有关于使用腾讯云云开发相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们~ 关注腾讯云云开发，后台回复【源码】，获取更多微信小程序云开发实战源码。 [图片] [图片] [图片] 关注「腾讯云云开发」，后台回复【 源码 】，获取更多微信小程序云开发实战源码。 持续更新中… [图片]

首先，感谢微信官方举办这一次【微信小程序大赛】大学生专属活动，能让我们更好的去学习，并且锻炼自己。 [图片] 高手请忽略 作为一个真正的菜鸟，在此次活动中我学到了很多： 如何能够更好地与小伙伴沟通？【执行力】 在技术层次上，怎么学习才是正确的？ 怎么正确对待技术？ 本次项目开发的相关学习经验。 第一：如何解决开发项目时执行力的问题。 此次比赛是面的全体高校学生，个人技术水平的差异+跨地区组合，怎么才能发挥出一个小团队高效的执行力呢？(以下是个人在开发项目时的经验) 正确对待比赛，以锻炼为主。如果是为了拿奖，首先这个想法在一定程度上是错误的。我们团队的愿景就是：锻炼自己为主。边学习边开发，所以在开发项目时团队氛围很好。 约定好时间，组建QQ群开语音来同时开发项目这对于一个团队项目的成果是很重要的，因为我相信如果你愿意挤出你周末休息的时间来学习，不会太差。 定制计划，每周做了什么，学到了什么。 在学习的过程中要学会总结，把用法，钩子函数，语法，关键字，get,post,jsonp请求处理数据等等自己做一个总结 而且有的小伙伴想考研究生，所以你也应该提前准备一下，因为据我了解，研究生也有每周项目计划表 第二：怎么去更好的学习技术【小程序技术路线】 刚学习计算机的小伙伴一脸懵逼，尤其在自己没有参加培训机构，没有开发经验的情况下要完成这样的项目，我当初都不敢想。我们是这么做的： 从基础入手，html,css,js,jq,es6语法,mvc模型 学习官文文档，非常重要 各种地方寻找免费的小程序开发教程 死磕，没其他办法，技术就是这样 学到一定程度，你可以接触一些ajax,node,vue,webpack等知识 充分理解面向对象与闭包，跨域，文件处理，KOA,正则，Express等为架构师先打下一定基础 我最近也是花了好大力气搞到一份2019年黑马程序员联合出品的架构师视频，可以免费分享给看到的学生，我看了差不多俩星期，感觉不错，我也是学生，能理解各位追求技术的热情，希望我们一起学习，加油。 第三：怎么正确对待技术？ 菜不可怕，可怕的是你菜，还在群里只吹不做 1. 技术驱动永远是建立在解决需求的层次上。 2.北上广技术大佬多的是，别学了点东西就沾沾自喜，学会谦虚。 第四：本次项目开发的相关学习经验 1. 小程序的相关语法以及table栏的动画效果。 2. 引入框架，学习了vue等前端框架的知识。 3. 排版以简洁易操作为主，培养用户的懒习惯。等等 4.了解了生产环境与开发环境 5.MVC模型与MVVM模型的区别等等 因为我本身很菜，所以我没有运营经验，但我想法是：要专注作品本身，踏踏实实做事运营这方面都是后期的事。 好像没什么可以说的了，文采不好，各位见谅。 再次致谢微信官方，同时也感谢我们队伍的3个小伙伴，谢谢这缘分让我们能组队到一起，接下来的日子里要更好的学习哦 ------------------小程序队伍：太岳军区386旅独立团 ----------------------------时间：2019年6月3日

[图片] 使用场景介绍 微信小程序的进入形式决定了它更适合充当一种“工具”的角色，适合在用户想起它、要用它的时候主动启动。基于此想法，中大猫谱小程序主要服务于猫猫信息记录、搜索的功能，旨在帮助改善校园流浪猫的生存状况、帮助大众了解猫猫及救助知识，同时帮助动保组织管理猫猫资料、募集救助（绝育、治疗）流浪猫所需的资金，为生态环境保护献一份力。 （— 广告时间结束 —） 如我们所知，微信小程序对于所有用户来说，入口都是统一的。目前，官方还没有提供配置管理员id的操作。那么，如果要将一些管理页面整合到小程序中，鉴权操作是非常必要的。例如，在中大猫谱中，普通用户和管理员用户看到的页面元素、能进入的页面是不同的： [图片] 基于这种需求，本文将分享一种在微信·云开发环境下，实现简单、安全的后台鉴权的思路。 云函数实现 在描述方法前，我们先简单介绍一下微信·云开发的三大部件，分别是做啥用的： 云函数：后端的自定义的业务逻辑函数，自带Node.js环境。可以被小程序端调用，通常用于操作云存储和云数据库。拥有微信私有协议天然鉴权（后文重点使用）。 存储：类似云盘，存文件用的，自带CDN（流量不多）。它提供的[代码]cloud://[代码]协议文件链接可以直接用于部分小程序端tag上，比如image的src，但也就不会被缓存。 数据库：一个文档型数据库，可以被小程序端直接使用。权限设置比较迷（为了安全），大部分修改、删除操作要经过云函数来调用。 我们重点关注云函数。开通云开发后，新建一个云函数，我们会得到一个初始模板： [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, // 调用者的openid，与每个微信号一一对应，用于鉴权 appid: wxContext.APPID, unionid: wxContext.UNIONID, } } [代码] 其中，云函数接受两个参数，[代码]event[代码]是用户调用时提供的data（可理解为形参），[代码]context[代码]是此处调用的调用信息和运行状态。幸运的是，这两个东西我们暂时都用不到，不理解也没有关系。 我们关注函数体的第一句[代码]cloud.getWXContext()[代码]，它正是前文提到的微信私有协议天然鉴权。换人话说，这个函数返回的所有资料，都是有微信背书的、可信的。那么，最简单的鉴权方式，就是把管理员的openid硬编码到云函数中，对比一下就完成了： [代码]// isManager云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 硬编码管理员的openid const MANAGERS = ['aaaaaaa', 'bbbbbbb', 'cccccccc']; // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); const openid = wxContext.OPENID; // 取得当前用户openid return MANAGERS.includes(openid); // 完成鉴权 } [代码] 灵活一些 假如说我们的管理员常年不变，那上面那种鉴权方式完全够用了。但如果我们的管理员经常增删，那就利用云存储功能，建立一个[代码]manager[代码]集合（collection），把管理员的openid存放到文档中（听不明白请看下图）。那么上面硬编码的部分，就改为数据库查询： [代码]// isManager云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 初始化数据库链接 const db = cloud.database(); const _ = db.command; // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); const openid = wxContext.OPENID; // 查询条件 const filter = { openid: openid }; // 等待数据库查询 const count = (await db.collection('manager').where(filter).count()).total; // 检查是不是管理员 return (count === 1); } [代码] 现在管理管理员的方式（没打错字）更灵活了，可以直接打开小程序云开发控制台来添加/删除一个管理员。 [图片] 小程序端调用 在小程序端，我们可以简单包装一个鉴权函数，用callback的方式灵活地用在各种需要鉴权的地方： [代码]function checkManager(callback) { // 这里的callback将接受一个参数res， // 为bool类型，当前用户为manager时为true， // 否则为false // 调用云函数 wx.cloud.callFunction({ name: 'isManager', // 指明云函数的名字，没有形参 }).then(res => { // res是云函数的返回值，形如： // {errMsg: "cloud.callFunction:ok", result: true, requestID: "44b0xxxx-8xxx-xxxx-xxxx-xxxx0068xxxx"} // 其中的result字段是我们所需要的鉴权结果 callback(res.result); }); } [代码] 给定不同的回调函数，就可以简单地完成各种权限控制任务。例如，在某个Page的[代码]onLoad[代码]中控制元素显示： [代码]const that = this; checkManager(res => { if (res) { that.setData({ showBtns: true }); } }) [代码] 上面的鉴权操作，对非管理员用户的影响几乎没有。假如普通用户确实“闯进”了不该进入的页面，也可以简单地在上面加个else分支显示提示。 安全性分析 有了云函数的啥啥啥背书（微信私有协议天然鉴权），我们不用担心用户伪造openid的问题。但是，如果有中间人篡改了服务器发来的消息（说的就是你Mallory），小程序端获得的鉴权结果已经被修改了，那这种鉴权也不太可靠。因此，在一些关键的操作（例如数据库修改）上，鉴权和实际操作都应该放在后端云函数中，一条龙完成。 幸运的是，我们上面实现的[代码]isManager[代码]云函数仍可发光发热，被其他云函数调用。但是，间接调用的云函数无法获取调用者的OPENID（因为调用者不是一个微信用户，而是另一个云函数），我们要对上面的[代码]isManager[代码]函数进行一点点修改： [代码]// isManager云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 初始化数据库链接 const db = cloud.database(); const _ = db.command; // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); const openid = wxContext.OPENID || event.openid; // !! 只修改了这里：如果不能获取openid，就从参数event里取 // 查询条件 const filter = { openid: openid }; // 等待数据库查询 const count = (await db.collection('manager').where(filter).count()).total; // 检查是不是管理员 return (count === 1); } [代码] 其中修改只有一行：[代码]const openid = wxContext.OPENID || event.openid;[代码]，这意味着如果[代码]cloud.getWXContext()[代码]函数返回的结果里不包含openid，那就从调用时给的参数[代码]event[代码]里取（说明当前调用是由其他云函数发起的）。 稍做修改后，在其他云函数中，只需在函数体最前面，增加以下几行，即可完成后端的安全鉴权： [代码]////// 省略一些初始化代码 ////// // 其他需要后端验证的云函数入口 exports.main = async (event, context) => { // 获取调用者的openid const wxContext = cloud.getWXContext(); const openid = wxContext.OPENID; // 用data参数的形式，把openid传给isManager云函数 const isManager = (await cloud.callFunction({ name: 'isManager', data: { openid: openid }})); // 如果不是管理员，直接886 if (!isManager.result) { return { msg: 'not a manager', result: isManager }; } ////// 下面放这个云函数要做的业务逻辑 ////// } [代码] 小总结 本文介绍了在微信小程序云开发环境下，利用云函数中微信背书的openid进行用户鉴权的一种思路。有了管理员鉴权接口、小程序端可以控制页面元素展示、路由访问、接口调用等情况，保护数据安全。目前小程序云开发的资料较少，本文也只是一种简单鉴权的实现思路，肯定还存在许多不足，希望大家多多交流、多多指正！ 广告时间 今年上半年，中山大学四校区合拍的中大猫谱小程序正式开机，我们将与你一起继续扮演云吸猫爱好者、校园猫猫摄影大师、环境保护热心人士，希望大家多多关注，多多支持！ 小程序演示视频请戳：https://v.qq.com/x/page/u0882tecle7.html [图片]

[图片] “2019中国高校计算机大赛·微信小程序应用开发赛”已进入决赛阶段，我们看到了许多同学对小程序的深入思考和精心设计。在每一份成果背后，都是同学们用心专研的结晶，而每一次克服困难的经历都弥足珍贵。此刻，我们迎来了小程序征文活动，鼓励围绕小程序主题的各种经验分享与总结沉淀。这里将是另一个展现自己的舞台，我们期待大家更加出色的表现。 征文范围 学习、开发与运营小程序过程中的经验总结 针对某项小程序能力的深入研究与应用 参加小程序比赛的设计开发思路 结合小程序与特定场景的创新想法或实践 建议参考浏览社区“精选”板块的优秀文章，我们期待你用心分享你和小程序的故事 征文时间    2019年6月3日22:00--2019年6月21日22:00 征文要求 文章内容必须和微信小程序相关 文章必须为本人原创作品，严禁抄袭或洗稿 文章结构清晰、排版整洁，内容有深度 投稿篇数不限，但内容雷同文章不得重复投稿 不得使用征文开始时间前已发布过的文章重复投稿 本次征文对象为在校大学生或参加过“中国高校计算机大赛微信小程序应用开发赛”的大学毕业生 必须使用下述投稿方式投稿 投稿方式 投稿地址：微信开放社区（https://developers.weixin.qq.com/community/） 投稿流程： [图片]  3. 投稿必填项：必须填写文章标签为“征文大学篇”，发表后方视为投稿成功，否则投稿无效；如下图所示： [图片] 评选规则 初审：文章发表后，主办方根据文章质量评选出入围的作品，入围作品将被列入文章的精选板块 终审：为了保证活动的公平公正，主办方会邀请5位微信资深技术专家担任本次活动的终审评委，给所有入围的作品评分，评选出最后的获奖作品 评审标准：文章内容（40%）、技术干货或运营思路（30%）、互动[浏览、收藏与评论、点赞数] （20%）、排版（10%） 奖品安排、公示、发放 [图片] 一等奖（2名）：微信开放社区官方认证“优秀创作者”勋章一枚；限量版微信数码相框1个 二等奖（5名）：微信开放社区官方认证“优秀创作者”勋章一枚；限量版微信跳一跳运动系列套装1份 三等奖（若干）：限量版微信红包抱枕1个 最佳人气奖（1名）：限量版微信logo-T恤1件 最受欢迎奖（1名）：限量版微信黄脸-T恤1件 获奖结果公示：活动结束后一周内在官方公告中发布 奖品发放：结果公示后一个月内发放到作者帐户/邮寄给作者 其他注意事项 本次征文不向参赛个人收取任何费用 获奖作品著作权归作者所有，并授权腾讯基于本次征文活动进行使用、分享、传播 如果对征文有任何疑问，请到微信开放社区“小程序-问题解答”版块发帖咨询 [图片] 关注微信开发者公众号，了解更多活动详情  

个人介绍 大家好，我是Zero，一名大三的前端开发爱好者，目前主要研究微信小程序和iOS开发。 这是第二次参加微信小程序应用开发赛，2018年我们设计了一款通过二维码寻找丢失物品的小程序《蝴蝶寻物》，获得了华北赛区三等奖。 [图片] 今年，在小程序云开发功能的大力推广下，我决定采用云开发的方式，实现一个双人互动打卡互动的小程序《Mango Daily》(中文名称《芒果日常》)。 [图片] 得力于云开发提供的API，本项目在较短的时间内就实现了比较理想的效果。 接下来，我想从项目的立项开始，讲讲我是如何依靠小程序+云开发平台将想法快速实现。 1. 立项 1.1 项目背景 熟悉我的朋友都知道，我是个懒人 😦 ，所以我决定做一个两人互相监督完成目标的小程序。 目前市场上存在的大部分习惯日常类应用是通过个人或者群体打卡，我们更希望互相绑定的两个用户之间去完成一些日常活动。例如在完成自己的每日任务时，可以查看对方的打卡进度，提醒对方及时完成任务；或者可以根据任务为对方制订一套奖励计划，鼓励对方按时完成任务。另外，你可以在广场记录当天完成的任务，发生的故事，这可以只在你与同伴之间分享，也可以设置允许其他人阅读。 1.2 设计 一开始UI是在脑海中浮现的，只是想做一个以芒果色为主，并且能够快速看到对方打卡进度的界面。于是就有了一个以芒果色和树叶绿为主的界面。 [图片] 后来进行了第二版的设计，抛去了复杂的颜色组合，采用更简洁的设计，同时自定义了部分组件。 [图片] 1.3 技术准备 在去年的项目中，我们采用ThinkPHP开发了一套API系统，其中需要实现小程序的授权登录，设置鉴权来保证数据安全等操作。整个过程只有我一名开发人员，所以大致就是“先搞定后端，其次搞定界面，最后进行联调”的一个过程。 后来在云+社区看到一篇文章：《1个开发如何撑起一个过亿用户的小程序》，觉得确实可以通过新的方式去尝试一下前后端分离的开发过程。通读小程序云开发文档之后，发现并不需要学习新的技术，就可以快速上手。 这是第一次使用Serverless实现一款作品，打开了我创作应用的大门。 这次使用了 Teambition 来做任务看板，由于是个人开发维护，所以简单的 ‘ToDo, Doing, Done’ 模式就完全够用了。 [图片] 2. 开发 Mango Daily 使用的是小程序原生开发+云开发结合的方式进行开发的。 2.1 界面开发 界面没有使用第三方UI框架，而是自己将常用的模块封装成了组件。 [图片] 图中比较核心的模块包括 TabBar、Toast、Modal、Nav等。 [图片] 这里打算介绍一下我自己设计的Toast提示框，通过自定义视图+图片，替换掉了官方的loading，success，failure，warning效果。 在实现该组件的时候，我考虑了两种方案，一是通过普通image组件和设置z-index的方式实现Toast；另一个是使用cover-view组件。之所以考虑这两种方案，是因为我在发布随笔页面会是用到textarea，如果使用方案一会被原生组件遮挡。 自定义TabBar则是使用小程序官方提供的方法去实现的。但是这个方法会在首次切换时出现跳动，页面滑动时错位等问题，后来使用过完全自定义的方式去实现TabBar。 [代码]"usingComponents": { "tabbar": "/components/tabbar/tabbar" } [代码] 在每个需要使用自定义TabBar的页面调用自定义组件。 [代码]<tabbar sIndex="1"></tabbar> [代码] 下图是通过自定义组件实现的一个TabBar： [图片] 另外，Mango Daily中使用CSS3实现了部分动画，考虑到iOS端和安卓端小程序的渲染引擎不同，需要对代码进行兼容性处理。 [代码]/* 淡入 */ .fade-in { animation-name: fade-in; -webkit-animation-name: fade-in; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } [代码] 这是我个人实现的一个动画： [图片] 2.2 云开发 云开发包括云数据库，云函数和云存储。本项目中三个功能均使用到。 2.2.1 云数据库 云数据库是一个非关系型数据库，在实际开发中基本符合本项目的需求。部分表关联查询则是通过分步查询的方式代替。 云数据库已经实现了自动鉴权，可以保证数据的安全性。目前云数据库只支持以下几种权限： 所有用户可读，仅创建者可读写 仅创建者可读写 所有用户可读 所有用户不可读写 默认情况下是***仅创建者可读写***，所以在首次开发时，手动插入的测试数据并不一定可以在前端顺利读取，需要修改集合的权限。 云数据库的调用在前端代码中即可完成。但是从上面几种读写权限来看，并没有办法实现对另一个用户创建的数据进行修改或者删除的操作(当然这也是非常不可取的)，于是云函数就派上用场了。 2.2.2 云函数 我理解的云函数，则是跑在云端的一个函数脚本文件。 在接触云开发之前，如果我们想要去调用微信公众平台提供的API(例如发起退款、发送模板消息等)，则需要在后端代码去实现，然后只需要给前端返回一个JSON表示请求状态即可。或者想要去实现上述描述中，修改一条由他人创建的数据的功能时，都是有后端工程师去完成的。 在本次开发中，我深刻体会到了云函数的强大，以及微信公众平台工程师设计产品的严谨性。 Mango Daily用到了微信公众平台的模板消息功能，所以需要在合适的时机请求微信官方提供的API。 因为取消了后端的开发，所以一开始打算直接在小程序端去请求官方API。但是失败了。因为此请求涉及APPKEY等重要信息，禁止在前端直接请求。这样就可以通过云函数去代替先前的后端开发，最后将状态返回给小程序端即可。 另外，云函数对云数据库有更高的操作权限，所以想要修改、删除他人生成的数据时，云函数可以直接进行操作。 云函数还提供定时触发功能，不过在本项目中暂未涉及。 2.2.3 云存储 本次开发省去了使用其他服务商的存储服务，全部得力于云存储功能。云存储允许上传多种文件类型，像图片、音频等文件还可以直接在小程序端调用。这里我们使用云存储实现了文章插图的功能。 [图片] 2.3 优化 2.3.1 全局配置 之前在某个项目中实现过国际化功能，即按照不同使用地区显示中英文的操作。这里我沿用了之前的设计，将代码中所有的提示文字提取到一个文件中，在wxml中使用变量代替文字。这样处理之后，文案可以集中管理。 全局文案配置文件： [图片] js文件 [代码]const app = getApp(); Page({ data: { text: app.text.calendar, } // ... }) [代码] wxml文件 [代码]<!-- 保存 --> <view class="btn-bg"> <view class='finish-btn mango-bg' bindtap="editHabit">{{ text.editHabit }}</view> </view> <!-- 保存 end --> [代码] 2.3.2 数据层封装 Mango Daily 数据操作进行了两次封装，一层是对云数据库API进行封装，第二层是每一个数据集合都对应一个Manager管理层。 以用户集合 User，Article 为例，项目中的结构如下： util |- db.js manager |- Article.js |- User.js db.js 是对云数据库API的封装，实现了增删查改等操作，以更新数据为例。 [代码]/** * 更新数据 */ const update = (collection, _id, data) => { return new Promise((resolve, reject) => { if (!exist(collection)) { reject(401, resCode[401]); } db.collection(collection).doc(_id).update({ data: data }).then(res => { resolve(res); }).catch((code, msg) => { reject(code, msg); }); }); } [代码] Article.js 是文章集合的管理类，同样实现了增删查改等操作，不过其是基于 db.js 进行扩展的。以更新文章操作为例： [代码]/** * 更新 */ const update = (_id, data) => { return new Promise((resolve, reject) => { db.update(collection, _id, data).then(res => { resolve(res); }).catch((code, msg) => { reject(db.errMsg); }); }); } [代码] 之所以封装两层，是想尽量减少Page对象中对云数据库的直接调用。这样在页面js文件中只需要调用某一个Manager提供的函数即可。 2.3.3 后台上传策略 Mango Daily还实现了发送模板消息的功能，这就涉及到了FromID的收集。目前FromID的收集大部分采用埋点的方式。 如果每次采集到新的FromID都直接上传到数据库存储，可能会造成网络资源的浪费，所以需要选择合适的时机上传数据。 在本项目中，每次采集到FromID，首先存到 globalData 中，当小程序进入后台状态时，再进行数据的上传。 app.js 中的实现： [代码]/** * 后台监听 */ onHide: function() { this.uploadFormID(); }, /** * 上传token */ uploadFormID: function() { let ids = this.globalData.formIds; if (ids.length == 0) { return ; } let formId = ids.pop(); this.push.upload(formId).then(_ => { console.log("上传formID:" , formId); this.uploadFormID(); }).catch(err => { console.log(err); }); }, [代码] 3. 维护 很遗憾，这一部分可能没有太多需要写的。 在18年的项目中，需要考虑数据库的维护问题。但是使用了云开发之后，Serverless的优点就表现出来了。我无须将太多的精力放在后端的维护上。 4. 总结 在本次项目开发中，我深刻体会到了云开发的便捷性。无须自己实现鉴权，对接第三方存储。数据方面，增删查改功能非常方便。云开发提供的种种便利，让我在有新创意的时候，优先选择小程序+云开发的方式去实现。 [代码]你好，你的小程序涉及用户自行生成内容的发布/分享/交流，属社交范畴，为个人主体小程序未开放类目，建议申请企业主体小程序 [代码] 另外，Mango Daily中的随笔功能属于用户自行生成内容功能，所以在上架的时候，个人开发者账号是不被允许的，所以在考虑上架产品的时候，请按照实际情况酌情考虑选择账号主体类型。 2019.6.21补充：很遗憾，本项目没有进决赛。后续加油啦！