智能webview化

有一些场合，我们不得不使用webview. 虽说webview有很多缺点，比如它都是远程加载的，没有直接停驻于被寄生的APP上，导致页面加载慢，一些高级的APP特性用不了，需要跳转到小程序才能支付云云。但webview也有一个重要的不可忽视的优势，开发简单——就是我们熟悉的HTML开发。

webview的使用场合

  • CSS兼容难度大，一些样式不支持需要调整，尤其是快应用，没有display:block/inline, position:absolute/relative, float:left/right, 只能用flexbox布局。这需要小公司来说，大大提高研发成本。
  • 小程序/快应用的size问题， 尤其是快应用只有1MB大小，很容易超出大小，而webview加载的页面不计入它的size.
  • 特定平台的限制问题，比如说支付宝不能使用video标签，你想做直播类，需要特殊申请，并必须用优酷上传视频，这时就可以将这个页面变成webview.

使用

在对应频道的页面对象的 config 添加一个参数。其中 pages 字段可能存在两种类型值，数组和布尔值。

当为数组时，数组中的各项为 webview 化的页面路径。nanachi 会将这些路径编译成 webview。

当为布尔值，且值为 true 时，nanachi 将这个页面所在文件夹（频道）的所有页面及子页面都 webview 化。

  1. class Demo extends React.Component {
  2.     static config = {
  3.         webview: {
  4.             quick: {
  5.                 pages: true,  
  6.                 showTitleBar: false, //是否隐藏快应用的 titlebar
  7.                 allowthirdpartycookies: false,
  8.                 trustedurl: []
  9.             }
  10.         }
  11.     }
  12. }

频道就是 pages下面的某个文件夹的意思

既然是智能 webview 化，之前页面跳转的路径也会自动变成访问 H5 的 URL。

需要注意的是，要手动在package.json中配置有效H5_HOST字段。用于访问 H5 页面对应的 URL。

  1. {
  2.     "nanachi" : {
  3.         "H5_HOST": "https://www.qunar.com"
  4.     }
  5. }

如在应用中从pages/a/b/index路由跳转pages/c/d/index。其中pages/c/d/index会变成一个对应的 H5 访问地址（比如：https://www.qunar.com/pages/c/d/index）。

运行nanachi watch:h5, 会将pages/c/d/index页面编译成一个H5, 并启动一个运行 H5 页面的 server 服务。

注：智能 webview 化目前只支持快应用，其他平台正在陆续支持中。

webview标签的兼容

webview标签在不同平台，它的名称与事件名有点出入

wxalibuttquick
web-viewweb-viewweb-viewweb-viewweb