首页 > 编程语言 >小程序webView 实现小程序内嵌H5页面

小程序webView 实现小程序内嵌H5页面

时间:2024-05-31 15:03:27浏览次数:18  
标签:const url 程序 H5 token 跳转 webView 页面

web-view | 微信开放文档

本案例新建了一个 webView页面  只渲染webView组件

配置路由,跳转页面的时候 前缀使用‘/subPages/webView/index?weburl=https://xxxxx’

componentDidMount 的时候 获取路由中的 weburl 地址参数

  async componentDidMount() {
    const router = getCurrentInstance().router;
    const params = router.params;
   
    let url = params.weburl;
    // 对url进行参数处理 ,可以增加需要传递给H5的token等其他参数

    this.setState({
      url: url, // 获取其他小程序页面 请求跳转的地址
    });
  }  


  render() {
    const { url } = this.state;

    return (
    <WebView
        src={decodeURIComponent(url)} // H5地址  加上域名的全链路地址
        onMessage={(res) => {
          this.setPostMessage(res.detail.data); // 存储H5传回来的数据 可以存到公共区域 方便使用
        }}
      />
    );
  }
 

发起跳转的方式:

const token=''; // 自行获取token
const weburl='' ;// 自行定义地址
Taro.navigateTo({
    url: `/subPages/webView/index?weburl=${weburl}&token=${token}` ,
});

上面是跳转到小程序的webview.jsx页面  并且带上了需要跳转的H5地址weburl

在webview页面加载的时候获取H5地址 并添加在web-view标签上 

如果页面中很多地方需要跳转H5页面 并且H5页面是基本固定的域名 可以将Taro.navigateTo进行封装处理

案例:

const toWebFun = (type = 'navigateTo') => {
  return function (url, isRequireToken) {
    const params = queryToObj(url); // 
    const token = Taro.getStorageSync(ConstantList.TOKEN); // 
    const host = Config.HOST_H5; // H5固定域名
    const TaroNavigate = type === 'redirectTo' ? Taro.redirectTo : Taro.navigateTo;
    let path = '';
    let tokenKey = '?token=';
    let ismini = '?ismini=1'; // 个人定义代表小程序内打开H5 方便区分

    // 带有https链接情况 就不使用host固定域名
    if (url.includes('https://')) {
      path = `/subPages/webView/index?weburl=${encodeURIComponent(
        `${url}${url.indexOf('?') > -1 ? '&token=' : '?token='}${token}&ismini=1`,
      )}`;
      TaroNavigate({
        url: path,
      });
      return;
    }
    // 如果连接本身带有?后面参数 则不要覆盖 而是追加 
    if (url.indexOf('?') !== -1) {
      tokenKey = '&token=';
      ismini = '&ismini=1';
    }
    if (isRequireToken) { // 是否需要登录的页面
      if (token) {
        path = `/subPages/webView/index?weburl=${encodeURIComponent(`${host}#${url + tokenKey + token}${ismini}`)} `;
      } else {
// 需要登录 有没有token的情况 先跳转登录 然后 带上url登陆后继续执行跳转操作 又会继续执行toWebFun 函数
        Taro.navigateTo({
          url: `/subPages/login/index?redirectTo=${url}`,
        });
        return;
      }
    } else {
// 无需token
      path = `/subPages/webView/index?weburl=${encodeURIComponent(`${host}#${url}${ismini}`)}`;
    }
    TaroNavigate({
      url: path,
    });
  };
};

export const navigateToWeb = toWebFun();

在其他页面就是使用navigateToWeb 跳转H5页面

H5页面中提供一下方法回到小程序页面及给小程序页面传值

小程序和网页之间的通信是单向的,即只能从网页发送消息到小程序,不能从小程序发送消息到网页。

// H5与小程序交互的方式

// 返回小程序首页
wx.miniProgram.navigateTo({url: '/pages/home/index'})

// 给小程序传递参数
wx.miniProgram.postMessage({ data: 'foo' })
// 给小程序传递复杂参数
wx.miniProgram.postMessage({ data: {foo: 'bar'} }) 

// 小程序web-view 存储H5传回来的数据
// onMessage={(res) => {
//    this.setPostMessage(res.detail.data); // 存储H5传回来的数据
// }}

// 获取当前环境
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })  
 
// 小程序下的H5 去小程序的虚拟订单页
wx.miniProgram.navigateTo({url:`/subPages/virtualOrderList/virtualOrderList?type=coupon`});
 

小程序可以在跳转之前在url携带一些参数,

