服务性企业网站,esp8266做网站,房地产网站开发文档,个人网站设计需求分析实现 UniApp 右上角按钮“扫一扫”功能实战教学
需求
点击右上角扫一扫按钮(onNavigationBarButtonTap监听)#xff0c;打开扫一扫页面(uni.scanCode) 扫描后#xff0c;以网页的形式打开扫描内容(web-view组件)#xff0c;限制只能浏览带有执行域名的网站#xff0c;例如…实现 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
templateviewweb-view v-ifisOpen(url) :srcurl/web-viewview classtip columntext如需浏览请长按网址复制后使用浏览器访问/texttext selectable{{url}}/text/view/view
/templatescriptexport 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 langscss.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.index0){// 打开扫一扫功能uni.scanCode({success:function(res){console.log(条码类型res.scanType);console.log(条码内容res.result);uni.navigateTo({url:/pages/public/web-view?url${res.result}})}})}},最终效果 完结~
