uniappAPP项目利用webview 嵌套整个uniappH5项目，H5项目获取app的登录验签 ...

本编文章 uniappAPP与uniappH5是两个独立的项目，都是可以单独登录访问，在app中嵌套H5项目，需要在H5项目中获取app项目的登录信息，可以直接获取登录人信息，进而可以直接访问。
一、在app中利用web-view嵌入H5页面（只要在网址上面携带参数就可以）:
app中：需要将用户验签利用的token作为参数传入到H5项目中

1. <template>
2.         <view class="box" style="padding-top: 100px;">
3.                 <web-view :src="wholeSrc" @message="getMessage"></web-view>
4.         </view>       
5. </template>
7. <script>
8.         export default {
9.                 data() {
10.                         return {
11.                                 wholeSrc:'',
12.                                 token:''
13.                         }
14.                 },
15.                 mounted() {
16.                         this.token = uni.getStorageSync('token')
17.                         this.wholeSrc = '地址?token=' + this.token
18.                 },
19.                 onLoad() {
20.                         if (window) {
21.                           window.addEventListener('message', (e) => {
22.                                  //可以通过e里面的参数 orgin判断是否是要嵌入的h5  (判断一下来源安全一些)
23.                            console.log(e.data, 'h5传过来的')
24.                         })
25.                 }
26.                 },
27.                 methods: {
28.                         getMessage(value){
29.                                 console.log(value ,'value','getMessage里面的值')
30.                         }                       
31.                 }
32.         }
33. </script>

复制代码

二、H5页面（吸取app中所携带的参数）:
1、首先需要再H5项目下载webview.js文件，在main.js中引入（uni.webview.1.5.2.js）

1. !(function (e, n) {
2.   'object' == typeof exports && 'undefined' != typeof module
3.     ? (module.exports = n())
4.     : 'function' == typeof define && define.amd
5.     ? define(n)
6.     : ((e = e || self).uni = n())
7. })(this, function () {
8.   'use strict'
9.   try {
10.     var e = {}
11.     Object.defineProperty(e, 'passive', {
12.       get: function () {
13.         !0
14.       },
15.     }),
16.       window.addEventListener('test-passive', null, e)
17.   } catch (e) {}
18.   var n = Object.prototype.hasOwnProperty
19.   function t(e, t) {
20.     return n.call(e, t)
21.   }
22.   var i = [],
23.     a = function (e, n) {
24.       var t = { options: { timestamp: +new Date() }, name: e, arg: n }
25.       if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {
26.         if ('postMessage' === e) {
27.           var a = { data: [n] }
28.           return window.__dcloud_weex_postMessage
29.             ? window.__dcloud_weex_postMessage(a)
30.             : window.__dcloud_weex_.postMessage(JSON.stringify(a))
31.         }
32.         var o = {
33.           type: 'WEB_INVOKE_APPSERVICE',
34.           args: { data: t, webviewIds: i },
35.         }
36.         window.__dcloud_weex_postMessage
37.           ? window.__dcloud_weex_postMessageToService(o)
38.           : window.__dcloud_weex_.postMessageToService(JSON.stringify(o))
39.       }
40.       if (!window.plus)
41.         return window.parent.postMessage(
42.           { type: 'WEB_INVOKE_APPSERVICE', data: t, pageId: '' },
43.           '*'
44.         )
45.       if (0 === i.length) {
46.         var r = plus.webview.currentWebview()
47.         if (!r) throw new Error('plus.webview.currentWebview() is undefined')
48.         var d = r.parent(),
49.           s = ''
50.         ;(s = d ? d.id : r.id), i.push(s)
51.       }
52.       if (plus.webview.getWebviewById('__uniapp__service'))
53.         plus.webview.postMessageToUniNView(
54.           { type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } },
55.           '__uniapp__service'
56.         )
57.       else {
58.         var w = JSON.stringify(t)
59.         plus.webview
60.           .getLaunchWebview()
61.           .evalJS(
62.             'UniPlusBridge.subscribeHandler("'
63.               .concat('WEB_INVOKE_APPSERVICE', '",')
64.               .concat(w, ',')
65.               .concat(JSON.stringify(i), ');')
66.           )
67.       }
68.     },
69.     o = {
70.       navigateTo: function () {
71.         var e =
72.             arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
73.           n = e.url
74.         a('navigateTo', { url: encodeURI(n) })
75.       },
76.       navigateBack: function () {
77.         var e =
78.             arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
79.           n = e.delta
80.         a('navigateBack', { delta: parseInt(n) || 1 })
81.       },
82.       switchTab: function () {
83.         var e =
84.             arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
85.           n = e.url
86.         a('switchTab', { url: encodeURI(n) })
87.       },
88.       reLaunch: function () {
89.         var e =
90.             arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
91.           n = e.url
92.         a('reLaunch', { url: encodeURI(n) })
93.       },
94.       redirectTo: function () {
95.         var e =
96.             arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
97.           n = e.url
98.         a('redirectTo', { url: encodeURI(n) })
99.       },
100.       getEnv: function (e) {
101.         window.plus ? e({ plus: !0 }) : e({ h5: !0 })
102.       },
103.       postMessage: function () {
104.         var e =
105.           arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}
106.         a('postMessage', e.data || {})
107.       },
108.     },
109.     r = /uni-app/i.test(navigator.userAgent),
110.     d = /Html5Plus/i.test(navigator.userAgent),
111.     s = /complete|loaded|interactive/
112.   var w = window.my && navigator.userAgent.indexOf('AlipayClient') > -1
113.   var u =
114.     window.swan && window.swan.webView && /swan/i.test(navigator.userAgent)
115.   var c =
116.     window.qq &&
117.     window.qq.miniProgram &&
118.     /QQ/i.test(navigator.userAgent) &&
119.     /miniProgram/i.test(navigator.userAgent)
120.   var g =
121.     window.tt &&
122.     window.tt.miniProgram &&
123.     /toutiaomicroapp/i.test(navigator.userAgent)
124.   var v =
125.     window.wx &&
126.     window.wx.miniProgram &&
127.     /micromessenger/i.test(navigator.userAgent) &&
128.     /miniProgram/i.test(navigator.userAgent)
129.   var p = window.qa && /quickapp/i.test(navigator.userAgent)
130.   for (
131.     var l,
132.       _ = function () {
133.         ;(window.UniAppJSBridge = !0),
134.           document.dispatchEvent(
135.             new CustomEvent('UniAppJSBridgeReady', {
136.               bubbles: !0,
137.               cancelable: !0,
138.             })
139.           )
140.       },
141.       f = [
142.         function (e) {
143.           if (r || d)
144.             return (
145.               window.__dcloud_weex_postMessage || window.__dcloud_weex_
146.                 ? document.addEventListener('DOMContentLoaded', e)
147.                 : window.plus && s.test(document.readyState)
148.                 ? setTimeout(e, 0)
149.                 : document.addEventListener('plusready', e),
150.               o
151.             )
152.         },
153.         function (e) {
154.           if (v)
155.             return (
156.               window.WeixinJSBridge && window.WeixinJSBridge.invoke
157.                 ? setTimeout(e, 0)
158.                 : document.addEventListener('WeixinJSBridgeReady', e),
159.               window.wx.miniProgram
160.             )
161.         },
162.         function (e) {
163.           if (c)
164.             return (
165.               window.QQJSBridge && window.QQJSBridge.invoke
166.                 ? setTimeout(e, 0)
167.                 : document.addEventListener('QQJSBridgeReady', e),
168.               window.qq.miniProgram
169.             )
170.         },
171.         function (e) {
172.           if (w) {
173.             document.addEventListener('DOMContentLoaded', e)
174.             var n = window.my
175.             return {
176.               navigateTo: n.navigateTo,
177.               navigateBack: n.navigateBack,
178.               switchTab: n.switchTab,
179.               reLaunch: n.reLaunch,
180.               redirectTo: n.redirectTo,
181.               postMessage: n.postMessage,
182.               getEnv: n.getEnv,
183.             }
184.           }
185.         },
186.         function (e) {
187.           if (u)
188.             return (
189.               document.addEventListener('DOMContentLoaded', e),
190.               window.swan.webView
191.             )
192.         },
193.         function (e) {
194.           if (g)
195.             return (
196.               document.addEventListener('DOMContentLoaded', e),
197.               window.tt.miniProgram
198.             )
199.         },
200.         function (e) {
201.           if (p) {
202.             window.QaJSBridge && window.QaJSBridge.invoke
203.               ? setTimeout(e, 0)
204.               : document.addEventListener('QaJSBridgeReady', e)
205.             var n = window.qa
206.             return {
207.               navigateTo: n.navigateTo,
208.               navigateBack: n.navigateBack,
209.               switchTab: n.switchTab,
210.               reLaunch: n.reLaunch,
211.               redirectTo: n.redirectTo,
212.               postMessage: n.postMessage,
213.               getEnv: n.getEnv,
214.             }
215.           }
216.         },
217.         function (e) {
218.           return document.addEventListener('DOMContentLoaded', e), o
219.         },
220.       ],
221.       m = 0;
222.     m < f.length && !(l = f[m](_));
223.     m++
224.   );
225.   l || (l = {})
226.   var E = 'undefined' != typeof uni ? uni : {}
227.   if (!E.navigateTo) for (var b in l) t(l, b) && (E[b] = l[b])
228.   return (E.webView = l), E
229. })

