HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

极光推送git上demo有坑,所以集成不成功!

Push 极光推送

JPushService.java文件:
private String mRegistrationId; 应该为private static String mRegistrationId;
JPushReceiver.java文件:
String rId = JPushInterface.getRegistrationId(context) 应该为private static String mRegistrationID(context)

继续阅读 »

JPushService.java文件:
private String mRegistrationId; 应该为private static String mRegistrationId;
JPushReceiver.java文件:
String rId = JPushInterface.getRegistrationId(context) 应该为private static String mRegistrationID(context)

收起阅读 »

安卓怎么判断是否开启了消息通知

这里的是ios的 http://ask.dcloud.net.cn/question/4497
安卓的怎么写呢

这里的是ios的 http://ask.dcloud.net.cn/question/4497
安卓的怎么写呢

h5+、mui、app实战等视频教程汇总(免费视频播放量已超5万+)

mui

实战: MUI、H5+ APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : HTML 5 + 开发教程
知识点 : mui 全套教程

视频教程观看地址
http://www.hcoder.net

h.js - mui 操作的小伙伴,效率极高的dom操作js框架(免费开源、文档、视频教程)


官网
http://www.hcoder.net/h

继续阅读 »

实战: MUI、H5+ APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : HTML 5 + 开发教程
知识点 : mui 全套教程

视频教程观看地址
http://www.hcoder.net

h.js - mui 操作的小伙伴,效率极高的dom操作js框架(免费开源、文档、视频教程)


官网
http://www.hcoder.net/h

收起阅读 »

前端切图需要mui框架长期合作。

外包

有psd效果图已做好,需要切mui框架,来个能稳定长期合作的联系下QQ503576543

太黑的离谱的就算了哦~

有psd效果图已做好,需要切mui框架,来个能稳定长期合作的联系下QQ503576543

太黑的离谱的就算了哦~

手机厂商的“小程序”来了,比微信更强大; HBuilder 8.1.1-alpha版发布,解决若干5+App问题

小程序 流应用 公告

HBuilder 8.1.1-alpha版发布,解决若干5+App问题,​查看详情

微信小程序内测期间曾被万众期待,但上线后却有众多被开发者诟病的地方:

  1. 不开放线上流量,导致很多开发者撤出
  2. 体积受限1M以内,很多App只能做裁剪版
  3. 开放的API太少,很多原生功能无法实现
  4. 界面UI被框死,无法与原生一致
  5. 不能方便安装到手机桌面
  6. 开发和运维工作只能单独一条线为微信服务,投资大回报不佳

开发者的不满,体现在小程序的应用上就是功能不全、体验不佳、没有维护运营,进而导致用户不满。
此外每次从微信里点击数次才能启动小程序,还是比在桌面启动应用麻烦太多。

毕竟微信是一个社交软件,而不是OS,很多事情做起来别扭,让微信不限制小程序的体积和能力,也勉为其难,自动在桌面创建图标也是场景不顺。
那么手机厂商们的“小程序”是什么样的?
3月20日下午,工信部下属的HTML5中国产业联盟,联合8家手机制造商宣布,基于HTML5+开放标准推出即点即用的流应用。

众多手机厂商表示,将在手机rom原生支持HTML5+规范,达到真正原生级体验。
HTML5+规范是对HTML5的扩展,让js可以调用到OS的各种能力,包括对体验提升很重要的原生动画、渲染能力。
基于HTML5+规范的即点即用应用叫流应用,也就是像流媒体的即点即看一样,把App流式发行到手机上(并非在线web页面,而是安装到手机本地的js)
流应用和微信小程序一样可以即点即用,但功能是全开放的,操作系统的API大多可以调用,也没有体积和UI方面的各种限制,可以支撑开发者做出和原生功能体验一致的App。
更重要的是手机厂商们设计的使用方式继承了用户现有的习惯,在应用市场里找一个应用,点一下直接启动,然后在桌面创建图标,下次可以在桌面二次使用。

会议现场大咖云集,精彩观点纷呈。
中国信息通信研究院技术与标准研究所所长王志勤、W3C中国技术负责人 北航计算机学院副院长胡春明在开场致辞。
中国信通院标准所所长王志勤致辞
中国信通院标准所所长王志勤致辞

W3C中国技术负责人胡春明致辞
W3C中国技术负责人胡春明致辞

HTML5中国产业联盟秘书长、DCloud CEO王安讲解了HTML5+即点即用应用的特点和优势。
华为、唯品会等手机厂商和开发商代表分享了即点即用应用的现状数据和未来计划。

CSDN创始人蒋涛作为圆桌主持人,与华为消费者BG用户经营开发部部长叶文武、vivo互联网开发部部长张飞、金立的应用商店总经理杨骏慷及DCloud CEO王安,探讨了后App时代的发展方向。

对于开发者而言,目前原生应用流量越来越贵。在应用市场里激活率也只有30-50%,也就是100个下载里只有40个人完整操作完了下载、安装、权限确认、启动并联网等所有步骤,有60人在中间环节折损掉了。
在移动互联网用户总体量趋于饱和时,研究如何把折损掉的60人拉回来,成为产业的新增长点。
即点即用的流应用,把下载和激活的折损抹平,为开发商新增一倍多的激活用户,这对开发者而言非常有吸引力。也大幅降低了投放时的CPA成本。

4月下旬,第一批手机厂商支持流应用的应用商店将上线。目前联盟正在鼓励开发者积极提交应用,并计划为前30个高品质应用提供充足流量扶持。

开发者开发流应用有3种开发方式:

  1. 对于有H5站点的开发者,略加改造几天内即可完成一个接近原生体验的流应用。DCloud推出一个wap2app框架,在新版Hbuilder alpha里新建项目时,多了一个wap2app项目的选项,此框架可快速帮助开发者完成升级工作。
  2. 对于一个有微信小程序的开发者,可通过DCloud提供的小程序转换流应用工具,把微信小程序转为HTML,进而略加改造也可提交到流应用平台。
  3. 对于还没开始做App的创业者,则使用js编程,大约3、4周可以完成,一套代码即有了流应用版,又有了安卓、iOS原生版,还有了H5站点。也就是HTML5+规范的应用可以直接打包为apk和ipa正常发布到应用市场下载,实现了跨平台开发。

详见开发指南

现场体验唯品会流应用,很难看出与原生应用的区别。
<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=o0376ky6123&tiny=0&auto=0" allowfullscreen></iframe>
如视频无法播放,点击此链接观看唯品会流应用的操作视频
根据唯品会代表演讲提供的数据,流应用版本的唯品会付费转化率高、新客成本低,成为唯品会公司级项目。

对于开发者而言,通过跨平台开发降低开发成本,通过即点即用降低获客成本,是很好的事情。
对于用户而言,应用可以随用随取,非常方便。尤其是安卓手机装多了应用变卡的问题,终于可以解决了。流应用提供的打破原生App孤岛,按需重组服务的理念也颇吸引人。

移动互联网已经发展多年,遇到了瓶颈,流量向寡头App集中。后App时代的开启将重新激活产业,带来更多新的想象空间。
不似微信反复强调小程序没有红利,HTML5中国产业联盟是会在业务发展初期重点扶植一批高品质应用,希望开发者抓紧时机,成为iOS初期的“愤怒的小鸟”。

下载体验流应用

继续阅读 »

HBuilder 8.1.1-alpha版发布,解决若干5+App问题,​查看详情

