笔记--uni-app.md

1,064 阅读2分钟

问题

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 */

怎么理解5+app

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

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

记录