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

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

预览

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

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

二维码内容是 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),然后即可启动模拟器预览页面。

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

原文链接:github.com

上一篇:干净的git历史和代码审查工作流程
下一篇:GitLab Web IDE正式发布10.7版本并开源

相关推荐

官方社区

扫码加入 JavaScript 社区