uniapp+h5实现原生扫码和支付宝原生扫码mPaaS

uniapp项目：
支付宝原生扫码mPaaS 文档地址
utils/uniApiFn.js

/**
 * @description: uniapp原生扫码
 * @return {*}
 */
export const snCode = () => {
	return new Promise((resolve, reject) => {
		plus.screen.lockOrientation("portrait-primary")
		uni.scanCode({
			success: function(res) {
				resolve(res)
			},
			onlyFromCamera: true,
			barCodeInput: true,
			fail: function(err) {
				reject(err)
			},
			complete: function () {
				plus.screen.lockOrientation("landscape-primary")
			}
		})
	})
}

/**
 * 支付宝原生扫码
 */
export const mpaasScan = () =>{

	return new Promise((resolve, reject) => {
		var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")

		mpaasScanModule.mpaasScan({

				// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
				'scanType':  ['qrCode','barCode'],
				// 是否隐藏相册，默认false不隐藏
				'hideAlbum': false,
				//ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文
				'language' : 'en',
				//相册选择照片识别错误提示(ios)
				'failedMsg': '未识别到二维码，请重试',
				//Android支持全屏需要设置此参数
				'screenType': 'full',
				// 开启手电筒功能
				'torch': true,
				// 设置多码提示功能
				'multiCode': true
			},
			(ret) => {
					resolve(ret.resp_result)
			})
	})

}

pages/index/index.vue

<template>
	<!-- <web-view :src="src" :style="{ height: fullHeight, width: fullwidth }" ref="webViewBridge"
		id="webViewBridge" @onPostMessage="handleMessage" :fullscreen="false">
		 onPostMessage
	</web-view> -->
	 <web-view
	    :src="src"
	    ref="webViewBridge"
	    @onPostMessage="handleMessage"
	    @message="handleMessage"
	  ></web-view>
</template>

<script>
	import config from '@/config/index.js'
	const notify = uni.requireNativePlugin('Ba-Notify')
	import {
		uuid
	} from '@/utils/too.js'
	import {
		uploadFile
	} from '@/api/index'
	import {
		downloadFile,
		snCode,
		mpaasScan,
		attachmentUpload,
		getVersionCode,
		chooseImage
	} from '@/utils/uniApiFn'
	import {
		forEach
	} from '../../plugin/luch-request/utils'

	export default {
		data() {
			return {
				fullHeight: '',
				height: '',
				fullwidth: '',
				src: `${config.url}`,
				vw: null
			}
		},
		mounted() {
			this.src = `${config.url}?number=${uuid()}`
			this.webViewChange()
			// plus.globalEvent.addEventListener('plusMessage',function(msg){
			// 	console.log(msg)
			// })
		},
		methods: {
			handleMessage: function(e) {
				let result = e.detail.data[0]
				let _this = this
				let node = this.vw ? this.vw : this.$refs.webViewBridge
				switch (result.key) {
				case 'snCode':
						// 扫码
						snCode()
								.then((res) => {
									console.log(JSON.stringify(res))
									console.log(JSON.stringify(result.params.snCodekey))
									node.evalJS(
											`document.dispatchEvent(new CustomEvent('${result.params.snCodekey}',
							{ detail: JSON.stringify(${JSON.stringify({
												result: res,params: result.params,success: true,})})}))`
											,)}
								)
								.catch((err) => {
									node.evalJS(
											`document.dispatchEvent(new CustomEvent('${result.params.snCodekey}',
								{ detail: JSON.stringify(${JSON.stringify({
												result: err,params: result.params,success: false,})})}))`
											,)
								})
						break
					case 'mpaasScan':
						mpaasScan().then((res)=>{
							console.log(JSON.stringify(res))
							console.log(JSON.stringify(result.params.snCodekey))
							node.evalJS(
								`document.dispatchEvent(new CustomEvent('${result.params.snCodekey}',
							{ detail: JSON.stringify(${JSON.stringify({
									result: res,params: result.params,success: true,})})}))`
								,)}
							)
							.catch((err) => {
								node.evalJS(
									`document.dispatchEvent(new CustomEvent('${result.params.snCodekey}',
								{ detail: JSON.stringify(${JSON.stringify({
										result: err,params: result.params,success: false,})})}))`
									,)
							})
						break

h5项目 基于vue3.x
utils/webView.ts

/**
 * @description: 扫码
 * @return {*}
 */
export const postScanCode = (params) => {
  uni?.postMessage({
    data: {
      key: 'mpaasScan',
      //使用原生snCode 使用支付宝扫码mpaasScan       key: 'snCode',
      params: params,
    },
  })
}

@c/scanCode.vue组件

<template>
	<div>
		<el-dialog
		title="处理中..."
		v-model="dialogVisble"
		v-if="dialogVisble"
		:loading="dialogLoading"
		:append-to-body="true"
		:close-on-click-modal="false"
		width="60%"
		@close="close"
		></el-dialog>
	</div>
</template>

<script>
 import {postScanCode} from "@/utils/webView";

 export default {
  name: 'QrScanner',
  components: {
  },
	props: {
		 visible: {
		 	type: Boolean,
			default:false,
			 required: true,
		 },
		qrcodeKey: {
			type: String,
			default: 'qrcodeKey',
			required: false
		 }
	},
  watch: {
	  visible(){
		  this.dialogVisble=this.visible
	  	if(this.visible){
	  		this.dialogLoading = true
		    document.addEventListener(this.qrcodeKey, this.stopScan);
		    console.log("注册"+this.qrcodeKey+"完成")
	  		this.startScan()
	    }else{
		    this.dialogLoading = false
		    document.removeEventListener(this.qrcodeKey, this.stopScan);
		    console.log("注销"+this.qrcodeKey+"完成")
	    }
	  }
  },
  data() {
   return {
	   dialogVisble: this.visible,
	   dialogLoading:false,
   }
  },
  mounted() {

  },
  beforeUnmount() {
  },
  methods: {
   startScan() {
	   postScanCode({
		   snCodekey:this.qrcodeKey
	   })
   },
   async stopScan(event) {
	   const data = event.detail;
	   console.log('扫码结果:', data);
	   let valtemp = JSON.parse(data)
	   let qrcode = valtemp.result
	   //使用原生这样取值	   let qrcode = valtemp.result.result
	   this.$emit('success',qrcode)
   },
	  close(){
   	    this.$emit('update:visible',false)
	  }
  }

 }
</script>
<style scoped>
</style>

在使用组件页如此使用即可：

<qr-scanner v-model:visible="showScanner" @success="scanSuccess"></qr-scanner>