小程序内嵌方案
发布时间 2023-12-22 14:03:25作者: 自胜者强
项目开发中，分模块开发已成开发中常规方式。某个项目小程序中，可以根据登录的账号角色以及权限，加载各个不同业务的子模块，各个子模块的开发可以根据业务分散在各个业务组的开发人员中。如此可以根据项目场景灵活、快速组装好各个子模块，发布一个新的小程序。那么将各个子模块快速集成到目标主程序中，需要一个评估方案，也成为一个亟待解决的问题。
设计
查询微信文档，可知以下,小程序可以跳转、加载、嵌入的资源类型：小程序跳转小程序、小程序加载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