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 <fields>;
    public <methods>;
    }
-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使用手册

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容