Foxtable(狐表)用户栏目专家坐堂 → [分享]foxtable+hbuilder开发手机网页app实例,调用手机摄像头扫描条码功能(简单实用)


  共有7371人关注过本帖树形打印复制链接

主题:[分享]foxtable+hbuilder开发手机网页app实例,调用手机摄像头扫描条码功能(简单实用)

帅哥,在线噢!
有点甜
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:47537 积分:238766 威望:0 精华:5 注册:2012/10/18 22:13:00
[分享]foxtable+hbuilder开发手机网页app实例,调用手机摄像头扫描条码功能(简单实用)  发帖心情 Post By:2017/9/20 19:26:00 [只看该作者]

首先你得已经有Foxtable高级开发版。


第一步,下载下面的项目打开,端口是10086

 

 下载信息  [文件大小:   下载次数: ]
图片点击可在新窗口打开查看点击浏览该文件:001hbuilder实例一(扫描条码功能).zip



图片点击可在新窗口打开查看此主题相关图片如下:001.png
图片点击可在新窗口打开查看

 

第二步,下载打开HBuilder界面,打开foxtableAppTest项目
 


图片点击可在新窗口打开查看此主题相关图片如下:002.png
图片点击可在新窗口打开查看
 


图片点击可在新窗口打开查看此主题相关图片如下:003.png
图片点击可在新窗口打开查看

 


第三步,打开manifest.json文件配置首页地址(注意,请改成自己的局域网或互联网的ip地址)

 


图片点击可在新窗口打开查看此主题相关图片如下:004.png
图片点击可在新窗口打开查看

 

 

第四步,在你的电脑上插入手机进行调试

 

图片点击可在新窗口打开查看此主题相关图片如下:005.png
图片点击可在新窗口打开查看

 

 

第五步,测试运行效果,你可以在foxtable或者hbuilder两个地方修改代码,然后在手机上测试运行后的效果



图片点击可在新窗口打开查看此主题相关图片如下:006.png
图片点击可在新窗口打开查看

图片点击可在新窗口打开查看此主题相关图片如下:007.png
图片点击可在新窗口打开查看

图片点击可在新窗口打开查看此主题相关图片如下:008.png
图片点击可在新窗口打开查看

 


第六步,所有功能测试完毕以后,打包生成app,这样就可以在手机那里安装使用了

 

http://www.foxtable.com/bbs/dispbbs.asp?BoardID=2&ID=106991&skin=0


 

延伸,这个例子基本教会大家如何调试、开发、生成自己的网站和app了,更多的知识,请移步hbuilder文档学习

 

http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/89

 

 

-----------------------------------------------------后续补充--------------------------------------------------------------------


2017年9月22日09:21:29 添加:

    如何把得到的扫描信息填入文本框里,执行如下js代码?

    wb.InsertHTML("<script>function scaned( t, r, f ) {document.getElementById('姓名').value=r;}</script>")

 

[此贴子已经被作者于2017/9/22 9:23:00编辑过]

[本帖被加为精华]
 回到顶部
帅哥,在线噢!
有点甜
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:47537 积分:238766 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2017/9/20 19:39:00 [只看该作者]

 若有疑问,请回帖提问,空闲的时候会逐一解答。

 回到顶部
帅哥,在线噢!
有点甜
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:47537 积分:238766 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2017/9/20 19:46:00 [只看该作者]

 不结合foxtable也可以,个人可以直接使用HBuilder复制粘贴,简单修改模板的代码,就可以做到属于自己的app了。

 回到顶部
帅哥哟,离线,有人找我吗?
chen3728060
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:小狐 帖子:388 积分:3076 威望:0 精华:0 注册:2013/11/2 0:01:00
回复:(有点甜)[分享]foxtable+hbuilder开发手机网页...  发帖心情 Post By:2017/9/20 21:15:00 [只看该作者]

我曹!!!神贴!等这个好久了,赶紧摸索,老子折腾微信这么辛苦就是为了个扫一扫,现在终于可以脱离了!!!!


 回到顶部
帅哥哟,离线,有人找我吗?
zhangjian222200
  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:三尾狐 帖子:768 积分:5373 威望:0 精华:0 注册:2016/9/12 11:18:00
  发帖心情 Post By:2017/9/20 21:36:00 [只看该作者]

mark

 回到顶部
帅哥,在线噢!
zhy400137
  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:三尾狐 帖子:792 积分:5503 威望:0 精华:0 注册:2013/11/3 19:00:00
  发帖心情 Post By:2017/9/20 21:41:00 [只看该作者]

mark

 回到顶部
帅哥哟,离线,有人找我吗?
wangjian6931
  7楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:三尾狐 帖子:736 积分:4519 威望:0 精华:0 注册:2014/6/2 20:54:00
  发帖心情 Post By:2017/9/20 22:08:00 [只看该作者]

mark

 回到顶部
帅哥哟,离线,有人找我吗?
wei0769
  8楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:三尾狐 帖子:649 积分:6807 威望:0 精华:0 注册:2013/4/10 14:38:00
  发帖心情 Post By:2017/9/20 22:14:00 [只看该作者]

好贴,但是看不明


 回到顶部
帅哥哟,离线,有人找我吗?
chen3728060
  9楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:小狐 帖子:388 积分:3076 威望:0 精华:0 注册:2013/11/2 0:01:00
  发帖心情 Post By:2017/9/20 22:50:00 [只看该作者]

测试没有问题,成功生成手机app,扫一扫功能可以用。脱离微信扫一扫,爽!!!

 

 

这个真的具有里程碑意义!!感谢老师介绍了这个HBuilder的  Html5 Plus,这个东西太有创意了,超级多中小企业就是要个快速app,扫一扫,实现我的B/S段辅助扩展。

 

现在不少中小企业,都想用手机扫一扫出库入库,但是无奈要搞复杂公众号。用这个配合Ajax,就可以超快速实现手机扫一扫出入库,300元的二维码扫描枪都省了!!


微信公众号要实现一个扫一扫,各种认证,各种配置,还要域名备案,安全JS域名设置,太TM累了!!!

 

我觉得老师继续深挖这个HBuilder的  Html5 Plus,可以把手机获取GPS地址也搞出来,这样移动签到功能也用上了!加油啊!!

 

我还发现这个Html5 Plus做出来的APP还有一个优势,它不用升级,所有的JS和代码都是写在狐表服务器里,实时获取。这个APP只需要发布一次,就永远都可以使用最新的功能,不用update App。就像一个轻量级的程序,非常符合狐表B/S轻量级、移动辅助管理 这个方向。

 

我觉得,有必要整合到下一期的帮助文档里,标题内容是:如何快速拥有自己的app 、如何免微信使用扫一扫功能

[此贴子已经被作者于2017/9/21 9:19:33编辑过]

 回到顶部
帅哥,在线噢!
有点甜
  10楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:47537 积分:238766 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2017/9/20 23:05:00 [只看该作者]

回复9楼,官方有例子的,新建一个项目,即可测试功能。每一个功能都是相对独立的,拷贝到自己项目就能用了。代码也简单易懂。

 


图片点击可在新窗口打开查看此主题相关图片如下:hbuilder_create.png
图片点击可在新窗口打开查看


 回到顶部
总数 91 1 2 3 4 5 6 7 8 9 10 下一页