【小程序】云开发从零到一搭建流程

环境准备

开发者账号注册

[https://mp.weixin.qq.com/](https://mp.weixin.qq.com/)
![APPID获取](https://img-blog.csdnimg.cn/379ddd76fd294fa4bb463f93809f4de4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5b6I6I-c55qE5bCP55m95Zyo5YiG5Lqr,size_20,color_FFFFFF,t_70,g_se,x_16)

按照微信公众平台账号注册流程完成注册，并且在

侧边栏>>开发>>开发管理>>开发设置

中获取AppId和AppSecret，这个两个需要保存一下之后会有很多地方使用到

开发工具安装

[https://developers.weixin.qq.com/miniprogram/dev/api/](https://developers.weixin.qq.com/miniprogram/dev/api/)]
![入口](https://img-blog.csdnimg.cn/79b0a5007c3744c7ae6ca44d0b37cc01.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5b6I6I-c55qE5bCP55m95Zyo5YiG5Lqr,size_20,color_FFFFFF,t_70,g_se,x_16)
![下载](https://img-blog.csdnimg.cn/76db9ceb3e53418db2528fcece741bda.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5b6I6I-c55qE5bCP55m95Zyo5YiG5Lqr,size_20,color_FFFFFF,t_70,g_se,x_16)

安装后是介个样子
然后使用微信扫码进行登录

项目搭建

1. 登录后点击新建项目
2. 配置项目信息
   

云开发环境创建

1. 项目创建成功后在工具栏顶部选择云开发项，就可以进入云开发控制台。
2. 创建数据库表、创建存储文件夹等需要的资源配置

这里简单介绍一下云开发控制台的一些内容

1. 数据库：这里主要是用来创建数据中需要的一些表，里面可以进行索引配置，熟悉数据库的同学一看就明白了，是一个json型数据库。提前声明一下这个控制台中的数据库UI操作有些鸡肋，操作起来很费劲，稳住心态慢慢来。
   
2. 存储：在这个栏中主要是用来存放一些文件或资源，主要实现一些资源的上传保存操作
3. 云函数：这个就比较简单了，其实就是你在代码中写的各种接口，通过发布后就会在云函数中展示出来，这里可以做一些云端测试、接口日志查看

运行第一个Hello World

1. 云开发文档：

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

2. 在cludefuntions文件夹下创建一个helloWorld文件夹，创建完成后会生成一个云函数的模板，我们的代码就写在文件下的index.js中
3. 编写helloWorld接口代码，写完后需要右击文件进行发布，前端才可以调用

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数 ，所有的逻辑代码都在这里面完成
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const helloWorld = 'helloWorld'
  return { // 这里通过 return 关键字统一将数据返回
    helloWorld,
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

4. 创建helloWorld前端文件，在js文件中调用node

wx.cloud.init() // 在前端js文件中初始化cloud
page({
	onLoad(){},
	data:{
		str:'',
	},
	helloWorld(){
		wx.cloud.callFunction({
			name: 'helloWorld', // 云函数名称
			data: {}, // 用于接口传参
          	success:(result)=>{
				this.setData({
					str: result.result.helloWorld
				})
			}
		})
	}
})

demo示例

云开发实现图片上传：demo

结语

本文章编写的初衷也是因为自己从来没有接触过小程序云开发，想要了解一番，文中的 deme ,就是自己使用云开发写的一个例子，内容有些粗糙，各位见谅，不喜勿喷。如今前端越来越强大了，内容也丰富多样，各位前端同志们加油，后续还会有一些文章登场。