uni，universe

简介

uni-app 是一个使用Vue.js 开发所有前端应用程序的框架。开发者可以创建一套代码，发布到iOS、Android、H5、各类小程序（微信/支付宝/百度/今日头条/QQ/钉钉/淘宝）、快应用等平台。

更多uni-app官方文档信息，请访问uni-app官网。

学习uniapp本质

移动技术层出不穷，跨终端框架可能是未来的发展趋势。

开发人员更喜欢将一组代码发布到多个设备。

企业支撑的完整生态

uniapp优势

uni-app和vue的关系

使用vueJS开发

发布到H5时支持所有vue语法

发布到应用程序和小程序时实现一些Vue 语法

uni-app和小程序有什么关系

组件标签接近小程序规范

接口函数（JS API）类似微信小程序开发

完成小程序生命周期

uniapp与web代码编写区别

学习重点

掌握uniapp技术本身，并使其兼容四个平台：Android、IOS、html5、腾讯小程序

完全掌握uniapp前后端开发流程

掌握组件开发的概念

知识点

入门小程序

设置uniapp开发环境

学习uni-app的基础API

学习unicloud云开发平台

紫光云的基本使用

环境配置

高级方法使用

平台适配

微信小程序简介

文档相关

开发文档：微信开放文档

微信公众平台：微信公众平台

开发者工具

下载地址：微信开发者工具下载地址及更新日志| 打开微信文档

使用

所需选项处理

获取应用程序ID

微信公众平台获取appID

小程序代码构成

参考地址：小程序代码结构| 微信开放文档

带有.json 后缀的JSON 配置文件

带有.wxml 后缀的WXML 模板文件

带有.wxss 后缀的WXSS 样式文件

.js 后缀的JS 脚本逻辑文件

小程序基本结构

查看类=\’容器\’

查看class=\’用户信息\’

button wx:if=\'{{!hasUserInfo canIUse}}\’ 获取头像昵称/button

块wx:else

图片src=\'{{userInfo.avatarUrl}}\’ 背景尺寸=\’封面\’/图片

text class=\’userinfo-nickname\'{{userInfo.nickName}}/text

/堵塞

/看法

查看类=\’usermot\’

text class=\’用户座右铭\'{{Motto}}/text

/看法

小程序基本操作

配置信息

全局配置-微信开放文档|

