实现 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 扫描二维码,注意:onNavigationBarButtonTapmethods同级。

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}`
					})
				}
			})
		}
	},

最终效果:

完结~

相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
雪芽蓝域zzs3 小时前
uniapp 国密sm2加密
uni-app
袁煦丞3 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作