uni-app的应用

uni-app的应用平台

1. H5端
2. app端（ios，android）
3. 小程序（微信，百度，qq，支付宝，头条）
   
   运行到微信开发者工具，会生成unpackage文件，在文件下的dev中会生成mp-weixin文件
   
   使用微信开发者工具运行项目时会出现此错误：此错误时微信开发者工具没有打开服务端口。
   IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manually open IDE -> Settings -> Security Settings, and set Service Port On
   解决方法：
   打开微信开发者工具，在左上角选择设置 > 安全设置， 开启服务端口即可https://blog.csdn.net/Kf_loseHair/article/details/103863135
   
   微信开发者工具编译运行成功。
   
   微信开发者工具自动打开，显示
   

uni-app的目录结构说明

components：组件目录；
hybrid：存放本地网页的目录；
pages:业务页面存放的目录；
platforms：存放各平台专用页面的目录；
static：存放应用引用静态资源（图片，字体）；
wxcomponents:存放小程序组件的目录；
app.vue：vue初始化入口文件;
main.js:应用配置，用来配置App全局样式以及监听；
manifest.json：配置应用名称，AppID，logo，版本等打包信息；
pages.json：配置页面路由，导航条，选项卡等页面类信息。

uni-app的项目配置

打开manifest.json文件，可以看到项目的基础配置
创建项目时会自动生成uni-app的应用标识AppID（不可改变）。

app图标配置：自动生成图标

app启动图配置：启动界面选项（各种尺寸大小）

App SDK 配置：

定位和地图；
登录鉴权（qq登录，微信登录，第三方登录）；
支付（微信支付，支付宝支付）
推送，分享，语音识别

App 模块权限配置：

蓝牙，通信录，人脸识别，指纹识别
隐私信息访问许可

App 原生插件配置：

本地插件，云插件

App 常用其它设置：

自定义404错误页面；改变编译模式；可以阅读参考文档
应用白名单（在源码视图中修改）

H5配置：

配置页面标题，配置模板路径；可以改变路由模式

小程序配置：

配置小程序的AppID

源码视图：

将上面这些配置变成了json串模式，修改时可以直接修改配置，也可以修改源码视图。

uni-app的页面配置

所有页面需要配置到pages.json中，pages.json文件为我们做了统一的页面管理，设置页面样式。
此页面为项目首页：运行到谷歌浏览器


右键点击pages–》新建页面–》填写页面名称（test-page）–》选择默认模板–》点击创建



打开test-page.vue文件

打开pages.json文件可以看见存在pages和globalStyle两个配置项
官网：https://uniapp.dcloud.io
pages.json文件：
用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。
pages： 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
				//用于设置每个页面的状态栏，导航栏，标题，窗口背景色等。（页面中配置项会覆盖 globalStyle 中相同的配置项）
			}
		}
	    ,{
            "path" : "pages/test-page/test-page",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

将第二项给放到第一项中作为启动页

首页显示为

注意：

pages节点的第一项为应用入口页（即首页）
应用中新增/减少页面，都需要对 pages 数组进行修改
文件名不需要写后缀，框架会自动寻找路径下的页面资源

globalStyle：
用于设置应用的状态栏、导航条、标题、窗口背景色等。(所有界面)
pages下的style可以覆盖globalStyle的样式

tabBar：
tabBar简介：设置底部 tab 的表现

home界面：

page界面



注意：
1.list 最多5个，最少2个
2.他粑粑人显示一次之后，就会保存到内存中，需要加onshow的生命周期，需要计算，刷新。
3.属性支持