• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序 webView 内嵌h5

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  前端时间搞了小程序跑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

 

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap