2023.02.16 移动端问题汇总

这是一个uniapp套壳h5项目

1. overflow: scroll 触摸屏无法滚动，但鼠标可以。

是因为不知道哪里的代码禁掉了touchmove事件，在相应页面打开

  mounted() {
    let list = document.querySelector('.wf-form')
    list.addEventListener('touchmove', e => e.stopPropagation(), false)
  },

2. 如何使用Hbiulder 将uniapp项目打包成应用

https://juejin.cn/post/6938210257504043044?share_token=a6ed53b6-eea0-4f89-a566-e43279d9764f

3. 如何在浏览器运行uniapp项目（开发时调试用）

运行uniapp的多种方式

4. 如何自定义app顶部导航栏

• 在app里（非浏览器），有默认的一个44px的白色导航栏，不好看且高度不自适应。
  uni-app隐藏默认顶部导航栏
  titleNView配置 - wap2app教程

• 隐藏系统导航栏之后，相当于全屏了，需要uniapp js 获取状态栏高度 顶部安全距离 来设置自定义导航

（h5页面无法获取手机状态栏高度，一开始的思路是 考虑在uniapp项目中获取，再通过传参传给vue网页，再给网页项目设置一个头部高度作为自定义状态栏。但在使用url后缀的方式传参时（用的外链，非本地连接），app出现了白屏现象，于是采用了以下方法在uniapp直接写自定义状态栏。）

uniapp: webview全屏遮挡住状态栏的解决方案

// webview沉浸式自定义状态栏 在uniapp项目

		onLoad() {
			// #ifdef APP-PLUS
			let height = 0; //定义动态的高度变量
			let statusbar = 0; // 动态状态栏高度
			uni.getSystemInfo({ // 获取当前设备的具体信息
				success: (sysinfo) => {
					statusbar = sysinfo.statusBarHeight;
					height = sysinfo.windowHeight;
				}
			});
	
			let currentWebview = this.$scope.$getAppWebview() || (this.$parent && this.$parent.$scope.$getAppWebview()); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
					top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
					height: height - statusbar, //webview的高度
				})
			}, 200); //如页面初始化调用需要写延迟
			// #endif
		}

5. uniapp的条件编译

• 以及在使用时遇到了报错
  uniapp this.$scope.$getAppWebview() 报错 undefined

// #ifdef APP-PLUS
// #endif

uniapp的条件编译，用于各种兼容的问题解决

6. 点击返回（物理键），直接退出app的问题

• 在app里点击返回按钮（物理返回或全面屏侧滑），都默认退回一页（uni中的路由goback），由于本项目是套壳h5，退无可退。
• 需要在返回事件中禁用默认操作，并传值告诉h5项目，让其返回一页。

在uni项目中pages/index.vue

<template>
	<view>
		<web-view :src="targetUrl" @message="handleMessage"></web-view> //@message 接收子项目传来的信息，用于判断当前页面是否为首页
	</view>
</template>

		data() {
			return {
				targetUrl: 'http://...',
				isHomePage: '2' // 记录是否为首页
			}
		},
		methods: {
			handleMessage(res) {
				const {
					isHomePage
				} = res.detail.data[0] // 接收子项目传来的信息，用于判断当前页面是否为首页
				this.isHomePage = isHomePage
			}
		},
		onBackPress(options) { // 监听返回事件
		  // 触发返回就会调用此方法，这里实现的是禁用物理返回(包括侧滑)，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
		  if (options.from == 'backbutton') {
		  
		  	   if(this.isHomePage === '1') { // 如果是首页或登录页，点击返回直接退出app。
		  	   
				  return false; // 默认操作：直接退出app
				  
			  } else {

				  const vw = this.$scope.$getAppWebview().children()[0]
				  vw.evalJS("sendParentData({msg: 'back'})")   // 返回时给h5页面传值
				  return true;   //禁用默认操作
				  
			  }
			  
		  } else if (options.from == 'navigateBack') {
		    return false;
		  }
		},

在h5端

• 在view.vue首页用window.sendParentData监听了父级发出的事件，并返回一页

  created () {
    window.sendParentData = (res) => {
      this.$router.go(-1)
    };
    this.getTodoList();
    this.getUnreadList()
  },

在main.js的全局路由守卫，每当路由变更时，都判断是否为首页，并传给父级项目

import * as uni from './utils/uni.webview.1.5.2.js'  // 引入uni

document.addEventListener("UniAppJSBridgeReady", function() {
  Vue.prototype.myUni = uni
});

  // 向uni传值（用于判断点击物理键返回按钮后 当前页面返回或退出app）
  uni.webView.postMessage({
    data: {
      isHomePage: ((to && to.fullPath === '/index') || (to && to.path === '/login') || (to && to.fullPath === '/my')) ? '1' : '2'
    },
  });

7. app内下载的附件无法打开。并提示以下信息

• 可能由于某些浏览器不兼容下载写法，于是改成了a标签直接赋值下载地址的方法（之前是下载返回数据转为blob格式再赋值给href）
  

• 打不开，同时强行文本打开报code不可用。原因是有些人手机上下载了多个浏览器。点击 下载的时候，多个浏览器都会运行下载功能。这个时候，代码里只申请了一个code，重复使用就报错。于是将code验证去掉了（替换了接口）。
  

8. app内下载的附件无法打开，但在文件管理中可以找到

manifest.json中，“app-plus”/“distribute”/“android”/"permissions"配置

				"permissionPhoneState": {
				　　"request": "always",  
				　　"prompt": "为保证您正常、安全地使用，需要获取设备识别码（部分手机提示为获取手机号码）使用权限，请允许。"  
				}