或者直接通过后端缓存的方式 在小程序存储缓存换取缓存id,拼接在url上,跳转到H5之后通过缓存id获取缓存数据

标签:const,url,程序,H5,token,跳转,webView,页面
From: https://blog.csdn.net/Embrace924/article/details/139324114

相关文章

  • 521源码-免费手游下载-【烽火中原H5】深度体验:横版网页国战手游及WIN学习手工端
    【烽火中原H5】深度体验:横版网页国战手游及WIN学习手工端全面解析,烽火中原H5】横板网页国战手游+WIN学习手工端+语音视频教程+营运后台+CDK授权后台,喜欢国战手游的玩家们,你们期待已久的【烽火中原H5】现已上线!这款游戏以横版网页的形式呈现,为玩家带来沉浸式的国战体验。同时......
  • Ubuntu上使用QT creator运行cuda程序
    突发奇想想尝试一下QT界面中使用CUDA加速过的程序,然后查了一下资料,总结一下有以下几点吧1、CUDA配置全部放在.pro文件中2、main.cpp为主函数使用g++编译3、kernel.cu为核函数使用nvcc编译不多说上代码以下为main.cpp代码   #include<QtCore/QCoreApplication>       ......
  • 家政预约小程序06服务展示
    目录1首页展示2团购详情总结在家政小程序中,最重要的信息就是各项服务的内容。顾客通过服务的信息,了解家政公司可以提供什么样的服务以及相关的收费。本篇我们介绍一下服务展示功能如何开发。1首页展示在首页我们已经开发了活动展示、服务分类展示,在服务分类下......
  • 大龄程序员思考
    视觉AI很难做近来一直在从事AI视觉检测方面的工作,外行人可能觉得挺厉害,实际上这钱挣得基本等于搬砖近两年以来,行业不景气、制造业利润上不去,那么在这个产业链中,老板就没有余钱来进行升级改造。老板们是否愿意花钱投入视觉检测,一是老板的认知、二是是否有足够的资金实力;就算最......
  • 微客云霸王餐v3版本正式上线 团购霸王餐+小程序多开
    好久没发布更新日志了,上次的更新还是春节的祝福语,从春节结束到现在快3个月了,不是说没更新内容,其实微客云的版本迭代一直在做,从后台的日志看已经发布很多版本了,只是没有发布文章通知,因为我们只有比较大的版本才会通知大家,那么今天他来了,团购霸王餐正式上线,支持美团美团购、后续支持......
  • 盘点程序员可以接私活的平台和一些建议
    如果你的工作相对没那么费时间,可以空闲的时候去接点私活。或者是还没有找工作之前,可以通过一些平台接一些兼职,一来能够赚钱,在主业保持稳定的情况下能够发展自己的副业。二来通过接项目,大量的实践,你说接触的类型会更丰富,可以为你积累实战经验,面试时也会比他人更有优势。下面是我为......
  • 通用程序部署shell脚本
    简介通常一个独立的服务,程序,中间件成后,为便于测试,上线部署都会编写一一个shell用于对程序的启动,重启,查看状态,停止,卸载等动作,以下是一个使用shell脚本来实现的简单demo,直接见代码。功能启动:start重启:restart停止:stop卸载:uninstall查看运行状态:status获取程序......
  • 顺风车小程序
    顺风车小程序:便捷出行新选择顺风车小程序是一种基于微信、支付宝等平台开发的轻应用,为用户提供便捷的顺风车出行服务。与传统的顺风车APP相比,顺风车小程序具有以下优势:便捷高效:用户可以通过小程序随时随地发布出行需求或查看顺风车订单,无需下载安装额外的APP。安全可靠:平台对......
  • 如何使用带有 typescript 的 playwright 查找 react 应用程序的 LCP?
    需要获取使用playwright和typescript的react应用程序的最大Contentful画面这是用于网络性能测试的,应该是精确的值我尝试了https://web.dev/articles/lcp#measure-lcp-in-javascript并使用Typescript实现了相同的功能但是我们需要知道,我们是否还有其他东西returnp......
  • 基于开源AI智能名片S2B2C商城系统小程序的个体私域流量池构建与发展
    摘要:随着微信、抖音、小红书等移动社交平台的日益崛起,个体私域流量池的概念逐渐深入人心。这些社交平台不仅为个体提供了展示自我品牌的舞台,更使得“再小的个体,也有自己的品牌”成为可能。在这一背景下,KOL(关键意见领袖)和普通个体纷纷利用这些平台,通过创造内容、集聚同好,成功搭......