
5+SDK问题
java.lang.ClassNotFoundException: io.dcloud.feature.statistics.StatisticsBootImpl
mEntryProxy.onCreate(this, savedInstanceState, SDK.IntegratedMode.WEBAPP, null);
这句话报错
java.lang.ClassNotFoundException: io.dcloud.feature.statistics.StatisticsBootImpl
mEntryProxy.onCreate(this, savedInstanceState, SDK.IntegratedMode.WEBAPP, null);
这句话报错

开发者与谷歌享受一整天的幸福:GOOGLE Developer Day 2016“开发说”
11.jpg
2016年12月8日,开发者齐聚国家会议中心,期待这场盼望已久的Google大会。记者带了许多问题来问谷歌,在新闻中心,记者们都就对华投资、谷歌广告收入等问题各种提问,小编做为一枚专业开发者CVP一琢磨,就想要发现些干货。
12.jpg
Google 全球开发者产品总监 Ben Galbraith
在和Ben Galbraith 2次交流中,他特别乐于提到自己的家人,发布会上亮相了他的全家福并问候了中国的开发者。这也许正是优秀开发者的特质:特别顾家,哈哈。
file0003.jpg
Ben Galbraith全家福
一、明星产品:Angular
带领我们参观展台的童鞋是明星,属于创新力很强的那一类人。他让小编体验关于谷歌新推出的技术Angular,这不仅是一套框架、适用于多种平台,而且更强大。Google Angular项目负责人Naomi Black介招其功能特性(见下图)。
004.jpg
005.jpg
从开发者那得到关于底层的答案,它是由一套javascript的框架搭建的,有兴趣的大牛可以找到相关资料研究一下。(网址:www.angular.cn )。至于功能,和咱们熟悉的h5差不多,数数手指头的简洁:和Linux界面一致的编译功能、两条命令完成打包、用浏览器访问安卓开发的手机APP界面。的确不错,眼前一亮!
二、谷歌针对苹果、安卓开发者推出Firebase:谷歌发布全新Firebase。
Firebase于2014年被谷歌收购,以其为用户提供云端支持而著称。这项服务现在已初步落地,针对中国开发者,谷歌表示,就其计算架构、云平台搭建做出了相应的改变。而服务扩展性也得到极大的加强,并与其它工具实现了集成。
Firebase提供了实时数据库、授权、存储、远程配置、托管、云信息、崩溃报告、测试实验室服务,极大的方便了开发者。无论是向前和向后,在推广和盈利方面谷歌宣布直接有面向中国企业的部门做客户支持,开展其在中国的业务。
006.jpg
三、机器学习:
最后,谷歌还重点介绍了,机器学习(ML)方面的进展。Ben Galbraith介绍说,TensorFlow是新一代的产品名字。它紧密结合了GOOGLE Assistant平台为开发者服务,同时希望开发者使用其产品。本产品将于本月底发布。好期待哦!
007.jpg
李世石人机围棋赛采用的机器学习技术
四、谷歌开发技术应用创新英雄榜:
008.jpg
009.jpg010.jpg
011.jpg013.jpg
五、谷歌答开发者问:
1.问:这个问题我想问Scott,如今Google的市场定位是什么的?如果是帮助开发者的话,是否意味着跟开发者业务相关的主要收入成为Google中国的主要收入?
第二个问题想问下Ben,在过去几年,我们知道有原生应用与网页应用的争论,今天Google强调PWA,是不是觉得网页会重新的回到市场的主流?谢谢。
Scott Beaumont:好,我先回答你问题的第一部分,我觉得Ben比较有资格回答第二部分。当然,我们在中国,服务中国的开发者和中国的企业。如果你看我们在中国的业务,有的小到一个人有个想法,想把这个想法变成App放在Android平台。从大的方面看,有非常大的企业,他们基于Android平台来制造手机。在我的主题演讲中,我也讲到了, 我们希望在这里让这些人的想法变成现实,在Android平台上助他们在中国取得成功。同时,我们在全球也有非常多的资产,可以帮助他们走向全球。
所以,总的来说我们想做两点事情。第一点,是帮助个人实现他们想法。第二点,我们希望帮助这些企业走向全球。
Ben Galbraith:好,我来回答你这个问题的第二部分。我觉得我们在中国非常高兴,也非常激动的看到Android系统上的一些发展,在网络生态系统上的一些发展。我们看看如何才能帮助这些即做Android也做网页系统开发的开发者,实现这些功能。比如说我们Firebase,这个也是服务于iOS的开发者的。再看我们网页上的功能,现在网页浏览器的功能比以前要多得多,所以开发者可以在移动网页的开发上做更多,或是过去做不到的事情。这是我们通过Chrome浏览器,以及与参与标准制订的那些团体一起协作来制造的这么一个趋势。
在2017年,网页开发者的能力将远远超过过去。这也是非常令大家激动的 。今天就跟阿里巴巴的人见过面,他们也共享了他们的网页开发的体验。大家都非常喜欢这一些,用户现在在网页上,不仅仅是在浏览,他们还可以从浏览直接切换到交易,这都是新的网页上出现的功能,大家都非常喜欢这些新的发展。
刚才你还问到Google Play的收入分成。我们对所有放在Google Play上的App都有个通用的标准,一个分成的模式。这是通用于所有人的。
2.问:这次的GDD应该是5年来比较大的一次,吸引了很多开发者来。这应该是Google给中国广大开发者的一个信号,就是重要性的提升。第一个问题问Scott,您在2017年Google重点是什么?还有一个问题问Ben,您说要帮助中国开发者走向世界,您有哪些具体的措施帮助他们?
Scott Beaumont:2017年,我们和中国的互动还是会快速的发展。会通过很多方式,比如说,我们可以帮助中国开发者走向全球,帮助中国网络经济的发展,希望把中国的文化带到全球。把中国的一些文化机构,包括博物馆放到网站上去。还有,希望帮助中国开发者参与到他们值得信赖的生态系统中,帮助开发者更好的进行创造。所以,2017年,我们希望在中国的增长不断的持续,希望跟中国的市场进行互动,做更多的事情。
Ben Galbraith:回答你的第二个问题,我们怎样帮助开发者走向成功。首先,先回顾一下我们今天讲的东西。第一,我们推出了专门的中国开发者网页。第二,自2017年开始,Google Developers Agency Program也将向中国软件开发代理商开放。这个项目的重点,就是帮助中国企业和中国那些好的开发者取得联系。第三,我们有开放的公众号,帮助与开发者进行联系。第四,我们带来更多的技术,帮助中国开发者使用它。第五,Google Play帮助开发者将自己的应用带到全球。第六,还有一个在大会没有提到的,我们帮助合作方进行联络,帮助他们开发App。总的来说,我们再看有哪些不同的活动可以带到中国来,帮助中国的开发者社区。这里,我们还没有做更多新的宣布。
3.问:想问一下Google在未来5年发展的关健词,例如今天提到的人工智能,VR这些。另外,Google推出了PWA。而在中国也有微信小程序盛行。想问一下,这种即点即用,是不是意味着App开发走向衰落?谢谢。
Ben Galbraith:首先你刚才说到中国的趋势,中国的趋势其实也是全球趋势的一部分。中国的App生态系统保持它的重要性,而且该生态系统出现更多的创新。回到今天早上讲到,关于这个网页,网页我们有很多的产品,包括Progressive Web App,以及AMP(加速的移动页面)。有很多新的生态系统在出现,包括基于对话的平台,这个未来会得到进一步的发展。另外我们在Google Assistant上做了大量的投资。此外,还有虚拟现实,也是我们非常关注的话题,我们对它非常有兴趣,我们觉得Daydream未来可以提供高质量、沉浸式的虚拟现实体验给广大的用户。
另外还有机器学习,这是在这一切底下的一个很根基的技术。机器学习中的Te nsorFlor技术可以让开发者很轻松的应用它。而且,我觉得在中国,软件会变得越来越智能,像Google Assistant这样的产品就可以帮助开发者使用机器学习。
中国的趋势非常多的,很抱歉我没有把它们浓缩到1-2个趋势,包括你提到的Instant App,也在得到不断的发展。这个Instant App,现在还是在发展之中,我们未来会对它有更多的想法。
Scott Beaumont:补充一点,其实我们在中国特别关注的就是本地的创新。比如说,我们也不知道微信以后会产生什么样的创新,但是我们知道中国的规模、中国的计算机这个量的大小,计算能力等等是非常宏大。在中国,他们让创新更符合中国。而这种中国特色的创新,回过来又会影响全球的创新。机器学习、机器智慧是全球的现象,中国开发者会怎么利用机器学习、机器智慧这个技术,在什么样的领域会产生巨大的效用,这种效用最后怎样影响全球的开发者社区。
我想,用一个词来描述的话,中国在未来5年的关键词就是创新。创新也是Google的热忱,也是让开发者沸腾的一种精神。我们在中国想做的事情,第一个,就是让开发者的想法变成现实,第二个,就是把这个想法带到全球,发挥到全球。
另外,我们在中国也在积极了解本地开发者的想法,帮助他们把这个想法进行创新,变成有中国特色的开发。
4问:Google搜索何时返华?还有对于因为在中国没有Google Play以及GMS所导致的Android体验的糟糕现象,Google是怎么看待的,有什么建议?
Scott :这个问题,目前我们没有更多信息可以分享。 我们CEO的确在正式场合希望更好的服务中国Android的用户,不过,迄今为止我们没有更新的信息跟大家分享。
问:现在很多的中国开发者有VR游戏的团队,希望通过Daydream改变他们的生存状态。我想问三个问题,我们对开发者登录Daydream平台的标准是什么呢?第二个问题是我们会不会给VR团队什么扶持政策?另外他们分成是怎么样呢?
Ben Galbraith:关于第一个问题,如果开发者有Unity的话,他们把Unity上的应用放在Daydream中。此外,我们有很多其他的工具合作伙伴,工具的供应方,如果你是3D内容,你可以把3D转化后放到Daydream上。如果是虚拟现实的也可以放到Daydream上。
第二个,我们很高兴开发者能够把内容放到Daydream上,我们也会与开发者进行更多的互动,来帮助到他们,但是我们并没有补贴政策。我们的工具是免费的,99.9%生态系统中的内容都会放到我们的平台上。
第三,关于收入分成,这个是使用标准的模式,并没有单独针对Daydream的政策。
来源:http://www.cocoachina.com/industry/20161208/18322.html
11.jpg
2016年12月8日,开发者齐聚国家会议中心,期待这场盼望已久的Google大会。记者带了许多问题来问谷歌,在新闻中心,记者们都就对华投资、谷歌广告收入等问题各种提问,小编做为一枚专业开发者CVP一琢磨,就想要发现些干货。
12.jpg
Google 全球开发者产品总监 Ben Galbraith
在和Ben Galbraith 2次交流中,他特别乐于提到自己的家人,发布会上亮相了他的全家福并问候了中国的开发者。这也许正是优秀开发者的特质:特别顾家,哈哈。
file0003.jpg
Ben Galbraith全家福
一、明星产品:Angular
带领我们参观展台的童鞋是明星,属于创新力很强的那一类人。他让小编体验关于谷歌新推出的技术Angular,这不仅是一套框架、适用于多种平台,而且更强大。Google Angular项目负责人Naomi Black介招其功能特性(见下图)。
004.jpg
005.jpg
从开发者那得到关于底层的答案,它是由一套javascript的框架搭建的,有兴趣的大牛可以找到相关资料研究一下。(网址:www.angular.cn )。至于功能,和咱们熟悉的h5差不多,数数手指头的简洁:和Linux界面一致的编译功能、两条命令完成打包、用浏览器访问安卓开发的手机APP界面。的确不错,眼前一亮!
二、谷歌针对苹果、安卓开发者推出Firebase:谷歌发布全新Firebase。
Firebase于2014年被谷歌收购,以其为用户提供云端支持而著称。这项服务现在已初步落地,针对中国开发者,谷歌表示,就其计算架构、云平台搭建做出了相应的改变。而服务扩展性也得到极大的加强,并与其它工具实现了集成。
Firebase提供了实时数据库、授权、存储、远程配置、托管、云信息、崩溃报告、测试实验室服务,极大的方便了开发者。无论是向前和向后,在推广和盈利方面谷歌宣布直接有面向中国企业的部门做客户支持,开展其在中国的业务。
006.jpg
三、机器学习:
最后,谷歌还重点介绍了,机器学习(ML)方面的进展。Ben Galbraith介绍说,TensorFlow是新一代的产品名字。它紧密结合了GOOGLE Assistant平台为开发者服务,同时希望开发者使用其产品。本产品将于本月底发布。好期待哦!
007.jpg
李世石人机围棋赛采用的机器学习技术
四、谷歌开发技术应用创新英雄榜:
008.jpg
009.jpg010.jpg
011.jpg013.jpg
五、谷歌答开发者问:
1.问:这个问题我想问Scott,如今Google的市场定位是什么的?如果是帮助开发者的话,是否意味着跟开发者业务相关的主要收入成为Google中国的主要收入?
第二个问题想问下Ben,在过去几年,我们知道有原生应用与网页应用的争论,今天Google强调PWA,是不是觉得网页会重新的回到市场的主流?谢谢。
Scott Beaumont:好,我先回答你问题的第一部分,我觉得Ben比较有资格回答第二部分。当然,我们在中国,服务中国的开发者和中国的企业。如果你看我们在中国的业务,有的小到一个人有个想法,想把这个想法变成App放在Android平台。从大的方面看,有非常大的企业,他们基于Android平台来制造手机。在我的主题演讲中,我也讲到了, 我们希望在这里让这些人的想法变成现实,在Android平台上助他们在中国取得成功。同时,我们在全球也有非常多的资产,可以帮助他们走向全球。
所以,总的来说我们想做两点事情。第一点,是帮助个人实现他们想法。第二点,我们希望帮助这些企业走向全球。
Ben Galbraith:好,我来回答你这个问题的第二部分。我觉得我们在中国非常高兴,也非常激动的看到Android系统上的一些发展,在网络生态系统上的一些发展。我们看看如何才能帮助这些即做Android也做网页系统开发的开发者,实现这些功能。比如说我们Firebase,这个也是服务于iOS的开发者的。再看我们网页上的功能,现在网页浏览器的功能比以前要多得多,所以开发者可以在移动网页的开发上做更多,或是过去做不到的事情。这是我们通过Chrome浏览器,以及与参与标准制订的那些团体一起协作来制造的这么一个趋势。
在2017年,网页开发者的能力将远远超过过去。这也是非常令大家激动的 。今天就跟阿里巴巴的人见过面,他们也共享了他们的网页开发的体验。大家都非常喜欢这一些,用户现在在网页上,不仅仅是在浏览,他们还可以从浏览直接切换到交易,这都是新的网页上出现的功能,大家都非常喜欢这些新的发展。
刚才你还问到Google Play的收入分成。我们对所有放在Google Play上的App都有个通用的标准,一个分成的模式。这是通用于所有人的。
2.问:这次的GDD应该是5年来比较大的一次,吸引了很多开发者来。这应该是Google给中国广大开发者的一个信号,就是重要性的提升。第一个问题问Scott,您在2017年Google重点是什么?还有一个问题问Ben,您说要帮助中国开发者走向世界,您有哪些具体的措施帮助他们?
Scott Beaumont:2017年,我们和中国的互动还是会快速的发展。会通过很多方式,比如说,我们可以帮助中国开发者走向全球,帮助中国网络经济的发展,希望把中国的文化带到全球。把中国的一些文化机构,包括博物馆放到网站上去。还有,希望帮助中国开发者参与到他们值得信赖的生态系统中,帮助开发者更好的进行创造。所以,2017年,我们希望在中国的增长不断的持续,希望跟中国的市场进行互动,做更多的事情。
Ben Galbraith:回答你的第二个问题,我们怎样帮助开发者走向成功。首先,先回顾一下我们今天讲的东西。第一,我们推出了专门的中国开发者网页。第二,自2017年开始,Google Developers Agency Program也将向中国软件开发代理商开放。这个项目的重点,就是帮助中国企业和中国那些好的开发者取得联系。第三,我们有开放的公众号,帮助与开发者进行联系。第四,我们带来更多的技术,帮助中国开发者使用它。第五,Google Play帮助开发者将自己的应用带到全球。第六,还有一个在大会没有提到的,我们帮助合作方进行联络,帮助他们开发App。总的来说,我们再看有哪些不同的活动可以带到中国来,帮助中国的开发者社区。这里,我们还没有做更多新的宣布。
3.问:想问一下Google在未来5年发展的关健词,例如今天提到的人工智能,VR这些。另外,Google推出了PWA。而在中国也有微信小程序盛行。想问一下,这种即点即用,是不是意味着App开发走向衰落?谢谢。
Ben Galbraith:首先你刚才说到中国的趋势,中国的趋势其实也是全球趋势的一部分。中国的App生态系统保持它的重要性,而且该生态系统出现更多的创新。回到今天早上讲到,关于这个网页,网页我们有很多的产品,包括Progressive Web App,以及AMP(加速的移动页面)。有很多新的生态系统在出现,包括基于对话的平台,这个未来会得到进一步的发展。另外我们在Google Assistant上做了大量的投资。此外,还有虚拟现实,也是我们非常关注的话题,我们对它非常有兴趣,我们觉得Daydream未来可以提供高质量、沉浸式的虚拟现实体验给广大的用户。
另外还有机器学习,这是在这一切底下的一个很根基的技术。机器学习中的Te nsorFlor技术可以让开发者很轻松的应用它。而且,我觉得在中国,软件会变得越来越智能,像Google Assistant这样的产品就可以帮助开发者使用机器学习。
中国的趋势非常多的,很抱歉我没有把它们浓缩到1-2个趋势,包括你提到的Instant App,也在得到不断的发展。这个Instant App,现在还是在发展之中,我们未来会对它有更多的想法。
Scott Beaumont:补充一点,其实我们在中国特别关注的就是本地的创新。比如说,我们也不知道微信以后会产生什么样的创新,但是我们知道中国的规模、中国的计算机这个量的大小,计算能力等等是非常宏大。在中国,他们让创新更符合中国。而这种中国特色的创新,回过来又会影响全球的创新。机器学习、机器智慧是全球的现象,中国开发者会怎么利用机器学习、机器智慧这个技术,在什么样的领域会产生巨大的效用,这种效用最后怎样影响全球的开发者社区。
我想,用一个词来描述的话,中国在未来5年的关键词就是创新。创新也是Google的热忱,也是让开发者沸腾的一种精神。我们在中国想做的事情,第一个,就是让开发者的想法变成现实,第二个,就是把这个想法带到全球,发挥到全球。
另外,我们在中国也在积极了解本地开发者的想法,帮助他们把这个想法进行创新,变成有中国特色的开发。
4问:Google搜索何时返华?还有对于因为在中国没有Google Play以及GMS所导致的Android体验的糟糕现象,Google是怎么看待的,有什么建议?
Scott :这个问题,目前我们没有更多信息可以分享。 我们CEO的确在正式场合希望更好的服务中国Android的用户,不过,迄今为止我们没有更新的信息跟大家分享。
问:现在很多的中国开发者有VR游戏的团队,希望通过Daydream改变他们的生存状态。我想问三个问题,我们对开发者登录Daydream平台的标准是什么呢?第二个问题是我们会不会给VR团队什么扶持政策?另外他们分成是怎么样呢?
Ben Galbraith:关于第一个问题,如果开发者有Unity的话,他们把Unity上的应用放在Daydream中。此外,我们有很多其他的工具合作伙伴,工具的供应方,如果你是3D内容,你可以把3D转化后放到Daydream上。如果是虚拟现实的也可以放到Daydream上。
第二个,我们很高兴开发者能够把内容放到Daydream上,我们也会与开发者进行更多的互动,来帮助到他们,但是我们并没有补贴政策。我们的工具是免费的,99.9%生态系统中的内容都会放到我们的平台上。
第三,关于收入分成,这个是使用标准的模式,并没有单独针对Daydream的政策。
来源:http://www.cocoachina.com/industry/20161208/18322.html
收起阅读 »
APP开发实战视频教程 - 《仿今日头条》 发布了
APP开发实战视频教程 - 《仿今日头条》 发布了,内容涵盖
课程提纲
第1讲 : 基于h5+的app 开发介绍、hui、mui介绍、项目部署
时长 : 41:00
第2讲 : 制作子窗口、数据加载、下拉刷新
时长 : 44:33
第3讲 : 新闻分类切换 、上拉加载更多
时长 : 33:49
第4讲 : 懒加载的使用
时长 : 11:10
第5讲 : 新闻详情页面开发
时长 : 19:37
第6讲 : 新闻详情页面分享功能
时长 : 12:13 播放 : 2356 次
第7讲 : app 在线升级
时长 : 15:38
说明
前面2节视频因直播问题不够清清晰,后面的较为清晰。 20元可以购买视频高清文件及项目源码(购买请联系qq 1265928288)。
项目最终效果截图

视频教程地址:
http://www.hcoder.net/course
APP开发实战视频教程 - 《仿今日头条》 发布了,内容涵盖
课程提纲
第1讲 : 基于h5+的app 开发介绍、hui、mui介绍、项目部署
时长 : 41:00
第2讲 : 制作子窗口、数据加载、下拉刷新
时长 : 44:33
第3讲 : 新闻分类切换 、上拉加载更多
时长 : 33:49
第4讲 : 懒加载的使用
时长 : 11:10
第5讲 : 新闻详情页面开发
时长 : 19:37
第6讲 : 新闻详情页面分享功能
时长 : 12:13 播放 : 2356 次
第7讲 : app 在线升级
时长 : 15:38
说明
前面2节视频因直播问题不够清清晰,后面的较为清晰。 20元可以购买视频高清文件及项目源码(购买请联系qq 1265928288)。
项目最终效果截图
视频教程地址:
http://www.hcoder.net/course

侧滑菜单,侧滑导航div模式 主界面滚动问题

基于mui整页滚动的下拉刷新和上拉加载
避免双webview,使用整页滚动,更流畅;
demo和文档见github
地址:pullToRefresh.js
避免双webview,使用整页滚动,更流畅;
demo和文档见github
地址:pullToRefresh.js

App升级问题 -- 使用升级包(.wgt)格式升级
安装升级包失败[10]:End Of Central Directory signature not found, 文件的路径是正确的,
path ="_downloads/1481102169419011845(8).wgt";
function installWgt(path) {
plus.nativeUI.showWaiting("正在安装升级包,请稍等....");
plus.runtime.install(path, {}, function() {
plus.nativeUI.alert("应用资源更新完成!", function() {
plus.nativeUI.closeWaiting();
plus.runtime.restart();
});
}, function(e) {
plus.nativeUI.closeWaiting();
plus.nativeUI.alert("安装升级包失败[" e.code "]:" e.message); //图片上面弹出的位置
console.log("安装升级包失败[" e.code "]:" e.message);
});
}
望大神们帮忙!
安装升级包失败[10]:End Of Central Directory signature not found, 文件的路径是正确的,
path ="_downloads/1481102169419011845(8).wgt";
function installWgt(path) {
plus.nativeUI.showWaiting("正在安装升级包,请稍等....");
plus.runtime.install(path, {}, function() {
plus.nativeUI.alert("应用资源更新完成!", function() {
plus.nativeUI.closeWaiting();
plus.runtime.restart();
});
}, function(e) {
plus.nativeUI.closeWaiting();
plus.nativeUI.alert("安装升级包失败[" e.code "]:" e.message); //图片上面弹出的位置
console.log("安装升级包失败[" e.code "]:" e.message);
});
}
望大神们帮忙!
收起阅读 »
一天记录一点点....
一直想做一个本地生活的平台。之前有做成功。然后腾讯云的服务器到期了...服务端全部被删除了。然后电脑硬盘坏了,客户端又毁了。
这是个悲伤的故事.现在重新开始。
一、页面布局。
代码就是基本的布局代码,如下
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#" id="main">
<span class="mui-icon mui-icon-pengyouquan"></span>
<span class="mui-tab-label">圈子</span>
</a>
<a class="mui-tab-item" href="#" id="chat">
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">聊天</span>
</a>
<a class="mui-tab-item" href="#" id="discover">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="#" id="settings">
<span class="mui-icon mui-icon-gear"><span class="mui-badge mui-badge-danger"></span></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
然后是创建webview
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[{
url:'main.html',
id:'main.html',
styles:{
top:'45px',//mui标题栏默认高度为45px;
bottom:'50px'//默认为0px,可不定义;
}
}]
});
//main点击事件
document.getElementById('main').addEventListener('tap', function() {
mui.openWindow({
url: 'main.html',
id:'main',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//chat按钮点击事件
document.getElementById('chat').addEventListener('tap', function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'chat',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//discover按钮点击事件
document.getElementById("discover").addEventListener('tap',function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'discover',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//settings按钮点击事件
document.getElementById("settings").addEventListener('tap',function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'settings',
styles:{
top:'45px',
bottom:'50px'
}
});
});
</script>
一直想做一个本地生活的平台。之前有做成功。然后腾讯云的服务器到期了...服务端全部被删除了。然后电脑硬盘坏了,客户端又毁了。
这是个悲伤的故事.现在重新开始。
一、页面布局。
代码就是基本的布局代码,如下
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#" id="main">
<span class="mui-icon mui-icon-pengyouquan"></span>
<span class="mui-tab-label">圈子</span>
</a>
<a class="mui-tab-item" href="#" id="chat">
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">聊天</span>
</a>
<a class="mui-tab-item" href="#" id="discover">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="#" id="settings">
<span class="mui-icon mui-icon-gear"><span class="mui-badge mui-badge-danger"></span></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
然后是创建webview
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[{
url:'main.html',
id:'main.html',
styles:{
top:'45px',//mui标题栏默认高度为45px;
bottom:'50px'//默认为0px,可不定义;
}
}]
});
//main点击事件
document.getElementById('main').addEventListener('tap', function() {
mui.openWindow({
url: 'main.html',
id:'main',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//chat按钮点击事件
document.getElementById('chat').addEventListener('tap', function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'chat',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//discover按钮点击事件
document.getElementById("discover").addEventListener('tap',function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'discover',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//settings按钮点击事件
document.getElementById("settings").addEventListener('tap',function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'settings',
styles:{
top:'45px',
bottom:'50px'
}
});
});
</script>
收起阅读 »
解决安卓下拉刷新异常问题
一、安卓下拉刷新异常解决问题
兼容ios、安卓版本
解决方法:
1、使用mui底部选项卡-webview模式
2、这边使用第二选项卡为例,在第二选项卡使用双监听
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'内容页.html',
id:'内容页.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
3、所有内容都定义在:内容页.html文件中
二、自定义选项卡标题
1、使用mui底部选项卡-webview模式
2、去掉头部标题栏部分在选项卡内容页做定义
注:此部分为自定义标题栏比如添加搜索、按钮、以及下拉效果均可
一、安卓下拉刷新异常解决问题
兼容ios、安卓版本
解决方法:
1、使用mui底部选项卡-webview模式
2、这边使用第二选项卡为例,在第二选项卡使用双监听
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'内容页.html',
id:'内容页.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
3、所有内容都定义在:内容页.html文件中
二、自定义选项卡标题
1、使用mui底部选项卡-webview模式
2、去掉头部标题栏部分在选项卡内容页做定义
注:此部分为自定义标题栏比如添加搜索、按钮、以及下拉效果均可
收起阅读 »

还在为了没有后端发愁?? hoa 为您提供学习后端开放源,学习app不用自己做后端了! 申请加精谢谢
学习app开发的你恰巧又是做前端的你:
是不是没有后端数据总是觉得自己做的就是一层表皮,搭建后端似乎有些复杂?
需要服务器 需要配置服务器 需要设计数据库 制作接口.....
现在 福利来了!!
HOA 基础版正式发布!!
HCoder Open Api 简称 HOA 是由 www.hcoder.net 提供的一套api数据源,提供了日常app开发学习过程中常用的数据源,适用于基于 mui hui h5+的app开发。
官网地址
http://www.hcoder.net/api
我们为您提供学习app开发后端所需的基础数据,并提供项目案例源码(官网上可以下载样例)!快来吧!
测试版数据不断扩展中,目前提供基础的 post get 图片轮播 新闻列表 新闻详情数据源。
后期我们将提供用户体系数据源涵盖 用户 登陆 注册等....
本周6晚上8点 hcoder 项目开发直播课程报名中(收费5元 防止放鸽子),想听课的加QQ 1265928288
学习app开发的你恰巧又是做前端的你:
是不是没有后端数据总是觉得自己做的就是一层表皮,搭建后端似乎有些复杂?
需要服务器 需要配置服务器 需要设计数据库 制作接口.....
现在 福利来了!!
HOA 基础版正式发布!!
HCoder Open Api 简称 HOA 是由 www.hcoder.net 提供的一套api数据源,提供了日常app开发学习过程中常用的数据源,适用于基于 mui hui h5+的app开发。
官网地址
http://www.hcoder.net/api
我们为您提供学习app开发后端所需的基础数据,并提供项目案例源码(官网上可以下载样例)!快来吧!
测试版数据不断扩展中,目前提供基础的 post get 图片轮播 新闻列表 新闻详情数据源。
后期我们将提供用户体系数据源涵盖 用户 登陆 注册等....
本周6晚上8点 hcoder 项目开发直播课程报名中(收费5元 防止放鸽子),想听课的加QQ 1265928288
收起阅读 »
纯js 头像裁剪
引用cropper.js 纯js,无需其余第三方插件,完成图片裁剪功能,使用例子在附件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="js/cropperjs-master/dist/cropper.min.css" />
<link rel="stylesheet" href="css/mui.min.css" />
<style>
#redo{
position: fixed;
bottom: 20px;
left :20px;
font-size: 30px;
}
#undo{
position: fixed;
bottom: 20px;
right :20px;
font-size: 30px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav blueBackground">
<h1 id="patientId" class="mui-title">截取头像</h1>
<a id="save" style="vertical-align: middle;color:#8dc14f;line-height:2.5em;" class="mui-pull-right"><span>保存</span></a>
</header>
<div style="" class="mui-content">
<div style="">
<img style="width: 98%;" id="image" src="">
</div>
<button id="redo" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-left"><span class="mui-icon mui-icon-redo"></span></button>
<button id="undo" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right"><span class="mui-icon mui-icon-undo"></button>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/cropperjs-master/dist/cropper.min.js" ></script>
<script>
var image = document.getElementById('image');
var cropper = null;
var resImg = null;
//在选择或者拍摄完成后跳出裁剪页面并把图片路径传递到此页面
//image.src = plus.webview.currentWebview().imgSrc;
image.src = "img/head-default.jpg";
initCropper();
document.getElementById("save").addEventListener("tap",getImg);
document.getElementById("redo").addEventListener("tap",function(){
cropper.rotate(90);
});
document.getElementById("undo").addEventListener("tap",function(){
cropper.rotate(-90);
});
function initCropper(){
cropper = new Cropper(image, {
aspectRatio: 1/1,
dragMode:'move',
rotatable:true,
minCropBoxWidth:200,
minCropBoxHeight:200,
minCanvasWidth:200,
minCanvasHeight:200,
minContainerWidth:200,
minContainerHeight:200,
crop: function(data) {
}
});
}
function getImg(){
resImg = cropper.getCroppedCanvas({
width: 200,
height: 200
}).toDataURL();
console.log(resImg)
//裁剪完毕后将新的图片路径传递到需要显示的页面即可显示 结果为base64格式
//mui.fire(plus.webview.getWebviewById("personalInfoPage"),"cropperImg",{resImg:resImg});
//mui.back();
}
</script>
</body>
</html>
引用cropper.js 纯js,无需其余第三方插件,完成图片裁剪功能,使用例子在附件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="js/cropperjs-master/dist/cropper.min.css" />
<link rel="stylesheet" href="css/mui.min.css" />
<style>
#redo{
position: fixed;
bottom: 20px;
left :20px;
font-size: 30px;
}
#undo{
position: fixed;
bottom: 20px;
right :20px;
font-size: 30px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav blueBackground">
<h1 id="patientId" class="mui-title">截取头像</h1>
<a id="save" style="vertical-align: middle;color:#8dc14f;line-height:2.5em;" class="mui-pull-right"><span>保存</span></a>
</header>
<div style="" class="mui-content">
<div style="">
<img style="width: 98%;" id="image" src="">
</div>
<button id="redo" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-left"><span class="mui-icon mui-icon-redo"></span></button>
<button id="undo" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right"><span class="mui-icon mui-icon-undo"></button>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/cropperjs-master/dist/cropper.min.js" ></script>
<script>
var image = document.getElementById('image');
var cropper = null;
var resImg = null;
//在选择或者拍摄完成后跳出裁剪页面并把图片路径传递到此页面
//image.src = plus.webview.currentWebview().imgSrc;
image.src = "img/head-default.jpg";
initCropper();
document.getElementById("save").addEventListener("tap",getImg);
document.getElementById("redo").addEventListener("tap",function(){
cropper.rotate(90);
});
document.getElementById("undo").addEventListener("tap",function(){
cropper.rotate(-90);
});
function initCropper(){
cropper = new Cropper(image, {
aspectRatio: 1/1,
dragMode:'move',
rotatable:true,
minCropBoxWidth:200,
minCropBoxHeight:200,
minCanvasWidth:200,
minCanvasHeight:200,
minContainerWidth:200,
minContainerHeight:200,
crop: function(data) {
}
});
}
function getImg(){
resImg = cropper.getCroppedCanvas({
width: 200,
height: 200
}).toDataURL();
console.log(resImg)
//裁剪完毕后将新的图片路径传递到需要显示的页面即可显示 结果为base64格式
//mui.fire(plus.webview.getWebviewById("personalInfoPage"),"cropperImg",{resImg:resImg});
//mui.back();
}
</script>
</body>
</html>
收起阅读 »