一吻搞定uniApp及关联uniCloud开发（二）

使用代码块

为提升开发效率，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.scope.page.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 
根目录

关联云服务空间

中间省略创建过程，创建需要个人认证或公司认证等，认证完了，便可以点刷新，开始关联，如下

创建云函数

注意：

• 不同项目使用同一个服务空间时，不可使用同名云函数，可以在uniCloud的web控制台手动删除重名云函数释放函数名。
• 在HBuilderX创建云函数时，如果新云函数与服务器上已存在同名云函数，会用新函数覆盖。
• 单个云函数大小限制为10M（包含node_modules）
• 云函数内使用commonjs规范，不可使用import、export，参考：commonjs模块

编写云函数

加入数据库代码

上传云函数

上传完后，看下平台如下

运行和调试云函数

\

其他详细用法见：

运行和调试云函数

手机端调用云函数