微信小程序内测期间曾被万众期待,但上线后却有众多被开发者诟病的地方:

  1. 不开放线上流量,导致很多开发者撤出
  2. 体积受限1M以内,很多App只能做裁剪版
  3. 开放的API太少,很多原生功能无法实现
  4. 界面UI被框死,无法与原生一致
  5. 不能方便安装到手机桌面
  6. 开发和运维工作只能单独一条线为微信服务,投资大回报不佳

开发者的不满,体现在小程序的应用上就是功能不全、体验不佳、没有维护运营,进而导致用户不满。
此外每次从微信里点击数次才能启动小程序,还是比在桌面启动应用麻烦太多。

毕竟微信是一个社交软件,而不是OS,很多事情做起来别扭,让微信不限制小程序的体积和能力,也勉为其难,自动在桌面创建图标也是场景不顺。
那么手机厂商们的“小程序”是什么样的?
3月20日下午,工信部下属的HTML5中国产业联盟,联合8家手机制造商宣布,基于HTML5+开放标准推出即点即用的流应用。

众多手机厂商表示,将在手机rom原生支持HTML5+规范,达到真正原生级体验。
HTML5+规范是对HTML5的扩展,让js可以调用到OS的各种能力,包括对体验提升很重要的原生动画、渲染能力。
基于HTML5+规范的即点即用应用叫流应用,也就是像流媒体的即点即看一样,把App流式发行到手机上(并非在线web页面,而是安装到手机本地的js)
流应用和微信小程序一样可以即点即用,但功能是全开放的,操作系统的API大多可以调用,也没有体积和UI方面的各种限制,可以支撑开发者做出和原生功能体验一致的App。
更重要的是手机厂商们设计的使用方式继承了用户现有的习惯,在应用市场里找一个应用,点一下直接启动,然后在桌面创建图标,下次可以在桌面二次使用。

会议现场大咖云集,精彩观点纷呈。
中国信息通信研究院技术与标准研究所所长王志勤、W3C中国技术负责人 北航计算机学院副院长胡春明在开场致辞。
中国信通院标准所所长王志勤致辞
中国信通院标准所所长王志勤致辞

W3C中国技术负责人胡春明致辞
W3C中国技术负责人胡春明致辞

HTML5中国产业联盟秘书长、DCloud CEO王安讲解了HTML5+即点即用应用的特点和优势。
华为、唯品会等手机厂商和开发商代表分享了即点即用应用的现状数据和未来计划。

CSDN创始人蒋涛作为圆桌主持人,与华为消费者BG用户经营开发部部长叶文武、vivo互联网开发部部长张飞、金立的应用商店总经理杨骏慷及DCloud CEO王安,探讨了后App时代的发展方向。

对于开发者而言,目前原生应用流量越来越贵。在应用市场里激活率也只有30-50%,也就是100个下载里只有40个人完整操作完了下载、安装、权限确认、启动并联网等所有步骤,有60人在中间环节折损掉了。
在移动互联网用户总体量趋于饱和时,研究如何把折损掉的60人拉回来,成为产业的新增长点。
即点即用的流应用,把下载和激活的折损抹平,为开发商新增一倍多的激活用户,这对开发者而言非常有吸引力。也大幅降低了投放时的CPA成本。

4月下旬,第一批手机厂商支持流应用的应用商店将上线。目前联盟正在鼓励开发者积极提交应用,并计划为前30个高品质应用提供充足流量扶持。

开发者开发流应用有3种开发方式:

  1. 对于有H5站点的开发者,略加改造几天内即可完成一个接近原生体验的流应用。DCloud推出一个wap2app框架,在新版Hbuilder alpha里新建项目时,多了一个wap2app项目的选项,此框架可快速帮助开发者完成升级工作。
  2. 对于一个有微信小程序的开发者,可通过DCloud提供的小程序转换流应用工具,把微信小程序转为HTML,进而略加改造也可提交到流应用平台。
  3. 对于还没开始做App的创业者,则使用js编程,大约3、4周可以完成,一套代码即有了流应用版,又有了安卓、iOS原生版,还有了H5站点。也就是HTML5+规范的应用可以直接打包为apk和ipa正常发布到应用市场下载,实现了跨平台开发。

详见开发指南

现场体验唯品会流应用,很难看出与原生应用的区别。
<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=o0376ky6123&tiny=0&auto=0" allowfullscreen></iframe>
如视频无法播放,点击此链接观看唯品会流应用的操作视频
根据唯品会代表演讲提供的数据,流应用版本的唯品会付费转化率高、新客成本低,成为唯品会公司级项目。

对于开发者而言,通过跨平台开发降低开发成本,通过即点即用降低获客成本,是很好的事情。
对于用户而言,应用可以随用随取,非常方便。尤其是安卓手机装多了应用变卡的问题,终于可以解决了。流应用提供的打破原生App孤岛,按需重组服务的理念也颇吸引人。

移动互联网已经发展多年,遇到了瓶颈,流量向寡头App集中。后App时代的开启将重新激活产业,带来更多新的想象空间。
不似微信反复强调小程序没有红利,HTML5中国产业联盟是会在业务发展初期重点扶植一批高品质应用,希望开发者抓紧时机,成为iOS初期的“愤怒的小鸟”。

下载体验流应用

收起阅读 »

流应用常见FAQ汇总

FAQ 流应用

常见FAQ

Q: 流应用的秒开按钮是打开一个轻应用吗?
A: 不是。秒开是流应用App从下载到安装到启动的3步合一简称秒开,流应用虽然是js编程语言,但并不是b/s网页,不是web,而是一个典型的c/s客户端,它是原生App一样的c/s结构。虽然可以通过wap2app强化改造把一个M站改造为流应用,经过改造后可达到原生的功能和体验,方能接入流应用平台。

Q: 流应用只能从360手机助手里进入和使用吗?
A: 不是。流应用从360手机助手里下载安装,以后的启动是从手机桌面直接启动,不是每次到360手机助手里启动。

Q: 流应用在没网络的时候会不会404白屏?
A: 不会。可以体验下36Kr资讯的流应用,没有网络时(比如打开飞行模式),之前的新闻照样离线看。参考视频https://v.qq.com/x/page/h0386sphgpt.html

Q: 流应用的离线能力是缓存吗?是不是三方清理软件清除缓存后流应用就不能用了?
A: 不是。流应用虽然是js,但是可以调用操作系统40万原生API,可以使用原生存储,不会被清理。
当然开发者也可以使用网页缓存,DCloud的开发工具并不限制,只是使用网页缓存是真的可能会被三方清理软件清除掉。

Q: 流应用和原生应用可以在一个应用市场并存吗?
A: 可以并存。也可以改名字、或图标加修饰。

Q: 流应用仅支持360手机助手吗?其他渠道能发行流应用吗?
A: 目前集成流应用引擎并上线的发行渠道有360手机助手、金立软件商店、360手机浏览器,还有很多发行渠道已经加入HTML5中国产业联盟,陆续在集成流应用引擎,上线后我们会公开通告。

Q: 流应用是否支持iOS
A: Appstore上搜索“流应用”,下载DCloud的流应用管理器,在里面使用流应用。
另外流应用在iOS上无法自动创建桌面图标,需要用户启动一个流应用后在右下角点菜单,选择添加到桌面主屏,根据向导手动添加桌面快捷方式。

Q:流应用所需要的权限依赖主引擎,如果用户不给主引擎权限怎么办
A: 在原生开发里,当用户不给app权限时,app可以检测到并提醒用户赋权。在流应用里流程是一样的,js代码可以检测到赋权状态,并给用户提示,还可以跳转到相应设置界面。另外在金立手机上,由于原厂的特殊支持,流应用引擎权限是完整齐备的。

Q:分享时如果被分享者手机上没有流应用引擎会怎么样?
A: 此时选项由开发者设定,或者提示用户下载原生App,或者提示用户下载流应用引擎。如果涉及直通车业务,则建议提示用户下载流应用引擎。仅1M大小,下载后仍然可自动启动相应的流应用的指定界面。

Q: 流应用是否可以给原生App导流?
A: 流应用代码如何实现取决于开发者自己,检测到wifi下并下载apk这些代码都可以自己实现。但如果功能一样,则一般不推荐导流原生,打扰用户又没有给用户带来新价值。
另外流应用不是wap页面,不能像wap一样挂一个banner条来引导用户下载原生app,这种方式太影响流应用的用户体验,所以带这种banner的不能上线到流应用正式平台里。
除了流应用平台的要求,360等平台还有额外上线要求,一般在流应用里给原生导流都是不允许上线的。渠道还是希望开发者专注于优化流应用的体验,而不是简单的把流应用当做导量工具。

Q: 开发流应用,又多一套产品,研发成本又增加了?
A: 一旦流应用试点成功,可以做到原生iOS、Android、流应用、HTML5手机站一套架构。研发成本大幅下降而不是增加。
如果已经有了原生版又开发流应用,一般是与HTML5版本合并管理,通过条件编译比如glup来实现一套源码。这样可以有效同步业务逻辑。此时研发成本虽有所增加,但市场成本、获取用户的成本大幅下降,也是非常值得的。

Q: 流应用的渠道考核走HTML5的还是走原生的,还是单独?
A: 流应用与原生一样,启动后通过同样的接口给服务器传递激活信息,同样上报IMEI。
标准的c/s流应用,因为不是b/s网页,没有PV、UV概念,也无法走传统的HTML5网页统计。所以一般是走到了原生的统计口径,当然也可以给流应用一个单独参数标志,以区隔这种推广方式的效果。
对于wap站转换的流应用,如果嫌麻烦,也可以继承之前wap站的pc、uv统计接口。

更多问题可加入流应用QQ交流群471285299继续沟通,也可以在问答系统里发帖提问。

继续阅读 »

常见FAQ

Q: 流应用的秒开按钮是打开一个轻应用吗?
A: 不是。秒开是流应用App从下载到安装到启动的3步合一简称秒开,流应用虽然是js编程语言,但并不是b/s网页,不是web,而是一个典型的c/s客户端,它是原生App一样的c/s结构。虽然可以通过wap2app强化改造把一个M站改造为流应用,经过改造后可达到原生的功能和体验,方能接入流应用平台。

Q: 流应用只能从360手机助手里进入和使用吗?
A: 不是。流应用从360手机助手里下载安装,以后的启动是从手机桌面直接启动,不是每次到360手机助手里启动。

Q: 流应用在没网络的时候会不会404白屏?
A: 不会。可以体验下36Kr资讯的流应用,没有网络时(比如打开飞行模式),之前的新闻照样离线看。参考视频https://v.qq.com/x/page/h0386sphgpt.html

Q: 流应用的离线能力是缓存吗?是不是三方清理软件清除缓存后流应用就不能用了?
A: 不是。流应用虽然是js,但是可以调用操作系统40万原生API,可以使用原生存储,不会被清理。
当然开发者也可以使用网页缓存,DCloud的开发工具并不限制,只是使用网页缓存是真的可能会被三方清理软件清除掉。

Q: 流应用和原生应用可以在一个应用市场并存吗?
A: 可以并存。也可以改名字、或图标加修饰。

Q: 流应用仅支持360手机助手吗?其他渠道能发行流应用吗?
A: 目前集成流应用引擎并上线的发行渠道有360手机助手、金立软件商店、360手机浏览器,还有很多发行渠道已经加入HTML5中国产业联盟,陆续在集成流应用引擎,上线后我们会公开通告。

Q: 流应用是否支持iOS
A: Appstore上搜索“流应用”,下载DCloud的流应用管理器,在里面使用流应用。
另外流应用在iOS上无法自动创建桌面图标,需要用户启动一个流应用后在右下角点菜单,选择添加到桌面主屏,根据向导手动添加桌面快捷方式。

Q:流应用所需要的权限依赖主引擎,如果用户不给主引擎权限怎么办
A: 在原生开发里,当用户不给app权限时,app可以检测到并提醒用户赋权。在流应用里流程是一样的,js代码可以检测到赋权状态,并给用户提示,还可以跳转到相应设置界面。另外在金立手机上,由于原厂的特殊支持,流应用引擎权限是完整齐备的。

Q:分享时如果被分享者手机上没有流应用引擎会怎么样?
A: 此时选项由开发者设定,或者提示用户下载原生App,或者提示用户下载流应用引擎。如果涉及直通车业务,则建议提示用户下载流应用引擎。仅1M大小,下载后仍然可自动启动相应的流应用的指定界面。

Q: 流应用是否可以给原生App导流?
A: 流应用代码如何实现取决于开发者自己,检测到wifi下并下载apk这些代码都可以自己实现。但如果功能一样,则一般不推荐导流原生,打扰用户又没有给用户带来新价值。
另外流应用不是wap页面,不能像wap一样挂一个banner条来引导用户下载原生app,这种方式太影响流应用的用户体验,所以带这种banner的不能上线到流应用正式平台里。
除了流应用平台的要求,360等平台还有额外上线要求,一般在流应用里给原生导流都是不允许上线的。渠道还是希望开发者专注于优化流应用的体验,而不是简单的把流应用当做导量工具。

Q: 开发流应用,又多一套产品,研发成本又增加了?
A: 一旦流应用试点成功,可以做到原生iOS、Android、流应用、HTML5手机站一套架构。研发成本大幅下降而不是增加。
如果已经有了原生版又开发流应用,一般是与HTML5版本合并管理,通过条件编译比如glup来实现一套源码。这样可以有效同步业务逻辑。此时研发成本虽有所增加,但市场成本、获取用户的成本大幅下降,也是非常值得的。

Q: 流应用的渠道考核走HTML5的还是走原生的,还是单独?
A: 流应用与原生一样,启动后通过同样的接口给服务器传递激活信息,同样上报IMEI。
标准的c/s流应用,因为不是b/s网页,没有PV、UV概念,也无法走传统的HTML5网页统计。所以一般是走到了原生的统计口径,当然也可以给流应用一个单独参数标志,以区隔这种推广方式的效果。
对于wap站转换的流应用,如果嫌麻烦,也可以继承之前wap站的pc、uv统计接口。

更多问题可加入流应用QQ交流群471285299继续沟通,也可以在问答系统里发帖提问。

收起阅读 »

流应用与5+应用的区别差异汇总

流应用

开发者在HBuilder调试基座、DCloud的流应用管理器、及不同渠道如360手助、金立应用商店里的运行效果可能不同。
差异原因一般有2方面:三方sdk差异(如个推、qq登陆等),5+引擎版本差异。

三方sdk差异:

三方sdk是否集成以及需要在manifest中配置什么,是由流应用的集成渠道决定的,会产生差异。

