跨平台APP开发-MUI之快速搭建一个APP

笔者之前在大学曾经需要做一个手机端的app,因为笔者没有学过安卓,ios,故而经过了解开始使用手机端的UI框架来制作跨平台的app

使用MUI最好要懂的知识:

  • HTML
  • JS
  • CSS
  • 一门网页后端技术(javaweb、php…)

什么是MUI?

  • MUI的定位是:最接近原生体验的移动App的UI框架。
  • 基于mui的定位,产生了mui的几个特点,轻、小、只涉及UI、只为移动App而生、界面风格原生化。
  • 这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。有些控件就是原生态的效果,mui起到了桥梁的作用

开发工具:

Hbuilder 下载地址跳转

MUI必须要说的特点

  • 国产的有木有,全是中文有木有(滑稽)。对MUI是我们国人自己的ui框架,是目前国内最火的手机app前端框架。

废话不多说,直接开始干
首先打开下载好的开发工具,我们可以看到,全是中文。易于操作
在这里插入图片描述
点击—文件—新建—移动App
在这里插入图片描述
进入这个界面:我们可以看到,全是中文。

  • 移动app名称,就是要创建的app名字
  • 位置,不必多说,就是这个mui项目保存的位置
  • 模板一定要选mui项目。我们的初衷就是利用mui建立我们的app,此选项帮助我们项目中加入mui的js和css,项目中引用后遍可以使用mui的模块了。
    在这里插入图片描述
    建立完毕后,目录是这样的,发现它帮助我们引用了mui.min.js和mui.min.css这两个压缩版,非常的方便。在这里插入图片描述
    mui.init()初始化js,这个时候需要打开mui的官方文档了。直接上地址。跳转
    打开之后,我们可以看到各种样式都用说明,大家可以根据自己的需求,选用各种样式以及观看他们的说明,本文只是初识mui并建立第一个app。
    mui之所以说其方便,是应为其本身封装了各种代码块,举个例子,我现在需要做一个ul列表,就可以直接在html中输入“mlist”,我们可以看到,有三种列表,都用中文介绍,大家可以根据自己需求选用。当选择敲击回车后 Hbuilder会帮助我们生成html代码,并且自主引用mui中的css样式来生成列表。
    同等功能的代码块有很多,具体参考mui官方文档
    在这里插入图片描述
    在这里插入图片描述
    我们会发现,mui非常方便,大家在开发过程中,肯定是要看一看自己写的界面在手机端上排版怎么样,是否整洁好看,嘿,Hbuilder有边开发边看排版的功能,点击右上角的“开发视图“的下拉框,然后点击边改变看模式。 (记得写好的代码要点Ctrl+s保存,这样视图才会刷新)我们可以看到刚刚写上去的列表显示在了这个模拟手机视图上。
    在这里插入图片描述
    右边的界面只是视图,其实这些可以运行在手机上的,不过需要数据线链接手机,接下来我们使用网络上的成品,安卓模拟器来模拟手机,将这个项目运行在安卓模拟器之上。因为安卓模拟器是第三方工具,所以需要一些简单的配置才能运行。
    我们点击如图所示的运行,我们可以看到,能在各种浏览器上运行,一般检查代码,用到浏览器运行,真正要看排版,还是得在手机上看才正确,我们点击设置 “web服务器”
    在这里插入图片描述
    弹出如下界面,选中根目录,我们可以看到最下方的文本框,“第三方Android模拟器端口”。笔者用的模拟器叫做夜神模拟器,它的端口号是62001,填写正确的端口后,点击确定。然后运行下载好的模拟器
    这里可能要等待一会儿,因为HBuilder和模拟器链接需要一点时间
    在这里插入图片描述
    ok,等了大概一分钟,终于出来了,我们可以看到,手机设备已经链接到了,然后我们点击它,让他运行
    在这里插入图片描述
    出现此字样表示运行成功
    在这里插入图片描述
    接下来看向模拟器,我们就会发现,界面上已经呈现出自己所编辑的样式了
    在这里插入图片描述
    接下来我们将此项目打包成app,点击发行,选中第一个
    在这里插入图片描述
    弹出如下界面,这里只打包Android应用,因为ios需要开发者证书。然后点击打包,在弹出的一些东西我们直接下一步,下一步,往下走,然后查看状态,等待打包完成
    在这里插入图片描述
    打包完成后如下界面,点击手动下载后,遍可下载成一个安卓的安装包,由此便制作成了我们的第一个app,我们可以将此应用安装到自己的手机上,以及拖动到模拟器中,进行安装。
    在这里插入图片描述

完成操作,感谢观看

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值