微信小程序 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 层；
6. …

3. 小程序 webview 混合开发

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

特点

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

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

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

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

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

该计划蕴含以下示例：

1. 反对分享

2. 反对跳转传参数给小程序的页面；

3. 反对后退敞开小程序 webview；
4. 反对发送音讯给小程序，须要在用户触发分享后退之类才会触发音讯；

5. 反对敞开所有页面，回到主程序的 tab；

6. …

三、如何应用？

创立小程序 webview 目录的工程

buijs create webview -p weixinapp

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

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

小程序工程具体阐明

1. 目录阐明

/src/weixin

比新建的微信小程序工程（2021-4-28 号），多了以下货色

如果是在已有的工程要应用 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",
  ],

2. 集体能够应用 bui 这种开发方式吗？

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

3. 公司应用 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 开发。