小程序 webView 内嵌h5

布满荆棘的人生 2021-11-22 11:16 394阅读 0赞

前端时间搞了小程序跑h5的流程，趁着这段稍微空闲的时间整理下，和大家一起分享下

1.内嵌h5，小程序场景判断

wx.miniprogram.getev(fn)  ,   该方法是微信提供的api，注意的是，该方法是异步的 、引用微信的JS-SDK版本要相应版本(推荐用JSSDK 1.3.2或者以上），否则会出现方法不存在，或者其他问题。

2 web-view 中转，写个公用跳转页面（用的是wepy框架）

<template>
        <web-view src="{
        {pageUrl}}{
        {params}}"> </web-view>
    </template>
    
    <script>
    import wepy from "wepy"
    import { USER_INFO } from "../utils/constant";
    
    export default class webView extends wepy.page{
       
        data = {
           pageUrl: '',
           mall_cookie: '',
           params:'',
        }
       
        onLoad(option){
         
            var pageUrl = decodeURIComponent(option.pageUrl)
                pageUrl = pageUrl.replace('http:',"https:")
            var userInfo = wepy.getStorageSync(USER_INFO)
            var hasPrama = pageUrl.indexOf('?')>-1?true: false
            this.pageUrl = pageUrl
            this.params = hasPrama?'&ishead=false': '?ishead=false'
      
            
            this.$apply()
        }
    }
    </script>
    
    <style lang="less">
    
    </style>

3。 登录状态传入

进入h5页面前，访问后台一个写入登录信息cookie的接口，然后后台再重定向对应页面中即可。 这里面有两种情况，

. ios的webview  cookie缓存和微信的h5缓存是同一套，也就是说你再微信中打开过h5有缓存的话，那么在小程序中进入h5也是有缓存的

. 安卓的是两套，微信的h5缓存和小程序里面的互不影响。

安全 相关： 这里可能涉及到安全问题以及信息泄露的问题，这种结合微信授权的方式，生成自己对应的tooken,然后根据tooken去拿到对应的用户信息，当然这个里面只是一个初步实现方案。不过因为其有一定的时效性，而且tooken也不一定那么好拿到，基本要求也算满足的

传入方式： 通过链接的拼接形式，如上面代码中的参数拼接。就可以从h5页面拿到小程序的信息，当然你跳转小程序的时候，也可以通过这种链接形式传回来。

4.严格保持里面跳转是https跳转， 如果访问的是http链接或者是重定向到其他的http链接，那么就会出现业务域名不匹配的问题，导致页面挂掉

5 h5页面返回小程序， 官方也给出了相应api

wx.miniProgram.navigateTo  等  ，可参考对应文档  [https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html][https_developers.weixin.qq.com_miniprogram_dev_component_web-view.html]

转载于:https://www.cnblogs.com/ylHeyden/p/11169382.html

[https_developers.weixin.qq.com_miniprogram_dev_component_web-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html