Weexpack 使用教程

简介


 

  weexpack 是 weex
新一代的工开发套件,是依据weex快速搭建应用原型的利器。它亦可帮忙开发者通过命令执行创建weex工程,添加相应平台的weex
app模版,并根据模版从本地、GitHub 或者 weex 应用市场安装插件,快速打包
weex
应用并设置至手机运行,对于拥有分享精神之开发者而言还会创造weex插件模版并公布插件到weex应用市场。

  weexpack 所提供的授命大致可分为三组,分别是:

  • 卷入命令

  • weexpack create — 创建 weex 工程项目。

  • weexpack platform add/remove — 安装/移除 weex
    应用模版,默认模版支持 weex bundle 调试以及插件机制。

  • weexpack platform list — 查看已安装之平台模版及本。

  • weexpack platform run – 打包应用并设置及装备运行。

  • 插件使用者命令

  • weexpack plugin add/remove — 安装/移除 weex
    插件,支持从地面、GitHub 或者 weex 应用市场安装插件。

  • weexpack plugin list — 查看已设置的插件与本。

  • 插件开发者命令

  • weexpack plugin create –
    生成weex插件模版,主要是安排文件与必备的目录。

  • weexpack plugin publish – 宣布插件到weex插件市场。

安装


  环境要求:

  • 脚下支撑 Mac、windows、linux平台(windows下单独能够打包android)。
  • 配置 Node.js 环境,并且安装 npm 包管理器。(需要node6.0+)
    参考:http://www.cnblogs.com/winsoncheung/p/6547923.html
  • 假设如支持 iOS 平台则需配置 iOS 开发环境:
    • 安装 Xcode
      IDE ,启动同浅
      Xcode ,使 Xcode 自动安装开发者工具和确认使用协议。
    • 安装 cocoaPods。
      参考:http://www.cnblogs.com/winsoncheung/p/6547923.html
  • 比方如支持 Android 平台则用配置 Android 开发条件:
    • 安装 Android
      Studio(推荐)或者 Android
      SDK。打开 AVD
      Manager ,新建
      Android 模拟器并启动
      。(如果来安 Docker ,请关闭 Docker
      Server 。)
    • 保证Android build-tool的版也23.0.2。目前要为23.0.2,
      否无将无法编译。 

  安装命令

  首先,全局安装 weex-pack 命令:

$ npm install -g weexpack@0.3.12-beta

    或者 在 clone 的 weexpack 根目录下实行:

$ npm install

 注: 目前新型的weexpack版本是0.3.12之测试版, 正式版是0.3.11,
但正式版以MacOS上无法填补加platform, 会出现 “Error:Unexpected token
<<” 的错误.

  解决办法就是重新安装0.3.12-beta版本, 在terminal执行同一赖:

$ npm install -g weexpack@0.3.12-beta  

  相信阿里会很快解决之题目. ^_^

 

装进及插件使用


  打包主要过程要下图所著,其中插件操作是包过程的可选项,不是得的。

     图片 1

  

详细步骤

  1. 开立工程

  于terminal中跻身而要停放工程目录的文件夹着, 例如在桌面上,
执行如下命令:

$ cd Desktop

$ weexpack create appName

  这 在桌面上即都建好了路工文件夹, 目录如下:

           图片 2

  platforms: 平台模板目录

  plugins: 插宗下充斥目录

  src: 业务代码目录

 

  通过 create 命令创建的工默认不含有 ios 和 android
工程模版,创建好后就可以切换至appName目录下连安装依赖。  

$ cd appName && npm install

  等一段时间, 当完成后 目录中要么多一个node_modules的文本夹,
这个文件夹着之始末就是是要是抬高的凭。

  

  2. 补充加工程模板

  添加应用模版,官方提供的模版默认支持 weex bundle
调试和插件机制,注意模版名称均为稍写,模版被设置及platforms目录下。

  添加模板时terminal仍居于项目工的清目录下。

  >>添加android模版:

$ weexpack platform add android

  添加完成后Android模板目录如下:

  图片 3

  

  >> 添加iOS模板:

