DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。
2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。
为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。
360手机助手率先接入，在其3.4版本实现应用的秒开运行。
随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多开发者为流应用平台提供应用。
在2015年9月，DCloud推进微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，以及分享了webview体验优化的经验。
微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。
DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。
部分公司接入了联盟标准，但更多公司因利益纷争严重，标准难以统一。
技术是纯粹的，不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。
造成混乱的局面非DCloud所愿。于是我们决定开发一个免费开源的框架。
既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台差异。
这，就是uni-app的由来。
- 因为多年积累，所以DCloud拥有800多万开发者，并不意外
- 因为DCloud一直都有小程序的iOS、Android引擎，所以uni-app的App端和小程序端保持高度一致，并不意外
- 因为DCloud在引擎上的持续投入，所以uni-app的App端功能、性能比大多数小程序引擎都优秀，并不意外
- 因为DCloud对各家小程序太了解了，所以做好抹平各端差异的跨端框架，并不意外
现在，uni-app已经是业内最风靡的应用框架，支撑着12亿活跃手机用户的庞大生态。
uni-app概述：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。
uni-app特点：
1、跨更多平台
2、一套代码，多平台运行
3、运行体验好，性能高
4、开发生态、周边生态丰富（组件丰富）
5、通用技术栈，学习/开发成本低，
运行项目
在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机
注意：
- 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
- 微信开发者工具在设置中安全设置，服务端口开启
介绍项目目录和文件作用
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage就是打包目录，在这里有各个平台的打包文件
pages所有的页面存放目录
static静态资源目录，例如图片等
components组件存放目录
uni-app开发规范遵循以下原则：
1、页面文件遵循Vue单文件组件
2、组件标签规范类似于微信小程序规范。
3、接口能力（JS API）规范类似微信小程序规范，但需要将wx前缀改为uni。
4、数据绑定及事件处理同Vue.js规范，同时额外补充了uniapp本身的App及页面的生命周期的规范。
5、为了更好的兼容多端运行，建议使用Flex布局进行开发。
除此以外，uni-app项目的开发还需遵循以下规范：
1、目录结构规范
-
-
-
-
-
建议按照 uni-app 默认的目录结构组织项目，以保持统一性和易读性。
-
将不同功能和模块的文件放置在对应的目录下，如 pages 存放页面，components 存放组件等。
-
-
-
-
2、命名规范
-
-
-
-
-
文件名、组件名、变量名等统一使用小写字母，多个单词之间可以使用中划线连接，例如：my-page.vue、login.vue等等
-
-
-
-
3、代码规范
-
-
-
-
遵循 Vue.js 官方的代码规范，保持代码风格的统一性。
-
注意代码的缩进和格式，提高代码的可读性。
-
避免在模板中直接编写过多逻辑，尽量将逻辑处理移到 JS 部分。
-
合理使用生命周期函数，避免在页面加载时做过多的初始化操作。
-
-
-
4、样式规范
-
-
-
-
推荐使用预处理器编写样式，如 Less、Sass 等，以提高样式代码的可维护性。
-
统一使用 rpx 作为尺寸单位，以便在不同设备上进行适配。
-
避免在样式中直接使用颜色值和尺寸值，建议提取出来作为变量统一管理
-
-
-
5、注释规范
-
-
-
-
在关键代码和复杂逻辑处添加必要的注释，方便其他开发者理解代码意图。
-
注释应该清晰简洁，描述代码的功能、参数和返回值等信息。
-
-
-
除此以外，uni-app项目的开发还需遵循以下规范：
1、目录结构规范
-
-
-
-
-
建议按照 uni-app 默认的目录结构组织项目，以保持统一性和易读性。
-
将不同功能和模块的文件放置在对应的目录下，如 pages 存放页面，components 存放组件等。
-
-
-
-
2、命名规范
-
-
-
-
-
文件名、组件名、变量名等统一使用小写字母，多个单词之间可以使用中划线连接，例如：my-page.vue、login.vue等等
-
-
-
-
3、代码规范
-
-
-
-
遵循 Vue.js 官方的代码规范，保持代码风格的统一性。
-
注意代码的缩进和格式，提高代码的可读性。
-
避免在模板中直接编写过多逻辑，尽量将逻辑处理移到 JS 部分。
-
合理使用生命周期函数，避免在页面加载时做过多的初始化操作。
-
-
-
4、样式规范
-
-
-
-
推荐使用预处理器编写样式，如 Less、Sass 等，以提高样式代码的可维护性。
-
统一使用 rpx 作为尺寸单位，以便在不同设备上进行适配。
-
避免在样式中直接使用颜色值和尺寸值，建议提取出来作为变量统一管理
-
-
-
5、注释规范
-
-
-
-
在关键代码和复杂逻辑处添加必要的注释，方便其他开发者理解代码意图。
-
注释应该清晰简洁，描述代码的功能、参数和返回值等信息。
-
-
-
-
通过globalStyle进行全局配置
.概述：全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等.
以下是一个包含了所有配置选项的 pages.json ：
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"rpxCalcMaxDeviceWidth": 960,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件",
"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"^uni-(.*)": "@/components/uni-$1.vue"
}
},
"topWindow": {
"path": "responsive/top-window.vue",
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue",
"style": {
"width": "300px"
}
},
"rightWindow": {
"path": "responsive/right-window.vue",
"style": {
"width": "300px"
},
"matchMedia": {
"minWidth": 768
}
}
}注意
- 目前 style 节点仅支持配置 width，height 等 css 样式相关属性
- 如果需求当存在 topwindow 时，自动隐藏页面的 navigationBar，根据需求不同在
App.vue中配置如下 css：- 只需要隐藏某个的页面 navigationBar
/* 隐藏路径为 pages/component/view/view 页面的 navigationBar */ .uni-app--showtopwindow [data-page="pages/component/view/view"] uni-page-head { display: none; } - 需要隐藏大部分页面的 navigationBar，显示某个页面的 navigationBar
/* 隐藏所有页面的 navigationBar */ .uni-app--showtopwindow uni-page-head { display: none; } /* 显示路径为 pages/component/view/view 页面的 navigationBar */ .uni-app--showtopwindow [data-page="pages/component/view/view"] uni-page-head { display: block; }
- 只需要隐藏某个的页面 navigationBar
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| minWidth | Number | 768 | 当设备可见区域宽度 >= minWidth 时，显示该 window |
通过matchMedia的调节，可以自适应在不同屏幕上显示指定的window。
{
"pages": [
{
"path": "pages/login/login",
"style": {
"topWindow": false // 当前页面不显示 topWindow
"leftWindow": false // 当前页面不显示 leftWindow
"rightWindow": false // 当前页面不显示 rightWindow
}
}
],
"topWindow": {
"path": "responsive/top-window.vue", // 指定 topWindow 页面文件
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue", // 指定 leftWindow 页面文件
"style": {
"width": "300px"
}
},
"rightWindow": {
"path": "responsive/right-window.vue", // 指定 rightWindow 页面文件
"style": {
"width": "300px" // 页面宽度
},
"matchMedia": {
"minWidth": 768 //生效条件，当窗口宽度大于768px时显示
}
}
}
外部资源的引入
在进行uni-app项目开发时，通常需要引入一些外部资源，如图片、视频、js脚本、CSS样式等等，以下讲解各种资源的引入方式。
1、本地图片或视频的引入
-
绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。
例如：<image src="https://example.com/images/image.jpg">
-
相对路径，需提供相对于当前文件的路径
例如：<image src="../../static/images/image.jpg">
或者
<image src="@/static/images/image.jpg"> 但是要注意，这种写法既不是传统意义上的绝对路径，也不是严格意义上的相对路径，而是 uni-app 框架提供的路径别名方式，用来指向特定目录中的资源文件。
2、js文件的引入
例如：import "../../common/js/index.js"
或者：（以下写法需要js文件里面有export 导出关键字才需要这样引入）
写法一： import common from '@/utils/common.js'
写法二： import common from '../../utils/common.js' 具体相对路径请根据实际文件夹情况来设置
3、css文件的引入
写法一： @import "@/styles/common.css"
写法二： @import "../../styles/common.css" 具体相对路径请根据实际文件夹情况来设置
概述：组件是页面的基本组成单位，类似原HTML页面的标签，主要用于进行页面结构的搭建。
组件的组成结构：开始/结束标签、内容、属性、属性值。
基础结构如下图所示：
组件使用的入门教程
- 组件是视图层的基本组成单元。
- 组件是一个单独且可复用的功能模块的封装。
每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
- 组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的
<后面用/来表示结束。结束标签也称为闭合标签。如下面示例的<component-name>是开始标签，</component-name>是结束标签。 - 在开始标签和结束标签之间，称为组件内容。如下面示例的
content - 开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的
property1和property2。注意闭合标签上不能写属性。 - 每个属性通过
=赋值。如下面的示例中，属性property1的值被设为字符串value。
注意：所有组件与属性名都是小写，单词之间以连字符
-连接。
<component-name property1="value" property2="value">
content
</component-name>在组件中使用script的data变量
组件中可以使用script的data中定义的变量，但组件的属性中使用和内容区使用的用法不一样。
- 在text内容区使用时，使用两个花括号来包裹，如下面的
buttonText - 在属性值中使用时，属性名的前面要加冒号前缀
下面的button组件示例，等价于上一个的示例。只不过静态内容改成动态js。
<template>
<view>
<button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
</view>
</template>
<script>
export default {
data() {
return {
"buttonText":"按钮",
"buttondisble":false
}
}
}
</script>
复制代码
#组件的事件
每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。
比如button组件，有点击事件，也就是当手机用户点击这个button组件时，会触发这个事件。
事件也是组件的属性，只不过这类属性以@为前缀。
事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。
下面是组件事件的示例：
- click是button组件的点击事件，在用户点击这个button时触发
- click指向了methods中定义的goto方法，并且传递了一个参数'/pages/about/about'
<template>
<view>
<button size="mini" @click="goto('/pages/about/about')">按钮</button>
</view>
</template>
<script>
export default {
methods: {
goto(url) {
console.log("按钮被点击了，且传入的参数是：" + url)
}
}
}
</script>
复制代码
#基础组件
uni-app的组件，分为基础组件和扩展组件。
基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如<view>组件。
除了基础组件，都称为扩展组件。扩展组件需要将组件导入项目中才可以使用。
uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素。
但uni-app的组件与HTML不同，而是与小程序相同，可更好的满足手机端的使用习惯。
虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。
uni-app 基础组件规范，与小程序规范相近。如果了解小程序开发的话，uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"
<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>扩展组件的意义
虽然所有的业务需求都可以通过基础组件满足，但仅有基础组件是低效的，实际开发中会有很多封装的组件。
比如我们需要一个五角星点击评分的组件，在DCloud的插件市场里可以获取到：uni-rate 评分 - DCloud 插件市场
把这个uni-rate组件导入到你的uni-app项目下，在需要的vue页面里引用它，就可以在指定的地方显示出这个五角星组件。
<!-- 在index.vue页面引用 uni-rate 组件-->
<template>
<view>
<uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
</view>
</template>
复制代码
封装扩展组件的优势：
- 可以将组件进行任意次数的复用。
- 合理的划分组件，有助于提高应用性能。
- 代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
- 组件化开发能大幅度提高应用开发效率、测试性、复用性等。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
