uniappAPP项目使用webview 嵌套整个uniappH5项目，H5项目获取app的登录验签，不用重复登录

本编文章 uniappAPP与uniappH5是两个独立的项目，都是可以单独登录访问，在app中嵌套H5项目，需要在H5项目中获取app项目的登录信息，可以直接获取登录人信息，进而可以直接访问。

一、在app中使用web-view嵌入H5页面（只要在网址上面携带参数就可以）:

app中：需要将用户验签使用的token作为参数传入到H5项目中

	
		
		


	export default {
		data() {
			return {
				wholeSrc:'',
				token:''
			}
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			this.wholeSrc = '地址?token=' + this.token
		},
		onLoad() {
			if (window) {
			  window.addEventListener('message', (e) => {
				 //可以通过e里面的参数 orgin判断是否是要嵌入的h5  (判断一下来源安全一些)
			   console.log(e.data, 'h5传过来的')
			})
		}
		},
		methods: {
			getMessage(value){
				console.log(value ,'value','getMessage里面的值')
			}			
		}
	}

二、H5页面（接收app中所携带的参数）:

1、首先需要再H5项目下载webview.js文件，在main.js中引入（uni.webview.1.5.2.js）

!(function (e, n) {
  'object' == typeof exports && 'undefined' != typeof module
    ? (module.exports = n())
    : 'function' == typeof define && define.amd
    ? define(n)
    : ((e = e || self).uni = n())
})(this, function () {
  'use strict'
  try {
    var e = {}
    Object.defineProperty(e, 'passive', {
      get: function () {
        !0
      },
    }),
      window.addEventListener('test-passive', null, e)
  } catch (e) {}
  var n = Object.prototype.hasOwnProperty
  function t(e, t) {
    return n.call(e, t)
  }
  var i = [],
    a = function (e, n) {
      var t = { options: { timestamp: +new Date() }, name: e, arg: n }
      if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {
        if ('postMessage' === e) {
          var a = { data: [n] }
          return window.__dcloud_weex_postMessage
            ? window.__dcloud_weex_postMessage(a)
            : window.__dcloud_weex_.postMessage(JSON.stringify(a))
        }
        var o = {
          type: 'WEB_INVOKE_APPSERVICE',
          args: { data: t, webviewIds: i },
        }
        window.__dcloud_weex_postMessage
          ? window.__dcloud_weex_postMessageToService(o)
          : window.__dcloud_weex_.postMessageToService(JSON.stringify(o))
      }
      if (!window.plus)
        return window.parent.postMessage(
          { type: 'WEB_INVOKE_APPSERVICE', data: t, pageId: '' },
          '*'
        )
      if (0 === i.length) {
        var r = plus.webview.currentWebview()
        if (!r) throw new Error('plus.webview.currentWebview() is undefined')
        var d = r.parent(),
          s = ''
        ;(s = d ? d.id : r.id), i.push(s)
      }
      if (plus.webview.getWebviewById('__uniapp__service'))
        plus.webview.postMessageToUniNView(
          { type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } },
          '__uniapp__service'
        )
      else {
        var w = JSON.stringify(t)
        plus.webview
          .getLaunchWebview()
          .evalJS(
            'UniPlusBridge.subscribeHandler("'
              .concat('WEB_INVOKE_APPSERVICE', '",')
              .concat(w, ',')
              .concat(JSON.stringify(i), ');')
          )
      }
    },
    o = {
      navigateTo: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url
        a('navigateTo', { url: encodeURI(n) })
      },
      navigateBack: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.delta
        a('navigateBack', { delta: parseInt(n) || 1 })
      },
      switchTab: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url
        a('switchTab', { url: encodeURI(n) })
      },
      reLaunch: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url
        a('reLaunch', { url: encodeURI(n) })
      },
      redirectTo: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url
        a('redirectTo', { url: encodeURI(n) })
      },
      getEnv: function (e) {
        window.plus ? e({ plus: !0 }) : e({ h5: !0 })
      },
      postMessage: function () {
        var e =
          arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}
        a('postMessage', e.data || {})
      },
    },
    r = /uni-app/i.test(navigator.userAgent),
    d = /Html5Plus/i.test(navigator.userAgent),
    s = /complete|loaded|interactive/
  var w = window.my && navigator.userAgent.indexOf('AlipayClient') > -1
  var u =
    window.swan && window.swan.webView && /swan/i.test(navigator.userAgent)
  var c =
    window.qq &&
    window.qq.miniProgram &&
    /QQ/i.test(navigator.userAgent) &&
    /miniProgram/i.test(navigator.userAgent)
  var g =
    window.tt &&
    window.tt.miniProgram &&
    /toutiaomicroapp/i.test(navigator.userAgent)
  var v =
    window.wx &&
    window.wx.miniProgram &&
    /micromessenger/i.test(navigator.userAgent) &&
    /miniProgram/i.test(navigator.userAgent)
  var p = window.qa && /quickapp/i.test(navigator.userAgent)
  for (
    var l,
      _ = function () {
        ;(window.UniAppJSBridge = !0),
          document.dispatchEvent(
            new CustomEvent('UniAppJSBridgeReady', {
              bubbles: !0,
              cancelable: !0,
            })
          )
      },
      f = [
        function (e) {
          if (r || d)
            return (
              window.__dcloud_weex_postMessage || window.__dcloud_weex_
                ? document.addEventListener('DOMContentLoaded', e)
                : window.plus && s.test(document.readyState)
                ? setTimeout(e, 0)
                : document.addEventListener('plusready', e),
              o
            )
        },
        function (e) {
          if (v)
            return (
              window.WeixinJSBridge && window.WeixinJSBridge.invoke
                ? setTimeout(e, 0)
                : document.addEventListener('WeixinJSBridgeReady', e),
              window.wx.miniProgram
            )
        },
        function (e) {
          if (c)
            return (
              window.QQJSBridge && window.QQJSBridge.invoke
                ? setTimeout(e, 0)
                : document.addEventListener('QQJSBridgeReady', e),
              window.qq.miniProgram
            )
        },
        function (e) {
          if (w) {
            document.addEventListener('DOMContentLoaded', e)
            var n = window.my
            return {
              navigateTo: n.navigateTo,
              navigateBack: n.navigateBack,
              switchTab: n.switchTab,
              reLaunch: n.reLaunch,
              redirectTo: n.redirectTo,
              postMessage: n.postMessage,
              getEnv: n.getEnv,
            }
          }
        },
        function (e) {
          if (u)
            return (
              document.addEventListener('DOMContentLoaded', e),
              window.swan.webView
            )
        },
        function (e) {
          if (g)
            return (
              document.addEventListener('DOMContentLoaded', e),
              window.tt.miniProgram
            )
        },
        function (e) {
          if (p) {
            window.QaJSBridge && window.QaJSBridge.invoke
              ? setTimeout(e, 0)
              : document.addEventListener('QaJSBridgeReady', e)
            var n = window.qa
            return {
              navigateTo: n.navigateTo,
              navigateBack: n.navigateBack,
              switchTab: n.switchTab,
              reLaunch: n.reLaunch,
              redirectTo: n.redirectTo,
              postMessage: n.postMessage,
              getEnv: n.getEnv,
            }
          }
        },
        function (e) {
          return document.addEventListener('DOMContentLoaded', e), o
        },
      ],
      m = 0;
    m  
在main.js中引入
 
//main.js引入
import uniview from '@/utils/uni.webview.1.5.2.js'
//挂载到全局实例上面
// web-view SDK
Vue.prototype.uniview = uniview
 
在请求拦截器里面添加获取用户登录验签的token，否则需要重新登陆H5项目获取当前项目的验签
 
if(window.location.href.indexOf("?") !== -1){
	if(window.location.href.split('?')[1].split('&')[0].split('=')[1]){
		  let token=window.location.href.split('?')[1].split('&')[0].split('=')[1]
		  uni.setStorage({
			key: 'access-token',
			data: token
		  })
		  document.cookie = 'token=' + token
	}				
}
 
此时就可以获取到app项目中登录人的信息，不需要重新登录
 
在H5跳转的那个页面可以通过onload获取app携带的参数
 
//h5页面接收
		onLoad(options){		 
		 if(options && options.token){
			uni.setStorage({
				key: 'access-token',
				data: options.token
			})
			uni.getStorage({
				key: 'access-token',
				success: (res) => {
					console.log(res.data,'tempToken')
				}
			})
		 }
 
h5页面向app项目传参
 
//h5页面向app页面传参
			this.uniview.webView.postMessage({
				data: {
				  type: 'pay_copy',
				  message: 'h5传过去的参数我是  镜像报表中的参数88888888！',
				},
			})
 
如果使用了自定义导航，可以使用webview中的返回方法
 
this.uniview.webView.navigateBack({
	delta: 1
})
 
（图片来源网络，侵删）
（图片来源网络，侵删）
（图片来源网络，侵删）