uni-app的基本使用

一、什么是 uni-app ?

        官方文档
        uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

        即使不跨端，uni-app同时也是更好的小程序开发框架。

        DCloud公司拥有350万开发者用户，旗下uni-app有5万+案例、600+插件、50+微信/qq群、更高的百度指数，可以放心选择，快速体验

二、为什么要使用 uni-app ?

        使用 uni-app 解决了跨平台开发存在的问题

1. 跨平台更多

真正做到 “一套代码、多端发行”!
条件编译 : 优雅的在一个项目里面调用不同平台的特色功能!

2. 运行体验更好

组件、api 与 微信小程序一致
兼容 weex 原生渲染

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

vue 的语法、微信小程序的api
内嵌 mpvue

4. 开放生态,组件更丰富

支持通过 npm 安装第三方包
支持微信小程序自定义组件及SDK
兼容 mpvue 组件及项目
App 端支持和原生混合编码
DCloud 将发布插件市场

三、uni-app 功能框架图

四、安装

        我们需要安装两个工具 :

        1. HBuilderX是通用的前端开发工具，但为 uni-app 做了特别强化。
        下载地址 : HBuilderX官网

图1

图2

        我们点击图1 download下载,就会弹出一个图2的窗口,选择你的系统,下载 App 开发版.下载成功后这是一个压缩包,解压完成我们点击 HBuilderX.exe 文件就成功打开了 HBuilderx

        2. 安装微信开发者工具

        下载地址 : 微信开发者工具

        我们根据自己的系统配置下载稳定版的,成功之后一直点击 next 下一步即可

五、初始化项目和运行项目

        1. 初始化项目

                1.1 用 HBuilder 创建

打开 HBuilder,点击左上角的"文件",点击"新建",再点击"项目",就会弹出一个项目窗口. 然后进行选择 uni-app 及创建项目和位置

                1.2 用 微信开发者工具 创建

这里就不再一一叙述了,可以去我的主页中找到微信小程序的基本使用就可以看到,就正常创建项目即可.运行的时候就会实现uni-app

        2. 运行

                2.1 用 HBuilder 运行

打开 HBuilder,点击左上角的"运行",点击"运行到浏览器",接着选择你想用什么浏览器打开,点击一下就成功打开了

                2.2 用 微信开发者工具 运行

如果是第一次使用微信小程序打开创建的 uni-app 项目,需要以下两点:

1. 先在微信开发者工具中,在最上面找到"设置",点击"安全设置".然后把"服务器端口"这一项打开
2. 复制 微信开发者工具的路径,然后点击 HBuilderx ,在最上面的"运行"中,找到"运行到小程序的模拟器",然后复制 微信开发者工具 的路径,就配置好了.下次在点击这样的操作,直接会在 微信开发者工具中转为小程序的文件格式

六、项目目录和文件作用

文件夹 :

pages         所有的页面存放目录
static         静态资源目录，例如图片等
unpackage         就是打包目录，在这里有各个平台的打包文件
components         组件存放目录

文件夹 :

App.vue         是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js         是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
manifest.json          文件是应用的配置文件，用于指定应用的名称、图标、权限等。
pages.json          文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
uni.scss         文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

七、uni-app 的开发规范

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

八、全局配置和页面配置

        1. 全局配置

        全局配置我们在 pages.json 的 globalStyle 中配置

        在这里举例一下常用的属性,用于设置应用的状态栏、导航条、标题、窗口背景色等.详细属性配置,请见 globalStyle官网配置

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

代码 :

"globalStyle": {
		// 标题字体颜色
		"navigationBarTextStyle": "black",
		// 标题
		"navigationBarTitleText": "uni-app",
		// 导航背景颜色
		"navigationBarBackgroundColor": "#7fff00",
		//  下拉时的背景颜色
		"backgroundColor": "#336622",
		// 是否允许下拉
		"enablePullDownRefresh": true,
		// 刷新时的三个圆点的颜色
		"backgroundTextStyle": "dark"
	}
}

微信小程序效果 :

        2. 页面配置

页面配置属性 :

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

        2.1 我们先在 HBuilderx 中创建文件

右键pages新建目录，然后输入你的文件名字,不用带 .vue 后缀名,系统自己会给你加上,你自己加上后不能创建.输入完名字,直接点击确定,就可以了

        2.2 在新创建的文件中编辑

<template>
	<view>
		<text>{{font}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				font:"第一次使用 uni-app,嘻嘻!"
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

        2.3 页面配置我们在 pages.json 的 pages 中配置

这里需要注意,如果想让当前页面显示在屏幕上,需要将这个页面的配置放在 pages 的最前面.然后最后一个配置不能加逗号",",不然会报错

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

        2.4 我们来看微信开发者工具的效果吧

九、配置 tabbar

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

tabbar配置属性 :

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持 black/white	App 2.3.4+ 支持其他颜色值
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab,tab 按数组的顺序排序
position	String	否	bottom	可选值 bottom、top  当设置 position 为 top 时，将不会显示 icon图标	top 值仅微信小程序支持

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

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

        1. 创建 icon 文件夹

找一些图标一个图标选两种,一种是没有颜色的(没点击之前的样子)和有颜色的(点击之后的样子),然后将这个文件夹放在 “static” 文件下

        2. 在 pages.json 中的 globalStyle 同级配置下 创建 tabBar,进行编辑

注意: 这里面要引入指定路径的文件,不要加"./",直接 “文件夹/文件”,不然会报错

"tabBar":{
		"color":"#007AFF",
		"selectedColor":"#4CD964",
		"list":[			
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/icons/home.png",
				"selectedIconPath":"static/icons/home-o.png"
			},
			{
				"text":"我的",
				"pagePath":"pages/lianxi/lianxi",
				"iconPath":"static/icons/my.png",
				"selectedIconPath":"static/icons/my-o.png"
			}
		]
	}

        3. 点击保存,查看微信开发者工具,可以看到可以来回切换了,切换后的图标颜色也会改变

十、总结

        通过上面的那些说明及举例,你就会发现 uni-app 就是 vue 和 微信小程序 的结合.语法都基本一致,所以我就没有在一一举例说明了.只要你会 小程序 和 vue,那么 uni-app就很好掌握.喜欢往下深究的可以去uni-app官网查看.但是今天的学习一定要注意一点, 引入指定路径的文件,不要加"./",直接 “文件夹/文件”,不然会报错.今天就到这里了,我们下期见!