$ weexpack platform add ios

  添加完成后iOS模板目录如下:

  图片 4

 

  对于早已安装的模板可以动用weexpack platform list命令查看:

  图片 5

  如果想要删减某个不需的阳台可以下 weexpack platform
remove移除,比如window平台用户是免待ios模版的,可用如下命令移除。

$ weexpack platform remove android

 

  3. 安装 weex 插件(可选项)

     添加想使采用的插件,支持于本地或 weex 应用市场安装插件。

  >>添加想使用的插件,支持于地面或 weex 应用市场安装插件。

$ weexpack plugin add path/to/plugin

 

  >> 从插件市场丰富插件,例如 weex-chart。

$ weexpack plugin add weex-chart

  

   模版的weexplugin是插件安装的对象工程。以安卓为例,其目录如下:

weexplugin
  ├── build.gradle  //  插件编译脚本,工具自动维护
  ├── libs
  ├── proguard-rules.pro
  ├── src
  │   └── main
  │       ├── AndroidManifest.xml // 插件android manifest配置文件
  │       ├── java
  │       │   ├── // 插件src安装目录
  │       │   └── com
  │       │       └── alibaba
  │       │           └── weex
  │       │               └── plugin
  │       │                   ├── ConfigXmlParser.java // 配置文件解析器
  │       │                   ├── PluginConfig.java    // 外部接口
  │       │                   ├── PluginEntry.java     // 插件描述
  │       │                   └── PluginManager.java   // 插件管理器
  │       └── res // 插件资源安装目录
  │           ├── drawable
  │           ├── values
  │           │   └── strings.xml
  │           └── xml
  │               └── config.xml // 插件配置文件,PluginManager解析配置文件加载插件

  

  对于已安装之插件可以运用 weexpack plugin list 命令查看。

  • 翻看已装插件

     $ weexpack plugin list
    

     

  如果想使抹某个不待之插件可以以 weexpack plugin remove
移除,比如weex-chart

  • 移除插件,例如weex-chart

    $ weexpack plugin remove weex-chart
    

  

  4. 包裹应用并安装运行

  完成上述步骤并we代码放在src目录下,就好包运行了,打包过程被可能只要下载依赖与编译工具,这会是只较为耗时的进程,安装运行需要开辟模拟器或者连续装置。

  打包运行android应用    

$ weexpack run android
  • 公可以转项目目录下之android.config.json

    • AppName: 应用名
    • AppId: application_id 包名
    • SplashText: 欢迎页上面的亲笔
    • WeexBundle: 指定的weex bundle文件(支持文件称与url的款型)

    文本称则以地方文件的方加载bundle,url则坐长途的法加载bundle
    如果盖本土方式指定bundle .we文件请放到src目录。

  • 包裹运行ios应用

    • 模拟器运行

      $ weexpack run ios
      

       

    • 构建ipa包

      $ weexpack build ios
      

       

    构建包的经过被,将会见唤起给你输入CodeSign(证书)Profile(provisioning profile),AppId,只有输入真实的这些消息才会打响打包。
    其余如AppName,和入口weex
    bundle文件可以编写项目目录下之ios.config.json配置。
    打完包成功之后,可以在/playground/build/ipa_build/目录下取得ipa文件

    *注:证书需要事先安装至keychain中,在keychain中点击右键获取证书id(证书名称),provisioning
    profile文件(
    mobileprovision)需要获得UUID,进入目录 可以视mobileprovision_UUID.sh文件,此文件可以赢得到UUID**

    mobileprovision_UUID.sh用法如下: $ ./mobileprovision_UUID.sh   \*mobileprovision 参数(*mobileprovision)为provisioning
    profile文件路径

  • 打包html5平台:

    $ weexpack build web
    

     

    这样您得把包裹后的资源上传到cdn服务器,然后上线你的web项目。

  • 以 html5 平台运行:

    $ weexpack run web
    

     

 本博客插件部分摘自:https://www.npmjs.com/package/weexpack 

 

 南心芭比: 热爱分享, 收获喜悦~