uni-app云开发

uniCloud 是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。

云开发web控制台地址   https://unicloud.dcloud.net.cn

• 开发成本大幅下降、开发效率大幅提升、上线和迭代速度大幅提速；
• 如果你是新创公司，将无需雇佣php或java等服务器工程师，每年至少节省几十万；
• 如果你已拥有掌握php和js的全栈，那么改用新的技术栈，一样可以大幅提升开发效率、降低成本；
• 你只需专注于你的业务，其他什么服务器运维、弹性扩容、大并发承载、防DDoS攻击，全都不需要操心；
• 除了开发成本，云资源租用成本也将大幅下降
• 如果不发布Web版，你将不需要购买备案域名。小程序和App可以免域名使用服务器；

uni-app的使用

--- 创建一个云函数项目

 --- 代码里边的各项内容

--- 关联云服务空间

在关联云服务空间时候必须要先登录HBuilder而且注册云空间的开发者

--- 在控制台操作

第一次进入需要创建账号，并且需要申请开发者，在申请完开发者，接着创建云空间

 --- 在云函数库里创建一个空云函数表【JSON格式】

 点击上边的名字后进入这个页面，如果需要一个空的云函数表则无需选择其他，填入名称A后点击创建

--- 创建第一条数据

创建第一条数据的时候，需要注意，这里的数据是json格式的

 

 --- 配置表结构

注意：如果要实现增删改查，需要在里边的false变为true

在配置表结构时，需要注意前边你创建第一条数据时写了那些数据名称，例如name，tel需要在表结构中显示，否则会导致你使用的时候值没有出现。

 --- 使用云空间

 在关联时如果没有这个名称，需要你去创建，点击新增会跳转到创建页面。

--- 页面创建云函数

 

在index.js里边

'use strict';
exports.main = async (event, context) => {
    //event为客户端上传的参数
    console.log('event : ', event)
    
    //返回数据给客户端
    return {...event,msg:"来自云空间的问候"}
}; 

在pages/index.vue里边【运行在内置浏览器】

<template>
    <view class="content">
        <button @click="call">呼叫服务器</button>
        <unicloud-db ref="udb"
         v-slot:default="{data, loading, error, options}" collection="concat">
            <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>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        onShow(){
            if(this.$refs&&this.$refs.udb){
                this.$refs.udb.refresh();
            }
        },
        methods: {
            call(){
                uniCloud.callFunction({
                    name:"base",
                    data:{name:"lwwx",age:18}
                })
                .then(res=>{
                    uni.showModal({
                        content:JSON.stringify(res.result)
                    })
                })
                .catch(err=>{
                    console.log(err);
                })
            }
        }
    }
</script>

<style>
    
</style>
 

效果

自动生成模板

创建一个通讯录的表

注意：如果要实现增删改查，需要在配置的false变为true

下载到本地 

 

 找到下载最新的通讯录.json

自动生成代码

找到opendb-contacts.schema右键找到schema2code

然后点击下载插件

接着在这个页面里右键点击schema2code，一直下一步下一步，就完成自动生成代码

会在pages里边生成代码

 如果需要修改样式，在内容里边改就行了，自动生成嘎嘎香！！