复制代码

在main.js中引入

1. //main.js引入
2. import uniview from '@/utils/uni.webview.1.5.2.js'
3. //挂载到全局实例上面
4. // web-view SDK
5. Vue.prototype.uniview = uniview

复制代码

在哀求拦截器内里添加获取用户登录验签的token，否则需要重新登岸H5项目获取当前项目的验签

1. if(window.location.href.indexOf("?") !== -1){
2.         if(window.location.href.split('?')[1].split('&')[0].split('=')[1]){
3.                   let token=window.location.href.split('?')[1].split('&')[0].split('=')[1]
4.                   uni.setStorage({
5.                         key: 'access-token',
6.                         data: token
7.                   })
8.                   document.cookie = 'token=' + token
9.         }                               
10. }

复制代码

此时就可以获取到app项目中登录人的信息，不需要重新登录
在H5跳转的谁人页面可以通过onload获取app携带的参数

1. //h5页面接收
2.                 onLoad(options){                 
3.                  if(options && options.token){
4.                         uni.setStorage({
5.                                 key: 'access-token',
6.                                 data: options.token
7.                         })
8.                         uni.getStorage({
9.                                 key: 'access-token',
10.                                 success: (res) => {
11.                                         console.log(res.data,'tempToken')
12.                                 }
13.                         })
14.                  }

复制代码

h5页面向app项目传参

1. //h5页面向app页面传参
2.                         this.uniview.webView.postMessage({
3.                                 data: {
4.                                   type: 'pay_copy',
5.                                   message: 'h5传过去的参数我是  镜像报表中的参数88888888！',
6.                                 },
7.                         })

复制代码

如果利用了自界说导航，可以利用webview中的返回方法

1. this.uniview.webView.navigateBack({
2.         delta: 1
3. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。