接口来自知乎日报 API 分析
一、 构建工具
weexpack 命令介绍
weexpack 所提供的命令大致可分为三组,分别是:
- 打包命令
weexpack create — 创建 weex 工程项目。
weexpack platform add/remove — 安装/移除 weex 应用模版,默认模版支持 weex bundle 调试和插件机制。
weexpack platform list — 查看已安装的平台模版及版本。
weexpack platform run - 打包应用并安装到设备运行。- 插件使用者命令
weexpack plugin add/remove — 安装/移除 weex 插件。- 插件开发者命令
weexpack plugin create - 生成weex插件模版,主要是配置文件和必需的目录。
weexpack plugin publish - 发布插件到weex插件市场。
⚠️使用weexpack构建的项目要注意一点:
在Android 机器上不支持 ES6语法,虽然项目构建的时候已经集成了 bable 的 NPM包来将ES6转换成ES5的语法。但是还需要在项目的根目录手动添加.babelrc
文件,文件里的具体代码如下:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
❓为什么没有用weex-toolkit
weex-toolkit 初始化的项目是针对开发单个 Weex 页面而设计的,也就是说这样的项目只包括单个页面开发需要的东西,比如前端页面源文件、webpack 配置、npm 脚本等。项目产生的输出就是一个 JS Bundle 文件,可以自由的进行部署。
weex-pack 是初始化一个完整的 App 工程,包括 Android 和 iOS 的整个 App 起步,前端页面只是其中的一部分。这样的项目最终产出是一个 Android App 和一个 iOS App。
如果你不用weexpack来打包的话,weex-toolkit可以替代weexpack来构建应用。weex-toolkit集成对weexpack的命令调用支持,你可以使用weex-toolkit命令来实现weexpack具备的功能。
二、项目效果
只写了一个雏形,本来准备把详情页面也写一下的,发现详情接口的网页数据是 json 格式返回的 HTML 源码,而 weex 封装的 web 组件并没有暴露Native的loadHTML
API,就没写了。
源码:https://github.com/yuan-gao/zhihuDaily-Weex
//安装依赖
npm installl
//运行 iOS
weex run ios
//运行 Android
weex run android
Web 端因为 js 跨域问题,run
的时候应该看不到效果。
三、结语
要完全使用weex 来完成一个项目(Android+iOS+Web),write once run everywhere几乎不可能,除非项目的逻辑和交互都非常简单。因为使用weex的功能有限,稍微复杂一点的需求就需要和 Native 端交互,虽说weex团队提供了Module 扩展,但是使用Module 扩展的前提是开发人员至少具备开发完整 Native 端应用的能力。
✅对大厂来说,可以不在乎开发人员的成本,追求产品快速迭代,将整个项目的 jsBundle 部署在服务器。
❎对初创公司来说,请一个即能开发 Android和 iOS 端 Native 应用的开发人员来开发 Weex 应用,所花的成本估计也并不比养两个开发 Android 和 iOS 的人员低,而且这种人也难找。
✅对开发人员来说,可以不用学习Native端知识就能开发一个跨平台的 APP,非常棒。
✅从产品的角度来说,既想频繁变更需求,又想要原生的体验,部分页面使用 Weex 是个不错的选择。
最后安利一个非常棒的 weex插件库:Nat.js