微信小程序·云开发初体验

栏目: 编程工具 · 发布时间: 6年前

内容简介:简介:2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?想想还有点小激动了呢!2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?啥?我膨胀了吗?我骄傲了吗?我嘴角流口水了吗?只是想想还有点小激动了呢!

微信小程序·云开发初体验

简介:2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?想想还有点小激动了呢!

2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?啥?我膨胀了吗?我骄傲了吗?我嘴角流口水了吗?只是想想还有点小激动了呢!

微信小程序·云开发初体验

好了,好了,后端童鞋可以放下手里的刀了,这个微信小程序的云开发暂时还无法全面取代你们在微信端的地位,但是!不得不说给前端开发带来了很大的便利,值得前端童鞋们一探究竟。

1.什么是云开发?

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

也就是说,对于一些小程序,我们无需后端搭建服务器,提供数据库,整个项目完全可以由前端开发者来完成。这意味着前端开发者无需考虑如何构建服务器之类的工作,即可完成整个微信小程序了。

2.云开发功能简介

好了,叨叨了这么多,想必你已经迫不及待的要揭开它神秘的面纱了。

2.1 云开发基本步骤

(1)俗话说“巧妇难为无米之炊”,首先要做的就是下载微信提供的最新开发工具,网址为您奉上:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18101520
(2)在启动界面,选择”建立云开发快速启动模板”,就可以看到下面的开发平台了:

微信小程序·云开发初体验

其中,系统默认会建立两个文件夹,分别为:

– cloudfunctions 默认存放云函数的文件夹

– miniprogram 默认存放业务代码的文件夹

如果你觉得,这是神马名字,能不能起个高大上的名字。只有私人订制版的名字,才能衬托我无与伦比的高贵气质~

比如说:李狗蛋和王钢柱…

微信小程序·云开发初体验

敲黑板,注意了,当你修改名字后,一定要记得在 project.config.json 中对应修改云函数和程序的路径,否则小程序无法找到对应的入口文件而报错。

2.2 云开发切换环境

细心的童鞋可能发现,云函数的文件夹后面带有一个 cloud-demo 的小尾巴,这个是当前云函数使用的云环境。云环境有啥用处呢?

由于云开发是实时上线更新的,假如你已经上线了一版小程序,在本地开发的时候,实时修改该环境下的数据库和云函数逻辑,那么使用同一环境的线上小程序也会变来变去,再想想用户一脸茫然的看着自已动来动去的小程序界面,很调皮是不是?

好在,微信给每位开发者提供了两套环境:

环境之大,

一次用不下,

一个上线,

一个开发!

微信小程序·云开发初体验

每套环境的数据库/云函数都是相互独立的,只有在测试环境检查的没有问题了,再部署到线上。那么问题又来了,如何切换使用的云环境呢?

右击云函数文件夹,如果之前切换过环境的话,会出现两个候选环境,如果之前没有切换过,则选择更多设置,如下图所示在新打开的界面中选择当前要使用的环境即可。

微信小程序·云开发初体验

好了,环境准备好后,让我们开始愉快的(踩坑)开发之旅吧!

3.云开发的三大”拦路虎”

曾经有位名人“沃·滋基硕德” 这样教导我们:“你在奔向成功的路上总是会遇到困难,不要伤心,慢慢就习惯了!”

微信小程序·云开发初体验

云开发包括三大主要内容:云函数,数据库,存储管理,相当于拦路虎一样,横跨在我们面前,在使用过程中需要注意哪些事项呢?让我娓娓道来:

3.1 大虎:云函数

何为云函数?

云函数是一段运行在云端的代码,无需管理服务器,在开发 工具 内编写、一键上传部署即可运行后端代码。

我们可以在代码区域的云函数文件夹,右击新建 node.js 函数,之后平台会提示我们是否安装依赖:

微信小程序·云开发初体验

如需在云函数中操作数据库、管理云文件、调用其他云函数等操作,可使用官方提供的 npm 包 wx-server-sdk 进行操作。值得注意的是,一旦忘记安装依赖,在 mac 系统下,则没有挽回的入口,不是说好了,浪子回头金不换吗?连个后悔机会也不给人家!!还好我们可以曲线救国,在本地文件中,找到该云函数的文件夹,打开 CMD 终端执行下面的命令:

npm install --save wx-server-sdk@latest
 
 

然后再上传部署该云函数,这样就可以引入依赖了。

云函数的使用方式如下:

exports.main = (event, context) => {
let { userInfo, a, b} = event
let { openId, appId} = userInfo // 这里获取到的 openId 和 appId 是可信的
let sum = a + b
return {
openId,
appId,
sum
}
}
 