上图的中微信H5支付的链接,单独摘出来:https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1。(重要更新:微信已经开放H5支付申请,推荐使用H5支付方式

权限:

和5+应用不同,流应用作为一个公共平台,对用户安全和数据隐私需要负责,会有一些策略限制。

  1. plus.contact模块在流应用中不存在,也就是不能访问通讯录;
  2. 流应用中对涉及用户隐藏的操作有二次弹框询问,比如相册、录音、定位、安卓直发短信、安卓直拨电话、安卓快捷方式创建、Native.js调用;
  3. 流应用中,不支持远程web页面访问Native.js,仅本地页面才可以使用Native.js。但远程页面仍然可以使用非Native.js的plus api。

如果开发者发现还有其他差异,一般是因为运行环境的5+引擎版本不同,可以使用plus.runtime查询5+引擎版本。
5+引擎每次升级,首先是DCloud的HBuilder调试基座和DCloud流应用管理器升级,三方渠道逐渐升级。

不同平台的流应用的UA是不同的,比如360手助里的流应用,UA里包含qihoo特征字符串。可以根据 if (mui.os.stream) {} 或UA 来判断当前的运行环境,隐藏不支持的功能的使用,如去掉语音输入的麦克风图标或微信登录的图标。

继续阅读 »

开发者在HBuilder调试基座、DCloud的流应用管理器、及不同渠道如360手助、金立应用商店里的运行效果可能不同。
差异原因一般有2方面:三方sdk差异(如个推、qq登陆等),5+引擎版本差异。

三方sdk差异:

三方sdk是否集成以及需要在manifest中配置什么,是由流应用的集成渠道决定的,会产生差异。

上图的中微信H5支付的链接,单独摘出来:https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1。(重要更新:微信已经开放H5支付申请,推荐使用H5支付方式

权限:

和5+应用不同,流应用作为一个公共平台,对用户安全和数据隐私需要负责,会有一些策略限制。

  1. plus.contact模块在流应用中不存在,也就是不能访问通讯录;
  2. 流应用中对涉及用户隐藏的操作有二次弹框询问,比如相册、录音、定位、安卓直发短信、安卓直拨电话、安卓快捷方式创建、Native.js调用;
  3. 流应用中,不支持远程web页面访问Native.js,仅本地页面才可以使用Native.js。但远程页面仍然可以使用非Native.js的plus api。

如果开发者发现还有其他差异,一般是因为运行环境的5+引擎版本不同,可以使用plus.runtime查询5+引擎版本。
5+引擎每次升级,首先是DCloud的HBuilder调试基座和DCloud流应用管理器升级,三方渠道逐渐升级。

不同平台的流应用的UA是不同的,比如360手助里的流应用,UA里包含qihoo特征字符串。可以根据 if (mui.os.stream) {} 或UA 来判断当前的运行环境,隐藏不支持的功能的使用,如去掉语音输入的麦克风图标或微信登录的图标。

收起阅读 »

基于mui、h5+、h.js的App开发实战教程 - 仿《有道词典》 已经发布! 还有mui、h5+、app开发免费教程

mui

基于mui、h5+、h.js的App开发实战教程 - 仿《有道词典》 已经发布!
总计10节:
1、入口页面布局子页面布局(含原生侧滑窗口切换
2、主页面布局及代码实现
3、新闻详情页面开发
4、词典页面功能及代码编写
5、热点新闻栏目开发(涵盖:下拉刷新、上拉加载等知识点)
6、完成登录检查及微信登录
7、“我的”页面开发
8、推送及相关统计
9、app 在线升级及安装
10、发布应用到应用宝并进行应用加固及签名

课程总计 4个半小时,包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识!
收费50元,有经济困难的在校学生可以联系客服 1265928288 进行优惠(不是勿扰)。
购买方式
腾讯课堂:
https://ke.qq.com/course/194834#tuin=4f8da6

资料包包含:源码、素材、文字资料,购买后即可下载! 观看时候选择超清模式,代码清晰可见!

hcoder 一直致力于奉献高质量 教程,官网上 mui h5+ 等免费教程播放量已经达到5万,收点费用为了做的更好,希望大家理解。
免费教程地址
http://www.hcoder.net/course

继续阅读 »

基于mui、h5+、h.js的App开发实战教程 - 仿《有道词典》 已经发布!
总计10节:
1、入口页面布局子页面布局(含原生侧滑窗口切换
2、主页面布局及代码实现
3、新闻详情页面开发
4、词典页面功能及代码编写
5、热点新闻栏目开发(涵盖:下拉刷新、上拉加载等知识点)
6、完成登录检查及微信登录
7、“我的”页面开发
8、推送及相关统计
9、app 在线升级及安装
10、发布应用到应用宝并进行应用加固及签名

课程总计 4个半小时,包含源码、apk。涉及mui布局修改、服务器交互、微信登录、推送、app升级、加固签名等大部分开发知识!
收费50元,有经济困难的在校学生可以联系客服 1265928288 进行优惠(不是勿扰)。
购买方式
腾讯课堂:
https://ke.qq.com/course/194834#tuin=4f8da6

资料包包含:源码、素材、文字资料,购买后即可下载! 观看时候选择超清模式,代码清晰可见!

hcoder 一直致力于奉献高质量 教程,官网上 mui h5+ 等免费教程播放量已经达到5万,收点费用为了做的更好,希望大家理解。
免费教程地址
http://www.hcoder.net/course

收起阅读 »

MUI和H5+做好插件共享就太好了

插件
   在移动开发框架中,各种框架争奇斗艳,程序员眼花缭乱,各种尝试,却没有一家做到独大,应用开发者都希望大牛出现,结束开发时的纠结,集中精力搞业务。  

   各种框架都努力的解决时下移动开发的问题,我也尝试过n多框架,在遇见MUI和H5+的时候还是挺兴奋的,当然也有很多的问题,那都是可以容忍的,今天要说的是H5+ SDK的插件。  

    现实开发中会遇到各种各样的问题,原生的交互是经常遇到的,H5+ SDK的插件是个好东西,搭建了一个JS和原生的桥梁。可惜的是,一旦自定义了插件,就遭遇了另外的问题:  
    1. 不能云打包了,只能自己搭建原生工具,集成SDK,本地打包,这个倒是也可以接受,但是无疑提升了开发的门槛。  
    2、自定义的插件自己可以使用,但是无法做到随意的共享。目前只有官方提供的几个插件大家都可以使用,比如地图、支付、分享、第三方登录、统计等。  

     如果H5+ SDK能够定义插件规范,让众多自定义插件共享起来,并且提供云打包功能,那么无疑是一个大的飞跃。  

      官方定义插件的具体接口,以android为例,插件规范内容可以包括jar文件规范,so库文件规范,asset下的资源文件规范,插件描述文件等。插件描述文件可以定义插件中的桥的名字;原生组件的定义,比如:activity、service定义;系统级的回调事件,比如应用启动时要初始化的资源等等。Ios开发也可以定义这些规范,由Hbuilder开发环境自动识别这些插件,云打包时,把插件的所有内容上传到云服务器,打包服务自动根据规范处理好插件的内容后再打包。当然也会遭遇另外的问题:  
      a)一旦插件共享,将来会出现多如牛毛的插件,那么是否会遭遇多个插件的库文件版本冲突问题  
      b)如果多个插件共享一些共同的库文件或者资源,这该如何处理  
      c)插件开发环境问题当然可以由Huilder来承担  
      d)插件可以支持Ios或者Android,或者两者都支持,这个如何处理  
      e)插件共享后,是否会让appstore禁用?这个问题我想不会吧,因为所有的插件的更换,都需要重新发布的。目前,插件的更换只要不提供热更新,appstore就不会禁用,Mui提供的热更新只是业务上的热更新。  

       当然库文件的版本和冲突问题都不是问题,可以借助maven或者gradle的思想,创建移动应用插件库,来规范版本的问题。  

       官方定义插件市场,鼓励更多的开发者提供插件,可以提供免费,也可以提供收费,插件市场也可以解决版本依赖的问题。集思广益,MUI 和 H5+才能拥有更多的粉丝,才能让更多的产品使用。  

       设想一下插件共享后的场景:  
       1.移动开发者无需自己再搭建打包环境,如有需求,只需开发插件即可。  
       2.越来越多的开发者贡献自己的插件,移动开发领域如果不会MUI和H5+,就不好意思说自己是移动开发者。  
       3.H5+成为事实上的开发标准,各种移动开发中间件开始开发基于H5+的插件,比如即时聊天产品,各种推送产品,更多统计产品,真正的自由组合。移动开发的春天终于来了。  
       4.等着大家来想吧。
