浏览器调起Hbuilder的APP

最近用Hbuilder来开发APP,测试各种功能,其中,最近测试到,要用这个浏览器调起APP的功能,我看官网有教程,但是有些可能刚工作没多久,所以,有些地方看不大明白,官方也没细说,所以,特地写一个小文章,权当做官方的拓展版吧,尽量通俗异动一些,再配上一些文字解说和图片,希望可以帮到大家,好了,废话少说,直接来干活了.

看这篇文章,需要先看这两个:

http://ask.dcloud.net.cn/article/64

http://ask.dcloud.net.cn/article/409

Hbuilder上面有2个地方需要配置,分别是IOS和Android,如下:

然后是Andirod

接着,在程序的入口页,我一般为index.html,写上:



 接下来的就是网页端,代码非常简单如下:



 注意,iwant必须跟我们程序里面的设置的那个iwant的一致,教程到这里结束.

下面,贴几个图,让大家比较直观的看看效果:

首先是Andirod的

接着是IOS的(注意哈,IOS的 空格 被替换成 : %20 了,平时开发,得注意这些细节)

到这里,就大功告成啦,接下来的东西,就由大家自己去展开拓展了,本次经验分享到此结束,写过博客的人都知道,好好写一个博客,需要自己从头重新走一遍代码,所以,各种辛苦,只有自己能体会。所以您如果觉得写得不错,或者对你有帮助,请点“好文要顶”或者“关注我”,顺带也可以评论一两句,大家互相交流交流,转载请保留原作者地址以及姓名

我新建一个QQ群,如果有问题,可以在群里提。如果合适,也会根据大家提的比较多的问题,来写篇博文,帮助更多的人,群号:275523437

点击链接加入群【.Net,MVC,EasyUI,MUI,Html,JS】:http://jq.qq.com/?_wv=1027&k=2A0RbLd

(如果有私活,或者一起合作的,也可以私信找我呀,嘿嘿);

作者:南宫萧尘

E-mail:[email protected]

QQ:314791147

QQ群:275523437

日期:2017-03-12

时间: 2024-10-27 08:09:03

浏览器调起Hbuilder的APP的相关文章

HBuilder开发App教程08-几种页面打开方式

说明 上节说了list页面的实现,其中关于几种页面的打开方式没有详细述说, 本节详细述说下几种页面打开方式的区别. 几种打开页面的方式 1.初始化时创建子页面 2.直接打开新页面 3.预加载页面 示例 1.初始化时创建子页面 mui.init({ subpages: [{ url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址 id: your - subpage - id, //子页面标志 styles: { top: subpage - top

HBuilder开发App教程02-环境搭建,HelloWorld以及真机调试

环境搭建 前言 用HBuilder做开发,其实可以说是最简单的一种环境搭建了,甚至可以说没有环境需要搭建, 想想android开发的时候,相当痛苦,下载各种sdk,而且都需要翻墙,苦不堪言. 用HBuilder做开发,只需要基础的java环境,其余的android和ios环境统统不需要. HBuilder可以做到这一点,是因为: 1.将打包放到的云端,免去了本地搭建环境进行打包的痛苦, 2.将调试直接设置为真机调试,免去了各种模拟器调试的痛苦. java环境 只需要最基础的java环境,也就是c

HBuilder开发App教程05-滴石和websql

滴石 介绍 滴石是用HBuilder开发的一款计划类app, 用到HBuilder,mui,nativejs以及h5一些特性. 预期 目前只开发到todolist级别, 以后计划做成日计划,月计划,年计划等计划类app. 网址 官网:http://uikoo9.com/dishi 开源:http://git.oschina.net/uikoo9/uikoo9-dishi 教程 以后HBuilder开发app以滴石为例,做一个简单的app. 功能介绍 列表页 列出要完成的事项,具体功能: 1.左滑

HBuilder开发App教程01-推开前端开发App的大门

奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟, 自从2008年国外推出phonegap后,前端人员又踏上开发app的路程, 今年来国内也对应推出了一些可以让前端人员开发app的ide, 不过大部分是收费的,强定制的,这里就不一一列举了. 这里推荐DCloud推出的HBuilder,一句话谁用谁知道. 一次开发两种app 通过HBuilder的

HBuilder开发App教程06-首页

实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建--移动app,或者直接ctrl+n,a, 见到例如以下界面.填入项目名称,选择mui项目. 新建完毕后.默认生成的文件夹例如以下.基本和前端开发的文件夹结构类似. 连接手机 本教程临时以android为例,最后会另外解说ios手机的开发,大同小异. 用数据线连接android手机,将手机中的设置-

HBuilder开发App教程04-最难搞定的是mui

前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开发过程是痛苦的, 花一点时间研究下mui,对你之后开发app有很大的帮助. 网址 教程再好,也会有疏漏的地方,还需要你仔细阅读官方文档, 附地址:http://dcloudio.github.io/mui/ init mui封装了很多常用的页面方法,都需要在init中设置,例如: 1.和上拉加载,下

Hbuilder开发app实战-识岁01-actionsheet实例

前言 之前写了HBuilder开发App入门-滴石,相信大家看完后应该可以入门了, 之后会做一些简单的app,把nativejs一些常用的功能都过一遍,这样以后做app就没什么难的了. 识岁 借助与face++的接口,做了一个人脸识别app,准确性和微软比确实差点, 主要用到了: 1.actionsheet的原生实现 2.选择本地照片 3.使用摄像头拍照 4.使用uploader上传文件 5.调用face++接口进行人脸识别 6.七牛云上传的实现 actionsheet 实现 actionshe

HBuilder开发App教程07-列表页

说明 接着上节的内容,本节讲首页的list页面, 如果看过上一节你就会明白"首页"是由只有头部的index页面和列表list页面组成的, 本节涉及到: 1.几种页面的打开方式 2.websql的应用 3.页面内容的加载 4.页面实现 几种页面打开方式 如果看过以前的章节你会明白,在Hbuilder,mui中需要放弃href跳转, 而专用mui自带的页面打开方式,为什么?请浏览:http://ask.dcloud.net.cn/article/122 这里大概讲一下,详细讲解请关注下一节

HBuilder开发App教程09-侧滑菜单

侧滑菜单 功能 上节讲到了列表页,这节讲一个比较常用的功能,侧滑菜单, 在本app中策划菜单用来记录已经完成的事项. 实现方式 用Hbuilder实现类似侧滑菜单这样原生app功能,一般有两种实现方式,详见:这里. 一是webview实现,二是div模拟实现, 两者的区别是div实现简答,但是偶尔效果不是很好, 而webview实现稍微复杂,页面传值也复杂,但是效果好点,一般推荐webview实现方式. index.html 代码 index.js中需要添加如下代码, var main = nu