Weex Hello World

Weex Hello World

创建应用

// 全局安装 weexpack
npm install weexpack -g

// 生成weex项目
weexpack create appName && cd appName

// 安装依赖包
yarn 或 npm install

// 运行
npm run dev && npm run serve

ps:

// npm run serve 实际运行的是`package.json`中的命令

"scripts": {
    "start": "npm run serve",
    "build": "webpack",
    "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
    "dev": "webpack --config webpack.config.js --watch -d",
    "serve": "webpack-dev-server --config webpack.dev.js --watch --open"
}

浏览器打开http://localhost:8081，出现Hello World页面即运行成功.

Weex首页入口在src/index.vue

在android上运行

weexpack platform add android

weexpack run android

// html5打包
weexpack build web

// 在html5平台上运行
weexpack run web

预览与调试

// 查看某页面
weex src/index.vue

// debug某页面
weex debug src/index.vue

// debug目录指定入口文件
weex debug your/we/path -e index.we

// debug工程
weex debug

集成debug，使用weex-toolkit

端口占用

通过命令获取暂用端口的pid，然后运行kill -9 {pid}

lsof -n -i4TCP:8081

混淆配置

https://weex.apache.org/cn/references/advanced/extend-to-android.html#SDK混淆规则

SDK混淆规则
若要在APP中使用混淆，请在相应的配置文件中添加如下规则：

-keep class com.taobao.weex.WXDebugTool{*;}
-keep class com.taobao.weex.devtools.common.LogUtil{*;}
-keepclassmembers class ** {
  @com.taobao.weex.ui.component.WXComponentProp public *;
}
-keep class com.taobao.weex.bridge.**{*;}
-keep class com.taobao.weex.dom.**{*;}
-keep class com.taobao.weex.adapter.**{*;}
-keep class com.taobao.weex.common.**{*;}
-keep class * implements com.taobao.weex.IWXObject{*;}
-keep class com.taobao.weex.ui.**{*;}
-keep class com.taobao.weex.ui.component.**{*;}
-keep class com.taobao.weex.utils.**{
    public ;
    public ;
    }
-keep class com.taobao.weex.view.**{*;}
-keep class com.taobao.weex.module.**{*;}
-keep public class * extends com.taobao.weex.common.WXModule{*;}
-keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
-keep public class com.taobao.taolive.ui.weex.**{*;}
-keep class * implements com.taobao.weex.ui.IExternalComponentGetter{*;}
-keep class com.alibaba.aliweex.hc.HCConfig{*;}
-keep class com.alibaba.dynamic.**{*;}

Reference

使用 weex-toolkit

【入门】WEEX快速创建工程 Hello World

网易严选

Weex调试神器——Weex Devtools使用手册