继续阅读 »
   在移动开发框架中,各种框架争奇斗艳,程序员眼花缭乱,各种尝试,却没有一家做到独大,应用开发者都希望大牛出现,结束开发时的纠结,集中精力搞业务。  

   各种框架都努力的解决时下移动开发的问题,我也尝试过n多框架,在遇见MUI和H5+的时候还是挺兴奋的,当然也有很多的问题,那都是可以容忍的,今天要说的是H5+ SDK的插件。  

    现实开发中会遇到各种各样的问题,原生的交互是经常遇到的,H5+ SDK的插件是个好东西,搭建了一个JS和原生的桥梁。可惜的是,一旦自定义了插件,就遭遇了另外的问题:  
    1. 不能云打包了,只能自己搭建原生工具,集成SDK,本地打包,这个倒是也可以接受,但是无疑提升了开发的门槛。  
    2、自定义的插件自己可以使用,但是无法做到随意的共享。目前只有官方提供的几个插件大家都可以使用,比如地图、支付、分享、第三方登录、统计等。  

     如果H5+ SDK能够定义插件规范,让众多自定义插件共享起来,并且提供云打包功能,那么无疑是一个大的飞跃。  

      官方定义插件的具体接口,以android为例,插件规范内容可以包括jar文件规范,so库文件规范,asset下的资源文件规范,插件描述文件等。插件描述文件可以定义插件中的桥的名字;原生组件的定义,比如:activity、service定义;系统级的回调事件,比如应用启动时要初始化的资源等等。Ios开发也可以定义这些规范,由Hbuilder开发环境自动识别这些插件,云打包时,把插件的所有内容上传到云服务器,打包服务自动根据规范处理好插件的内容后再打包。当然也会遭遇另外的问题:  
      a)一旦插件共享,将来会出现多如牛毛的插件,那么是否会遭遇多个插件的库文件版本冲突问题  
      b)如果多个插件共享一些共同的库文件或者资源,这该如何处理  
      c)插件开发环境问题当然可以由Huilder来承担  
      d)插件可以支持Ios或者Android,或者两者都支持,这个如何处理  
      e)插件共享后,是否会让appstore禁用?这个问题我想不会吧,因为所有的插件的更换,都需要重新发布的。目前,插件的更换只要不提供热更新,appstore就不会禁用,Mui提供的热更新只是业务上的热更新。  

       当然库文件的版本和冲突问题都不是问题,可以借助maven或者gradle的思想,创建移动应用插件库,来规范版本的问题。  

       官方定义插件市场,鼓励更多的开发者提供插件,可以提供免费,也可以提供收费,插件市场也可以解决版本依赖的问题。集思广益,MUI 和 H5+才能拥有更多的粉丝,才能让更多的产品使用。  

       设想一下插件共享后的场景:  
       1.移动开发者无需自己再搭建打包环境,如有需求,只需开发插件即可。  
       2.越来越多的开发者贡献自己的插件,移动开发领域如果不会MUI和H5+,就不好意思说自己是移动开发者。  
       3.H5+成为事实上的开发标准,各种移动开发中间件开始开发基于H5+的插件,比如即时聊天产品,各种推送产品,更多统计产品,真正的自由组合。移动开发的春天终于来了。  
       4.等着大家来想吧。
收起阅读 »

wap2app优化返回体验

返回 wap2app

若当前页面有弹出层,在按下返回键时,原生App会先关闭弹出层;但浏览器中的wap站,却会直接执行history.back(),关闭当前页面,这种体验是不对的;wap2app会智能处理返回逻辑,当用户点击back按键时,先探测当前页面是否存在弹出层,若存在则关闭弹出层,否则关闭当前页面。

但前端写法过于灵活,wap2app目前无法处理所有的弹出层情况,因此wap2app还支持开发者自定义配置;因为弹出层的关闭,一般是通过某个控件的点击事件触发的,比如点击遮罩或点击“取消”按钮;wap2app提供一种简洁的key:value的选择器配置方案,其中:

  • key:弹出层选择器
  • value:点击可触发弹出层关闭的控件选择器

例如:

{  
  "webviewId": "shop",//店铺页面  
  "matchUrls": [  
    {  
      "hostname": "shop.example.com",  
      "pathname": "\\/\\d+\\.*html"  
    }  
  ],  
  "back": {  
    "before": [  
      {  
        "popupSelector": ".category_menu",  
        "closeSelector": "#j_category",  
        "eventType": "click"  
      }  
    ]  
  }  
}

如上适配代码表示:若.category_menu控件存在且可见,则按下back键时,触发#j_category的click事件;

常见的弹出层场景:

  • 筛选条件
  • 图片预览
继续阅读 »

若当前页面有弹出层,在按下返回键时,原生App会先关闭弹出层;但浏览器中的wap站,却会直接执行history.back(),关闭当前页面,这种体验是不对的;wap2app会智能处理返回逻辑,当用户点击back按键时,先探测当前页面是否存在弹出层,若存在则关闭弹出层,否则关闭当前页面。

但前端写法过于灵活,wap2app目前无法处理所有的弹出层情况,因此wap2app还支持开发者自定义配置;因为弹出层的关闭,一般是通过某个控件的点击事件触发的,比如点击遮罩或点击“取消”按钮;wap2app提供一种简洁的key:value的选择器配置方案,其中:

  • key:弹出层选择器
  • value:点击可触发弹出层关闭的控件选择器

例如:

{  
  "webviewId": "shop",//店铺页面  
  "matchUrls": [  
    {  
      "hostname": "shop.example.com",  
      "pathname": "\\/\\d+\\.*html"  
    }  
  ],  
  "back": {  
    "before": [  
      {  
        "popupSelector": ".category_menu",  
        "closeSelector": "#j_category",  
        "eventType": "click"  
      }  
    ]  
  }  
}

如上适配代码表示:若.category_menu控件存在且可见,则按下back键时,触发#j_category的click事件;

常见的弹出层场景:

  • 筛选条件
  • 图片预览
收起阅读 »

wap2app优化UI展现

图片预览 wap2app 下拉刷新

