微信小程序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开发。