基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)

目录

  • 事前准备
  • 创建项目
  • 利用MUI写一个简单的页面
  • 关于文件打包

事前准备

# 软件
HBuilder X   Web开发IDE 下载地址:https://www.dcloud.io/hbuilderx.html
        
MUI  前端框架(移动端)    使用文档:https://dev.dcloud.net.cn/mui/ui/#icon
What is Mui:
    - 移动端布局框架 made in China
    - 模拟移动App,HTML布局框架
    - Css+javascript 模拟出动态效果 CPU瞬时损耗严重(以现在手机的性能可以流畅运行)

Mui + HBuilderX 
30+ <50+ 按键可以构建出页面 - HBuilderX 代码块        
        
HTML5 plus             API参考 https://www.html5plus.org/doc/h5p.html    
移动设备硬件驱动调用 - 震动器 摄像头 闪光灯 扬声器 麦克风 蓝牙 红外
Android,iOS系统调用 - 相册 通讯录 打电话 短信 彩信 电子邮件 闹钟 日历    
    
# 硬件
电脑 + iOS或Android系统的手机与数据线 

创建项目

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第1张图片

# 我这里使用的是安卓系统的手机
手机打开usb调试功能,用数据线连接到电脑 (不会打开usb调试,请自行百度)

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第2张图片

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第3张图片

# 现在就可以,用手机查看 MUI框架 提供的前端组件

利用MUI写一个简单的页面

#新手指南: https://dev.dcloud.net.cn/mui/getting-started/
#使用文档: https://dev.dcloud.net.cn/mui/ui/#icon
#HTML5 PLUS 手机硬件调用参考 https://www.html5plus.org/doc/h5p.html#
新建一个MUI项目

mdo --> mDoctype(mui-dom结构)

mh -->  mHeader(标题栏)

mb -->  mBody(主体 里面放内容) 

mt -->  mTab(底部选项卡)

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第4张图片

效果展示




    
        
        Document
        
        
        
    
    
        

新闻快车

<--简单的参考,使用文档做了一个手机端的静态页面 效果如下图-->

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第5张图片

关于如何使用mui,及页面之间的传参调用直接参考官方文档.
https://dev.dcloud.net.cn/mui/ui/#icon
后台小型项目推荐使用Flask轻量级框架

关于文件打包

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第6张图片

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第7张图片

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第8张图片

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第9张图片

基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)_第10张图片

演示app:点击下载

作 者: 郭楷丰
出 处: https://www.cnblogs.com/guokaifeng/
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力!
自 勉:生活,需要追求;梦想,需要坚持;生命,需要珍惜;但人生的路上,更需要坚强。 带着感恩的心启程,学会爱,爱父母,爱自己,爱朋友,爱他人。

你可能感兴趣的:(基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP))