小程序内嵌方案

七里汀

2024-06-30 帮助1人

前言

项目开发中，分模块开发已成开发中常规方式。某个项目小程序中，可以根据登录的账号角色以及权限，加载各个不同业务的子模块，各个子模块的开发可以根据业务分散在各个业务组的开发人员中。如此可以根据项目场景灵活、快速组装好各个子模块，发布一个新的小程序。那么将各个子模块快速集成到目标主程序中，需要一个评估方案，也成为一个亟待解决的问题。

设计

查询微信文档，可知以下,小程序可以跳转、加载、嵌入的资源类型：小程序跳转小程序、小程序加载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，如打开相机、扫码、文件读写等接口

学新通

这篇好文章是转载于：学新通技术网

小程序内嵌方案

前言

设计

比对方案

实现控件web-view与H5交互

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

TikTok加速器哪个好免费的TK加速器推荐

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