一吻搞定uniApp及关联uniCloud开发

如何学习UniApp

是什么

是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台

需要什么知识储备

快速上手

使用HBuilderX

是什么：HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载链接：

官方IDE下载地址

新建项目

选择项目

选择模板，后面如果此基础上开发，最好是选择默认模板，后面也好加东西
选择vue版本，选择新的吧，毕竟是新项目，以新为基础
是否启用unicloud ，看名字应该是对应uniapp的服务端，可以根据自己的情况，选择阿里云或腾讯云
是否上传GitCode托管平台（由CSDN提供），建议不选，如果你之前是用GitCode那就选吧

下一步，如下提示，点击安装即可

点击安装后，即可创建，如下，登录下

注册登录需要邮箱认证

链接

dev.dcloud.net.cn/

登录完成后开始项目生成

项目最终这样

先运行下

第一次运行，可能需要编译，有点慢刚开始，我第一次运行没找到浏览器，点运行后，先等待一会吧，多点几次就出来了。

配置AppId，这个AppId是uniapp的标识

解决办法也很简单，点击如下图所示即可

项目目录探究

由于我创建项目时选择uniCloud，所以该项目中生成服务器相关的代码，其他渠道所知，uniapp可以直接调用服务器的代码，不需要单独开发一套服务端api，这个也是对于快速迭代的app，提供了不错的支持，很方便

├── App.vue 类似Android Application，有整个App生命周期

├── index.html 加载main.js

├── main.js 加载 App.vue

├── manifest.json 配置文件

├── pages 存放页面代码的地方

│ └── index

│ └── index.vue 首页代码

├── pages.json 页面配置

├── static 存放图片的地方

│ └── logo.png

├── uni.scss 常用样式

├── uniCloud-aliyun 关联阿里云服务

│ ├── cloudfunctions 云函数

│ └── database 数据库

│ └── JQL查询.jql

└── uni_modules 公共模块依赖

├── uni-config-center

│ ├── changelog.md

│ ├── package.json

│ ├── readme.md

│ └── uniCloud

│ └── cloudfunctions

│ └── common

│ └── uni-config-center

│ ├── index.js

│ └── package.json

└── uni-id

├── changelog.md

├── package.json

├── readme.md

└── uniCloud

└── cloudfunctions

└── common

└── uni-id

├── LICENSE.md

├── index.js

└── package.json

如何调试

打开内置浏览器的控制台的 Sources 栏，可以给 js 打断点调试

如上图中，与Android调试没有什么区别，找到对应代码，打断点，重新加载页面即可调试。

如果是App端的调试，前转移：关于 App 的调试debug

如图

使用代码块

为提升开发效率，HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块中，如图所示：

在 template 标签内输入u，就会有很多提示，可以选择对应组件，在script标签下输入uShowToast回车，会生成如下代码：

uni.showToast({
  title: '',
  mask: false,
  duration: 1500
});

Tag代码块支持如下：

uButton
uCheckbox
uGrid：宫格，需引用uni ui
uList：列表，需引用uni ui
uListMedia
uRadio
uSwiper
......

几乎各种组件不管是内置组件还是uni ui的组件，均已封装为代码块，在HBuilderX的vue代码template区域中敲u，代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-vue代码块的左侧列表查阅所有。

除组件外，其他常用代码块包括：

viewfor：生成一段带有v-for循环结构的视图代码块
vbase：生成一段基本的vue代码结构

同样还有JS代码块

uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay
......

几乎各种常用js api，均已封装为代码块，在HBuilderX的js代码中敲u，代码助手会提示所有可见列表。也可在HBuilderX菜单工具-代码块设置-js代码块的左侧列表查阅所有

vue js 代码块

vImport：导入文件
ed：export default
vData：输出 data(){return{}}
vMethod：输出 methods:{}
vComponents：输出 components: {}

其他常用js代码块

iff：简单if
forr：for循环结构体
fori：for循环结构体并包含i
funn：函数
funa：匿名函数
rt：return true
clog：输出："console.log()"
clogvar：增强的日志输出，可同时把变量的名字打印出来
varcw：输出："var currentWebview = this. $scope.page.$ getAppWebview()"
ifios：iOS的平台判断
ifAndroid：Android的平台判断

预置代码块不满足需求的话，可以自定义代码块，教程参考

ask.dcloud.net.cn/article/359…

VUE-CLI命令行

新建项目

文档

如何使用UniApp开发小程序

关联微信小程序运行

先配小程序AppID，这样在关联小程序运行后，生成的小程序即可携带对应的AppId，便于在小程序开发模拟器中运行查看效果。如图中配置

点击运行

点击如上后会编译生成unpackage目录，在项目的根目录下

发布微信小程序

申请微信小程序AppID，参考：微信教程

在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。
在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程

uniCloud开发

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

uniCloud 的 web控制台地址：

unicloud.dcloud.net.cn

player.bilibili.com/player.html…

什么是serverless？

真正的云

什么是真正的云

没有机器，不用装操作系统、web服务器、数据库等
按需付费
系统自动承载更高并发

快速上手

对于老的uni-app项目，可以对项目点右键，菜单中选择“创建uniCloud云开发环境”如图

uniCloud云开发环境创建成功后，项目根目录下会有一个带有云图标的特殊目录，名为“uniCloud”

HBuilderX 3.0目录介绍

	
┌──uniCloud-aliyun                    云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
|   |——— cloudfunctions               云函数目录
|   |   │───common                    云函数公用模块目录 
|   |   |   └──hello-common           云函数公用模块
|   |   |      │──index.js            公用模块代码
|   |   |      └──package.json        公用模块package.json
|   |   │───uni-clientDB-actions
|   |   │      └──new_action.js       clientDB action代码 
|   |   └───function-name             云函数目录
|   |         │──index.js             云函数代码
|   |         └──package.json         包含云函数的配置信息，如url化、定时设置、内存等内容 
│   └──database                       云数据目录
│         │──validateFunction         数据库扩展校验函数目录
│         │   └──new_validation.js    扩展校验函数代码 
│         │──db_init.json             db_init.json初始化数据库文件，其中不再包含schema 
│         └──xxx.schema.json          数据表xxx的DB Schema 
根目录