Hera-将小程序打包成移动APP的开发框架
2017-12-23 16:11
375 查看
继移动APP之后,小程序作为当前移动的有一个入口为大家所推崇,不管是微信的小程序还是支付宝的小程序,其实现的思路都是一致的,即通过一个宿主来运行相关的JS页面。
现在Hera根据市场需求,推出了一款真正的跨平台框架,除了可以让你的小程序除了在微信上运行,还可以打包成 Android 、 iOS应用,以及以 h5 的方式跑在浏览器端。
主要的优点有:
一套代码 处处运行
Hera提供了强大的跨平台能力:不仅可以让开发者的微信小程序业务从微信中平滑迁移到Android和iOS端的App中,同时也提供了RN等其它框架没有的能力 —— 运行在Web端。
组件丰富 简单易用
自带常用组件,完美继承了小程序内置组件,学习成本低,完全兼容微信小程序的开发方式。
极速加载 体验流畅
Hera框架同时也可以支持业务的快速迭代和更新,所有组件和 API 内置在客户端中,每个页面只包含核心业务逻辑使页面更轻量,在高速加载的同时兼具动态更新的能力。
如果得到的版本低于v7.6.0,或是提示找不到 node 命令,请点此下载最新的 Node 环境安装包。
Tips: 如果下载时出现网络问题,可以尝试使用 nrm 或 npm config 命令切换至国内的npm源
初始化小程序
进入新建的项目, 确认根目录有 config.json 文件:
web运行
Android中运行
如果想要在安卓虚拟机或真机上运行,需要安装 Android Studio 以及:
Android SDK Platform 25
Android SDK Build-Tools 25.0.3
Tips:如果对Android环境搭建不清楚的可以自行查询资料。
然后使用命令查看设备是否连接,命令如下:
说明:如果提示adb不是可用命令,请确认PATH 环境变量中增加了%ANDROID_HOME%\platform-tools和%ANDROID_HOME%\platform-tools
如果设备处于活跃状态会显示如下信息,如果列表为空或设备处于离线状态,请重新连接安卓手机或重启虚拟机。
然后链接之后就可以运行了,运行的命令如下:
iOS端运行
首先需要在系统中安装 Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。
安装完成后启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。
然后,使用如下命令安装依赖管理工具 cocoapods,命令如下:
然后,使用命令运行即可:
以上都是在模拟器上运行的,如果想要在真机上运行,可以访问下面的介绍:https://weidian-inc.github.io/hera/#/ios/ios-real-device
其中:android 和 ios 目录下为小程序API 在客户端上的实现;
h5 目录下为小程序转换工具:将小程序转换为客户端可以执行的代码;
docs 目录下为项目文档及主页生成器;
现在Hera根据市场需求,推出了一款真正的跨平台框架,除了可以让你的小程序除了在微信上运行,还可以打包成 Android 、 iOS应用,以及以 h5 的方式跑在浏览器端。
主要的优点有:
一套代码 处处运行
Hera提供了强大的跨平台能力:不仅可以让开发者的微信小程序业务从微信中平滑迁移到Android和iOS端的App中,同时也提供了RN等其它框架没有的能力 —— 运行在Web端。
组件丰富 简单易用
自带常用组件,完美继承了小程序内置组件,学习成本低,完全兼容微信小程序的开发方式。
极速加载 体验流畅
Hera框架同时也可以支持业务的快速迭代和更新,所有组件和 API 内置在客户端中,每个页面只包含核心业务逻辑使页面更轻量,在高速加载的同时兼具动态更新的能力。
快速上手
安装脚手架
需要在系统中安装 Node.js 环境, 使用以下方法确认系统中 Node 的版本:node -v
如果得到的版本低于v7.6.0,或是提示找不到 node 命令,请点此下载最新的 Node 环境安装包。
Tips: 如果下载时出现网络问题,可以尝试使用 nrm 或 npm config 命令切换至国内的npm源
安装运行
安装依赖库npm i hera-cli -g
初始化小程序
hera init projName
进入新建的项目, 确认根目录有 config.json 文件:
# 进入项目 cd projName # 查看配置文件 cat config.json
web运行
hera run web
Android中运行
如果想要在安卓虚拟机或真机上运行,需要安装 Android Studio 以及:
Android SDK Platform 25
Android SDK Build-Tools 25.0.3
Tips:如果对Android环境搭建不清楚的可以自行查询资料。
然后使用命令查看设备是否连接,命令如下:
adb devices
说明:如果提示adb不是可用命令,请确认PATH 环境变量中增加了%ANDROID_HOME%\platform-tools和%ANDROID_HOME%\platform-tools
如果设备处于活跃状态会显示如下信息,如果列表为空或设备处于离线状态,请重新连接安卓手机或重启虚拟机。
List of devices attached 0ec123456 device
然后链接之后就可以运行了,运行的命令如下:
hera run android
iOS端运行
首先需要在系统中安装 Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。
安装完成后启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。
然后,使用如下命令安装依赖管理工具 cocoapods,命令如下:
sudo gem install cocoapods
然后,使用命令运行即可:
hera run ios
以上都是在模拟器上运行的,如果想要在真机上运行,可以访问下面的介绍:https://weidian-inc.github.io/hera/#/ios/ios-real-device
目录结构说明
新建后的项目的目录结构如下:├── README.md ├── android ├── docs ├── h5 └── ios
其中:android 和 ios 目录下为小程序API 在客户端上的实现;
h5 目录下为小程序转换工具:将小程序转换为客户端可以执行的代码;
docs 目录下为项目文档及主页生成器;
相关文章推荐
- Hera-将小程序打包成移动APP的开发框架
- Hera-将小程序打包成移动APP的开发框架
- HTML5 Mobile App移动框架Sencha Touch实战OA系统开发(PhoneGap打包应用)
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
- 王家林的81门一站式云计算分布式大数据&移动互联网解决方案课程第14门课程:Android软硬整合设计与框架揭秘: HAL&Framework &Native Service &App&HTML5架构设计与实战开发
- Html5必看:教你如何选择移动APP开发框架
- Dcloud开发引用第三方sdk的app小程序扫盲---使用第三方sdk并且打包
- 11个有用的移动网页开发App和HTML5框架
- 11个有用的移动网页开发App和HTML5框架
- 11个有用的移动网页开发App和HTML5框架
- 基于Ionic2 的移动app开发<2>(从项目的新建到打包)
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
- [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题
- 11个有用的移动网页开发App和HTML5框架
- 11个有用的移动网页开发App和HTML5框架-记录下来
- 几款移动跨平台App开发框架比较
- 快速了解微信小程序的使用,一个根据小程序的框架开发的 todos app
- 前端和H5版移动app开发框架
- 11个有用的移动网页开发App和HTML5框架
- 11个有用的移动网页开发App和HTML5框架