柚子快報邀請碼778899分享：小程序內(nèi)嵌H5遇到的坑

http://yzkb.51969.com/

項目場景：

????????甲方項目主程序是uniapp開發(fā)的，兼容ios、安卓、微信小程序三個端的一套代碼，我司做了項目中的一個服務(wù)，但因為嵌入問題和代碼權(quán)限問題，最終選擇使用H5嵌入uniapp中。做這個H5遇到了不少的問題，大部分的精力都是在驗證H5有沒有實現(xiàn)某種功能的權(quán)限。

一、H5 分享小程序

需求： A小程序的H5中有一個分享產(chǎn)品的這么一個動作，點擊分享產(chǎn)品，可以分享到微信群里，供用戶購買；但是貨主是甲方uniapp開發(fā)的項目，用戶點擊微信群里分享出來的鏈接，直接跳轉(zhuǎn)到用戶的B小程序里接訂單；大致流程：A小程序里的H5頁面，分享出去一個鏈接，用戶點擊這個鏈接需要跳轉(zhuǎn)到B小程序，并做之后一些列的接單操作；所以分享出去的這個鏈接應(yīng)該是去往B小程序的一個鏈接； ????????微信其實是不允許這么做的，因為可能存在惡意引流問題；況且小程序內(nèi)嵌的H5，不支持分享本頁面以及分享小程序卡片功能，更不要說來實現(xiàn)分享一個別的小程序了； 所以有兩種方法來解決這個問題：

1.1、不借助原生小程序，可滿足小程序ios和安卓

????????如果不借助原生小程序的話，僅僅依靠H5做分享，只能通過分享文字，以及短連接來生成分享碼，類似于一條短信，復(fù)制好短信，短信里包含一個地址，這個地址就是B小程序的短連接即可。但是短鏈接只允許某一個用戶使用，一個地址只允許1個用戶被訪問，所以這個分享出來的卡片無法被多個人點擊。

copyContent(params, type = 'input') {

const { param1 } = params

value = `您有一筆新的訂單，` + `點擊查看詳情?${location.origin}/sms?type=wxUrl&p1=${params1}`;

const input = document.createElement(type);

input.setAttribute('readonly', 'readonly'); // 設(shè)置為只讀, 防止在 ios 下拉起鍵盤

// input.setAttribute('value', value); // textarea 不能用此方式賦值, 否則無法復(fù)制內(nèi)容

input.value = value;

document.body.appendChild(input);

input.setSelectionRange(0, 9999); // 防止 ios 下沒有全選內(nèi)容而無法復(fù)制

input.select();

document.execCommand('copy');

document.body.removeChild(input);

this.$toast.success("復(fù)制成功,快去轉(zhuǎn)發(fā)吧！");

}

代碼說明： ????????1、通過點擊按鈕觸發(fā) copyContent 函數(shù)，給用戶在剪貼板中自動放入一段文字：您有一筆新的訂單，點擊查看詳情?https://xxx.xxx.com/sms?type=wxUrl&p1=123456。用戶點擊鏈接，跳轉(zhuǎn)到項目的一個中轉(zhuǎn)頁面，這個頁面的邏輯就是獲取到路徑上的參數(shù)，通過參數(shù)使用上方圖片中的方法生成微信小程序的URL Link并做自動跳轉(zhuǎn)即可。 ????????2、這樣，地址https://xxx.xxx.com/sms?type=wxUrl&p1=123456 就可以被多個人點擊，每次生成不同的URL Link，從而實現(xiàn)了一個地址可供多人使用。 ????????3、每天生成 URL Scheme 和 URL Link 總數(shù)量上限為50萬。所以如果用戶量大的話，最好在https://xxx.xxx.com/sms頁面使用本地存儲localStorage存儲已經(jīng)生成過的地址，來防止同一個用戶多次點擊同一個地址而浪費地址生成次數(shù)。 ????????4、可以兼容小程序，安卓，ios；注意H5無法自動調(diào)用微信好友列表。

1.2、借助原生小程序：不考慮安卓和ios