流应用类似原生体验,因此首先要求wap站的UI风格是App化的,在下图示例中,
左侧为超链接方式的M站,右侧是app风格的M站

wap2app优化UI展现,主要分为几大类,本文逐个说明。

去wap化展现

wap2app需要将一些明显带有wap特征的元素给去掉,主要包括:

  • 顶部导航条(标题栏):因为wap2app默认使用原生导航条,若不去除,会显示双标题;
  • 原生App下载引导:包括下载banner、仅原生App才支持的业务,流应用是一种独立的发行模式,不允许给原生导流,否则无法通过上线审核;
  • PC/mobile版本切换链接
  • 版权信息:包括icp备案及版权说明等

优化方案参考如何在流应用环境下去wap化展现

图片全屏预览

wap2app框架支持将页面图片全屏展示,全屏后支持双指缩放;在 sitemap.json 中,配置目标 webview->easyConfig->previewImage 节点。

{  
  "webviewId": "detail",  
  "easyConfig": {  
    "previewImage": [  
      {  
        "gallerySelector": "#slider", //图片组父容器选择器  
        "imageSelector": "img", //图片img节点的选择器  
        "loop": true, //是否支持循环预览  
        "indicator": "number" //图片指示器样式  
      }  
    ]  
  }  
}

下拉刷新

下拉刷新在App中是普遍需求,但鉴于性能体验,很多M站不支持下拉刷新;wap2app弥补了这块缺陷,可通过简单配置,实现原生下拉刷新,如下为刷新效果:

wap2app可通过 webview -> webviewParameter -> pullToRefresh -> support 节点配置当前webview是否启用下拉刷新,默认为不启用;如下为示例代码:

{  
  "webviewId": "pullToRefresh",  
  "webviewParameter": {  
    "pullToRefresh": {  
      "support": true  
    }  
  }  
}
继续阅读 »

流应用类似原生体验,因此首先要求wap站的UI风格是App化的,在下图示例中,
左侧为超链接方式的M站,右侧是app风格的M站

wap2app优化UI展现,主要分为几大类,本文逐个说明。

去wap化展现

wap2app需要将一些明显带有wap特征的元素给去掉,主要包括:

  • 顶部导航条(标题栏):因为wap2app默认使用原生导航条,若不去除,会显示双标题;
  • 原生App下载引导:包括下载banner、仅原生App才支持的业务,流应用是一种独立的发行模式,不允许给原生导流,否则无法通过上线审核;
  • PC/mobile版本切换链接
  • 版权信息:包括icp备案及版权说明等

优化方案参考如何在流应用环境下去wap化展现

图片全屏预览

wap2app框架支持将页面图片全屏展示,全屏后支持双指缩放;在 sitemap.json 中,配置目标 webview->easyConfig->previewImage 节点。

{  
  "webviewId": "detail",  
  "easyConfig": {  
    "previewImage": [  
      {  
        "gallerySelector": "#slider", //图片组父容器选择器  
        "imageSelector": "img", //图片img节点的选择器  
        "loop": true, //是否支持循环预览  
        "indicator": "number" //图片指示器样式  
      }  
    ]  
  }  
}

下拉刷新

下拉刷新在App中是普遍需求,但鉴于性能体验,很多M站不支持下拉刷新;wap2app弥补了这块缺陷,可通过简单配置,实现原生下拉刷新,如下为刷新效果:

wap2app可通过 webview -> webviewParameter -> pullToRefresh -> support 节点配置当前webview是否启用下拉刷新,默认为不启用;如下为示例代码:

{  
  "webviewId": "pullToRefresh",  
  "webviewParameter": {  
    "pullToRefresh": {  
      "support": true  
    }  
  }  
}
收起阅读 »

titleNView配置 - wap2app教程

wap2app 导航栏 标题栏

概述

wap2app默认会以新窗体的方式打开每个要展现的url,每个新窗体默认都带有原生的导航栏。

开发者可以通过titleNView节点配置导航栏的背景色、标题内容、标题颜色、标题文字大小;wap2app默认生成灰底黑字的导航栏,参考sitemap.json中如下代码:

"global": {  
    "webviewParameter": {  
        "titleNView": {  
            "backgroundColor": "#f7f7f7",//导航栏背景色  
            "titleColor": "#000000",//标题颜色  
            "titleSize": "17px"//标题字体大小  
        }  
    }  
}

开发者可根据产品整体风格设置导航栏样式,比如希望黑底白字,则如下修改sitemap.json代码即可:

"global": {  
    "webviewParameter": {  
        "titleNView": {  
            "backgroundColor": "#1B1A1F",//黑色背景  
            "titleColor": "#FFFFFF",//白色文字  
            "titleSize": "17px"//标题字体大小  
        }  
    }  
}

如上设置为应用全局设置,开发者可以在页面组中为每个页面组单独设置,比如详情页面导航栏标题设置为“新闻详情”,如下:

{  
    "global": {  
        "webviewParameter": {  
            "titleNView": {//通用导航栏配置  
                "backgroundColor": '#1B1A1F',//导航栏背景色  
                "titleText": '我的项目',//导航栏标题  
                "titleColor": '#FFFFFF',//标题颜色  
                "titleSize": '17px'//标题字体大小  
            }  
        }  
    },  
    "pages": [  
        {  
            "webviewid":"detail",//详情页  
            "matchurls": [  
                {  
                    "pathname": "R:\\/detail\\/\\d+"  
                }  
            ],  
            "webviewParameter": {  
                "titleNView":{  
                    "titleText":"新闻详情"  //单独设置新闻详情页的标题内容  
                }  
            }  
        }  
    ]  
}

在有原生导航条的情况下,wap站就不再需要显示HTML5导航栏,否则会出现原生、HTML5双标题并存的情况。

为避免双标题并存的情况,需要去除wap版的导航栏,参考wap站修改-去除M站的指定DOM元素教程。

原生导航条的启用/禁用

可以通过配置titleNView为false,来禁用原生导航条。

wap2app项目首页默认不启用原生导航条,因此新建wap2app项目生成的sitemap.json中,首页下的titleNView配置为false,如下:

"pages": [  
    {  
        "webviewId": "__W2A__m.example.com",//首页  
        "matchUrls": [  
            {  
                "href": "http://m.example.com"  
            }, {  
                "href": "http://m.example.com/"  
            }  
        ],  
        "webviewParameter": {  
            "titleNView": false  //首页不使用原生导航条  
        }  
    }  
]

如果首页也需要原生导航条,则在首页的配置规则中,配置titleNView参数即可,例如:

"pages": [  
    {  
        "webviewId": "__W2A__m.example.com",//首页  
        "matchUrls": [  
            {  
                "href": "http://m.example.com"  
            }, {  
                "href": "http://m.example.com/"  
            }  
        ],  
        "webviewParameter": {  
            "titleNView": {//首页启用原生导航条  
                "backgroundColor": "#FF00FF",//导航栏背景色  
                "titleColor": "#ffffff",//标题颜色为白色  
                "titleText":"wap2app项目首页"//导航条文本  
            }  
        }  
    }  
]

注意:在wap2app项目中:

  • 首页可以不使用原生导航
  • 其余非首页均建议使用原生导航

title文字显示的专项说明

