小程序内嵌方案

最新推荐文章于 2024-05-15 11:02:25 发布

七里汀

最新推荐文章于 2024-05-15 11:02:25 发布

阅读量2.7k

点赞数 1

文章标签：小程序微信微信小程序

本文链接：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，如打开相机、扫码、文件读写等接口

七里汀

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
小程序内嵌方案

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

扫一扫