HBuilder webApp开发
文章平均质量分 91
使用HBuilder ,开发webApp,以实际项目开发为基础,介绍开发中的主要技术点。
小猿猪哥
这个作者很懒,什么都没留下…
展开
-
HBuilder webApp开发(十七)百度地图URI API的使用
年前的使用公司做了一个物流的app,目的是方便送货师傅的使用。在做的时候,我就集成了百度地图URI API。这个使用比较简单,这里我使用的地址解析baidumap://map/geocoder,这个接口。但是在使用时要区分iOS和安卓系统,就这唯一一个注意点,参数也就是一个,前提是手机安装的有百地图app。document.getElementById('map').addEventListener原创 2017-06-13 15:58:33 · 7167 阅读 · 1 评论 -
HBuilder webApp开发(十六)定位geolocation
HBuilder的geolocation定位模块其实接口很少,通常我们使用定位模块即可。 var posi = null;mui.plusReady(function() { posi = plus.geolocation.getCurrentPosition( function ( p ) { console.log( "Geolocation\nLatitude:"原创 2017-06-13 15:42:51 · 5544 阅读 · 0 评论 -
HBuilder webApp开发(十五)MUI增加自定义icon图标
前段时间有朋友问我,MUI里面怎么添加字体图标。后来下班后给他做了一个小的Demo,其实这个看卡MUI的文档就有。mui如何增加自定义icon图标。 其实这个不仅限于MUI,其他项目比如PC项目也可以这个做。 具体步骤:登录iconfont添加到购物车下载代码提取有用代码源文件: 这里我们只需要 样式文件:iconfont.css 字体文件:iconfont.ttf 其他格式的字体文原创 2017-04-16 09:36:35 · 7860 阅读 · 1 评论 -
HBuilder webApp开发(十四)iOS平台5+插件开发
在开发iOS平台5+插件前,希望你已经会了iOS离线打包 的集成。如果不会也没事,这里也会说明的。 iOS平台5+插件开发,在开发之前还是看看。 这里说点题外话: 前些时有位网友加我QQ问我,前台需要做微信第三方登录,后台需要怎么配合?怎么搞?需要绑定的是什么?他说他在网上没找到怎么做。 遇见这些问题我不知道该说什么,我是做前台的。我们以前做第三方登录都是获取一个第三方账号的唯一ID给后台原创 2017-01-18 10:28:52 · 6005 阅读 · 0 评论 -
HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuild Hybrid App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。 以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: 《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 《【iOS】CoreImage原生二维码生成(一)》 《【iOS】CoreIm原创 2016-11-29 13:57:28 · 26594 阅读 · 25 评论 -
HBuilder webApp开发(十二)微信/支付宝支付
在公司的项目中,使用了微信支付,支付实际项目里面的支付流程和之前做原生app的时候是一样的。只是现在使用H5开发。 Hbuild是支持微信支付和支付宝支付的,虽说项目里只使用了微信支付,但是还是要研究一下支付宝支付的。 以前写《【iOS】集成支付宝支付/银联支付/微信支付》 那个时候遇见了很多坑,但是趟过去了,后面就好了。看文档在接触一个新的事物时,先看看官方的文档。 《支付插件配置》 这原创 2016-07-13 08:55:00 · 22580 阅读 · 1 评论 -
HBuilder webApp开发(十一)二维码生成
在MUI框架里,MUI帮我们把二维码的扫描(摄像头扫描和图片中扫描)都做好了,但是二维码的生成却没有做。官方文档barcode。 在iOS元里面,以前也写过二维码扫描的《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 二维码生成和读取图片中的二维码《【iOS】一个方法读取图片中的二维码信息》 总体上来说实现起来不难。在H5里面更加简单。包含jquery文件使用之前需要先引用原创 2016-07-12 11:04:20 · 11244 阅读 · 1 评论 -
HBuilder webApp开发(十)在线差异化升级
从4月份公司确定使用H5开发app,主要考虑了两点: 1.一套代码可以生成安卓和iOS 两个平台的app; 2.在线升级(差异化升级和整包升级)。 到现在公司的两款app也基本做完了,期间还做了很多新需求进去了。总体感觉使用H5做app,做界面比原生简单、快,但是用户体验上没法和原生相比,特别是这种电商类的app,一般项目都比较大、页面跳转复杂、业务逻辑多,使用上和原生相比没有任何优势(忽略上原创 2016-07-10 11:27:33 · 6935 阅读 · 1 评论 -
HBuilder webApp开发(九)首次启动轮播页的制作
现在几乎每个app在启动的时候都会有一个轮播页,要么是广告,要么是app介绍。在《Swift 项目首次启动轮播页的制作》介绍了一种原生应用里面启动页制作的思路: app首先运行的AppDelegate,我们要做的就是在这个里面切换跟控制器。 在使用HBuild开发WebApp制作启动页的时候,制作思路基本是一样的。制作过程页面基本结构就是一个swiper,关于HBuild里面的swiper和sw原创 2016-07-03 14:26:57 · 11981 阅读 · 1 评论 -
HBuilder webApp开发(八)微信/QQ/新浪登录
接着昨天的《HTML5 WebApp开发(七)微信/QQ/新浪分享》 继续写了一下第三方登录。 首先是去官方文档和Demo找,发现官方文档基本就是那些配置的说明,但是Demo就需要去github上面查看-传送门 还好官方有Demo,不然真的不知道怎么下手。 在写代码之前,首先是查看文档和Demo,相关的appkey,还是可以从ShareSDK上面获取。 看官方Demo,主要是看明白流程和关原创 2016-06-19 10:54:54 · 22507 阅读 · 18 评论 -
HBuilder webApp开发(七)微信/QQ/新浪/腾讯微博分享
HUbuild是支持微信分享(好友和朋友圈),QQ分享,新浪微博和腾讯微博分享。 但是在使用的过程中,官方给的文档似乎很坑爹。 《分享插件配置》 《分享插件开发指南》 都是2014年7月发表的文档,后期也没看见更新说明;有用户过来提问,就都给引导去看这两篇文档,真不知道有什么好看的。 在公司的项目中,实际也使用了分享。昨天下班回去就重新写了一下代码,弄到半夜12点多。HBuild的配置配原创 2016-06-18 17:33:32 · 30438 阅读 · 40 评论 -
HBuilder webApp开发(六)事件绑定
在做公司项目的时候,有一个页面有个个数不定的勾选框checkbox视图区,每个勾选框对应一个ID和NAME的值,我们需要把选中的chexkbox的ID获取到,然后以拼接成字符串,字符中间用“,”分割。在这个需求里面有三个点,1:不定选项的checkbox; 2:获取选中的checkbox的ID; 3:字符串中间使用“,”拼接。 关于上面的三个知识点来说,个人任我最难的是第2个,难点在在使用H5做的原创 2016-06-14 09:04:47 · 9980 阅读 · 0 评论 -
HBuilder webApp开发(五)图片墙/图片预览
在公司的项目中,有个图片墙(有人叫瀑布流)的页面,可以查看图片列表,点击可以预览图片。以前使用OC和Swift都写过瀑布流: OC版本-【iOS】UITableView实现的瀑布流效果 Swift版本- Swift UITableView瀑布流/NSURLConnection异步网络请求 在公司的项目里面虽说不是我做的这一块,但是不做就不代表不去学习。看了公司的项目里面的做法,也看了HBui原创 2016-06-10 11:58:34 · 13854 阅读 · 7 评论 -
HBuilder webApp开发(四)相册/拍照-图片上传
在做项目的过程中,需要从相册或是拍照,然后上传,比如修改用户头像或是上传项目图片。效果图 点击用户头像后,弹出actionSheet,选着从相册或是拍照;选着图片后就调用上传方法,上传图片;在上传之前先压缩了一下图片。弹出actionSheet/*点击头像触发*/ document.getElementById('headImage').addEventLis原创 2016-06-03 22:18:44 · 23052 阅读 · 16 评论 -
HBuilder webApp开发(三)轮播图swiper
在新闻类的App中,首页的轮播图是使用最多的。现在公司的项目中也使用了轮播图。 在我的Demo中,昨天也在首页增加了轮播图。 代码下载地址:请点击我! 分别使用的是mui的样式和Swiper提供的方法各做了一套。效果图 上面的轮播图使用的HBuild自带的mui样式,下面使用的是Swiper的样式。使用后感觉Swiper的在使用上比mui的简单。 主要体现就在设置线面的几个小点和循环播放方原创 2016-05-26 22:40:01 · 18680 阅读 · 1 评论 -
HBuilder webApp开发(二)表格上拉加载更多下拉刷新[2017.05.24更新]
开始在《Swift 集成Alamofire/Kingfisher/MJRefresh/MBProgressHUD的小项目》利用showAPI上的接口,做了一个上下拉的小Demo。之后就没有什么时间搞Swift了,这个月发表博客的数量也没有上个月多了。这个月使用HBuilder搞WebApp,不管App怎样,也总算是学了一些东西。昨天周日一天没有出门,就自己新建了一个小的WebApp的项目,昨天就把代原创 2016-05-23 22:14:13 · 19025 阅读 · 7 评论 -
HBuilder webApp开发(一)新建项目
一 关于HBuild去DCloud官网下载最新的Hbuild.关于Hbuild的介绍可以去官网看看。二 新建移动App打开HBuild新建移动App项目 文件–>新建–>移动App 勾选mui项目 应用名HbuildTest 新建template和images目录 新建5个子页面 效果图 页面结构 添加子页面在index.html文件中添加如下代码<!DOCTYPE html><h原创 2016-05-22 21:46:51 · 21409 阅读 · 7 评论 -
HBuilder webApp开发 Websql增删改查操作
这段时间公司要求我们做原生iOS和安卓的都转做H5开发APP,使用的工具HBuild。公司这么要求我们也就只能转行做了。大家都是小白,好在公司有两位H5大神,他们先给我们一些代码看看,所我,我们上手也比较快。在做APP的过程总用到了一些本地存储,关于本地存储大家可以看看《App离线本地存储方案》 。里面我只说说Web SQL,因为里面的localstorage,plus.storage和websql原创 2016-05-22 10:25:10 · 29158 阅读 · 21 评论