如果配置了titleText,那么该Webview下match到的所有页面,都是这个title文字。
如果不配置titleText,则titleNView默认显示的标题文字就是网页的HTML里的<title>节点里的内容。
如果网页title的文字不适合显示到页面标题栏上,又不想使用固定文字,那么:

  1. 常规建议是修改wap页面的title节点,在wap2app环境的ua下给出不一样的title。
  2. 也可以在wap2app项目根目录下的app.js里编程,动态修改title文字。当然这种编程不止是能修改标题文字了。

透明渐变导航栏

wap2app框架提供了一种漂亮的导航栏样式,页面刚开始是顶部沉浸式图片,向下滚动后渐变出现title。
因为是动态效果,截图无法表达。
可以在流应用中点击唯品会的商品详情页面或大众点评的团购详情页面中体验。
也可以看这个视频第32-35秒:https://v.qq.com/x/page/k05051mc143.html
设置透明渐变导航栏,需要在titleNView节点下增加type:'transparent',如下是一个示例:

{  
    "webviewid":"detail",//详情页  
    "matchurls": [  
        //详情页url匹配规则  
    ],  
    "webviewParameter": {  
        "titleNView":{  
            "titleText":"新闻详情",  //单独设置新闻详情页的标题内容  
            "type":"transparent",//透明渐变样式  
        }  
    }  
}

(在唯品会示例中,除了'transparent'的titleNView,还使用了subNView里的原生ImageSlider)
注意透明渐变导航栏模式对上面的buttons的字体设计有更高要求,需要在半透明状态下和不透明时,均保持好看。

完整的titleNView配置参数

熟悉DCloud产品的开发者都知道,DCloud在手机端的核心强化引擎是HTML5+Runtime,它遵循HTML5Plus规范,提供了超级强大的功能。而wap2app的底层引擎其实也是5+Runtime引擎。

wap2app里的titleNView就是HTML5Plus的Webview里的titleNView,完整参数配置可以参考HTML5Plus规范:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

下面一个示例,演示如何在原生导航栏右侧绘制一个分享按钮,并添加按钮点击事件

{  
    "webviewId": "page1",  
    "matchUrls": [  
        //page1 url匹配规则  
    ],  
    "webviewParameter": {  
        "titleNView": {  
            "titleText": "原生标题栏",  
            "buttons": [  
                {  
                    "float": "right",  
                    "fontSize": "27px",  
                    "fontSrc": "__wap2app.ttf",//wap2app内置字体文件  
                    "text": "\ue602",  
                    "onclick": "javascript:plus.webview.getWebviewById('page1').evalJS('myshare();')"  
                }  
            ]  
        }  
    }  
}

运行结果如下:

关于onclick注意事项:

  • 仅支持字符串类型,且以javascript:为前缀
  • 必须先获得对应的webview,然后以evalJS的方式执行;evalJS是Webview的标准api,具体api参考http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject,在里面搜evalJS。
    evalJS的意思就是让某个Webview运行其内部的某个js函数。
    示例中,myshare()这个函数写在id为page1的页面内,故需通过plus.webview.getWebviewById('page1')获得目标webview对象,并且命令这个Webview运行myshare这个函数;
  • 目标页面的函数必须是全局函数(通过window可访问的的函数);示例中调用的myshare方法,需要写在原生标题栏所属的webview页面中;
  • 真机运行时,首页webview的id为"HBuilder",若为首页原生标题增加按钮,则建议使用plus.webview.getLaunchWebview().evalJS('myshare()');
  • 注意在onclick后面的js里,不能写plus.webview.currentWebview()。因为sitemap不运行在任何Webview下,在sitemap里写的js其实是和app.js一起运行在一个独立的、不可见的本地Webview中。所以若需要操作当前titleNView所在的Webview,也必须指定明确的WebviewID。

wap2app内置字体:
titleNView上经常需要配置的字体图标,wap2app已经内置,字体及unicode编码如下:

  • 向右箭头:\ue600
  • 向左箭头(返回箭头):\ue601
  • 分享图标:\ue602
  • 收藏图标:\ue604
  • 主页图标:\ue605
  • 关闭图标:\ue650

开发者也可以引入自定义字体图标,注意text属性需要设置为unicode字符,必须以'\u'开头,如"\ue123"(注意不能写成"\e123")。
DCloud的mui框架里有常用字体,可以复制到wap2app项目下使用。
网上类似的常用字体库很多,也有很多图标转字体的工具,比如https://icomoon.io/app/#/select
titleNView支持图片,具体见下面的章节。但我们仍然推荐使用字体,字体在点击变色、屏幕适配上更具有优势。

通过js动态调整titleNView

如果是简单修改titleNView,那么重新设置Webview的style即可。
因为Webview有setStyle方法,如下代码可实现js修改title文字。

plus.webview.currentWebview().setStyle({titleNView: {titleText: 'new text'}});

同理,titleNView的每个配置都可以这样修改。
这段代码可以放在你的M站页面里,也可以放在appendJS里。

除了简单的用法,titleNView还支持像画布一个任意画图写字、内嵌输入框。
因为titleNView继承自plus.nativeObj.view,这是一块纯原生的画布,想怎么画都可以。
如果你愿意研究这些高级技巧,可以继续看:
首先通过js获取titleNView对象,得到一个NView对象,参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.getTitleNView
然后按照下面的api操作这个NView对象,绘图、写字、画区域、嵌输入框都可以,就是一块画布。
http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

FAQ

Q:如何移除原生导航栏
A:原则上不建议移除原生导航栏,原生导航栏也是优化的比较重要的一部分。http://ask.dcloud.net.cn/question/50018

Q:首页titleNview配置的按钮怎么添加监听事件
A:http://ask.dcloud.net.cn/article/12622

继续阅读 »

概述

wap2app默认会以新窗体的方式打开每个要展现的url,每个新窗体默认都带有原生的导航栏。

开发者可以通过titleNView节点配置导航栏的背景色、标题内容、标题颜色、标题文字大小;wap2app默认生成灰底黑字的导航栏,参考sitemap.json中如下代码:

"global": {  
    "webviewParameter": {  
        "titleNView": {  
            "backgroundColor": "#f7f7f7",//导航栏背景色  
            "titleColor": "#000000",//标题颜色  
            "titleSize": "17px"//标题字体大小  
        }  
    }  
}

开发者可根据产品整体风格设置导航栏样式,比如希望黑底白字,则如下修改sitemap.json代码即可:

"global": {  
    "webviewParameter": {  
        "titleNView": {  
            "backgroundColor": "#1B1A1F",//黑色背景  
            "titleColor": "#FFFFFF",//白色文字  
            "titleSize": "17px"//标题字体大小  
        }  
    }  
}

如上设置为应用全局设置,开发者可以在页面组中为每个页面组单独设置,比如详情页面导航栏标题设置为“新闻详情”,如下:

{  
    "global": {  
        "webviewParameter": {  
            "titleNView": {//通用导航栏配置  
                "backgroundColor": '#1B1A1F',//导航栏背景色  
                "titleText": '我的项目',//导航栏标题  
                "titleColor": '#FFFFFF',//标题颜色  
                "titleSize": '17px'//标题字体大小  
            }  
        }  
    },  
    "pages": [  
        {  
            "webviewid":"detail",//详情页  
            "matchurls": [  
                {  
                    "pathname": "R:\\/detail\\/\\d+"  
                }  
            ],  
            "webviewParameter": {  
                "titleNView":{  
                    "titleText":"新闻详情"  //单独设置新闻详情页的标题内容  
                }  
            }  
        }  
    ]  
}