{

\’页\’: [

\’页面/索引/索引\’,

“页面/日志/索引”

\’窗口\’: {

\’navigationBarTitleText\’: \’演示\’

\’标签栏\’: {

\’列表\’: [{

\’pagePath\’: \’页面/索引/索引\’,

\’文本\’: \’主页\’

},{

\’pagePath\’: \’页面/日志/索引\’,

\’文本\’: \’日志\’

}]

\’网络超时\’: {

“请求”: 10000，

‘下载文件’: 10000

“调试”: 正确

页面结构

{

\’navigationBarBackgroundColor\’: \’#ffffff\’,

\’navigationBarTextStyle\’: \’黑色\’,

\’navigationBarTitleText\’: \’微信界面功能演示\’,

\’背景颜色\’: \’#eeeeee\’,

\’backgroundTextStyle\’: \’浅色\’

全局生命周期函数

/**

* onLaunch在小程序初始化完成后触发（全局只触发一次）

onLaunch: 函数() {

/**

* onShow 当小程序启动或从后台进入前台显示时触发

onShow: 函数（可选）{

/**

* onHide 当小程序从前台转到后台时触发

onHide: 函数() {

/**

* 如果小程序内部出现脚本错误或者API调用失败，会触发onError并返回错误信息

onError: 函数（消息）{

}

页面生命周期特性-微信开放文档|

onLoad: 函数（可选）{

//创建页面时执行

onShow: 函数（）{

//当页面被置于最前面时执行

onReady: 函数（）{

//第一次渲染页面时执行

onHide: 函数（）{

//当页面从前台变为后台时执行

onUnload: 函数（）{

//页面销毁时执行

onPullDownRefresh: 函数（）{

//触发下拉更新时执行

onReachBottom: 函数（）{

//当页面到达底部时执行

onShareAppMessage: 函数() {

//当页面被用户共享时执行

onPageScroll: 函数（）{

//页面滚动时执行

onResize: 函数（）{

//当页面大小改变时执行

组件生命周期-微信开放文档|

成分（{

终身：{

创建（）{

console.log(\’已创建，组件实例刚创建时触发created生命周期\’)

随附的（） {

console.log(\’组件进入页面节点树时执行\’);

分离（）{

console.log(\’当组件实例从页面节点树中删除时运行\’);

}

}) 界面跳转

新界面打开=页面路由打开文档|

调用API wx.navigateTo

使用组件导航器open-type=\’navigateTo\’/页面重定向

调用API wx.redirectTo

使用组件导航器返回页面open-type=\’redirectTo\’/

调用API wx.navigateBack

使用组件导航器open-type=\’navigateBack\’

用户按下左上角的后退按钮切换到选项卡。

调用API wx.switchTab

使用组件导航器open-type=\’switchTab\’/

重启切换用户选项卡

调用API wx.reLaunch

组件导航器open-type=\’reLaunch\’/使用数据绑定

查看{{消息}}/查看

页（{

数据：{

message:\’你好\’

}

}) 条件渲染

view wx:if=\'{{isShow}}\’ 条件判断显示/视图

页（{

数据：{

isShow:false

}

}) 渲染列表

查看wx:for=\'{{list}}\’ wx:for-index=\’idx\’ wx:for-item=\’itemName\’

{{idx}}: {{itemName.name}}

/看法

页（{

数据： {

列表：[

{name:\’a\’},

{name:\’b\’}

]

}

})

uniapp开发规范

页面文件遵循Vue 单文件组件(SFC) 规范。

组件标签贴近小程序规范=组件使用入门教程| uni-app官网

模板

看法

页面内容

/看法

/模板

脚本

导出默认值{

数据（） {

返回{

}

方法：{

}

/剧本

风格

/style接口函数（JS API）接近微信小程序规范=uni-app官网|

uni.getStorageInfoSync() 数据绑定事件处理与Vue.js 规范相同

模板

显示@click=\’onClickFn\’

点击事件绑定

/看法

/模板

脚本

导出默认值{

方法：{

onClickFn() {

console.log(\’点击事件\’)

}

/剧本

样式lang=\’scss\’ 范围

/style 兼容多终端操作，使用flex布局进行开发

uniapp开发环境

开发工具

uni-app官方推荐使用HBuilderX来开发uni-app类型的项目。主要优点：

丰富的模板

完美智能提醒

一键执行

下载 HBuilderX

访问HBuilderX 官方主页HBuilderX – 给高效极客的提示

点击主页上的“下载”按钮

选择下载正式版/alpha版-App开发版

解压下载的zip包

将解压后的文件夹保存在纯英文目录下（不能包含括号等特殊字符）。

双击HBuilderX.exe 启动HBuilderX。

详细安装文档：=HBuilderX文档

工程搭建

文件- 新建- 项目

输入项目基本信息

项目创建成功

基本目录结构

项目名

—-[pages] 内部保存所有页面

—-[静态] 存储所有静态资源，如图像、字体、图标

—-[unpackage] 保存所有打包生成的文件

—-app.vue应用程序配置。用于配置应用程序的全局样式并监控应用程序生命周期。

—-main.js Vue初始化入口文件

—-mainfast.json 配置应用名称、appid、logo、版本等包信息。

—-pages.json 配置页面路由、导航栏、选项卡等页面信息。

—-uni.scss 用于促进对应用程序样式的整体控制。例如按钮颜色、边框样式以及一批scss变量预设都在uni.scss文件中预设。

项目运行

浏览器运行

小程序运行

输入您的微信小程序的AppID。

在HBuilderX中配置“微信开发者工具”的安装路径。

在微信开发者工具中，从设置> 安全设置面板打开“微信开发者工具”服务端口。

在HBuilderX中，点击菜单栏上的“运行”>“小程序模拟器运行”>“微信开发者工具”。编译当前Uniapp项目后，会自动运行微信开发者工具，帮助您查看和调试项目的效果。

首次成功运行后的项目效果

app真机运行

确保手机和电脑在同一个局域网

打开手机上的开发者模式

数据管理选择

hbuildeX选择真机运行

等待底座安装

安装完成，手机运行项目

IOS模拟器运行

下载Xcode

定义要在模拟器中运行的版本

组件

文档参考地址：uni-app官网如何使用组件入门教程|

基础组件

基础组件内置于uni-app 框架中，您始终可以直接使用它们（例如在视图中），而无需将内置组件文件导入到项目中或注册内置组件。成分。

组件演示参考地址=https://hellouniapp.dcloud.net.cn/pages/component/view/view

基础组件列表

查看容器

view 查看容器。类似于HTML div。

滚动视图滚动视图容器=滚动视图uni-app 官网

滑动滑块视图容器（例如轮播横幅）

基本内容

图标图标=Uniicon

文本文本

富文本文本

进度条

表单组件（表单）

按钮按钮

复选框多重选择器

编辑器中的富文本输入框

形式形式

输入输入框

标签标签

选择器弹出聊天列表选择器

嵌入选择器视图表单中的聊天列表选择器

无线电单选择器

滑块滑动选择器

开关开关选择器

textarea 多行文本输入框

路由和页面跳转（导航）

导航器页面链接。类似于HTML 的a 标签。

媒体组件

音频音频

相机相机

图像图像

视频视频

组件公共属性集合

除了上面列出的公共属性之外，还有一类以v- 开头的特殊属性，称为vue 指令，例如v-if、v-else、v-for 和v-model。

扩展组件

演示地址：https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view

参考地址：DCloud插件市场

自定义组件

定义组件文件夹下的组件

页面参考组件，无需倒剂量，直接使用即可

其他操作（组件传值、事件绑定与vue相同）

基础API

参考地址：API概述|uni-app官网

API列表

网络请求

uni.request发起网络请求

uni.request 解决网络请求API比较简单的问题，可以使用@escook/request-miniprogram来处理网络请求。

参考地址：@escook/request-miniprogram – npm

小程序不能使用fetch和axios发送网络请求。

测试接口地址：https://study.duyiedu.com/api/herolist

上传下载

uni.unloadFile 上传文件=uni.uploadFile(OBJECT) | uni-app 官网

uni.downloadFile 下载文件

图像处理

uni.chooseImage 从相册中选择照片或者拍照=uni-app官网

uni.previewImage 预览图像

uni.getImageInfo 获取图像信息

数据缓存=uni.setStorage(OBJECT) @setstorage 官网|

uni.getStorage 异步检索本地数据缓存

uni.getStorageSync 同步本地数据缓存

uni.setStorage 异步设置本地数据缓存

uni.setStorageSync 同步设置本地数据缓存

uni.removeStorage 异步删除本地数据缓存

uni.reoveStorageSync 同步本地数据缓存清除

互动反馈=uni.showToast(OBJECT) | uni-app 官网

uni.showToast 显示提示框

uni.showLoading 显示加载提示框

uni.hideToast 隐藏工具提示

uni.hideLoading 隐藏加载提示框

uni.showModal 显示模态框

uni.showActionSheet 显示菜单列表

路由

uni.navigateTo 保持当前页面并跳转到应用程序内的界面。使用uni.navigateBack 返回原始页面。

uni.redirectTo 关闭当前界面并跳转到您应用程序中的界面

uni.reLaunch 关闭所有接口并打开应用内的接口

uni.switchTab 跳转到标签栏页面

页面布局相关

页

页面容器CSS 属性

第：页{

高度：100%;

背景颜色：红色；

}

测量单位

可用单位：px rpx、upx、rem vh vw

导入外部样式文件

使用方式与vue相同

uniapp生命周期

参考地址：uni-app官网

应用生命周期

onLaunch 初始化完成后触发（全局触发一次）

onShow Uniappli 启动或从后台进入前台显示

onHide 当Uniapp 应用程序从前台转到后台时

只能在App.vue上进行监控，其他接口的监控不可用。

页面生命周期

onLoad 监听页面加载（可以获取之前接口传递的参数）

onShow 监听页面的显示，每次页面显示到屏幕上时都会触发。

onReady 监视页面的初始渲染是否完成。

onHide 监听器页面将被隐藏

onUnload 监控页面卸载

onReachBottom 页面滚动到底部事件

组件生命周期

之前的创作

已创建

前安装

随附的

之前销毁

被摧毁

uniApp特色

条件编译

条件编译在编译时使用特殊注释作为标记，注释内的代码根据这些特殊注释针对不同的平台进行编译。

语法

支持条件编译的文件

.vue

.js

.css

页面.json

各种预编译语言文件（.scss、less、stylus、ts、pug等）

条件编译是通过注释来实现的。 js 使用//注释，css 使用/* 注释*/，vue/nvue 模板使用!– comments –;

插件安装

安装scss

您可以使用scss 文件作为示例来安装和使用各种预编译处理器。

下载地址：scss/sass编译-DCloud插件市场

hbuilderX中使用unicloud云开发平台

文档

参考资料：uni-app官网

Web 控制台文档：开发人员中心

传统业务开发流程

前端=后端=运维=发布/上线

云开发平台unicloud的使用

前端=运营/维护=发布/上线

什么是unicloud

uniCloud是DCloud与阿里云、腾讯云合作的云开发平台，为开发者提供基于Serverless模式和JS编程的后端服务。您无需购买和配置服务器，即可快速创建完整的后端服务。

unicloud优点

使用JavaScript 开发整个前端和后端业务

非h5项目可以使用无域名的服务器

敏捷的业务处理。无需单独开发前端和后端。

开发流程

uncloud构成

云数据库

云存储及CDN

可以执行与文件相关的存储操作

参考资料：uni-app官网

创建云函数工程

指定创建Unicloud项目

确保输入Uniapp 应用程序ID appID（确保用户已登录）。

打造云服务空间

若未进行实名认证，您将被重定向至实名认证页面进行实名认证，等待实名认证审核后即可开通服务空间。如果腾讯云实名认证显示您的身份证创建账户过多，您应在腾讯云官网注销未使用的账户。

创建云函数

\’使用严格\’；

//服务器端使用通过nodeJS执行的函数

Exports.main=异步（事件，

context) => {
//event为客户端上传的参数
//context 包含了调用信息及运行状态,获取每次调用的上下文
console.log(\’event : \’, event)

//返回数据给客户端
return {
\”code\”:0,
\”msg\”:\”云函数调用成功\”
}
};
云WEB控制台查看

云数据库操作

在云数据库中进行数据操作，全部使用双引号进行值的定义

云存储

在云存储中进行文件的上传

api使用：

uniCloud.uploadFile({})
跨域处理
参考文档uni-app官网

unicloud api操作

云函数调用

参考文档：简介@intro | uniCloud

// promise方式
uniCloud.callFunction({
name: \’test\’, // 云函数名称
data: { a: 1 } // 请求参数
})
.then(res => {});

// callback方式
uniCloud.callFunction({
name: \’test\’,
data: { a: 1 },
success(){}, // 成功
fail(){}, // 失败
complete(){} // 完成（不管成功与失败）
});

云函数实现云数据库基本增删改查

获取数据库引用

const db = uniCloud.database()
获取数据库集合引用
const collection = db.collection(\’unicloud-test-714\’) // uncloud-test-714 为数据表名称新增记录
const res = collection.add({user:\’alan\’})
\’use strict\’;
const db = uniCloud.database() // 获取数据库引用

exports.main = async (event, context) => {
// 获取集合引用
const collection = db.collection(\’unicloud-test-714\’)
// 新增数据
const res = await collection.add({user:\’alan\’})
console.log(res)
return {
\”code\”:0,
\”msg\”:\”云函数调用成功\”
}
}; 删除记录
const res = await collection.doc(\’60ee51103b7d3500014124c1\’).remove() 数据更新
const res = await collection.doc(\’60ee52a1827eca0001e56bc4\’).update({
name:\”joob\”
})

const res = await collection.doc(\’60ee52a1827eca0001e56bc4\’).set({ // 如果说获取不到内容，从新进行插入记录的操作
name:\”joob\”,
type:\”javascript\”
})

update与set的区别：

当没有找到指定记录时，使用update无法进行更新操作，set在没有查找到指定记录的时候，可以进行新增内容的操作（不存在进行创建添加操作）

数据查找
// 查询全部
const res = await collection.get()
// 指定条件进行查询-id查询
const res = await collection.doc(\’id\’).get() // id为需要查询的指定id
// 指定条件查询-其他条件进行查询
const res = await collection.where({name:\”alan\”}).get()

云存储操作

使用uni.chooseImage方法进行图片选择获取
参考地址：uni-app官网
uni.chooseImage({
count: 1,
success(res) {
console.log(JSON.stringify(res.tempFilePaths))
}
}) 使用uniCloud.uploadFile进行文件上传
参考文档：uni-app官网
uni.chooseImage({
count: 1,
async success(res) {
let result = await uniCloud.uploadFile({
filePath:res.tempFilePaths[0],
cloudPath:\’a.jpg\’,
success(res) {
console.log(res)
},
fail(err) {
console.log(err)
}
});
}
}) 使用uniCloud.deleteFile进行图片删除
参考文档：uni-app官网
阿里云函数删除不能在客户端进行删除操作，下列代码在云函数中进行使用
let result = await uniCloud.deleteFile({
fileList:[\’https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6ce25980-c28e-4e78-bdef-a96eb40ad98b/06a1cb3a-84b7-47a0-b554-8aff299cb255.jpg\’],
});
console.log(result)

发布-wap端发行打包

打包参考地址：manifest.json 应用配置 | uni-app官网

unicloud网页托管配置

使用unicloud前端网页托管的话需要进行安全域名配置