uni-app app-plus – 小飞侠

项目目录结构

index.vue

<template>
	<view>
		<web-view :src="home" @message="handleMsg"></web-view>
		<view id="header">
			<!--#ifdef APP-PLUS-->
			<button @click="scan">扫码</button>
			<textarea :value="codes.join('\r\n')" :maxlength="-1" style="width:calc(100% - 8px);margin:3px;height:50px;border:1px solid #ccc;"></textarea>
			<!--#endif-->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			    //必须要放在/hybrid/html/目录下
				home:"/hybrid/html/index.html",
				codes:[]
			}
		},
		onLoad() {
		},
		computed:{
			codeHeight(){
				return uni.upx2px(50) + 'px';
			}
		},
		mounted(){
			let that = this;
			//获取元素高度
			const query = uni.createSelectorQuery().in(this);
			query.select('#header').boundingClientRect(data => {
				let top = that.statusBarHeight+data.height;
				//this.$mp.page.$getAppWebview().children()[0] 此种方式也可以获取到webview
				that.webv = that.$scope.$getAppWebview().children()[0];
			    that.webv.setStyle({
					top: top,
					height: that.windowHeight-top
				})
			}).exec();
		},
		methods: {
		    //处理webview html页面发送的消息
			handleMsg(e){
				let that = this;
				//虽然发送的是一个对象，但这里是一个数组
				if(e.detail.data.length && e.detail.data[0].action == "scan")
				{
					uni.scanCode({
						onlyFromCamera:true,
						success(res){
							that.webv.evalJS("showCode(\""+res.result.replace("\"","'")+"\")")
						}
					})
				}
			},
			scan() {
				let that = this;
				//全屏扫码
				//#ifdef APP-PLUS
				uni.scanCode({
					onlyFromCamera:true,
					success(res){
						that.codes.push(res.result)
					}
				})
				//#endif
			}
		}
	}
</script>

App.vue

<script>
	export default {
		onLaunch: function() {
			uni.getSystemInfo({
				success:function(e){
					Vue.prototype.statusBarHeight = e.statusBarHeight;
					
					// #ifndef MP
					if(e.platform == 'android') {
						Vue.prototype.statusBarHeight = e.statusBarHeight + 50
					}else {
						Vue.prototype.statusBarHeight = e.statusBarHeight + 45
					}
					// #endif
					
					// #ifdef MP-WEIXIN
					let wxrect = wx.getMenuButtonBoundingClientRect()
					Vue.prototype.statusBarHeight = wxrect.bottom + wxrect.top - e.statusBarHeight
					// #endif
					
					// #ifdef MP-ALIPAY
					Vue.prototype.statusBarHeight = e.statusBarHeight + e.titleBarHeight
					// #endif
					
					Vue.prototype.windowHeight = e.windowHeight
				}
			})
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

index.html

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
    .row{margin:5px 0px;}
    #txtCode{width:calc(100% - 80px);padding:3px 5px;font-size:14px;margin-right:10px;}
    .btn{background-color:#ccc;border:none;padding:3px 8px;}
    </style>
</head>
<body>
<div class="row"><input type="text" id="txtCode" name="txtCode" >
<input type="button" value="扫码" class="btn" id="scanCode"/></div>
<script src="zepto.js" type="text/javascript"></script>
<script>
	var userAgent = navigator.userAgent;
	if (userAgent.indexOf('AlipayClient') > -1) {
	// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
	document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
	} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
	// QQ 小程序
	document.write(
	  '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
	);
	} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
	// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
	document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
	} else if (/toutiaomicroapp/i.test(userAgent)) {
	// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
	document.write(
	  '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
	} else if (/swan/i.test(userAgent)) {
	// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
	document.write(
	  '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
	);
	} else if (/quickapp/i.test(userAgent)) {
	// quickapp
	document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
	}
	if (/toutiaomicroapp/i.test(userAgent)) {

	}
	</script>
	<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
	document.addEventListener('UniAppJSBridgeReady', function() {
		$("#scanCode").click(function(){
		    //发的是一个对象，接收的是一个数组
			uni.postMessage({
				data:{
					action:"scan"
				}
			})
		});
	});
	
	//扫码成功，回调
	function showCode(code)
	{
		$("#txtCode").val(code)
	}
</script>
</body>
</html>

调试：

1.运行->运行到手机或模拟器（N）->制作自定义调试基座

2.创建好基座后，运行-运行到手机或模拟器（N）->运行基座选择->自定义调试基座

3.USB连接手机，运行-运行到手机或模拟器（N）->[你的手机设备]

运行窗口工具栏第一个bug图标，点击调试。

需要安装uni-debugger，安装完之后配置一下”HBuilderX\plugins\uniapp-debugger\node_modules\puppeteer-cn-2\node_modules\puppeteer\lib\Launcher.js” 找到executablePath = null,改为本地chrome.exe完整路径即可。

原文链接：https://blog.csdn.net/zhchfsky/article/details/116028161

你可能也喜欢