【uniapp】跨端开发问题记录

介绍

• 安装Hbuilder X

• 主要目录结构-类似于vue

  manifest.json：uni-app配置文件
  pages.json：全局配置，类似于小程序的app.json
  uni_modules：uni-ui
  static：静态资源
  pages：页面
  components：组件
  common：公用脚本和样式

• 官方教程- 类似于微信小程序
  具体可参考项目模板hello uniapp

  全局文件：manifest.json、pages.json
  组件：基础组件+uni-ui组件
  API：各类操作

自定义导航栏问题

custom自定义

1. pages.json设置该页面"navigationStyle": "custom"
2. 该页面自定义导航栏代码内增加

   <view class="status-bar"></view>
   .status-bar {
   	height: var(--status-bar-height);
   	width: 100%;
   }
   

• APP
  需要增加.status-bar撑起手机顶部信号、电量等状态栏的高度，否则自定义的会叠加在上面
• H5
  没有顶部状态栏，但.status-bar即使存在也不会撑起来，不影响
• 微信小程序
  var(--status-bar-height)高度不够，通过条件编译增加一下

transparentTitle导航栏上滑透明

pages.json设置该页面"transparentTitle": "auto"

• APP和H5
  需要增加.status-bar
• 微信小程序
  无法生效，通过条件编译不增加.status-bar

微信小程序问题汇总

@tap传参undefined

使用条件编译
app与h5：可以正常使用@tap="tap(data)"
微信小程序：需要借助:data-item=”data“传参，并且@tap="tap"不可加括号，接收参数data= data.currentTarget.dataset.item

input框输入后变为[object promise]

原因是@input绑定的是async函数，返回的是promise
可去掉async和await，改为直接调用相关函数

APP问题汇总

map原生层级太高，修改z-index无效

会影响到浮在地图上的组件和弹窗提示等
法一：可使用nvue，但是css样式太少
法二：使用原生层级更高的组件
法二：给地图设置v-show，当需要显示比地图层级高的组件时不显示地图

H5问题汇总

跨域问题解决

uni.request请求时通过条件编译区分H5与APP等
APP：原url地址
H5：代理地址

manifest.json源码视图增加H5代理

"h5": {
		...
		"devServer": {
			"proxy": {
				"/qqapi": {
					"target": "https://apis.map.qq.com",
					"changeOrigin": true,
					"secure": false,
					"pathRewrite": {
						"^/qqapi": ""
					}
				},
			}
		}
	},