uni-app云开发基础保姆级教程

什么是uni-app云开发

uni-app云开发，也叫uniCloud，uniCloud是由Dcloud联合阿里云，腾讯云推出的，基于serverless的，跨全端的、用js开发服务端的云产品

uni-app云开发的优点

• 免运维，更省心
• 服务器成本更低
• 轻松上手，入门低
• 开发效率加倍提升

使用uni-app云开发

创建uni-app项目

创建云服务器空间

创建云服务器之前，没有实名认证的话，会优先进行实名认证，上传身份证等信息，跟着系统操作即可。云服务器创建完毕后，需要等待大概十分钟的系统初始化，然后才能使用云服务器。

云函数

• 右键，新建云函数

• 右键，上传部署云函数

• 页面调用

			call(){
				uniCloud.callFunction({
					name:"base",
					data:{username:"mumu",age:18}
				})
				.then(res=>{
					uni.showModal({
						content:JSON.stringify(res.result)
					})
				})
				.catch(err=>{
					console.log(err);
				})
			}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 云函数编写

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	
	//返回数据给客户端
	return {...event,msg:"你好，云对象"}
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

云数据库

• 创建云数据库

• 新增数据（JSON格式）
  
• 表结构

• 下载表结构（可选）

运行项目

连接云函数

展示数据（前端）

	<view class="content">
		<button @click="call">呼叫服务器</button>
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="concat">
			<view v-if="error">{{}}</view>
			<view v-else>
				<!-- {{data}} -->
				<uni-list>
					<uni-list-item 
					link
					:to="'/pages/update/update?item='+(item)"
					@="$(item._id)"
					v-for="item in data" :key="item._id" :title="" :note=""></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

一键生成代码

• 创建项目什么的与之前一样
• 第一步、右键关联云服务空间
  
• 第二步、根据需要创建数据库（这里以城市和民族为例）
  
  
• 第三步、选中database，右键下载所有DB Schema及扩展校验函数

这里注意，弹框弹出的内容一定要选择跳过，不管什么都选择跳过，否则会覆盖之前的内容

• 第四步、按需配置需要的文件
  

• 第五步、在配置文件页面右键选择第一个schema2code
  
  如果没有这个选项，右键配置文件点击下载插件schema2code即可，然后再执行上面的第五步
  

• 第六步、上传（不能忘记了，要不然后边页面渲染会报错）
  

• 第七步、这时就会发现，pages文件夹里会多出来一个opendb-contacts文件夹，选择里边的list.vue文件，运行到内置浏览器即可，如果出现页面渲染有问题，可尝试重启Hbuildx或者项目解决