《uniapp跨平台开发——知识总结》

1、uni-app的简介与环境搭建

1.1uniapp 简介

uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到多个平台

1.2uniapp 优势

1.多端泛滥

2.体验不好

3.生态不丰富

于是针对解决跨平台开发存在问题的 uniapp 顺势而生。

产品特征
1.跨平台更多

2.运行体验更好：

组件、api 与原生小程序一致

兼容 weex 原生渲染，效率高，局部渲染

3.通用技术栈，学习成本更低

vue 的语法，微信小程序的 api
内嵌 mpvue
4.开放生态。组件更丰富

支持通过 npm 安装第三方包
支持微信小程序自定义组件及 SDK
兼容 mpvue 组件及项目
App 端支持和原生
uniapp 功能框架
uniapp 在跨平台的过程中,可以调用平台专有能力。
————————————————

1.3环境搭建

1.安装编辑器：HBuilderX

• H 是 HTML 的首字母
• Builder 是构造者
• X 是 HBuilder 的下一代版本。

我们也简称HX。

HBuilderX 是通用的前端开发工具，但为uniapp做了特别强化

下载 App 开发版，可开箱即用；如下载标准版，在运行或发行uniapp时，会提示安装uniapp插件，插件下载完成后方可使用。

如使用cli方式创建项目，可直接下载标准版，因为 uniapp 编译插件被安装到项目下了。

HBuilderX 的特点如下图所示：

轻巧、极速	10M的绿色发行包，启动/大文档打开速度极快，有编码提示。
强大的语法提示	一流的ast语法分析能力，语法提示精准、全面、细致，转到定义、重构完善。
专为vue打造	提供比其他工具优秀的vue支持，提升vue开发效率。
清爽护眼	界面十分清爽简介。
高效极客操作	HBuilderX对字处理提供了更崇高的支持。更强大的多光标、智能双击、选区管理...
markdown优先	HX是唯一一个新建文件默认类型是markdown的编辑器，你可以直接粘贴表格、图片进来。

1.4创建 uniapp

步骤：在点击工具栏里的文件 -> 新建 -> 项目，然后我们会看见新建项目的弹窗，默认为普通项目，我们手动选择第二个 uniapp，手动输入项目名，系统会填入默认路径，但是个人可以根据需要进行修改，点击预览即可。

• page：存放所有的页面。

• static：存放静态资源（比如图片，视频，字体，图标等）。

• unpackage：即打包目录，存放各个平台最终打包输出的文件。

• App.vue：项目根组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件，可以调用应用的生命周期。

• main.js：项目入口文件，主要作用是初始化 vue 实例并使用需要的插件

• manifest.json：是应用的配置文件，用于指定应用的名称、图标、权限等。

• pages.json：用来对 uniapp 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等

• uni.scss：为了方便整体控制应用的风格，如按钮颜色、边框风格，本文件里预置了一批 scss 变量预置。

1.5运行项目

步骤：在点击工具栏里的运行 -> 运行到浏览器 -> Chrome/Firefox/IE/Edge 等任意一个浏览器都可，首推 Chrome

运行成功之后，终端会有对应的提示

1.6开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uniapp有如下开发规范：

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

<template>
  <view>此处必须有一个view,且只能有一个根view。所有内容需要写这个view里面。</view>

</template>
<script>
   export default{}
</script>
<style>
/style>

• 组件标签靠近小程序规范。

• 接口能力(JS API)靠近微信小程序规范，但需将前缀 wx 替换为 uni。

• 数据绑定及事件处理同 Vue.js 规范，同时补充了 App 及页面的生命周期。

• 为兼容多端运行，推荐建议使用flex布局进行开发。

2、uni-app基础知识总结

2.1介绍项目目录和文件作用

• 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 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

2.2全局配置和页面配置

2.2.1通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等

属性	类型	默认值	描述
navigationBarBackgeoundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持black/white
navigationBarTitle Text	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉loading的样式，仅支持dark/ligth
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期
onReachBottomDistance	Number	50	页面上拉触底时距页面底部距离，单位只支持px，详见页面生命周期

2.3创建新的message页面

右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板

<template>
   <view>
     这是信息页面
</view>
</template>


<script>
</script>


<style></style>

通过pages来配置页面

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考pageStyle

pages数组数组中第一项表示应用启动页

"pages": [ 、
		{
			"path":"pages/message/message"
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	]

通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path":"pages/message/message",
			"style": {
				"navigationBarBackgroundColor": "#007AFF",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": true,
				"disableScroll": true,
				"h5": {
					"pullToRefresh": {
						"color": "#007AFF"
					}
				}
			}
		}
	]

配置tabbar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

属性	类型	必填	默认值	描述
color	HexColor	是		tab上的文字默认颜色
selectedColor	HexColor	是		tab上的文字选中的颜色
backgroundColor	HexColor	是		tab的背景色
borderStyle	String	否	black	tabbar上边框的颜色，仅支持black/whith
list	Array	是		tap的列表，详见list属性说明，最少2个，最多5个tap
position	String	否	bottom	可选值bottom、top

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在pages中先定义
text	String	是	tap上按钮文字，在5+APP和H5平台为非必填。列如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon大小限制为40kb，建议尺度为81px*81px，当postion为top时，此参数无效，不支持网络图片，不支持字体图标
selectedlconPath	String	否	选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81px，当postion为top时，词参数无效

案例代码：

"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/home.png",
				"selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text": "信息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/message.png",
				"selectedIconPath":"static/tabs/message-active.png"
			},
			{
				"text": "我们",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	}

condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
quety	String	否	启动参数，可在页面的onLoad函数里获得

组件的基本使用

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用

uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

text文本组件的用法

001 - text 组件的属性

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：ensp、emsp、nbsp
decode	boolean	false	否	是否解码

• text 组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中

002 - 代码案例

<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>来了老弟</text>
</view>

<view>
  <!-- 显示连续空格的方式 -->
  <view>
    <text space='ensp'>来了  老弟</text>
  </view>
  <view>
    <text space='emsp'>来了  老弟</text>
  </view>
  <view>
    <text space='nbsp'>来了  老弟</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <!-- 是否解码 -->
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

view视图容器组件的用法

View 视图容器， 类似于 HTML 中的

 002 - 代码案例

<view class="box2" hover-class="box2_active">
  <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>

  </view>
</view>

button按钮组件的用法

001 - 组件的属性

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带loading图标