静态资源

热更新

上面讲了原生如何设置热更新地址，这里介绍前端如何打热更新包。
@weexbox/builder的任何构建命令都会生成两个包。

  • deploy目录

deploy目录用于发布热更新包。可以把它拷贝到nginx上，并把该地址作为hotdeployUrl。

  • weex-update目录

weex-update目录存在app里面，作为内置包随app一起发布。

配置热更新的最低版本号

有时候只有特定版本的APP才能更新最新的weex文件，这个时候就要设置最低版本号了。 查看config/update-config.json文件，内容如下：

  1. {
  2.   "name": "weexbox", // APP的名字，非必须
  3.   "ios_min_version": "0.0.0", // iOS最低版本要求，必须
  4.   "android_min_version": "0.0.0" // Android最低版本要求，必须
  5. }

图片加载路径

weexbox 支持 3 种图片方式

从网络加载

src 以http开头，例如：

  1. <image src="https://aygtech.github.io/weexbox/logo.png"></image>

:::tip weexbox支持使用file-loader加载图片 :::

从 APP bundle 中加载

src 以bundle://开头，例如：

  1. <image src="bundle://image.png"></image>

从 APP 文件目录中加载

src 不以上面两种方式开头，例如：

  1. // iOS
  2. <image src="file://var/mobile/Media/DCIM/100APPLE/IMG_0171.PNG"></image>
  3. // Android
  4. <image src="/storage/emulated/0/DCIM/Camera/IMG_20180917_145836.jpg"></image>

::: tip 实际使用时 src 不应该写死在源码上。大多数情况是通过 module 拿到图片地址再给 src 赋值。因此你不需要关心是何种平台。 :::

活用 config/update-config.json

一般来说，我们希望在开发的时候，图片是从本机加载的。而在部署的时候，图片是从服务器或者app里面加载。要切换这种行为特别简单。

首先，我们用file-loader的方式加载个图片（点击查看完整例子）：

  1. <template>
  2.   <div>
  3.     <image :src="logo" class="logo" />
  4.   </div>
  5. </template>
  7. <script>
  8. import logo from '../../../static/logo.png'
  10. export default {
  11.   data() {
  12.     return {
  13.       logo,
  14.     }
  15.   },
  16. }
  17. </script>

重点来了，打开config/update-config.json文件，你能看到形如下面的配置。

  1. const config = {
  2.   develop: {
  3.     // 从本机加载图片，只有在调试的时候有效
  4.     imagePublicPath: null,
  5.   },
  6.   test: {
  7.     // 从网络加载图片
  8.     imagePublicPath: 'https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy',
  9.   },
  10.   preRelease: {
  11.     // 从app加载图片
  12.     imagePublicPath: 'bundle://',
  13.   },
  14.   release: {
  15.     // 从网络加载图片
  16.     imagePublicPath: 'https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy',
  17.   },
  18. }
  20. module.exports = config

当imagePublicPath为null时，weexbox会把static部署到本机。
当imagePublicPath为http时，需要你自己把deploy部署到服务器，图片地址即是部署的地址。
当imagePublicPath为bundle://时，weexbox会自动拷贝static到app中。

于是乎，调试的时候跑npm run debug xxx/App.vue的时候，本机图片可以正常显示了。部署的时候，任君挑选是要部署到服务器还是app中。

由此可见，切换图片源不用你改动任何一行业务代码，weexbox全部帮你搞定了。