本文主要讲解如何使用 [代码]uni-app[代码] 和 [代码]uniCloud[代码] 云开发，实现唐诗300首列表和详情，不需要后端，跨全端开发。 什么是 uni-app [代码]uni-app[代码] 是一个使用 [代码]Vue.js[代码] 开发所有前端应用的框架，开发者编写一套代码，可发布到[代码]iOS[代码]、[代码]Android[代码]、[代码]Web[代码]（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 什么是 uniCloud [代码]uniCloud[代码] 是 [代码]DCloud[代码] 联合阿里云、腾讯云，为开发者提供的基于 [代码]serverless[代码] 模式和 [代码]js[代码] 编程的云开发平台。 uniCloud 的价值 对于程序员，从此你又get一个新技能，用熟悉的js，轻松搞定前后台整体业务。 对于开发商： 开发成本大幅下降。不用再雇佣php或java等服务器工程师，每年至少节省几十万； 你只需专注于你的业务，其他什么服务器运维、弹性扩容、防DDoS攻击，全都不需要操心; 如果不发布H5版，你将不需要购买备案域名。小程序和App可以免域名使用服务器； 对于敏捷性业务，前后端分离的沟通成本实在没有必要。可以考虑按业务负责分工，而不是按前后台分工。 准备工作 安装 [代码]HBuilderX-Alpha[代码]（虽然uni-app支持vscode等其他ide开发，但因为uniCloud对安全性要求极高，仅支持使用HBuilderX开发）。 注册 [代码]uni-app[代码] 账号https://unicloud.dcloud.net.cn/login并登录，如果已登录，可以跳过。 官方 [代码]uniCloud[代码] 详情文档：https://uniapp.dcloud.net.cn/uniCloud/README 创建服务空间 这里我选择阿里云，因为阿里云免费并且可以创建多个，名字按规则和需求起一个。我这里起名叫 [代码]miniserver[代码] [图片] 创建好之后，这里可以看到 [图片] 点击详情，进入云空间，创建数据库 [图片] 这里表名，按规则和需求起一个，在创建的时候，不能自定义表结构，只能选模板里面的。 [图片] 在创建好后，可以选中刚刚创建的数据表，选择表结构，点击编辑，就可以修改表结构了. [图片] 这里以唐诗300首为例。表结构如下，详情请看官方文档：https://uniapp.dcloud.net.cn/uniCloud/schema [代码]{ "schema": { "bsonType": "object", "required": [ "title", "text", "author" ], "properties": { "_id": { "description": "存储文档 ID（文章 ID），系统自动生成" }, "title": { "bsonType": "string", "description": "标题" }, "text": { "bsonType": "string", "description": "正文" }, "author": { "bsonType": "string", "description": "作者" }, "translation": { "bsonType": "string", "description": "译文" }, "appreciation": { "bsonType": "string", "description": "赏析" } } }, "data": [], "index": [] } [代码] 到此云数据库就创建好了，下面来使用云数据库和云函数 新建项目和关联云空间 首先，在 [代码]HBuilderX[代码] 创建一个项目，这里起名为 [代码]tangshi[代码]，项目类型要选 [代码]uni-app[代码]，启用 [代码]uniCloud[代码] 选择你刚刚创建云空间时选的服务商，这里选阿里云。 [图片] 选择你刚刚创建的云空间，下一步，然后再点完成，项目就创建好了 [图片] 项目目录，如下 [图片] 使用云数据库 创建云函数 [代码]cloudfunctions[代码] 目录，只有创建了这个目录之后，才能创建云函数，创建完目录，需要右击项目名称，选择刷新，才能看到。官方云函数文档：https://uniapp.dcloud.net.cn/uniCloud/cf-functions [图片] 右击 [代码]cloudfunctions[代码]，在菜单中选择新建云函数 [图片] 然后编写代码如下： [代码]'use strict'; const db = uniCloud.database(); exports.main = async (event, context) => { //event为客户端上传的参数 const collection = db.collection('tangshi') // 获取表'tangshi'的集合对象 const res = await collection.limit(event.limit).skip(event.offset).where({ title: new RegExp(event.keyWord) }).get() // 获取表中的10条数据，结果为json格式 return res // 返回json给客户端 }; [代码] 运行云函数时配置运行测试参数 - 在云函数的上传运行菜单或右键菜单中，有[代码]配置运行测试参数[代码]的功能。 [代码]// 本文件中的json内容将在云函数【运行】时作为参数传给云函数。 // 配置教程参考：https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=runparam { "limit": 20, "offset": 10, "keyWord": "" } [代码] 在云函数目录右键运行云函数，也可以在云函数编辑器里，按 [代码]Ctrl+r[代码] 运行快捷键，或点工具栏的运行 [图片] 此时云函数运行会携带所配置的运行参数 [图片] 在项目中调用云函数，官网文档 https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=callbyfunction 列表页 [代码]<template> <view class="content" v-if="!loading"> <view class="ts-search"> <input class="ts-search__input" placeholder="请输入诗名" @input="fuzzyQuery" /> </view> <view class="ts-list" v-for="item in data" :key="item._id" @click="read(item._id)"> <view class="ts-title"> <text class="ts-name">{{item.title.split('/')[0]}}</text> <text class="ts-dynasty">[{{item.dynasty}}]</text> <text class="ts-author">{{item.author}}</text> </view> <view class="ts-desc">{{ item.text.split('\n')[0] }}</view> </view> </view> </template> <script> let data = [] export default { data() { return { data: [], loading: false } }, onLoad() { this.list() }, methods: { list(e) { this.loading = true uni.showLoading({ title: '加载中' }); uniCloud .callFunction({ name: 'list', data: { limit: 300, offset: 0, keyWord: e ? e.detail.value : '' } }) .then(res => { // console.log(res.result.data, 0) data = res.result.data this.data = res.result.data uni.hideLoading(); this.loading = false }) }, /** * 使用test方法实现模糊查询 */ fuzzyQuery(e) { const reg = new RegExp(e.detail.value) const arr = [] for (let i = 0; i < data.length; i++) { if (reg.test(data[i].title)) { arr.push(data[i]) } } // console.log(arr) this.data = arr }, read(id) { uni.navigateTo({ url: `/pages/read/index?id=${id}` }) } } } </script> <style lang="scss" scoped> @import 'style.scss'; </style> [代码] 效果如下 [图片] 详情页 [代码]<template> <view class="content" v-if="!loading"> <view class="ts-title">{{ detail.title }}</view> <view class="ts-author">[{{ detail.dynasty }}] {{ detail.author }}</view> <view class="ts-content" v-for="item in (detail.text || '').split('\n')" :key="item">{{ item }}</view> <view class="ts-subtitle" v-if="detail.translation">译文</view> <view class="ts-desc" v-if="detail.translation">{{ detail.translation }}</view> <view class="ts-subtitle" v-if="detail.appreciation">赏析</view> <view class="ts-desc" v-if="detail.appreciation">{{ detail.appreciation }}</view> </view> </template> <script> export default { data() { return { detail: {}, loading: false } }, onLoad(option) { this.read(option.id || '5f64c4cca2a89f21dbd4fd66') }, methods: { read(id) { this.loading = true uni.showLoading({ title: '加载中' }); uniCloud .callFunction({ name: 'read', data: { id } }) .then(res => { // console.log(res.result.data[0], 1) this.detail = res.result.data[0] || {} uni.setNavigationBarTitle({ title: `${this.detail.title} - 作者${this.detail.author}` }) this.loading = false uni.hideLoading(); }) } } } </script> <style lang="scss" scoped> @import 'style.scss'; </style> [代码] 效果如下 [图片] 运行和发布 运行、发布uni-app，详情 发布小程序的时候，小程序中使用uniCloud的白名单配置，上传所有云函数。右击 [代码]cloudfunctions[代码] 选择： [图片] 总结 [代码]uniCloud[代码] 跨平台全端支持，从pc到h5，从Android到iOS，以及各家小程序快应用，十几个平台全端支持，引用官方 https://uniapp.dcloud.net.cn/uniCloud/faq 使用 [代码]uniCloud[代码] 开发小程序，就免去购买域名和服务器的麻烦了，目前使用阿里云是完全免费的（每个账号最多允许创建50个服务空间），腾讯云是按需收费。具体：https://uniapp.dcloud.net.cn/uniCloud/price H5中使用uniCloud的跨域处理 https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=useinh5 至此，使用 [代码]uni-app[代码] + [代码]uniCloud[代码] 简单快速的创建项目示例，就结束了，感兴趣的可以一起讨论。