UNIAPP 技术分享(1)
uni-app 介绍
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。
uni-app 继承自 Vue.js,提供了完整的 Vue.js 开发体验。
uni-app 组件规范和扩展api与微信小程序基本相同。
有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ,开发出兼容多端的应用。
uni-app提供了条件编译优化,可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。
uni-app打包到App时仍然使用了5+引擎,5+的所有能力都可以在uni-app中可以使用。在App端运行性能和微信小程序基本相同。
对于技术人员而言:不用学那么多的平台开发技术、研究那么多前端框架,学会基于vue的uni-app就够了。
对于公司而言:更低成本,覆盖更多用户,uni-app是高效利器。
uni-app多端演示
为方便开发者体验uni-app的组件、接口、模板,DCloud发布了Hello uni-app演示程序(代码已开源,详见Github),Hello uni-app实现了一套代码,同时发布到iOS、Android、微信小程序。
一、什么是 UNIAPP,介绍 UNIAPP 用途和技术基本原理。
- uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
- 据 DCloud 称, uni-app 在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
- 据 DCloud 称,很多人以为小程序是微信先推出的,其实 DCloud 才是这个行业的始作俑者。DCloud于2012年开始研发小程序技术,优化webview的功能和性能,并加入W3C和HTML5中国产业联盟,推出了HBuilder开发工具,为后续产业化做准备。2015年,DCloud正式商用了自己的小程序,产品名为“流应用”,它不是B/S模式的轻应用,而是能接近原生功能、性能的动态App,并且即点即用。
功能架构图:
- 编译到小程序能力通过缝合美团前端团队的mp-vue实现。
- 原生渲染能力通过缝合阿里巴巴团队的weex实现。
- uniapp提供向微信小程序看齐的内置组件和api。
得益于双线程模型导致的渲染性能劣势,uniapp使用webview渲染APP时性能亦不如传统的5+Hybrid模式
二,如何创建运行发布项目?介绍通过命令行创建项目、运行或发布到各平台
1)全局安装 vue-cli:
npm install -g @vue/cli
2)创建项目:
vue create -p dcloudio/uni-preset-vue 项目名称
3)运行项目:
npm run dev:%PLATFORM%
4)发布项目:
npm run build:%PLATFORM%
三、开发规范
uni-app 使用vue的语法结合小程序的标签和API。 为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范,详见uni-app 组件规范
- 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
- 为兼容多端运行,建议使用flex布局进行开发
示例:
以下是一个简单的Uni-app示例代码,用于创建一个包含一个按钮的页面,并在按钮点击时弹出一个提示框:
<template>
<view class="container">
<view class="content">
<text class="title">Welcome to Uni-app!</text>
<button @click="showAlert">Click Me!</button>
</view>
</view>
</template>
<script>
export default {
methods: {
showAlert() {
uni.showToast({
title: 'Hello Uni-app!',
icon: 'none'
});
}
}
}
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
text-align: center;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007AFF;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #0056b3;
}
</style>
什么是 uni-app
uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台,几乎覆盖所有流量端。
uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。
使用 uni-app 的前置条件
不要认为uni-app 可以跨多端,就感觉开发难度会直线上升。如果说,你开发过小程序,恰好又会vue, 那么你的学习成本会非常的低。如果你原生小程序与vue 都没有接触过的话,我建议你花一些时间,看一看他们的官方文档。再回来学习uni-app。
为了更好的跨端开发, 参考uni-app 统一规范:
页面组件我们要遵循Vue 单文件组件 (SFC) 规范
组件标签靠近微信小程序规范
接口能力(JS API)靠近微信小程序规范
数据绑定及事件处理靠近Vue.js 规范,同时补充了App及页面的生命周期
为兼容多端运行,建议使用flex布局进行开发
开发工具
毫无疑问,首选使用官方推出的HBuilderX 编辑器
可视化的方式比较简单,HBuilderX 内置相关环境,开箱即用,无需配置node 。
文件夹 PATH 列表
│ ├─code
│ │ ├─hello-uni
│ │ │ │ App.vue
│ │ │ │ main.js
│ │ │ │ manifest.json
│ │ │ │ pages.json
│ │ │ │ uni.scss
│ │ │ │ unpackage
│ │ │ │
│ │ │ ├─cnponents
│ │ │ │ │ a.vue
│ │ │ │ │ b.vue
│ │ │ │ │ test.vue
│ │ │ │ │
│ │ │ │ └─uni-calendar
│ │ │ │ calendar.js
│ │ │ │ uni-calendar-item.vue
│ │ │ │ uni-calendar.vue
│ │ │ │ util.js
│ │ │ │
│ │ │ ├─pages
│ │ │ │ ├─contact
│ │ │ │ │ contact.vue
│ │ │ │ │
│ │ │ │ ├─detail
│ │ │ │ │ detail.vue
│ │ │ │ │
│ │ │ │ ├─home
│ │ │ │ │ home.vue
│ │ │ │ │
│ │ │ │ ├─index
│ │ │ │ │ index.vue
│ │ │ │ │
│ │ │ │ ├─list
│ │ │ │ │ list.vue
│ │ │ │ │
│ │ │ │ ├─message
│ │ │ │ │ message.vue
│ │ │ │ │
│ │ │ │ ├─navigator
│ │ │ │ │ navogator.vue
│ │ │ │ │
│ │ │ │ └─uni-style
│ │ │ │ a.css
│ │ │ │ uni-style.vue
│ │ │ │
│ │ │ └─static
│ │ │ │ logo.png
│ │ │ │
│ │ │ ├─fonts
│ │ │ │ iconfont.css
│ │ │ │ iconfont.eot
│ │ │ │ iconfont.svg
│ │ │ │ iconfont.ttf
│ │ │ │ iconfont.woff
│ │ │ │ iconfont.woff2
│ │ │ │
│ │ │ └─tabs
│ │ │ contact-active.png
│ │ │ contact.png
│ │ │ home-active.png
│ │ │ home.png
│ │ │ message-active.png
│ │ │ message.png
│ │ │
│ │ └─hm_shop
│ │ │ App.vue
│ │ │ main.js
│ │ │ manifest.json
│ │ │ pages.json
│ │ │ uni.scss
│ │ │ unpackage
│ │ │
│ │ ├─cnponents
│ │ │ ├─goods-list
│ │ │ │ goods-list.vue
│ │ │ │
│ │ │ ├─news-item
│ │ │ │ news-item.vue
│ │ │ │
│ │ │ └─uni-goods-nav
│ │ │ uni-goods-nav.vue
│ │ │
│ │ ├─pages
│ │ │ ├─cart
│ │ │ │ cart.vue
│ │ │ │
│ │ │ ├─contact
│ │ │ │ contact.vue
│ │ │ │
│ │ │ ├─goods
│ │ │ │ goods.vue
│ │ │ │
│ │ │ ├─goods-detail
│ │ │ │ goods-detail.vue
│ │ │ │
│ │ │ ├─index
│ │ │ │ index.vue
│ │ │ │
│ │ │ ├─member
│ │ │ │ member.vue
│ │ │ │
│ │ │ ├─news
│ │ │ │ news.vue
│ │ │ │
│ │ │ ├─news-detail
│ │ │ │ news-detail.vue
│ │ │ │
│ │ │ └─pics
│ │ │ pics.vue
│ │ │
│ │ ├─static
│ │ │ │ hmlogo.png
│ │ │ │ logo.png
│ │ │ │
│ │ │ └─icon
│ │ │ cart-active.png
│ │ │ cart.png
│ │ │ home-active.png
│ │ │ home.png
│ │ │ member-active.png
│ │ │ member.png
│ │ │ news-active.png
│ │ │ news.png
│ │ │
│ │ └─util
│ │ api.js
│ │
│ ├─大纲
│ │ │ uniapp基础知识.md
│ │ │
│ │ └─images
│ │ 2view.png
│ │ create.jpg
│ │
│ ├─素材
│ │ │ bz.png
│ │ │ download.zip
│ │ │ HBuilderX.2.4.6.20191210.full.zip
│ │ │ heima_shop_server.zip
│ │ │ hmlogo.png
│ │ │ 项目接口文档.md
│ │ │
│ │ ├─fonts
│ │ │ iconfont.css
│ │ │ iconfont.eot
│ │ │ iconfont.svg
│ │ │ iconfont.ttf
│ │ │ iconfont.woff
│ │ │ iconfont.woff2
│ │ │
│ │ ├─font_nav
│ │ │ demo.css
│ │ │ demo_index.html
│ │ │ iconfont.css
│ │ │ iconfont.eot
│ │ │ iconfont.js
│ │ │ iconfont.json
│ │ │ iconfont.svg
│ │ │ iconfont.ttf
│ │ │ iconfont.woff
│ │ │ iconfont.woff2
│ │ │
│ │ ├─icon
│ │ │ cart-active.png
│ │ │ cart.png
│ │ │ home-active.png
│ │ │ home.png
│ │ │ member-active.png
│ │ │ member.png
│ │ │ news-active.png
│ │ │ news.png
│ │ │
│ │ └─tabs
│ │ contact-active.png
│ │ contact.png
│ │ home-active.png
│ │ home.png
│ │ message-active.png
│ │ message.png
│ │
注意事项
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
- 页面文件遵循 Vue 单文件组件 (SFC),
也就是必须单文件组件的形式编写页面组件 - 标签靠近小程序规范,详见uni-app 文档
也就是用小程序的组件写页面标签 - 接口能力(JS API)靠近微信小程序规范,详见文档
例如 uni.request(...) - 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
例如 onLoad、onShow、onHide等 - 为兼容多端运行,建议使用flex布局进行开发
一个uni-app工程,默认包含如下目录及文件:
uni-app 在发布到H5时支持所有vue的语法;
发布到App和小程序时,由于平台限制,无法实现全部vue语法,但uni-app仍是是对vue语法支持度最高的跨端框架。
相比Web平台, Vue.js 在 uni-app 中使用差异主要集中在两个方面:
新增
:uni-app除了支持Vue实例的生命周期,还支持应用启动、页面显示等生命周期受限
:相比web平台,在小程序和App端部分功能受限,具体参见文档。
https://uniapp.dcloud.io/use
uni-app App 端内置 HTML5+ 引擎
我们用 js 可以直接调用丰富的手机端原生能力。
使用H5+ API的时候,需要注意一些内容,详见文档
https://uniapp.dcloud.io/use-html5plus
作为一个跨了这么多端的集大成者,没有点坑是不可能的
详情参见文档,实际的坑,尤其是app端,其实远不止这么多
不过uni-app发展迅速,相信这些问题很快会得到解决
https://uniapp.dcloud.io/matter
动手尝试一下
1、下载hubuildX工具
2、在点击工具栏里的文件 -> 新建 -> 项目:
3、选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。
4、运行方式一,浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。
5、运行方式二,真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。
6、运行方式三,在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
7、在HBuilderX工具栏,点击发行,选择原生app-云端打包,如下图:
8、发布为H5网页应用
在 manifest.json 的可视化界面,进行如下配置(发行在网站根目录可不配置应用基本路径),此时发行网站路径是 http://www.xxx.com/h5,如: https://uniapp.dcloud.io/h5。
在HBuilderX工具栏,点击发行,选择网站-H5手机版,如下图,点击即可生成 H5 的相关资源文件,保存于 unpackage 目录。