微信小程序跳轉外部鏈接（h5頁面）以及數據交互

最近項目有個需求，在微信小程序中跳轉外部鏈接完成相關的操作，操作完成后返回微信小程序的相關頁面。

1、跳轉外部鏈接（官方文檔）

1）入口

//跳轉到入口
wx.navigateTo({url: '../out/out'})

2）app.json

{
  "pages": [
    "pages/main/main",
    "pages/logs/logs",
    "pages/out/out"  ,
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "sitemapLocation": "sitemap.json"
}    

3）新建out文件夾

 

 

 4）pages/out/out.wxml

//指向網頁的鏈接
<web-view src="https:www.test.com/h5info"></web-view>

注意：外部鏈接需要到小程序配置業務域名（需要后端協助哦）。

 

2、從H5頁面跳回小程序

1）安裝jssdk包，才能調用跳轉的方法哦～

npm install wechat-jssdk --save

2）調用方法，親測有效，這里舉一個例子（還有多個詳情查看官方文檔）

//同小程序使用方法，url和在小程序的格式一樣即可
wx.miniProgram.navigateTo({url: ''})

 

3、小程序跳轉H5頁面（傳參數）

目錄結構與上面保持一致。

1)  入口

wx.navigateTo({url: '../out/out?name=zhangsan'})

2）pages/out/out.js

// pages/out/out.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    url:'',
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.setData({
      url: `https://www.test.com/h5info?name=${options.name}}`
    });
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  },
})

3)  pages/out/out.wxml

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

4)  h5頁面，獲取參數

//獲取url參數 
getParams(params) {
   const reg = new RegExp("(^|&)" + params + "=([^&]*)(&|$)", "i");
    const r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return decodeURIComponent(r[2]);
    }
    return null;
  }

//調用
const name = getParams(name);

 

（完）