盘古 APP Starter 是集成了 uni-app 内置组件、官方扩展组件和全面兼容 nvue 的 uni-app 生态框架 uView UI 的移动端多平台快速开发脚手架。用户可以基于此完成Android/IOS App、微信小程序、H5 应用的快速开发。(一次开发,针对不同平台编译发布版本)
盘古 App 仓库代码路径:pangu-framework/pangu-app-starter
。
由于 uni-app 依赖 HbuilderX,因此,我们开发盘古 APP 的 IDE 选择为 HbuilderX。
使用 HbuilderX「文件 -> 导入 -> 从本地目录导入」菜单,导入 pangu-app-starter 模版工程。
安装依赖和启动需依赖npm。安装方法:https://nodejs.org/zh-cn
# 进入项目目录
cd pangu-framework/pangu-app-starter
# 安装依赖
npm i
使用 HbuilderX「运行 -> 运行到浏览器 -> Chrome」菜单,启动工程并通过浏览器访问。如下图所示。
以范例 APP 底部的「组件」导航菜单为例,说明如何配置首页底部的导航菜单。
打开 pages.json 配置文件,找到 tabBar 节点。如下所示:
"tabBar": {
"color": "#303133",
"selectedColor": "#529b2e",
"borderStyle": "black",
"backgroundColor": "#f4f4f5",
"list": [{
"pagePath": "pages/example/components",
"iconPath": "static/common/img/nav/component.png",
"selectedIconPath": "static/common/img/nav/component-selected.png",
"text": "组件"
}
// ...其它菜单配置...
]
}
配置路径 pages/example/components 的路由信息。在 pages.json 配置文件中,找到 pages 节点。如下所示:
"pages": [
//pages数组中第一项表示应用启动页
{
"path": "pages/example/components",
"style": {
"navigationBarTitleText": "组件"
}
}
// ...其它路由配置...
]
该路由配置对应视图文件:pages/example/components.nvue。
参考 pages.json 相关配置文件即可。
更多关于 pages.json 的配置,请查阅 uni-app 相关文档。
将工程发布为手机 H5 Web 应用部署到静态资源服务器,可通过微信/手机浏览器等访问。
盘古 APP Starter电脑端浏览器模拟访问undefinedhttps://pangu-app-starter.pulanit.com/h5.html
请事先安装好微信开发者工具。下载安装
在微信 公众平台 注册小程序账户。(注意:一个邮箱地址注册一个微信小程序账户)。登录后根据提示生成微信小程序 AppID。(后续发布将会使用)
盘古 APP Starter
将工程打包发布为原生 Android APP 应用。对于.vue 页面将使用 webview 渲染机制;如果使用 .nvue 页面(native vue 的缩写),则使用原生渲染。
盘古 APP Starter
图略。完整体验请访问:在线演示。
原文链接@码农大熊的博客
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。