乐趣区

关于前端:你猜这是小程序还是webapp跳转小程序Webview与Webapp交互传参

微信小程序 Webview 与 Webapp 单页分享交互

在文章开始前,先来看一个成果。

两个跳转成果别离应用 小程序 webview 跳转到原生小程序页面,以及webapp 的路由跳转

你能猜到第 1 种成果是采纳什么跳转吗?

相熟 bui 开发 的敌人可能曾经猜到了,第 1 种的路由跳转采纳的就是 BUI 的单页开发 路由跳转(先加载再跳转),第 2 种是 跳转到小程序 的交互成果(先闪白再加载)。得益于单页路由动静加载组件的形式,整体体验感觉会更晦涩,更舒服些。

一、开发方式的区别

有小程序,为何还要用 webview 组件呢?先来梳理下这几种开发方式的区别先。

### 1.Webapp 开发

这是传统意义上的 h5 开发,纯网页版的,真正意义上的一套代码多平台运行,我选用 bui 作为这个 webapp 的开发,有几个方面的起因,

#### 特点

  1. 反对传统多页路由开发(联合 php,java 等后盾语言),也反对单页路由开发(体验更好,如后面 gif 成果);
  2. 模块化,组件化,反对多人合作;
  3. 动静组件,按需加载;也可变成动态模块一次性加载;
  4. 反对状态治理;
  5. 丰盛模板,疾速开发;
  6. 作为传统的 H5,做一些展现类的没有问题,可一旦波及到原生底层接口,比方调用蓝牙,陀螺仪等之类的开发,目前无能为力。这种时候有 2 个抉择,BUI 能够联合打包平台,如 Cordova,Dcloud 等,打包成独立装置 App。

可是解决了底层能力,如何引流?没人装置,没人用也是个问题啊。

2. 小程序开发

小程序诞生了,免装置,即用即走,既解决了调用底层的能力,又有了低成本的获客渠道。但这玩意又本人搞了个开发语言,如果你之前有上线的产品,想要在小程序外面用,你得从新投入开发一套,开发成本一回事,小程序的特点是小,有很多限度,比如包大小,路由层级限度等。

特点

  1. 免装置,即用即走;
  2. 反对调用底层能力;
  3. 大小限度,整个小程序所有分包大小不超过 8M,单个分包 / 主包大小不能超过 2M;
  4. 小程序下载文件到本地,资源限度最大文件为 50M;
  5. 路由一开始限度 5 层,目前是 10 层;

3. 小程序 webview 混合开发

综合以上各自长处,衍生的第三种开发方式,混合开发,利用小程序的 webview 能力,大量的存量 H5 能够被小程序化,近乎完满。

特点

  1. 反对调用局部底层能力;
  2. 路由无限度;
  3. 大小无限度;
  4. https 接口;
  5. https 业务域名;
  6. 不反对集体小程序(重点)

目前很多互联网大厂也应用 webapp 联合小程序的开发方式,尽管 webview 开发有诸多限度,但这种开发方式,能够冲破小程序的层级限度,真正的一次开发,多端适配,保持一致体验的同时,升高了开发成本,保护老本。

本文示例采纳 BUI 开发的 webapp 联合微信小程序 webview 开发的计划,如果感兴趣,接着往下看。

二、BUI 提供的小程序混合 Webapp 开发计划

利用小程序 webview 的计划,之前的 bui 单页分享进来的页面,只能跳到首页,而当初通过这个新的解决方案,能够实现分享的时候,主动把参数带上,用户关上主动跳转到分享的页面,并且把该页面须要到参数一并带上,比方文章详情的 id。

该计划蕴含以下示例:

1. 反对分享

  1. 反对跳转传参数给小程序的页面;

  1. 反对后退敞开小程序 webview;
  2. 反对发送音讯给小程序,须要在用户触发分享后退之类才会触发音讯;

  1. 反对敞开所有页面,回到主程序的 tab;

三、如何应用?

创立小程序 webview 目录的工程

buijs create webview -p weixinapp

该计划 webview 开发蕴含两个局部,

  1. bui 规范工程, 负责 bui 本身的性能交互, 并且提供了操作微信小程序路由的示例;
  2. /src/weixin目录 为小程序的工程.

小程序工程具体阐明

1. 目录阐明

/src/weixin

比新建的微信小程序工程(2021-4-28 号),多了以下货色

目录 文件阐明
/bui 新增 bui 的目录,寄存 bui 相干的模块脚本
/bui/webview.js webapp/index 模块须要用的一些办法, 会主动解析 URL 参数实现分享
/pages/webapp 新增 webapp 目录
/pages/webapp/index.js 用来配置 webapp 的 url 地址
/pages/webapp/index.json 页面的相干配置
/pages/webapp/index.wxml 相当于 html 文件
/pages/webapp/index.wxss 相当于 css 文件

如果是在已有的工程要应用 bui 的 webapp,则能够把以上文件,复制到微信小程序工程即可。

2. 小程序应用阐明

  1. mp.weixin.com 注册小程序;
  2. 获取小程序到 appid 批改 project.config.json

    {
      ...
      "appid": "wx11xxxxxxxxxxxxx",
      "projectname": "bui",
      ...
    }
  3. 导入 buiMiniProgram 到以后工程
  4. 批改 pages/webapp/index.js webapp 的地址为近程的 bui 单页路由地址
  5. 调试阶段,在微信开发者工具右上角,详情 -> 本地设置 -> 勾选 不校验非法域名、web-view(业务域名)、TLS 版本以及 https 证书

四、常见问题

  1. 如何批改小程序默认首页,比如须要跳转到受权?

答:把 app.json 外面的数组换个地位,小程序默认关上该数组的第一个索引门路。

"pages":[
    "pages/index/index",
    "pages/webapp/index",
  ],
  1. 集体能够应用 bui 这种开发方式吗?

答:不能够,小程序有较多限度,不容许集体开发者配置 web-view 业务域名;

  1. 公司应用 bui 开发 webview 小程序,须要提前理解哪些?

答:

  1. 必须要有公司资质,须要申请公司资质的小程序;2. 域名必须要备案;3. 域名必须是 https;4. 小程序的相干申请也须要进行配置,也就是你应用第三方的申请,没法校验域名的状况下,是不容许申请的;... 其它参考小程序的官网文档。

五、附录:

  1. bui 框架 http://easybui.com
  2. buijs 命令行 https://www.npmjs.com/package…
  3. 小程序 Webview 阐明:https://developers.weixin.qq….
  4. 微信 JS-SDK:https://developers.weixin.qq….
  5. 微信 JS-SDK Demo http://demo.open.weixin.qq.co…

欢送关注 bui 神速 订阅号,专一 webapp 开发。

退出移动版