????????跳轉(zhuǎn)到原生小程序頁面后，使用wx.navigateToMiniProgram直接跳轉(zhuǎn)到B小程序即可，然后將B小程序的當(dāng)前頁面分享出去，就可以讓用戶點擊分享的卡片鏈接進行接下來的動作啦。 方案說明： 1、需要借助原生小程序做小程序跳轉(zhuǎn)； 2、分享出去的內(nèi)容就是卡片形式的，用戶體驗感比較好； 3、分享出去的卡片也沒有次數(shù)限制。

H5 支付 ????????微信小程序中的H5不支持直接調(diào)用微信支付，所以需要小程序去幫助做微信支付。將所有參數(shù)處理好，通過 uni.redirectTo 跳轉(zhuǎn)到小程序支付邏輯頁面，切記處理參數(shù)的時候，一定要通過encodeURIComponent來進行編譯，因為微信支付中的參數(shù)有特殊字符，如果不編譯，則可能出現(xiàn)字符串丟失，導(dǎo)致無法喚起微信支付； 代碼如下：

// H5 代碼邏輯

let obj = {

appId: encodeURIComponent(params.appId),

timeStamp: encodeURIComponent(params.timeStamp),

nonceStr: encodeURIComponent(params.nonceStr),

package: encodeURIComponent(params.package),

signType: encodeURIComponent(params.signType),

paySign: encodeURIComponent(params.paySign)

};

let callbackPage = this.$route.fullPath;// 該參數(shù)是當(dāng)用戶支付完成后。繼續(xù)跳轉(zhuǎn)到之前的H5頁面

let params = `appId=${obj.appId}&timeStamp=${obj.timeStamp}&nonceStr=${obj.nonceStr}&package=${obj.package}&signType=${obj.signType}&paySign=${obj.paySign}&cbpage=${encodeURIComponent(callbackPage)}`;

uni.redirectTo({

url: `/wxpaying?${params}`

});

// 微信小程序原生代碼

async onLoad(opt) {

let _this = this;

try {

// 微信小程序

wx.requestPayment({

timeStamp: decodeURIComponent(opt.timeStamp),

nonceStr: decodeURIComponent(opt.nonceStr),

package: decodeURIComponent(opt.package),

signType: decodeURIComponent(opt.signType),

paySign: decodeURIComponent(opt.paySign),

success: function (res) {

// console.log('success:' + JSON.stringify(res));

_this.callbackPage(opt.cbpage + encodeURIComponent('&payStatus=success')); // 這里是H5傳過來的回調(diào)頁面，支付完成跳轉(zhuǎn)回去

},

fail: function (err) {

// console.log('fail:' + JSON.stringify(err));

_this.callbackPage(opt.cbpage + encodeURIComponent('&payStatus=error')); // 這里是H5傳過來的回調(diào)頁面，支付完成跳轉(zhuǎn)回去

}

});

} catch (e) {

// 支付失敗，提示并跳轉(zhuǎn)回撮合頁面

uni.showToast({

title: '微信調(diào)用支付失敗，請聯(lián)系管理員!',

duration: 2000

});

setTimeout(() => {

uni.redirectTo({ url: '/index' });

}, 2000);

}

}

二、H5與原聲交互

????????H5中的bindMessage函數(shù)并不是實時交互的，是在特定的時機觸發(fā)，所以原生與H5交互無法做到立馬觸發(fā)。參考地址

三、微信小程序短連接在不同環(huán)境點擊打開的小程序版本不同

????????生成URL Link 方法中，如果想測試對應(yīng)的版本，切記不要再微信中去點擊生成的鏈接，因為從微信打開的小程序，永遠是線上正式版小程序，不會跳轉(zhuǎn)到開發(fā)版和體驗版的，需要將鏈接復(fù)制到其他app中或者直接在手機瀏覽器中打開即可跳轉(zhuǎn)對應(yīng)版本的小程序。

總結(jié)

????????小程序的 webView 權(quán)限少的可憐，如果官網(wǎng)中沒有提及某一些權(quán)限和方法，則H5一定無法實現(xiàn)該方法，請換一種思路去開發(fā)。大家開發(fā)的時候慎用H5，不要把太重的功能放在H5上去實現(xiàn)！

柚子快報邀請碼778899分享：小程序內(nèi)嵌H5遇到的坑

http://yzkb.51969.com/

相關(guān)鏈接