其中 event 包含了小程序端调用该函数时传过来的参数,同时还包含了用户登录态 openId 和小程序 appId 信息;

context 对象包含了此处调用的调用信息和运行状态,可以用它来了解服务运行的情况。

这里比较重要的是 openId ,客户端的每个用户都会有自己的 openId ,服务端可以根据这些 openId 来区分用户。然而,当我们满心欢喜的想跑通上面获取 openId 的示例时,却发现报错了:

微信小程序·云开发初体验

看错误提示是没有获取到 login 这个云函数,但是打开云开发平台,该云函数明明存在的呀?而且这是官方给的的示例,怎么会出错呢?

这时,停下来来思索一下,因为有两套开发环境,是不是还需要定义小程序端调用的云环境呢?

想到这里茅塞顿开,于是在 app.js 文件下初始化云函数的时候,定义好要使用的云开发环境:

wx.cloud.init({
env: '使用云开发环境的ID',
traceUser: true
}
 

类似的,云函数在初始化时,同样需要对云开发环境进行定义,

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: 'demo-id'
})
const db = cloud.database();
exports.main = async (event, context) => {
return db.collection('todos').get()
}
 

这样,上面的云函数就是调用了 ‘demo-id’ 云环境下的 todos 集合的数据了。注意的是,该调用的环境可以和当前开发环境不是同一套环境。

3.2 二虎:数据库

数据库的界面如下图所示:

微信小程序·云开发初体验

改变数据库有四种方法:

– 1.云开发平台添加记录;

– 2.云开发平台导入数据;

– 3.微信小程序端改变数据库;

– 4.云函数端改变数据库;

正所谓“尺有所短,寸有所长。物有所不足,智有所不明”。这四种方法,各有优点:

(1)云开发平台添加记录,简单方便,不足之处在于,每条数据都要逐条输入,不方便;

(2)云开发平台导入数据,可以同时导入大量的数据,快速。注意的是,导入的json数据和常规的 json 格式不同,按照对象分割,并且对象之间不存在逗号,如下所示:

{
"_id":"todo-identifiant-aleatoire",
"_openid":"user-open-id",
"description":"learn cloud database",
"done":false
}
{
"_id":"todo-identifiant-aleatoire-2",
"_openid":"user-open-id",
"description":"write a novel",
"done":false
}
 

(3)小程序端改变数据库,往往携带业务逻辑,但是受到各种权限的限制。小程序端新增的数据,都会默认带有 _id(用以唯一标志一条记录) 和 openid(用以标志记录的创建者,即小程序的用户)。这样,根据数据库中保存的 openid ,可以区分不同的用户。反过来,某位用户也无法操作其他用户的数据,从而保证了数据的稳定性。

(4)云函数端改变数据库,和小程序端类似的,云函数提供函数名称 name,供小程序调用。下面就是小程序端调用云函数的方法:

wx.cloud.callFunction({
name: ‘云函数名字',
data: {
//传入云函数的参数
},
success: res => {
//调用成功后的函数
},
fail: err => {
//调用失败后的函数
}
})
 

可以看出,云函数也可以带有业务逻辑,不同于小程序端对数据库的操作,云函数是运行在服务端的,具有至高无上的权利—— 弃 openid 如敝履,置权限于不顾,随心所欲的对数据库进行增!删!改!查!

综上所述,我们可以使用在云开发平台的导入功能,初始化 json 数据,利用云开发平台的添加修改功能,对数据进行细节的调整,之后使用微信小程序端操作数据库,向数据库中增加数据,可以自动引入 openid 来区分用户数据,最后如果想获得更大的权利,就使用云函数对数据库进行操作,再把调用的权限抛给小程序端。

3.3 三虎:存储管理

云开发平台上最后一位拦路虎是云存储管理,它不吵不闹,来者不拒的接收着要保存的数据。其界面如下图所示

微信小程序·云开发初体验

从上图看出,通过“上传文件”按钮,可以在云开发控制台上传文件。此外,可以通过微信小程序的 uploadFile 函数,上传文件。谨记,一定要使用新建文件夹来规范划分存储的数据,否则后期大量的存储文件将是你挥之不去的噩梦。

图中 fileId 即是文件的存储地址,无论是从云开发平台还是从客户端上传的文件,系统都会自动分配给每个文件对应的 fileId。当然也可以通过微信小程序的 uploadFile 函数,上传文件。下面的云函数代码就使用了存储管理中保存的文件,返回给小程序端调用:

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const fileList = [
'cloud://cloud-demo-c5b56e.636c-cloud-demo-c5b56e/swiperImg/img_1.jpg',
'cloud://cloud-demo-c5b56e.636c-cloud-demo-c5b56e/swiperImg/img_2.jpg',
'cloud://cloud-demo-c5b56e.636c-cloud-demo-c5b56e/swiperImg/img_3.jpg'
]
const result = await cloud.getTempFileURL({
fileList: fileList,
})
return result.fileList
}
 

