笔记--uni-app.md

问题

Class 与 Style ，src绑定

:class="['content',{'radioModel':checkType}]"  
:class="['siteAppListDirNode',{open:appitem.open==true}]"
:class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]"
:class="{shortcutMenuShow:!showHideNav,shortcutMenuHide:showHideNav}"
:style="{height:checkType?'423px':'385px'}"
:src="userInfo.userFace?userInfo.userFace:defaultHead"
:style="{backgroundPosition:item.imgSrc}"
复制代码

uni-app 解决h5跨域问题

封装了uni.request 发现h5页面调不一样，报错以下：（跨域问题）

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
:8081/h5/#/:1 XMLHttpRequest cannot load https://kuaiping.gemii.cc/cats?status=1&current_page=0&page_size=10. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. The response had HTTP status code 405.
复制代码

怎么解决？

1. 在配置uni-app 中 manifest.json->h5->devServer，无效。

2. Chrome 调试跨域问题解决方案之插件篇 ：好像无效，接口再也不报错，可是也不返回数据。

3. 解决跨域问题：最好的方式是后端修改，前端却是也行，设置反向代理和用Nginx作代理。

4. 了解HTTP访问控制（CORS）

h5端去除顶部导航栏

原生导航栏

pages.json

{
	"path": "pages/mine/mine",
	"style": {
		"navigationBarTitleText": "个人",
		"app-plus": {"titleNView": false}
	}
},
复制代码

自定义导航栏

全局样式 uni.scss

/* #ifdef H5 */
.uni-navbar{
	display: none !important;
}
.demo_box{
	height:var(--status-bar-height);
	width: 100%;
}
/* #endif */
复制代码

• 配置编译到 H5 平台时的特定样式
• app-plus
  • 配置编译到 App 平台时的特定样式，部分经常使用配置 H5 平台也支持。
  • titleNView Object 导航栏 ，详见:导航栏 App、H5
• uni-app h5端标题解决方法

怎么理解5+app

HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App能够经过扩展的JS API任意调用手机的原生能力，实现与原生App一样强大的功能和性能。

在5+App里，同时包含了HTML5Plus规范和Native.js的实现，开发者能够在5+App里自由使用相关技术。

• 5 + App开发

记录

• 配置
• 导航栏tabBar
• uni-ui扩展组件：须要下载插件,更多见插件市场