官网:https://uniapp.dcloud.net.cn/
github :https://github.com/dcloudio/uni-app
uni-app 入门教程:https://www.5axxw.com/wiki/content/41fkvm
uniapp 可视化开发 --- 前端开发工具、组件库集合:https://blog.csdn.net/weixin_28839699/article/details/112352421
Uni-App从入门到实战-黑马程序员杭州校区出品:https://www.bilibili.com/video/BV1BJ411W7pX
在线 即使设计 工具:https://js.design/
uni-app 设计资源:https://uniapp.dcloud.io/component/uniui/resource.html
1、uni-app 介绍
uni,读 you ni,是统一的意思。uni-app 即 统一 app,写一次代码,在各个平台都可以运行。
uni-app
是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
uni-app 是免费并且属于Apache2.0开源协议的产品。DCloud 官方承诺 HBuilderX、uni-app 面向全球程序员永久免费。HBuilderX 是 uni-app 的官方 ide
uni-app 学习成本高吗?基于什么技术栈?
uni-app 简单来说是:vue的语法 + 小程序的api。
它遵循Vue.js语法规范,组件和API遵循微信小程序命名,这些都属于通用技术栈,学习它们是前端必备技能,uni-app没有太多额外学习成本。
有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app 。
没学过 vue 的同学,也不用掌握 vue 的全部,只需了解 vue 基础语法、虚拟dom、数据绑定、组件、vuex,其他如路由、loader 不用学,cli、node.js、webpack 也不需要学。
如何学习?
- 建议第一步,看完uni-app官网 (opens new window)的首页介绍。
- 建议第二步,通过快速上手 (opens new window),亲身体验下uni-app。
- 建议第三步,看完《uni-app官方教程》 (opens new window),
如果你熟悉h5,但不熟悉vue和小程序
- 看完这篇白话uni-app(opens new window)
- DCloud与vue合作,在vue.js官网 (opens new window)提供了免费视频教程,也可以直达教程地址:https://learning.dcloud.io(opens new window)
- 不需要去专门学习小程序的语法,uni-app 使用的是 vue 的语法,不是小程序自定义的语法。
如果熟悉小程序,但不熟悉 vue,参考三方总结https://segmentfault.com/a/1190000015684864(opens new window)
第三方培训机构视频
目前各大视频学习网站都有不少 uni-app 的学习资源:
- bilibili的uni-app相关视频(opens new window)
- 腾讯课堂的uni-app相关课程(opens new window)
- 网易课堂的uni-app相关课程(opens new window)
- 慕课网uni-app相关课程(opens new window)
如下是三方专业培训机构的视频教程
- 《uni-app 商业级应用实战》 (opens new window),出品人:腾讯课堂NEXT学院。亮点:腾讯课堂官方出品;不懂 vue 的工程师也可快速学习;从入门到实战都包括。
- 《uni-app 跨平台应用开发教程》 (opens new window),出品人:hcoder 刘海君,课时:共25节。亮点:讲师经验丰富,也是graceui框架作者。
- 《uni-app 实战教程 - “悦读”项目实战》 (opens new window),出品人:hcoder 刘海君
- 《uni-app实战社区交友类app开发》 (opens new window),出品人:帝莎IT学院。适用人群:具备Html+Css+Javascript基础知识。
- 《uni-app仿小米商城实战》 (opens new window),出品人:帝莎IT学院。首页使用nvue开发,目前支持app端和小程序端。
- 《uni-app多端调试环境配置》 (opens new window),出品人:帝莎IT学院。
- 《uni-app实战仿微信app全栈开发》 (opens new window),出品人:帝莎IT学院。
- 《uni-app实战视频点播app小程序》 (opens new window),出品人:帝莎IT学院。
- 《uni-app 5小时快速入门》 (opens new window),出品人:meHaoTian
- 《uni-app实战直播app全栈开发》 (opens new window),出品人:帝莎IT学院
- 《uni-app博客实战开发教程》 (opens new window),出品人:卢小兵
- 《uni-app快速入门到社区论坛项目多端开发实战》 (opens new window),出品人:千锋教育
- 《uni-app新手入门》 (opens new window),出品人:蓝桥云课
- 《uniapp 原生插件开发-android》 (opens new window),出品人:朱哲
- 《uniapp 原生插件开发-iOS》 (opens new window),出品人:朱哲
uni-app 相关书籍
-
清华大学出版社:Vue.js核心技术解析与uni-app跨平台实战开发(opens new window)
-
中国铁道出版社:移动应用开发——基于UNI-APP框架(opens new window)
-
中国水利水电出版社:保姆级uni-app多端跨平台开发从入门到企业级实战(opens new window)
-
更多京东售卖的uni-app书籍(opens new window)
如果你是线下培训机构,想开课合作,联系bd@dcloud.io
欢迎更多人分享学习经验,可转载到社区 (opens new window),优秀的文章我们会收录在本文中。
#uniCloud的学习资料
掌握uniCloud,进阶全栈,详见:https://uniapp.dcloud.io/uniCloud/learning(opens new window)
#关于各端的管理规则需要耐心学习
uni-app并不难学,但我们注意到很多新人在适应各个平台的规则限制时比较急躁。
每个端,有每个端的管理规则,这不是uni-app在技术层面上可以抹平的:
- 比如H5端的浏览器有跨域限制;
- 比如微信小程序会强制要求https链接,并且所有要联网的服务器域名都要配到微信的白名单中;
- 比如App端,iOS对隐私控制和虚拟支付控制非常严格;
- 比如App端,Android、国产rom各种兼容性差异,尤其是因为谷歌服务被墙,导致的push、定位等开发混乱的坑;
遇事耐心,不急不躁,虽然这不是成功的唯一要素,但它是你技术路上长远走下去的基础。
#uni-app的底层框架实现原理及优化策略(高级)
通过评测对比 (opens new window),我们知道uni-app的性能比其他小程序开发框架好,但底层原理是什么? 这篇视频就是讲解uni-app框架底层的实现思路和优化策略:《uni-app框架如何实现高性能》
跨端问题汇总 ( 按照 uni 的写法,然后全平台使用 )
每个端有每个端的特点,有的能被抹平,有的不可能被抹平。
注意:跨端,不是把web的习惯迁移到全平台。而是按照uni的写法,然后全平台使用。
:https://uniapp.dcloud.net.cn/matter.html
2、uni-app 教程
- 概念简介
- 工程
- 页面
-
互相引用
- js 语法
- css 语法
-
vue 语法
- ts/typescript 专题
-
编译器(条件编译)
-
web 专题
- 跨域
- 宽屏适配
- SSR 服务端渲染
- 前端网页托管
-
App 专题
-
小程序专题
-
运行和调试
- 高效开发技巧
- 性能优化专题
- 国际化专题
uni-app 开发 app,微信小程序,支付宝小程序入门
首先开发者需先下载安装 HBuilder X ( https://hx.dcloud.net.cn/Tutorial/install/windows )
微信小程序会用到 "微信开发者工具" ( 指南、框架、组件、API、平台能力、服务端、工具 :https://developers.weixin.qq.com/miniprogram/dev/reference/ )。第一次运行需要在 HBuilderX 中配置微信开发者工具的安装路径才能调用。还要配置端口。
使用 HBuilder X 新建项目,选择 uni-app,输入工程名,如:shop,点击创建,即可成功创建 uni-app
新建项目的目录说明
有了初始框架模板之后,运行到浏览器 chrome 就可以打开初始 app hello uni-app,熟悉之后新建页面。
然后在 pages.json 中配置 path 路径,一般新建页面之后会自动添加路径
然后配置全局样式,配置tabbar
运行 app 和 微信小程序
访问本机 http://localhost:8081/#/ 网页查看app
运行微信小程序
页面内容直接调用python开发好的接口来实现轮播图、商品列表、社区图片等功能。
概念简介
工程
页面
互相引用
js 语法
css 语法
vue 语法
ts/typescript 专题
编译器(条件编译)
web 专题
跨域
宽屏适配
SSR 服务端渲染
前端网页托管
App 专题
小程序专题
运行和调试
高效开发技巧
性能优化专题
国际化专题
3、全局文件
- pages.json 页面路由
- manifest.json 应用配置
- App 完整manifest.json
- package.json
- vue.config.js
- vite.config.js
- uni.scss
- App.vue
- main.js
- plugin.json 生成小程序插件
pages.json 页面路由
manifest.json 应用配置
App 完整 manifest.json
package.json
vue.config.js
vite.config.js
uni.scss
App.vue
main.js
plugin.json 生成小程序插件
4、组件 ( 控件 )
组件使用的入门教程
- 组件是视图层的基本组成单元。
- 组件是一个单独且可复用的功能模块的封装。
每个组件,包括如下几个部分:以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
- 组件名称由尖括号包裹,称为标签,它有开始标签和结束标签。结束标签的
<
后面用/
来表示结束。结束标签也称为闭合标签。如下面示例的<component-name>
是开始标签,</component-name>
是结束标签。 - 在开始标签和结束标签之间,称为组件内容。如下面示例的
content
- 开始标签上可以写属性,属性可以有多个,多个属性之间用空格分割。如下面示例的
property1
和property2
。注意闭合标签上不能写属性。 - 每个属性通过
=
赋值。如下面的示例中,属性property1
的值被设为字符串value
。
注意:所有组件与属性名都是小写,单词之间以连字符
-
连接。
- 组件概述
-
内置组件
- uni-app 组件
- 视图容器
- view
- scroll-view
- swiper
- match-media
- movable-area
- movable-view
- cover-view
- cover-image
-
基础内容
-
表单组件
-
路由与页面跳转
-
媒体组件
-
地图
-
画布
-
webview
-
广告
- uniCloud-db云数据库
-
页面属性配置节点
- 基础组件中原生组件说明
- 视图容器
- Vue 组件
-
NVUE 组件
-
小程序组件
- uni-app 组件
-
扩展组件(uni-ui)
- ui 设计资源
- datacom 组件规范
- 组件库选型指南
5、API
uni-app
的 js API 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。
标准 ECMAScript 的 js 仅是最基础的 js。浏览器基于它扩展了 window、document、navigator 等对象。小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。node 也扩展了 fs 等模块。
uni-app 基于 ECMAScript 扩展了 uni 对象,并且 API 命名与小程序保持兼容。
-
基础
-
网络
-
路由与页面跳转
-
数据缓存
-
位置
-
媒体
-
设备
- Worker
-
键盘
-
界面
-
页面和窗体
-
文件
-
绘画
-
广告
-
第三方服务
- uniCloud
-
其他
基础
网络
路由与页面跳转
数据缓存
位置
媒体
设备
Worker
键盘
界面
页面和窗体
文件
绘画
广告
第三方服务
uniCloud
其他
6、插件
uni-app
积极拥抱社区,创建了开放、兼容的插件系统。
-
uni-app插件市场 (opens new window),有数千款插件,支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型。在生态建设上远远领先于竞品。
-
兼容 微信小程序 JS SDK
丰富的小程序生态内容可直接引入uni-app
,并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK,由于大量SDK厂商均原厂维护小程序SDK,使得uni-app
成为跨平台开发框架里生态最丰富的平台参考(opens new window)
- 兼容 微信小程序自定义组件
小程序自定义组件是一种ui组件,uni-app里可以在App、H5、微信小程序、QQ小程序同时兼容微信小程序自定义组件,参考(opens new window)
-
兼容 NPM 包管理系统
-
兼容 weex 插件生态
uni-app内置了weex
,weex
的原生插件或ui库均可使用。注意weex
的生态不如uni-app
丰富,一般情况建议使用uni-app
的插件市场。
- 兼容 普通 web 库
uni-app
的H5端支持所有浏览器API。但众所周知,由于小程序的js不运行在浏览器里,所以小程序里不支持 HTML 和 DOM 的 API。
uni-app
的App端虽然和小程序是相同的架构,逻辑层也运行在独立jscore
而不是浏览器里,但App端和小程序还是有区别的: 一方面可通过web-view组件加载HTML,引入web相关库; 另一方面可通过renderjs实现在渲染层执行js,此时完整echart
、threejs
等web库均可使用。 (但为了全端使用,仍然建议减少对dom库的依赖,在uni-app
的插件市场可寻找全端兼容的库来替代)
- App端支持各种调用原生能力的方式
- 支持 原生混合开发
- 支持 比小程序能力更多的plus JSAPI(opens new window)
- 支持 Native.js (opens new window)直接调用原生api
- 支持 原生插件扩展(opens new window)
- 支持 云打包原生插件 (opens new window)。
- App端支持双渲染引擎
uni-app
逻辑层在独立jscore,而渲染层可选webview渲染和weex引擎渲染。
- 使用webview渲染则整个架构与小程序相同,此时页面后缀为vue文件。
- 使用weex引擎(经过改造)渲染,则整个架构与快应用相同,此时页面后缀为nvue文件。使用webview渲染时,可以指定由系统webview渲染还是由x5引擎渲染。
- 插件全景描述
- 插件市场介绍
- uni_modules
- 原生插件
-
插件作者专区
插件全景描述
插件市场介绍
uni_modules
原生插件
插件作者专区
7、工程化
uni-app 支持较为完整的工程化支持,主要包括:
- 版本管理控制:如git/svn
- cli脚手架
- 运行环境管理
- 自动化测试
- 持续集成
- Git/SVN
- cli 脚手架
- 运行环境管理
-
自动化测试
- 持续集成