uni-app的应用平台
- H5端
- app端(ios,android)
- 小程序(微信,百度,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/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.属性支持
更多推荐
uni-app的应用
发布评论