微信小程序--分享H5外部鏈接

有兩個頁面，一個是自己項目的頁面(跳轉訪問外部鏈接)tiaozhua.wxml，一個是要跳轉到外部鏈接的頁面(這個頁面能分享出去)share.wxml，在share.wxml頁面中用<web-view src="{{url}}"></web-view> 把外部鏈接的頁面包括起來，src 里邊就是外部鏈接地址，這時的H5外鏈顯示位置是在小程序內部。

先配置業務域名微信公眾號平台和微信開發者工具中：

不能直接的將外鏈寫在要分享的頁面，必須從跳轉頁面傳遞過來，分享后能從分享鏈接正常訪問。

tiaozhua.wxml

<button catchtap="tiaozhuan" class="tau">點擊預覽</button>

tiaozhua.js

// 跳轉到外部鏈接所在的頁面
tiaozhuan:function(){
    let path =encodeURIComponent(this.data.url);//這個就是要傳過去的外部鏈接
    wx.navigateTo({
        url: `/pages/share/share?path=${path}`//這個地址/pages/share/share是share.wxml頁面，需要在app.json中配置
    })
},

注意：因為跳轉傳參中會自動識別參數，而 path 的鏈接是動態的也需要傳就會解析失敗，要用encodeURIComponent 對鏈接進行編碼，既然編碼了，那接收數據時自然要解碼嘍，decodeURIComponent 這個方法就是解碼

" `` " 這個反單引號是輸入法英文狀態下 單擊鍵盤數組1左邊的按鍵。它是將需要拼接的字符串變量用${}抱起來在寫到需要拼接的地方。

share.wxml

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

share.js

onLoad: function (options) {
    let url=decodeURIComponent(options.path);//解碼
    this.setData({
      url:url
    })
},
//點擊右上角三個點分享鏈接
onShareAppMessage:function(){
    let path = '/pages/share/share';
    let weburl = encodeURIComponent(this.data.url);
    path += `?url=${weburl}`;
    return{
        path: path
    }
},

完結。