前端开发APP,从HBuilder开始~

前端开发APP,从HBuilder开始~内容简介介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~无所不能的js最开始js仅仅局限于网页上一些效果,操作网页内容等,但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃,native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃。前端涉及app的两种

大家好,又见面了,我是你们的朋友全栈君。

前端开发APP,从HBuilder开始~

内容简介

介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~

无所不能的js

最开始js仅仅局限于网页上一些效果,操作网页内容等,

但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃,

native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃。

前端涉及app的两种方式

适应移动端的网页

大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表,

说的简单点就是对移动端做了适配,是的布局样式组件都适合移动端展示,

缺陷:毕竟不是app,不管怎么样也没办法取代app的便捷和功能强大。

js+html+css+打包技术

比较有名的就是phonegap了,国内的是hbuilder,

大概的意思是html负责页面内容,js负责效果以及调用原生app方法,ui框架负责样式,

最后打包成apk或者ipa。

hbuilder(DCloud – HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

不谈phonegap,不适用国内国情,

是的,你没有看错,这是一个开发的ide,其实就是对eclipse进行了深度定制。

特点是快捷键比较多,支持移动app开发(h5+方式)。

h5+(HTML5产业联盟

终于说到正题了,这个就是之前提到的打包技术,

可以说nodejs将js带到后端,h5+将js带到移动端。

原理

上面说过的原理,再次说一遍:

html负责页面,也就是的内容和框架;

js负责调用方法,也就是调用一些移动端原生;

ui负责样式,比较有名的bootstrap,amazeui,jquery mobile,mui

ui比较

上面说的几个ui,做下简单比较,仅代表个人观点,

amazeui,功能和bootstrap重复,官方解释是对中文排版做了优化,个人觉得有点多余,bootstrap就很好。

bootstrap,适合移动端浏览网页适配,移动端浏览效果不错,但是还是网页。

jquery mobile,专门对移动端做定制,看起来就像手机应用一样,js+css(300k),国外的,不推荐,有坑。

mui,这个是推荐的,比较了jqmobile和mui,显然mui效果样式好点,估计也会有坑,但是支持国产吧。

前端搞app

搭建开发环境

不需要搭建ios和android的开发环境,只需要下载hbuilder(估计需要java环境支持),

选定ui

目前推荐mui,效果不错

写事件

通过js调用原生方法实现app效果

写业务逻辑

如题

代码和图片(简单示例)

文字说再多感觉也不是很大,下面来代码和图片,

文件结构:

前端开发APP,从HBuilder开始~

你没有看错,仅仅需要一个html页面,加一些js,css,这个例子使用的jquery mobile

页面代码:

head部分,仅仅引入一些必须的js和css

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>hello world</title>
    
    <link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
    <script src="http://cdn.staticfile.org/jquery/2.0.1/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
    	function helloworld(){
			alert("hello world!")
		}
   		document.addEventListener('plusready', function(){
   			alert("welcome to Html5plus!");
   		});
    </script>
</head>

body部分,普通的页面

<body>
	<div data-role="page">
		<div data-role="header">
			<h1>首页</h1>
		</div>
		
		<div role="main" class="ui-content">
			<p>一些主体内容在这里。。</p>
			<form>
		        <fieldset data-role="controlgroup">
			        <label>
			        	<input type="radio" name="radio-choice-v-2" value="one" checked="checked">第一个
			        </label>
			        <label>
			        	<input type="radio" name="radio-choice-v-2" value="two">第二个
			        </label>
			        <label>
			        	<input type="radio" name="radio-choice-v-2" value="three">第三个
			        </label>
			    </fieldset>
			</form>
		</div>
		
		<div data-role="footer">
			<h4>uikoo9.com</h4>
		</div>
	</div>
</body>

调试

手机连接电脑,然后在hbuilder下运行——手机运行——在设备上运行,

就直接可以在手机上看效果了

效果

前端开发APP,从HBuilder开始~

打包

在hbuilder中发型——app打包,然后交给云端去打包,打包好后会自动下载,例如

前端开发APP,从HBuilder开始~

心动了吗?

现在,如果你会html+js+css,那你只需要一个hbuilder就可以开发app了,通吃android和ios

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/138140.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • lnk2019无法解析的外部符号_declspec_无法解析的外部符号_main

    lnk2019无法解析的外部符号_declspec_无法解析的外部符号_mainC++工程编译时出现如下链接错误提示:原因一:只是在.h里面声明了某个方法,没有在cpp里面实现;原因二:在工程中加入了有相同名字的文件或者类;原因三:如果此类为静态库中定义的类,可能没有添加头文件目录和文件引用的lib静态库路径;添加方法:添加工程的头文件目录:项目->属性->配置属性->C/C++->常规->附加包含目录:加上头文件的存放目录;添加文件引用的lib静态库路径:项目->属性->配置属性->链接器->常规->附加

  • Echarts整合(前后端、数据库)

    Echarts整合(前后端、数据库)

    2021年11月12日
  • 利用selenium webdriver下载不同类型的文件(pdf,txt等等)[通俗易懂]

    利用selenium webdriver下载不同类型的文件(pdf,txt等等)[通俗易懂]很多时候你需要从网站上下载不同种类的文件,像是MSExcelfile,MSWordFile,Zipfile,PDFfile,CSVfile,Textfile,等等。如果手动下载,会弹出一个保存文件的对话框。现在,seleniumwebdriver还不能处理这样的对话框。不过,你可以用别的好的seleniumwebdriver的特点去很轻松的下载文件,而不用

  • [非官方]ArcGIS10.2 for Desktop扩展工具包——XTools Pro

    [非官方]ArcGIS10.2 for Desktop扩展工具包——XTools Pro

    2021年12月14日
  • 详解 & 0xff 的意义及作用

    详解 & 0xff 的意义及作用首先我们要都知道,&表示按位与,只有两个位同时为1,才能得到1,0x代表16进制数,0xff表示的数二进制11111111占一个字节.和其进行&操作的数,最低8位,不会发生变化.下面着重来说说&0xff都有哪些应用:1.只是为了取得低八位通常配合移位操作符>>使用例如:javasocket通信中基于长度的成帧方法中,如果发送的信息长度小于65535字节,长度信息的字节定义为两个字节长度。这时候将两个字节长的长度信息,以Big-Endian的

  • python dll注入监听_DLL注入和API拦截

    python dll注入监听_DLL注入和API拦截读《Windows核心编程》笔记一DLL注入和API拦截在Windows中,每个进程相互独立,都有自己的私有的地址空间,程序中使用的指针都是进程自己地址空间的一个内存地址,无法创建也没法使用其他进程的指针。这种机制使得各个进程之间不会相互影响,万一自己出现了问题,也不会影响到其他的进程。对用户来说,系统更加的稳定了,但是对于开发人员来说,会使我们很难编写能够与其他进程通信的应用程序或对其他进程进…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号