实现 UniApp 右上角按钮“扫一扫”功能实战教学

实现 UniApp 右上角按钮"扫一扫"功能实战教学

需求

点击右上角扫一扫按钮(onNavigationBarButtonTap监听)，打开扫一扫页面(uni.scanCode) 扫描后，以网页的形式打开扫描内容(web-view组件)，限制只能浏览带有执行域名的网站，例如(baidu.com)。

实现功能

步骤一、配置pages.json文件

javascript 复制代码

{
			"path": "pages/index/index", 
			"style": {
				"navigationBarBackgroundColor": "#345DC2", //导航背景色
				"navigationBarTextStyle": "white" ,//状态和导航字体样式
				"app-plus": {
					"bounce": "none", // 禁止回弹
					"titleNView": { // 导航配置
						"type": "transparent", // 滚动透明渐变
						"searchInput": { // 搜索框
							"align": "center",
							"placeholder": "搜索你想要的内容",
							"borderRadius": "30rpx",
							"backgroundColor": "#F0F1F2",
							"placeholderColor": "#979c9d", //提示字体颜色
							"disabled": true //禁止输入，点击进入新搜索页面
						}
						// #ifdef APP-PLUS
						,"buttons": [ //扫描二维码只有app才有
							{
								"float": "right", //标题栏上显示位置
								"background":"rgba(0,0,0,0)", //按钮背景色
								"fontSize": "23", //按钮大小，不要太大，不然会被隐藏
								"fontSrc": "/static/icon/iconfont.ttf",
								"text": "\ue689" // 以/u开头，后台加上e开头的
							}
						]
						// #endif
					}
				}
			}
		},

效果：

步骤二、创建打开网页页面组件/pages/public/web-view

javascript 复制代码

<template>
	<view>
		<web-view v-if="isOpen(url)" :src="url"></web-view>
		<view class="tip column">
			<text>如需浏览，请长按网址复制后使用浏览器访问</text>
			<text selectable>{{url}}</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				url:null
			}
		},
		onLoad(options) {
			this.url = options.url;
		},
		methods:{
			isOpen(){
				if(this.url){
					// 只能访问孟学古的网址
					return this.url.indexOf('baidu.com') !==-1
				}
			}
		}
	}
</script>
<style lang="scss">
	.tip{
		position: relative;
		top: 200rpx;
		width: 300rpx;
		margin: 0 auto;
		text-align: center;
		word-wrap: break-word;
		font-size: 30rpx;
		text:first-child{
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
	}
</style>

步骤三、在pages.json中的pages数组后面添加一个"pages/public/web-view"页面对象

javascript 复制代码

{
	"path": "pages/public/web-view", //web浏览器组件
	"style": {
		"app-plus": {
			"bounce": "none" // 禁止回弹效果
		}
	}
}

步骤四、使用uniapp提供的页面生命周期钩子 onNavigationBarButtonTap 监听点击的导航按钮，使用uni.scanCode 扫描二维码，注意：onNavigationBarButtonTap与methods同级。

javascript 复制代码

onNavigationBarButtonTap(e){
		// 点击第一个按钮
		if(e.index===0){
			// 打开扫一扫功能
			uni.scanCode({
				success:function(res){
					console.log("条码类型"+res.scanType);
					console.log("条码内容"+res.result);
					uni.navigateTo({
						url:`/pages/public/web-view?url=${res.result}`
					})
				}
			})
		}
	},

最终效果：

完结~