uniApp：环境搭建及配置

uniApp 是一个使用 Vue.js 开发所有前端应用的框架，可以跨平台使用。

环境搭建

1. 安装

• 安装编辑器：Hbuilder X
• 安装微信开发者工具：下载地址

2. HbuilderX 初始化项目

   点击 HbuilderX菜单栏文件 > 项目 > 新建，选择 uni-app，填写项目名。

3. 配置环境

• 找到配置自己的微信开发者工具地址

  

• 配置自己的 AppID

  

• 打开微信小程序代理和服务端口

  
  

项目目录介绍

项目结构	说明
pages 目录	所有的页面的存放目录
static 目录	静态资源目录
unpackage 目录	打包文件，存放各个平台的打包文件
App.vue	项目根组件，页面的入口文件
main.js	项目入口文件，主要作用是初始化 vue 实例并使用需要的插件
manifest.json	配置打包的文件，指定应用的名称、图标、权限等
pages.json	设置项目页面的存放路径和窗口外观
uni.scss	uni-app 内置常用的变量

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了开发规范：

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

全局配置和页面配置

官方文档框架 - 配置：https://uniapp.dcloud.io/collocation/pages

全局配置

通过 pages.json 文件中的 globalStyle 进行全局配置。
用于设置应用的状态栏、导航条、标题、窗口背景色等。

属性	类型	默认值	描述
navigationBarBackgroundColor	String	white	导航栏背景颜色（同状态栏背景色）
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": "white",
		// 导航栏标题文字内容
		"navigationBarTitleText": "全局标题",
		// 导航栏背景颜色（同状态栏背景色）
		"navigationBarBackgroundColor": "#2B9939",
		// 是否开启下拉刷新
		"enablePullDownRefresh": true,
		// 下拉显示出来的窗口的背景色，仅在小程序中显示
		"backgroundColor": "#F8F8F8",
		// 下拉 loading 的样式
		"backgroundTextStyle": "light",
		// 页面上拉触底事件触发时距页面底部距离
		"onReachBottomDistance": 50
	},
    // 页面配置
    "pages": [],
}

页面配置

页面路由

创建一个 message 页面。

1. 在 pages 目录下新建 message/message.vue 文件。

   <template>
   	<view>message页面</view>
   </template>
   

2. 配置路由

   pages 数组中的第一项是启动页。
   在 pages.json 文件中的 pages 数组中配置子页面路由。

   • path：子页面路由。

style 设置样式

在 pages.json 文件中的 pages 数组中配置子页面样式。

• style：子页面样式。

设置每个平台单独的样式

属性	类型	描述	平台差异
app-plus	Object	设置编译到 App 平台的特定样式，配置项参考下方 app-plus	App
h5	Object	设置编译到 H5 平台的特定样式，配置项参考下方 H5	H5
mp-alipay	Object	设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY	支付宝小程序
mp-weixin	Object	设置编译到 mp-weixin 平台的特定样式	微信小程序
mp-baidu	Object	设置编译到 mp-baidu 平台的特定样式	百度小程序
mp-toutiao	Object	设置编译到 mp-toutiao 平台的特定样式	字节跳动小程序
mp-lark	Object	设置编译到 mp-lark 平台的特定样式	飞书小程序
mp-qq	Object	设置编译到 mp-qq 平台的特定样式	QQ小程序
mp-kuaishou	Object	设置编译到 mp-kuaishou 平台的特定样式	快手小程序

配置单平台样式 (H5)

配置编译到 H5 平台时的特定样式，对小程序不起作用。

H5 属性	类型	描述
titleNView	Object	导航栏
pullToRefresh	Object	下拉刷新

"pages": [
    {
        // 子页面路由
        "path": "pages/message/message",
        // 子页面样式
        "style": {
            "navigationBarTitleText": "信息页",
            // 导航栏背景颜色
            "navigationBarBackgroundColor": "#007AFF",
            // 导航栏的字体颜色
            "navigationBarTextStyle": "black",
            // 配置编译到 H5 平台时的特定样式
            "H5": {
                // 下拉刷新
                "pullToRefresh": {
                    // 刷新球的颜色
                    "color": "#836FFF"
                }
            }
        }
    }
],

配置Tab栏 TabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
在 pages.json 文件中的 pages 数组中配置Tab栏列表。

• tabBar：Tab栏列表。

注意使用：

• 当设置 position 为 top 时，将不会显示 icon
• tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的 onLoad 生命周期里先弹出一个等待雪花。

属性	类型	描述
color	HexColor	tab 上的文字默认颜色
selectedColor	HexColor	tab 上的文字选中时的颜色
backgroundColor	HexColor	tab 的背景色
borderStyle	String	tabbar 上边框的颜色，可选值 black/white，App 2.3.4+ 支持其他颜色值
list	Array	tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
positionfontSize	String	可选值 bottom、top（top 值仅微信小程序支持）

"tabBar": {
    // 字体默认颜色
    "color": "#333333",
    // 字体选中颜色
    "selectedColor": "#FF8D1A",
    // 上边框颜色
    "borderStyle": "#808080",

    // tab栏列表
    "list": [
        {
            "text": "首页",
            // 子页面路由
            "pagePath": "pages/index/index",
            // icon图标
            "iconPath": "static/tabs/index.png",
            // icon图标-选中状态
            "selectedIconPath": "static/tabs/index-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/logo.png",
            "selectedIconPath":"static/logo.png"
        }
    ]
}

condition 启动模式配置

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

"condition": {
    "current": 0,
    "list": [
        {
            "name": "详情页",
            "path": "page/ditall/detall",
            "query": "id=80"
        }
    ]
}

条件编译跨端兼容

每个平台有自己的一些特性，因此会出现一些无法跨平台的情况。
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释。将注释里的代码编译到不同的平台。
写法：以 #ifdef 加平名称开头，以 #endif 结尾。

条件编译写法 (以注释的形式书写)	说明
#ifdef APP-PLUS
需要编译的代码
#endif	仅出现在APP平台下的代码
#ifndef H5
需要编译的代码
#endif	除了H5平台，其他平台均存在的代码
ifdef H5 || MP-WEIXIN
需要编译的代码
#endif	在 H5 平台或微信小程序平台存在的代码
注意：这里只有 ||，不可能出现&&，因为没有交集

值	平台
APP-PLUS	5+APP
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	头条小程序
MP-QQ	QQ小程序
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
更多	详情

<template>
	<view>
		<!-- #ifdef H5 -->
		<view>仅在H5中显示</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>仅在微信小程序中显示</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
    onLoad() {
        // #ifdef H5
        console.log('仅在H5中显示')
        // #endif

        // #ifdef MP-WEIXIN
        console.log('仅在微信小程序中显示')
        // #endif
    }
}
</script>

<style>
	/* H5中的样式 */
	/* #ifdef H5 */
	view { color: #FF0000 }
	/* #endif */
	
	/* 微信小程序中的样式 */
	/* #ifdef MP-WEIXIN */
	view { color: #0000FF }
	/* #endif */
</style>