easy weex

基于easywebpack-weex-boilerplate修改，再次减少配置。

声明

由于有些开发人员不喜欢使用weex-toolkit，因此我提交这个模板。那么，肯定就不支持weex-toolkit的命令了，不过weex debug 是可以用的。

native 项目模板

• android
• ios

---

使用

安装：
yarn install
开发：
yarn start
生产：
yarn build

案例

easy weex demo

---

特性支持

• 增加temp功能（移植weex-toolkit），不用再配置entry入口
• 整理src目录，src/views是页面默认路径
• 页面全局配置，比如web下读取url传参、native设置viewport
• 增加单个Vue入口文件支持
• 支持资源相对路径，默认生产开启
• 支持第三方weex组件，默认集成了weex-ui、weex-amui、weex-flymeui，并支持按需加载

配置修改

configs/config.js

const config = {
  template: 'web/layout.html', // �不要改动
  templateName: 'web/layout',
  lib: [helper.rootNode('web/web.js')], // 不要改动
  pageDir: 'src/views', // 页面路径：仅编译这个目录下的vue文件
  templateDir: '.temp', // 将vue文件包装临时js文件的路径
  globalName: 'global' // 页面全局配置, 可读取 ${globalName}.js、${globalName}.${dir}.js
}

页面全局配置

规则

1. 文件夹匹配：

   ${pageDir}/${dir}/**/*.vue

   比如：src/views/hhdpi/**/*.vue, 会匹配 ${globalName}.hhdpi.{ js | html }

2. 文件后缀匹配

   ${fileName}.${dir}.vue

   比如：list.hhdpi.vue, 会匹配 ${globalName}.hhdpi.{ js|html }

weex

• 默认配置

  ${globalName}.js

• 个性配置

  ${globalName}.${dir}.js

  由于第三方UI库支持的viewport不同，比如weex-ui和weex-amui都是750，weex-flymeui是1080，因此全局配置有可能不同，那么个性配置就派上用场了。

web

• 默认配置

  ${templateName}.html

• 个性配置

  ${templateName}.${dir}.html

单个Vue入口

在easy weex demo集成xianyu，发现采用vue-router，全局配置没法处理，因此支持次配置

使用

很简单，在vue文件同级目录添加entry.js即可，这时全局配置失效

viewport 配置

• native

  global.js

  // 设置viewport
  const meta = weex.requireModule('meta')
  meta.setViewport({
    width: 750
  })

• web

  web/layout.html

  <meta name="weex-viewport" content="750" />

注意事项

• 本地图片问题 仅支持require加载相对路径图片

• 配置中js引用路径问题 由于增加temp功能，简化了entry的配置，因此js引用路径会发生变化，编译就会出问题

  解决办法

  使用alias配置即可

欢迎讨论