在有原生导航条的情况下,wap站就不再需要显示HTML5导航栏,否则会出现原生、HTML5双标题并存的情况。

为避免双标题并存的情况,需要去除wap版的导航栏,参考wap站修改-去除M站的指定DOM元素教程。

原生导航条的启用/禁用

可以通过配置titleNView为false,来禁用原生导航条。

wap2app项目首页默认不启用原生导航条,因此新建wap2app项目生成的sitemap.json中,首页下的titleNView配置为false,如下:

"pages": [  
    {  
        "webviewId": "__W2A__m.example.com",//首页  
        "matchUrls": [  
            {  
                "href": "http://m.example.com"  
            }, {  
                "href": "http://m.example.com/"  
            }  
        ],  
        "webviewParameter": {  
            "titleNView": false  //首页不使用原生导航条  
        }  
    }  
]

如果首页也需要原生导航条,则在首页的配置规则中,配置titleNView参数即可,例如:

"pages": [  
    {  
        "webviewId": "__W2A__m.example.com",//首页  
        "matchUrls": [  
            {  
                "href": "http://m.example.com"  
            }, {  
                "href": "http://m.example.com/"  
            }  
        ],  
        "webviewParameter": {  
            "titleNView": {//首页启用原生导航条  
                "backgroundColor": "#FF00FF",//导航栏背景色  
                "titleColor": "#ffffff",//标题颜色为白色  
                "titleText":"wap2app项目首页"//导航条文本  
            }  
        }  
    }  
]

注意:在wap2app项目中:

  • 首页可以不使用原生导航
  • 其余非首页均建议使用原生导航

title文字显示的专项说明

如果配置了titleText,那么该Webview下match到的所有页面,都是这个title文字。
如果不配置titleText,则titleNView默认显示的标题文字就是网页的HTML里的<title>节点里的内容。
如果网页title的文字不适合显示到页面标题栏上,又不想使用固定文字,那么:

  1. 常规建议是修改wap页面的title节点,在wap2app环境的ua下给出不一样的title。
  2. 也可以在wap2app项目根目录下的app.js里编程,动态修改title文字。当然这种编程不止是能修改标题文字了。

透明渐变导航栏

wap2app框架提供了一种漂亮的导航栏样式,页面刚开始是顶部沉浸式图片,向下滚动后渐变出现title。
因为是动态效果,截图无法表达。
可以在流应用中点击唯品会的商品详情页面或大众点评的团购详情页面中体验。
也可以看这个视频第32-35秒:https://v.qq.com/x/page/k05051mc143.html
设置透明渐变导航栏,需要在titleNView节点下增加type:'transparent',如下是一个示例:

{  
    "webviewid":"detail",//详情页  
    "matchurls": [  
        //详情页url匹配规则  
    ],  
    "webviewParameter": {  
        "titleNView":{  
            "titleText":"新闻详情",  //单独设置新闻详情页的标题内容  
            "type":"transparent",//透明渐变样式  
        }  
    }  
}

(在唯品会示例中,除了'transparent'的titleNView,还使用了subNView里的原生ImageSlider)
注意透明渐变导航栏模式对上面的buttons的字体设计有更高要求,需要在半透明状态下和不透明时,均保持好看。

完整的titleNView配置参数

熟悉DCloud产品的开发者都知道,DCloud在手机端的核心强化引擎是HTML5+Runtime,它遵循HTML5Plus规范,提供了超级强大的功能。而wap2app的底层引擎其实也是5+Runtime引擎。

wap2app里的titleNView就是HTML5Plus的Webview里的titleNView,完整参数配置可以参考HTML5Plus规范:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

下面一个示例,演示如何在原生导航栏右侧绘制一个分享按钮,并添加按钮点击事件

{  
    "webviewId": "page1",  
    "matchUrls": [  
        //page1 url匹配规则  
    ],  
    "webviewParameter": {  
        "titleNView": {  
            "titleText": "原生标题栏",  
            "buttons": [  
                {  
                    "float": "right",  
                    "fontSize": "27px",  
                    "fontSrc": "__wap2app.ttf",//wap2app内置字体文件  
                    "text": "\ue602",  
                    "onclick": "javascript:plus.webview.getWebviewById('page1').evalJS('myshare();')"  
                }  
            ]  
        }  
    }  
}

运行结果如下:

关于onclick注意事项:

  • 仅支持字符串类型,且以javascript:为前缀
  • 必须先获得对应的webview,然后以evalJS的方式执行;evalJS是Webview的标准api,具体api参考http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject,在里面搜evalJS。
    evalJS的意思就是让某个Webview运行其内部的某个js函数。
    示例中,myshare()这个函数写在id为page1的页面内,故需通过plus.webview.getWebviewById('page1')获得目标webview对象,并且命令这个Webview运行myshare这个函数;
  • 目标页面的函数必须是全局函数(通过window可访问的的函数);示例中调用的myshare方法,需要写在原生标题栏所属的webview页面中;
  • 真机运行时,首页webview的id为"HBuilder",若为首页原生标题增加按钮,则建议使用plus.webview.getLaunchWebview().evalJS('myshare()');
  • 注意在onclick后面的js里,不能写plus.webview.currentWebview()。因为sitemap不运行在任何Webview下,在sitemap里写的js其实是和app.js一起运行在一个独立的、不可见的本地Webview中。所以若需要操作当前titleNView所在的Webview,也必须指定明确的WebviewID。

wap2app内置字体:
titleNView上经常需要配置的字体图标,wap2app已经内置,字体及unicode编码如下:

  • 向右箭头:\ue600
  • 向左箭头(返回箭头):\ue601
  • 分享图标:\ue602
  • 收藏图标:\ue604
  • 主页图标:\ue605
  • 关闭图标:\ue650

开发者也可以引入自定义字体图标,注意text属性需要设置为unicode字符,必须以'\u'开头,如"\ue123"(注意不能写成"\e123")。
DCloud的mui框架里有常用字体,可以复制到wap2app项目下使用。
网上类似的常用字体库很多,也有很多图标转字体的工具,比如https://icomoon.io/app/#/select
titleNView支持图片,具体见下面的章节。但我们仍然推荐使用字体,字体在点击变色、屏幕适配上更具有优势。

通过js动态调整titleNView

如果是简单修改titleNView,那么重新设置Webview的style即可。
因为Webview有setStyle方法,如下代码可实现js修改title文字。

plus.webview.currentWebview().setStyle({titleNView: {titleText: 'new text'}});

同理,titleNView的每个配置都可以这样修改。
这段代码可以放在你的M站页面里,也可以放在appendJS里。

除了简单的用法,titleNView还支持像画布一个任意画图写字、内嵌输入框。
因为titleNView继承自plus.nativeObj.view,这是一块纯原生的画布,想怎么画都可以。
如果你愿意研究这些高级技巧,可以继续看:
首先通过js获取titleNView对象,得到一个NView对象,参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.getTitleNView
然后按照下面的api操作这个NView对象,绘图、写字、画区域、嵌输入框都可以,就是一块画布。
http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

FAQ

Q:如何移除原生导航栏
A:原则上不建议移除原生导航栏,原生导航栏也是优化的比较重要的一部分。http://ask.dcloud.net.cn/question/50018

Q:首页titleNview配置的按钮怎么添加监听事件
A:http://ask.dcloud.net.cn/article/12622

收起阅读 »