快捷導(dǎo)航

小程序webView實現(xiàn)小程序內(nèi)嵌H5頁面的全過程

更新時間：2024年07月16日 08:35:35 作者：Embrace924

在微信小程序中內(nèi)嵌H5頁面是一種常見的需求,因為H5頁面具有靈活性和跨平臺性,可以彌補小程序原生代碼的不足,這篇文章主要給大家介紹了關(guān)于小程序webView實現(xiàn)小程序內(nèi)嵌H5頁面的相關(guān)資料,需要的朋友可以參考下

web-view | 微信開放文檔

本案例新建了一個 webView頁面只渲染webView組件

配置路由,跳轉(zhuǎn)頁面的時候前綴使用‘/subPages/webView/index?weburl=https://xxxxx’

componentDidMount 的時候獲取路由中的 weburl 地址參數(shù)

  async componentDidMount() {
    const router = getCurrentInstance().router;
    const params = router.params;
   
    let url = params.weburl;
    // 對url進行參數(shù)處理 ，可以增加需要傳遞給H5的token等其他參數(shù)

    this.setState({
      url: url, // 獲取其他小程序頁面 請求跳轉(zhuǎn)的地址
    });
  }  


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

    return (
    <WebView
        src={decodeURIComponent(url)} // H5地址  加上域名的全鏈路地址
        onMessage={(res) => {
          this.setPostMessage(res.detail.data); // 存儲H5傳回來的數(shù)據(jù) 可以存到公共區(qū)域 方便使用
        }}
      />
    );
  }

發(fā)起跳轉(zhuǎn)的方式：

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

上面是跳轉(zhuǎn)到小程序的webview.jsx頁面 并且帶上了需要跳轉(zhuǎn)的H5地址weburl

在webview頁面加載的時候獲取H5地址 并添加在web-view標(biāo)簽上

如果頁面中很多地方需要跳轉(zhuǎn)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'; // 個人定義代表小程序內(nèi)打開H5 方便區(qū)分

    // 帶有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;
    }
    // 如果連接本身帶有?后面參數(shù) 則不要覆蓋 而是追加 
    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的情況 先跳轉(zhuǎn)登錄 然后 帶上url登陸后繼續(xù)執(zhí)行跳轉(zhuǎn)操作 又會繼續(xù)執(zhí)行toWebFun 函數(shù)
        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 跳轉(zhuǎn)H5頁面

H5頁面中提供一下方法回到小程序頁面及給小程序頁面?zhèn)髦?/p>

小程序和網(wǎng)頁之間的通信是單向的，即只能從網(wǎng)頁發(fā)送消息到小程序，不能從小程序發(fā)送消息到網(wǎng)頁。

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

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

// 給小程序傳遞參數(shù)
wx.miniProgram.postMessage({ data: 'foo' })
// 給小程序傳遞復(fù)雜參數(shù)
wx.miniProgram.postMessage({ data: {foo: 'bar'} }) 

// 小程序web-view 存儲H5傳回來的數(shù)據(jù)
// onMessage={(res) => {
//    this.setPostMessage(res.detail.data); // 存儲H5傳回來的數(shù)據(jù)
// }}

// 獲取當(dāng)前環(huán)境
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })  
 
// 小程序下的H5 去小程序的虛擬訂單頁
wx.miniProgram.navigateTo({url:`/subPages/virtualOrderList/virtualOrderList?type=coupon`});

小程序可以在跳轉(zhuǎn)之前在url攜帶一些參數(shù)，或者直接通過后端緩存的方式在小程序存儲緩存換取緩存id，拼接在url上，跳轉(zhuǎn)到H5之后通過緩存id獲取緩存數(shù)據(jù)

總結(jié)

到此這篇關(guān)于小程序webView實現(xiàn)小程序內(nèi)嵌H5頁面的文章就介紹到這了,更多相關(guān)小程序webView內(nèi)嵌H5頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: