Uniapp云开发（Uniapp入门）

前言：
今天这篇文章主要讲解的是Uniapp云开发基础，有了Uniapp云开发，我们就不用需要后端，前端自己就可以实现增删改查。还有就是案例很重要，一定要看，自己去尝试运行试试。

目录超详细

一. 什么是Uniapp云开发

uniCloud 是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。
我们之前学习过小程序云开发，那么Uniapp云开发如何操作呢？接下来我们就对如何操作进行讲解。

二. Uniapp云开发详细步骤

1. 新建一个Uniapp项目

（选uniapp项目，创建项目名称，下面记得勾选uniCloud ）

2. 创建云服务器空间

当没有关联云服务空间的时候，会显示下图的状态

点击uniClound右键关联云空间，创建关联的同时，点击新建云空间。
创建云空间完成之后，右键打开uniCloud Web控制台

打开之后，我们需要创建一个服务空间，这里我们选择免费即可（只可以用一次）

三. 云函数

我们需要先创建一个云函数，右键新建云函数，输入云函数名称，创建即可。

上传云函数（右键上传部署即可，一点要记得上传）

接下来就需要我们在页面调用
uniCloud.callFunction()

进行云函数编写

四. 云数据库

1.创建数据库

右键打开uniCloud Web控制台，找到云函数库，点击新建数据表，填写表的名称即可，在这里我创建的是feedback,大家可以随意起名字。

2. 新增数据。（JSON格式）

点击添加记录，在记录内容里面输入json格式的内容

3.表结构

我们可以点击右侧的表结构，你会发现你的permission权限是false，就是说你是没有读取，创建，更新，删除等权限的。所以我们在学习的时候一定要修改它的权限._id是系统自动生成的，我们可以添加两个字段，username用户名，tel电话号码。你也可以根据需要，添加字段。

下载表结构，右键，下载所有DB Schema这一步是可选的
（但是当我们用官网的表时候，一定要记得下载）

4.运行项目

这里我们需要选连接云端函数

5.展示数据（前端）

五. uniapp云开发案例

我们已经了解了uniapp的基本操作，那我们就一起找些例子练练手吧.

案例1 实现添加与删除功能。

在pages下面新建一个页面，这里取名为add。页面里面写入input组件以及button按钮。然后在methods方法里面写点击的方法。
这里用到了==easyinput ==组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能。
当然我们的index里面也是需要写内容的

这里我们长按，可以选择是否删除数据.

@longpress.native="$refs.udb.remove(item._id)" 

add页面代码

<template><view><uni-easyinput v-model="item.username" placeholder="用户名"/><uni-easyinput v-model="item.tel" placeholder="电话"/><button @click="addConcat">添加</button></view></template><script>exportdefault{data(){return{item:{username:"",tel:""}}},methods:{addConcat(){var db = uniCloud.database();
                db.collection("feedback").add(this.item).then(res=>{
                        uni.showToast({title:"添加成功"})}).catch(err=>{
                        uni.showModal({content: err
                        })})}}}</script><style></style>

index页面代码 udb可以快捷生成代码，ulist也可以快捷生成,需要下载uni-ui插件，导入到自己的项目中。

<template><view class="content"><button @click="call">呼叫服务器</button><unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="feedback"><view v-if="error">{{error.message}}</view><view v-else><uni-list><uni-list-item link :to="'/pages/update/update?item='+JSON.stringify(item)"
                        @longpress.native="$refs.udb.remove(item._id)" v-for="item in data":key="item._id":title="item.username":note="item.tel"></uni-list-item></uni-list></view></unicloud-db></view></template><script>exportdefault{data(){return{title:'Hello'}},onLoad(){},onShow(){if(this.$refs &&this.$refs.udb){this.$refs.udb.refresh()}},methods:{call(){
                uniCloud.callFunction({name:"base",data:{name:"sjz",age:18}}).then(res=>{
                        uni.showModal({content:JSON.stringify(res.result)})}).catch(err=>{
                        console.log(err);})}}}</script><style></style>

案例2 实现更新功能

新建一个update页面。我们点进入列表内容，修改里面内容，然后点击更新，列表内容会自动更新。但此时需要写一个方法，它才会自动更新跳转到列表页面。
在unicloud-db里面写ref=“udb”，再在onshow里面写入如下代码，才会实现自动刷新

onShow(){if(this.$refs &&this.$refs.udb){this.$refs.udb.refresh()}},

update代码

<template><view><uni-easyinput v-model="item.username" placeholder="用户名"/><uni-easyinput v-model="item.tel" placeholder="电话"/><button @click="updateConcat">更新</button></view></template><script>exportdefault{data(){return{item:{username:"",tel:""}}},onLoad(option){this.item =JSON.parse(option.item)},methods:{updateConcat(){var item ={...this.item
                };delete item._id;const db = uniCloud.database();
                db.collection("feedback").doc(this.item._id).update(item).then(res=>{
                        uni.showToast({title:"更新成功"})
                        uni.navigateBack()}).catch(err=>{
                        uni.showModal({title:JSON.stringify(err)})})}}}</script><style></style>

案例3 schema2code实现通讯录功能，添加民族功能，省市级联功能

如何利用自动生成代码呢？
首先我们去官网选择其他下面的模板，然后点击下载

然后回到我们的代码页面，点击下载所有DB Schema

再找到我们的内容，进行修改，修改完成一定要上传DB Schema

右键schema2code 这一步要执行，不然容易报表关联错误

这里几个的方法是类似的，我们需要注意，选择合并即可。

代码如下，我们只需要在opendb-contacts.schema.json
中添加两端代码，一个是民族的，一个是省市级联的，
其他的都是自动生成，完全不需要我们手写，很是方便。

"nation":{"bsonType":"string","title":"民族","order":2,"enum":{"collection":"opendb-nation-china","field":"_id as value,name as text"},"foreignKey":"opendb-nation-china._id"},"adress":{"bsonType":"string","title":"地区","order":2,"enum":{"collection":"opendb-city-china","field":"code as value,name as text"},"foreignKey":"opendb-city-china.code","enumType":"tree","componentForEdit":{"name":"uni-data-picker"}},

到底啦，希望对你有帮助哦