用hbuilder和原生交互做app 怎样与后台交互

来源：蜘蛛抓取(WebSpider) 时间：2016-11-25 09:41 标签： hbuilder做app
更多数码资讯，请关注南窗数码
“标签项目”相关经验相关文章1楼.奇友&&
名称(*)邮箱网址正文(*) &◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。9236人阅读
07_HPP开发（22）
前面几节基本是一些概念的普及，
正如前面提到的，本教程会以作为范例进行讲解，
有兴趣的可以先行下载体验一下，或者下载源码研究下。
打开HBuilder，在项目管理器中右键——新建——移动app，或者直接ctrl+n，a，
见到如下界面，填入项目名称，选择mui项目，
新建完成后，默认生成的目录如下，基本和前端开发的目录结构类似，
本教程暂时以android为例，最后会另外讲解ios手机的开发，大同小异。
用数据线连接android手机，将手机中的设置——开发人员工具——usb调试，打开，
选中之前新建的项目，选择菜单，运行——手机运行——你的手机，或者直接ctrl+r，
如果提示检测不到手机，你可以下载个应用宝之类的软件，应用宝会帮你搞定，
如果手机正常连接，控制台会显示如下信息，成功后，你的app已经在手机上运行了，
虽然是一个空白页，但是感觉下前端做app的乐趣吧。
首先说下文件存放结构，
js文件夹下新建lib和app文件夹，分别放工具js和页面js，如下
需要提到的是，工具js采用jquery，应该jquery很强大，
有的人会疑问jquery比较大，用jquery是不是不太好，
那你就错了，你还停留在网页的思维，
其实HBuilder最终会把这些js都打到app包内，
其实你调用jquery就是调用的app包内的js了，
不存在大不大，费不费流量的问题了。
然后是页面结构，
参考这里： 中的创建子页面，见顶部图片
你可以看到首页是分为index部分，也就是可见的头部，有时候是头部和底部，
还有list部分，也就是中间部分，为什么要这么做，为了让app更加逼真，
你也可以尝试自己把index和list放到一起，最终的最终你还是会采用这种方法的。。
index.html
代码如下：
&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&viewport& content=&width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no&&
&!-- mui --&
&script src=&js/mui.min.js&&&/script&
&link href=&css/mui.min.css& rel=&stylesheet&/&
&header class=&mui-bar mui-bar-nav&&
&a class=&mui-icon mui-icon-bars mui-pull-left menua&&&/a&
&a class=&mui-icon mui-icon-plus mui-pull-right adda&&&/a&
&h1 class=&mui-title&&滴石&/h1&
&!-- jquery --&
&script type=&text/javascript& src=&js/lib/jquery-1.11.2.min.js&&&/script&
&!-- qiao.js --&
&script type=&text/javascript& src=&js/lib/qiao.js&&&/script&
&!-- app --&
&script type=&text/javascript& src=&js/app/index.js&&&/script&
不多说了，必须的，第二个是适应移动端
mui的js和css是必须的，mui负责了app的ui界面和app和原生交互的封装，
你也可以用采用bootstrap或者amazeui或者jquery mobi等ui，但是这里还是推荐mui。
采用mui中封装好的组件“导航栏包含文字和图标”，详见这里：
其中mui-pull-left代表浮动到左边，right到右边，mui-icon-*代表各种字体图标，
关于字体图标可以看这里，如果mui自带的没法满足，你可以在这里下载引入：
将与页面初始化无关的js引入到body的最底部是一个好习惯，
这里引入了jquery和我自己的一些封装qiao.js，以后详细解说，最后是index页面对应的js
更多教程：
HBuilder开发App教程：
更多学习笔记：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：954824次
积分：7868
积分：7868
排名：第2003名
原创：201篇
转载：14篇
评论：294条Hbuilder封装APP的教程
步骤：1.下载安装好Hbuilder，然后打开，选择文件》新建》移动app2.然后填写应用名称等基本信息，注意这里模板选择空模板即可。3.在左侧项目管理器找到刚才创建的项目，（这里说明一下，css、img、js文件是自动生成的空文件夹，不用管。我们这里需要修改的是index.html和manifest.json）4.先打开index.html 删除掉原来的js代码，插入新的代码注：href即为内嵌网页的地址5.打开manifest.json配置下图标和启动图片配置好以后（上图示例没有修改，使用的默认图标和启动图片），点击菜单发行》发行为原生安装包弹出对话框选择好ios，Android，再点击打包就可以了，最后等待几分钟，打包好以后下载就OK了！注：示例通过蒲公英生成的安卓下载链接为：可查看效果用HBuilder开发一个属于自己的App
我的图书馆
用HBuilder开发一个属于自己的App
对于学.net的童鞋想要开发出一个App其实不是一个难事，主要还是要花时间去学习的，HBuilder是一个很好地工具，想要学习App的朋友可以去学习这个工具。 废话不多说，直接上图：
发表评论：
TA的最新馆藏

我要回帖

更多关于 hbuilder做app 的文章

 

随机推荐