首个使用 Weex 和 Vue 开发的 Hacker News 原生应用

2,470 阅读1分钟
原文链接: github.com

首个使用 Weex 和 Vue 开发的 Hacker News 原生应用。

预览

Weex Playground App 扫描下方二维码即可。

项目使用的 Hacker News API 是由 Google 的 Firebase 提供的网络服务,在国内网络环境里访问可能会受到一些影响。

QR Code

二维码内容是 http://whatever.cn?_wx_tpl=https://raw.githubusercontent.com/weexteam/weex-hackernews/master/ios/assets/index.js ,确保你的手机能登上 GitHub 。

编译项目文件

安装依赖:

npm install

编译代码:

# 生成 Web 平台和 native 平台可用的 bundle 文件
# 位置:
# dist/index.web.js
# dist/index.web.js
npm run build

# 监听模式的 npm run build
npm run dev

拷贝 bundle 文件:

# 将生成的 bundle 文件拷贝到 Android 项目的资源目录
npm run copy:android

# 将生成的 bundle 文件拷贝到 iOS 项目的资源目录
npm run copy:ios

# run both copy:andriod and copy:ios
npm run copy

启动 Web 服务

npm run serve

启动服务后会监听 1337 端口,访问 http://127.0.0.1:1337/index.html 即可在浏览器中预览页面。

启动 Android 项目

首先应该安装 Android Studio 和必要的 Android SDK,配置好基本的开发环境。

使用 Android Studio 打开 android 目录中的项目,等待自动安装完依赖以后,即可启动模拟器或者真机预览页面。

启动 iOS 项目

首先应该配置好 iOS 开发环境 并且安装 CocoaPods 工具。

进入 ios 目录,使用 CocoaPods 安装依赖:

pod install

使用 Xcode 打开 ios 目录中的项目(HackerNews.xcworkspace),然后即可启动模拟器预览页面。

注:如果想要在真机上查看效果,还需要配置开发者签名等信息。