小程序 webView 内嵌h5
Posted ylheyden
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序 webView 内嵌h5相关的知识,希望对你有一定的参考价值。
前端时间搞了小程序跑h5的流程,趁着这段稍微空闲的时间整理下,和大家一起分享下
1.内嵌h5,小程序场景判断
wx.miniprogram.getev(fn) , 该方法是微信提供的api,注意的是,该方法是异步的 、引用微信的JS-SDK版本要相应版本(推荐用JSSDK 1.3.2或者以上),否则会出现方法不存在,或者其他问题。
2 web-view 中转,写个公用跳转页面(用的是wepy框架)
<template> <web-view src="pageUrlparams"> </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
以上是关于小程序 webView 内嵌h5的主要内容,如果未能解决你的问题,请参考以下文章