当前位置: 开发笔记 > 编程语言 > 正文

前端开发app，从hbuilder开始

作者：mobiledu2502897817 | 来源：互联网 | 2023-08-11 21:16

内容简介介绍目前前端人员开发app的几种方法，具体介绍hbuilder开发app，一扇赞新的大门~无所不能的js最开始js仅仅局限于网页上一些效果&#x

内容简介

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

无所不能的js

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

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

native.js&＃xff08;以及其他js&＃xff0c;稍候介绍&＃xff09;把js带入了移动端&＃xff0c;从此前端人员前后移动通吃。

前端涉及app的两种方式

适应移动端的网页

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

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

我的个人网站&＃xff08;uikoo9.com&＃xff09;就是使用bootstrap3做的&＃xff0c;手机浏览效果也很好。

缺陷&＃xff1a;毕竟不是app&＃xff0c;不管怎么样也没办法取代app的便捷和功能强大。

js&＃43;html&＃43;css&＃43;打包技术

比较有名的就是phonegap了&＃xff0c;国内的是hbuilder&＃xff0c;

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

最后打包成apk或者ipa。

hbuilder&＃xff08;http://www.dcloud.io/&＃xff09;

不谈phonegap&＃xff0c;不适用国内国情&＃xff0c;

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

特点是快捷键比较多&＃xff0c;支持移动app开发&＃xff08;h5&＃43;方式&＃xff09;。

h5&＃43;&＃xff08;http://www.html5plus.org/#home&＃xff09;

终于说到正题了&＃xff0c;这个就是之前提到的打包技术&＃xff0c;

可以说nodejs将js带到后端&＃xff0c;h5&＃43;将js带到移动端。

原理

上面说过的原理&＃xff0c;再次说一遍&＃xff1a;

html负责页面&＃xff0c;也就是的内容和框架&＃xff1b;

js负责调用方法&＃xff0c;也就是调用一些移动端原生&＃xff1b;

ui负责样式&＃xff0c;比较有名的bootstrap&＃xff0c;amazeui&＃xff0c;jquery mobile&＃xff0c;mui

ui比较

上面说的几个ui&＃xff0c;做下简单比较&＃xff0c;仅代表个人观点&＃xff0c;

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

bootstrap&＃xff0c;适合移动端浏览网页适配&＃xff0c;移动端浏览效果不错&＃xff0c;但是还是网页。

jquery mobile&＃xff0c;专门对移动端做定制&＃xff0c;看起来就像手机应用一样&＃xff0c;js&＃43;css&＃xff08;300k&＃xff09;&＃xff0c;国外的&＃xff0c;不推荐&＃xff0c;有坑。

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

前端搞app

搭建开发环境

不需要搭建ios和Android的开发环境&＃xff0c;只需要下载hbuilder&＃xff08;估计需要java环境支持&＃xff09;&＃xff0c;

选定ui

目前推荐mui&＃xff0c;效果不错

写事件

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

写业务逻辑

如题

代码和图片&＃xff08;简单示例&＃xff09;

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

文件结构&＃xff1a;

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

页面代码&＃xff1a;

head部分&＃xff0c;仅仅引入一些必须的js和css

[html] view plaincopy

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

body部分&＃xff0c;普通的页面

[html] view plaincopy

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