上面解释了文件在云端保存的地址,那么在小程序端把文件上传到云存储中的地址又是什么呢?

假如在小程序端,实现本地的图片上传到云服务器的功能,首先要获取本地文件的临时路径:

wx.chooseImage({
//选择手机图片
chooseEvt(){
let that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths[0];
that.setData({
chooseImg: tempFilePaths
})
that.uploadImg(tempFilePaths);
}
})
}
 

下面是上传到服务器的代码:

uploadImg(tempFilePaths){
let str = tempFilePaths;
let name = str.split('.').reverse()[1] +'.'+str.split('.').reverse()[0];
let names = name.split('//')[1];
let that = this;
wx.cloud.uploadFile({
cloudPath: 'swiperImg/'+names,
filePath: str, // 小程序临时文件路径
success: res => {
that.setData({
imageId: res.fileID
})
},
fail: err => {
console.log(err)
}
})
}
 

其中 wx.cloud.uploadFile 带有的参数 cloudPath 就是上传到服务器的存储地址。既然上面示例中已经给出了结果,我也就不卖关子了,cloudPath 使用的是相对地址,而不是存储地址 “cloud://cloud-demo-c5b56e.636c-cloud-demo-c5b56e/swiperImg/”。另外上传文件的名字为了避免自己定义,使用了上传文件本身的名字。但是!要注意的是, 手机端和电脑端上传文件的路径是不一样的, 我们来看一下,在电脑端上传图片,得到的文件临时地址 tempFilePaths 是

"http://tmp/wx81c95cafc368ba2d.o6zAJsxvC5wiHIIVQOpRPFVOADDM.NLBDb9oLxX1D1f412643685c68c106d42e1757f77691.png"
 

而手机端得到的 tempFilePaths 则是:

"wxfile://tmp_wx81c95cafc368ba2do6zAJsxvC5wiHIIVQOpRPFVOADDMNLBDb9oLxX1D1f412643685c68c106d42e1757f77691.png"
 

可以看出,除了文件头不一样外,手机端得到的地址并没有中间的 “·”,假如像上面的代码一样,按照 “·” 进行分割地址,则手机端得到的 name 就会带有 wxfile:// ,这样保存到云端存储的时候就会一直提示 cloudPath 路径不对,但是在电脑端调试的时候,由于返回的图片临时路径带有多个 “·”, 就不会出现这问题,话说,第一次遇到这个问题的时候,一度怀疑是不是云函数还需要走什么上线流程,才能在手机端看到效果呢。

4.说说心里话

微信云开发功能,给前端带来独立开发微信小程序的能力。一经发布,便引起广大开发者的关注。由于推出的不久,在开发过程中还有些问题无法找到类似的解答,只能不断的翻阅官方文档和调试。当然还有官方提供的论坛[1],只是如果着急想要得到解答,还是要靠自己。

好了,说了这么多,其实官方文档中的 API,大多都没有介绍。文末给出了官方文档的链接[2],里面说的很是详细了。 本文旨在使用云开发过程中,总结分享遇到的哪些问题,抛砖引玉,期待各位走过路过的童鞋留言,说一说你在使用微信小程序中的心得。

最后,欢迎各位搜索“全站探索”公众号,我们是一群喜欢技术,钻研技术的人,每周都会推送精美的文章,期待您的关注!

扩展阅读

[1] 微信小程序官方论坛

https://developers.weixin.qq.com/community/develop?idescene=2

[2] 微信小程序云开发文档

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

文章来源于 全栈探索 微信公众号,扫描下面二维码关注:

微信小程序·云开发初体验


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ES6 标准入门(第2版)

ES6 标准入门(第2版)

阮一峰 / 电子工业出版社 / 2016-1 / 69.00元

ES6(又名 ES2105)是 JavaScript 语言的新标准,2015 年 6 月正式发布后,得到了迅速推广,是目前业界超级活跃的计算机语言。《ES6标准入门(第2版)》是国内仅有的一本 ES6 教程,在前版基础上增补了大量内容——对标准进行了彻底的解读,所有新增的语法知识(包括即将发布的 ES7)都给予了详细介绍,并且紧扣业界开发实践,给出了大量简洁易懂、可以即学即用的示例代码。 《......一起来看看 《ES6 标准入门(第2版)》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具