筆記--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擴展組件：須要下載插件,更多見插件市場