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

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

需求

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

实现功能

步骤一、配置pages.json文件

{"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

<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"页面对象

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

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

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

最终效果：

完结~