微信小程序web-view 嵌入h5页面

最新推荐文章于 2024-05-26 16:54:47 发布

小任同学`

最新推荐文章于 2024-05-26 16:54:47 发布

阅读量954

点赞数 2

分类专栏：微信小程序 vue 文章标签： javascript 微信 vue.js

本文链接：https://blog.csdn.net/m0_55969466/article/details/124125492

版权

vue 同时被 2 个专栏收录

28 篇文章 2 订阅

订阅专栏

微信小程序

14 篇文章 1 订阅

订阅专栏

web-view | 微信开放文档

具体可以参考微信开放文档中web-view

微信小程序

wxml

<web-view src="{{kocUrl}}"></web-view>


const app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        kocUrl: ''
    },
   

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.hideShareMenu();
        var that = this,
        //url 需要跳转的路径
        url = options.url;
       //iswechat是用来做判断小程序环境的（由于刚进小程序用微信的sdk拿不到是否是小程序环境，所以带了个参数做处理）
            that.setData({
                kocUrl:`https://xxxxxxx.cn/${url}?token=${token}&iswechat=true`
            })
        
        console.log(this.data.kocUrl);
    },
    
})

h5

1、在h5 项目html中引入微信的cdn文件

<body>
  <div id="app">
  </div>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  <script type="module" src="/src/main.ts"></script>
</body>

2、使用weixin-js-sdk


npm install weixin-js-sdk
//在当前页面引入
import wx from "weixin-js-sdk";

封装一个方法，在所需要判断的地方引入以下方法

传true则返回是否为小程序环境，不传则直接跳回小程序我的页面

   //是否为小程序环境并返回原始小程序
export function isMiniprogram(flag){
  // flag = true 代表需要返回当前是否是小程序环境 否则就是直接跳转回小程序
  let smallPro=false
  wx.miniProgram.getEnv((res) => {
    // console.log(res.miniProgram) // true
    if (res.miniprogram) {
      smallPro = true
    } else {
      smallPro = false
    }
  })
  if(smallPro && !flag){
    //miniUrl可以为你想返回的小程序任何页面
    let miniUrl='/pages/personal/mine/mine'
    wx.miniProgram.redirectTo({
      url: miniUrl,//跳转回小程序的页面
      success: function(){
        console.log('success')
      },
      fail: function(){
        console.log('跳转回小程序的页面fail');
      },
    });
  }
  return smallPro //输出的是否为小程序环境
}

遇到一个问题，由于做处理的时候需要兼容h5登入正常使用

是h5环境 h5的公共头部显示，是小程序环境则隐藏

使用sdk 或者cdn都不能在刚进入环境拿到是否为小程序环境打印为undefined

所以从web-view跳入h5是携带了参数在路由守卫中做了处理

import router from "./router";
import { setCookie } from './utils/cookieUtils'

router.beforeEach((to, from, next) => {
  if (to.meta.title ){
      document.title=to.meta.title
    } else {
      document.title='xxx'
    }
    // 如果是微信小程序跳转过来的，获取到token设置一下
    if (to.query && to.query.token) {
      setCookie('token', to.query.token)
    }
    if(to.query&&to.query.iswechat){
      sessionStorage.setItem('iswechat','true')
    }
  next()
})

如果有更好的方法可以取到是否为小程序环境的值，多多交流哦~

小任同学`

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
微信小程序web-view 嵌入h5页面

web-view | 微信开放文档具体可以参考微信开放文档中web-view微信小程序wxml<web-view src="{{kocUrl}}"></web-view>jsconst app = getApp();Page({ /** * 页面的初始数据 */ data: { kocUrl: '' }, /** * 生命周期函数--监听页面加载 */
复制链接

扫一扫