Node.jsWeexpack 使用教程

简介


 

  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插件商号。

安装


  环境要求:

  安装命令

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

$ npm install -g weexpack@0.3.12-beta

    或许 在 clone 的 weexpack 根目录下施行:

$ npm install

 注: 近年来风靡的weexpack版本是0.叁.1二的测试版, 正式版是0.3.1一,
但正式版在MacOS上无法增多platform, 会出现 “Error:Unexpected token
<<” 的错误.

  消除办法就是重新安装0.三.1二-beta版本, 在terminal实行1回:

$ npm install -g weexpack@0.3.12-beta  

  相信Ali会一点也不慢缓解那几个主题材料. ^_^

 

包裹及插件使用


  打包首要进度如下图所示,在那之中插件操作是包装进度的可选项,不是必须的。

     Node.js 1

  

详细步骤

  壹. 开立工程

  在terminal中跻身你要求停放工程目录的文本夹中, 例如放在桌面上,
实践如下命令:

$ cd Desktop

$ weexpack create appName

  此时 在桌面上就曾经济建设好了花色工程文件夹, 目录如下:

           Node.js 2

  platforms: 平台模板目录

  plugins: 插件下载目录

  src: 业务代码目录

 

  通过 create 命令创制的工程暗中认可不含有 ios 和 android
工程模版,创设完毕之后就足以切换来appName目录下并安装依赖。  

$ cd appName && npm install

  等一段时间, 当达成后 目录中或多二个node_modules的公文夹,
这一个文件夹中的内容正是要增进的依靠。

  

  二. 增添工程模板

  增添应用模版,官方提供的模板默许援救 weex bundle
调节和测试和插件机制,注意模版名称均为小写,模版被设置到platforms目录下。

  增添模板时terminal仍居于项目工程的根目录下。

  >>添加android模版:

$ weexpack platform add android

  增多完结后Android模板目录如下:

  Node.js 3

  

  >> 添加iOS模板:

$ weexpack platform add ios

  增多完毕后iOS模板目录如下:

  Node.js 4

 

  对于已设置的沙盘能够使用weexpack platform list命令查看:

  Node.js 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
    

  

  四. 封装应用并设置运营

  完毕以上步骤并we代码放在src目录下,就足以打包运维了,打包进度中或然要下载信赖和编写翻译工具,那会是个较为耗费时间的经过,安装运营必要开辟模拟器大概三番五次装置。

  打包运维android应用    

$ weexpack run android
  • 您能够退换项目目录下的android.config.json

    • AppName: 应用名
    • AppId: application_id 包名
    • SplashText: 欢迎页上边的文字
    • WeexBundle: 钦命的weex bundle文件(协助文件名和url的花样)

    文本名则以地点文件的不二法门加载bundle,url则以长途的不2秘籍加载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项目。

  • 在 html伍 平台运维:

    $ weexpack run web
    

     

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

 

 南心Barbie: 热爱分享, 收获欢欣~