场景:
【民主测评、闭卷测试】 Vue项目生成二维码,使用手机浏览器扫码录入答题
一,创建vue项目,样式布局,接口联调,
npm run build
打包成dist 文件,让后台发送到服务器中,页面地址就获取到了。
二,前引入vue-qr 二维码地址使浏览器打开的项目地址拼接获取动态的项目projectId,,通过前端生成的二维码,浏览器扫描后,通过window.href 获取手机浏览器地址栏的信息,通过截取地址栏后的projectId 。然后就可以正常工作了。
1.vue 引入vue-qr 插件
引入使用:npm install vue-qr --save
页面使用:
<VueQr
:logo-src="require('@/assets/logo.png')"
:logoScale="0.2"
:logoMargin="5"
logoBackgroundColor="white"
:size="200"
:margin="0"
:auto-color="true"
:dot-scale="1"
:text="appSrc"
>
</VueQr>
import VueQr from 'vue-qr'
data(){
return(
appSrc:'http://115.28.107.185:8081/hseimage/upload/456/dist/index.html?projectId=100'
)
}