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

两个跳转效果分别使用 小程序webview跳转到原生小程序页面，以及webapp的路由跳转。

一、开发方式的区别

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

### 1.Webapp开发

#### 特点

支持传统多页路由开发（结合php,java等后台语言），也支持单页路由开发（体验更好，如前面gif效果）；
模块化，组件化，支持多人协作；
动态组件，按需加载；也可变成静态模块一次性加载；
支持状态管理；
丰富模板，快速开发；
...

2. 小程序开发

特点

免安装，即用即走；
支持调用底层能力；
大小限制，整个小程序所有分包大小不超过 8M，单个分包/主包大小不能超过 2M；
小程序下载文件到本地，资源限制最大文件为50M；
路由一开始限制5层，目前是10层；
...

3. 小程序webview混合开发

特点

支持调用部分底层能力；
路由无限制；
大小无限制；
https接口；
https业务域名；
不支持个人小程序(重点)；
...

二、BUI提供的小程序混合Webapp开发方案

1.支持分享

支持跳转传参数给小程序的页面；

支持后退关闭小程序webview；
支持发送消息给小程序，需要在用户触发分享后退之类才会触发消息；

支持关闭所有页面，回到主程序的tab；

三、如何使用？

创建小程序webview目录的工程

buijs create webview -p weixinapp

该方案webview开发包含两个部分,

bui标准工程, 负责bui自身的功能交互, 并且提供了操作微信小程序路由的示例;
/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. 小程序使用说明

mp.weixin.com 注册小程序；

获取小程序到appid 修改 project.config.json；

{
  ...
  "appid": "wx11xxxxxxxxxxxxx",
  "projectname": "bui",
  ...
}

导入buiMiniProgram到当前工程
修改 pages/webapp/index.js webapp的地址为远程的bui单页路由地址
调试阶段，在微信开发者工具右上角，详情->本地设置->勾选不校验合法域名、web-view（业务域名）、TLS版本以及https证书

四、常见问题

答：把 app.json 里面的数组换个位置，小程序默认打开该数组的第一个索引路径。

"pages":[
    "pages/index/index",
    "pages/webapp/index",
  ],

答：不可以，小程序有较多限制，不允许个人开发者配置web-view 业务域名；

答：

  1. 必须要有公司资质，需要申请公司资质的小程序；
  2. 域名必须要备案；
  3. 域名必须是https；
  4. 小程序的相关请求也需要进行配置，也就是你使用第三方的请求，没法校验域名的情况下，是不允许请求的；
  ... 其它参考小程序的官方文档。

五、附录：

bui框架 http://easybui.com
buijs命令行 https://www.npmjs.com/package...
小程序Webview说明：https://developers.weixin.qq....
微信JS-SDK： https://developers.weixin.qq....
微信JS-SDK Demo http://demo.open.weixin.qq.co...

欢迎关注bui神速订阅号，专注webapp开发。

王小o

你猜这是小程序还是webapp跳转？--小程序Webview与Webapp交互传参