前言
項目開發中，分模塊開發已成開發中常規方式。某個項目小程序中，可以根據登錄的賬號角色以及權限，加載各個不同業務的子模塊，各個子模塊的開發可以根據業務分散在各個業務組的開發人員中。如此可以根據項目場景靈活、快速組裝好各個子模塊，發布一個新的小程序。那么將各個子模塊快速集成到目標主程序中，需要一個評估方案，也成為一個亟待解決的問題。
設計
查詢微信文檔，可知以下,小程序可以跳轉、加載、嵌入的資源類型：小程序跳轉小程序、小程序加載H5靜態資源、小程序嵌入功能插件,微信端可以發布成果物的幾種類型：小程序、公眾號、插件、小游戲（排除）。得到以下幾種方案
1、小程序跳轉小程序路由
wx.navigateToMiniProgram(Object object)
2、小程序嵌入微信公眾號頁面
new cloud.Cloud({
appid: '公眾號 AppID',
resourceAppid: '小程序 AppID',
resourceEnv: 'a', // 資源方云環境 ID
traceUser: true,
})
3、小程序加載web/H5 靜態資源 (web-view)
<web-view src="{{h5Url}}" bindload="bindload" binderror="binderror"></web-view>
4、小程序調用插件
引入插件
{
"plugins": {
"myPlugin": {
"version": "1.0.0",
"provider": "wxidxxxxxxxxxxxxxxxx",
"genericsImplementation": {
"plugin-index": {
"mp-view": "components/comp-from-miniprogram"
}
}
}
}
}
添加插件
{
"usingComponents": {
"hello-component": "plugin://myPlugin/hello-component"
}
}
使用插件
<navigator url="plugin://myPlugin/hello-page">
Go to pages/hello-page!
</navigator>
?
<plugin-view generic:mp-view="comp-from-miniprogram" />
var myPluginInterface = requirePlugin('myPlugin');
myPluginInterface.hello();
var myWorld = myPluginInterface.world;
比對方案
1、小程序跳轉
小程序跳轉小程序路由，采用Api ``` wx.navigateToMiniProgram(Object object) ```, 但交互體驗不是很好，有彈窗提示，如下圖：
2、微信公眾號頁面
需要注冊公眾號，每開發一個模塊就要向微信注冊一個公眾號，同時接入對接微信js_sdk，開發流程與公眾號開發流程類似， 優點：能夠共享微信開放能力API 缺陷：復用性大大降低
3、嵌入H5頁面
小程序加載web/H5 靜態資源 (web-view)， 這個方案前提條件較多
條件一：嵌入的頁面鏈接必須是正規的網站域名（已備案）
條件二：需要在小程序后臺下載公鑰文件，并上傳到網站根目錄
條件三：嵌入的網頁不能再次跨域名跳轉，且無法調用微信開放API，如打開相機、掃碼、文件讀寫等接口
條件四：使用騰訊云開發，托管靜態資源建站，需要付費同時申請騰訊云域名賬號，但可以跳過以上條件（無需校驗條件二、三）
優勢：交互可以通過web-view控件 傳值回調，靈活，且可插拔靈活回調
4、開發小程序插件
開發小程序插件，小程序插件開發需要資質條件
條件一：申請的小程序需要特殊的類目
條件二： 小程序個人訂閱號無開發插件資質
條件三：插件內部管理http網絡限制，需要額外開發接口申請網絡簽名，10分鐘變更一次簽名， 未來可能會被作為卡子，限制使用
缺陷：開發成本較大 優勢： 將插件發布到插件市場，公開給第三方使用，可以作為服務商接入微信服務市場，可以發布不同類型的小程序、插件、模板。入駐微信服務商， 需對接微信開放平臺。
實現控件web-view與H5交互
承載網頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用。其中web-view控件文檔
API說明
H5頁面示例
html文件
<body>
<button onclick="testPay()">支付</button>
</body>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
js文件
<script>
function testPay() {
var mini=false;
var appid = getUrlParam("appId")
wx.miniProgram.getEnv(function(res){
if (res.miniprogram){
//發起小程序支付
wx.miniProgram.navigateTo({
appId:'wx126ae2069f831xxx',
url: `/pages/other/h5?id=${appid}`});
mini=true;
}
});
}
// 獲取加載url中攜帶的參數
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var rrr = window.location.href.split('?')[1]; //因為用的hash模式，沒辦法用search屬性，
// var rrr = window.location.search; //history模式(路由沒有#)，可以用search屬性
var r = rrr.match(reg);
if (r != null) return unescape(r[2]);
return null;
}
?
</script>
小程序代碼示例：
pages/web-view/index.wxml
<web-view src="{{h5Url}}" bindload="bindload" binderror="binderror"></web-view>
pages/web-view/index.js
?
/**
* 頁面的初始數據
*/
data: {
payUrl: '/pages/pay/index',
loginUrl: '/pages/login/index',
appId: 'wxxxxxxxxxxx',
h5Url: '',
},
?
onShow() {
this.handleUrl();
console.log(this.data.h5Url);
},
?
handleUrl () {
// const appId = encodeURIComponent(CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(this.data.appId)));
const appId = encodeURIComponent(this.data.appId);
const openId = encodeURIComponent(App.globalData.wxOpenId);
const loginUrl = encodeURIComponent(this.data.loginUrl);
const auth = encodeURIComponent(App.globalData.Authorization);
// 拼接參數url, 傳入H5頁面
this.setData({
h5Url: `${App.globalData.zhH5Host}/h5/viotcard/manage/iotcard?appId=${appId}&openId=${openId}&payUrl=${payUrl}&loginUrl=${loginUrl}&auth=${auth}&v=${new Date().getTime().toString()}`
});
},
?
/pages/other/h5.js
onLoad(options) {
// 獲取H5頁面回傳的參數
console.log(options);
},
最后重新強調一下前提：
條件一：嵌入的頁面鏈接必須是正規的網站域名（已備案）
條件二：需要在小程序后臺下載公鑰文件，并上傳到網站根目錄
條件三：嵌入的網頁不能再次跨域名跳轉，且無法調用微信開放API，如打開相機、掃碼、文件讀寫等接口
https://blog.csdn.net/xy_peng/article/details/129752636
項目開發中，分模塊開發已成開發中常規方式。某個項目小程序中，可以根據登錄的賬號角色以及權限，加載各個不同業務的子模塊，各個子模塊的開發可以根據業務分散在各個業務組的開發人員中。如此可以根據項目場景靈活、快速組裝好各個子模塊，發布一個新的小程序。那么將各個子模塊快速集成到目標主程序中，需要一個評估方案，也成為一個亟待解決的問題。
設計
查詢微信文檔，可知以下,小程序可以跳轉、加載、嵌入的資源類型：小程序跳轉小程序、小程序加載H5靜態資源、小程序嵌入功能插件,微信端可以發布成果物的幾種類型：小程序、公眾號、插件、小游戲（排除）。得到以下幾種方案
1、小程序跳轉小程序路由
wx.navigateToMiniProgram(Object object)
2、小程序嵌入微信公眾號頁面
new cloud.Cloud({
appid: '公眾號 AppID',
resourceAppid: '小程序 AppID',
resourceEnv: 'a', // 資源方云環境 ID
traceUser: true,
})
3、小程序加載web/H5 靜態資源 (web-view)
<web-view src="{{h5Url}}" bindload="bindload" binderror="binderror"></web-view>
4、小程序調用插件
引入插件
{
"plugins": {
"myPlugin": {
"version": "1.0.0",
"provider": "wxidxxxxxxxxxxxxxxxx",
"genericsImplementation": {
"plugin-index": {
"mp-view": "components/comp-from-miniprogram"
}
}
}
}
}
添加插件
{
"usingComponents": {
"hello-component": "plugin://myPlugin/hello-component"
}
}
使用插件
<navigator url="plugin://myPlugin/hello-page">
Go to pages/hello-page!
</navigator>
?
<plugin-view generic:mp-view="comp-from-miniprogram" />
var myPluginInterface = requirePlugin('myPlugin');
myPluginInterface.hello();
var myWorld = myPluginInterface.world;
比對方案
1、小程序跳轉
小程序跳轉小程序路由，采用Api ``` wx.navigateToMiniProgram(Object object) ```, 但交互體驗不是很好，有彈窗提示，如下圖：
2、微信公眾號頁面
需要注冊公眾號，每開發一個模塊就要向微信注冊一個公眾號，同時接入對接微信js_sdk，開發流程與公眾號開發流程類似， 優點：能夠共享微信開放能力API 缺陷：復用性大大降低
3、嵌入H5頁面
小程序加載web/H5 靜態資源 (web-view)， 這個方案前提條件較多
條件一：嵌入的頁面鏈接必須是正規的網站域名（已備案）
條件二：需要在小程序后臺下載公鑰文件，并上傳到網站根目錄
條件三：嵌入的網頁不能再次跨域名跳轉，且無法調用微信開放API，如打開相機、掃碼、文件讀寫等接口
條件四：使用騰訊云開發，托管靜態資源建站，需要付費同時申請騰訊云域名賬號，但可以跳過以上條件（無需校驗條件二、三）
優勢：交互可以通過web-view控件 傳值回調，靈活，且可插拔靈活回調
4、開發小程序插件
開發小程序插件，小程序插件開發需要資質條件
條件一：申請的小程序需要特殊的類目
條件二： 小程序個人訂閱號無開發插件資質
條件三：插件內部管理http網絡限制，需要額外開發接口申請網絡簽名，10分鐘變更一次簽名， 未來可能會被作為卡子，限制使用
缺陷：開發成本較大 優勢： 將插件發布到插件市場，公開給第三方使用，可以作為服務商接入微信服務市場，可以發布不同類型的小程序、插件、模板。入駐微信服務商， 需對接微信開放平臺。
實現控件web-view與H5交互
承載網頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用。其中web-view控件文檔
API說明
H5頁面示例
html文件
<body>
<button onclick="testPay()">支付</button>
</body>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
js文件
<script>
function testPay() {
var mini=false;
var appid = getUrlParam("appId")
wx.miniProgram.getEnv(function(res){
if (res.miniprogram){
//發起小程序支付
wx.miniProgram.navigateTo({
appId:'wx126ae2069f831xxx',
url: `/pages/other/h5?id=${appid}`});
mini=true;
}
});
}
// 獲取加載url中攜帶的參數
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var rrr = window.location.href.split('?')[1]; //因為用的hash模式，沒辦法用search屬性，
// var rrr = window.location.search; //history模式(路由沒有#)，可以用search屬性
var r = rrr.match(reg);
if (r != null) return unescape(r[2]);
return null;
}
?
</script>
小程序代碼示例：
pages/web-view/index.wxml
<web-view src="{{h5Url}}" bindload="bindload" binderror="binderror"></web-view>
pages/web-view/index.js
?
/**
* 頁面的初始數據
*/
data: {
payUrl: '/pages/pay/index',
loginUrl: '/pages/login/index',
appId: 'wxxxxxxxxxxx',
h5Url: '',
},
?
onShow() {
this.handleUrl();
console.log(this.data.h5Url);
},
?
handleUrl () {
// const appId = encodeURIComponent(CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(this.data.appId)));
const appId = encodeURIComponent(this.data.appId);
const openId = encodeURIComponent(App.globalData.wxOpenId);
const loginUrl = encodeURIComponent(this.data.loginUrl);
const auth = encodeURIComponent(App.globalData.Authorization);
// 拼接參數url, 傳入H5頁面
this.setData({
h5Url: `${App.globalData.zhH5Host}/h5/viotcard/manage/iotcard?appId=${appId}&openId=${openId}&payUrl=${payUrl}&loginUrl=${loginUrl}&auth=${auth}&v=${new Date().getTime().toString()}`
});
},
?
/pages/other/h5.js
onLoad(options) {
// 獲取H5頁面回傳的參數
console.log(options);
},
最后重新強調一下前提：
條件一：嵌入的頁面鏈接必須是正規的網站域名（已備案）
條件二：需要在小程序后臺下載公鑰文件，并上傳到網站根目錄
條件三：嵌入的網頁不能再次跨域名跳轉，且無法調用微信開放API，如打開相機、掃碼、文件讀寫等接口
https://blog.csdn.net/xy_peng/article/details/129752636
浙公網安備 33010602011771號