HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

MUI从入门到精通

教程

从网络上发现MUI不错的系列教程:
MUI从入门到精通https://segmentfault.com/blog/mui

从网络上发现MUI不错的系列教程:
MUI从入门到精通https://segmentfault.com/blog/mui

离线打包能和Andriod studio吗

离线打包能和Andriod studio吗,毕竟谷歌的新儿子啊

离线打包能和Andriod studio吗,毕竟谷歌的新儿子啊

如何通过应用A给流应用B导流

流应用

传统的应用A导应用B,比如积分墙、换量广告、各种广告sdk....他们的导流效率是非常低的。
因为原生App的下载、安装、启动有很高的门槛,进一步导致广告的效果很差。

但如果应用B是一款流应用,就可以大幅降低折损,提升广告投放效果。
流应用的下载、安装、启动是三合一的,并且全过程完成时间在2-5秒之间,非常快。调了下面的代码,如果手机上已经有了流应用B,则启动之;如果没有,则安装并启动之。

如何在应用A里给流应用B导流?我们分3种情况。

  1. 应用A是5+ App,即本身是使用5+runtime打包的
  2. 应用A是流应用,即一个流应用给另一个流应用导流
  3. 应用A不是上面2种情况的普通App。

以下的示例代码里,同时判断了3种情况,先上代码

// 判断程序是否已安装  
function isInstalled(pn){  
    var main = plus.android.runtimeMainActivity();  
    var pm = main.getPackageManager();  
    var PackageManager = plus.android.importClass(pm);  
    try{  
        var pi = pm.getPackageInfo(pn,PackageManager.GET_ACTIVITIES);  
        if(pi){  
            return true;  
        }  
    }catch(e){  
    }  
    return false;  
}  
function openStream(id){  
    if(navigator.userAgent.indexOf('Html5Plus')<0){//非5+环境  
        location.href='http://m3w.cn/s/'+id;  
    }else if(navigator.userAgent.indexOf('StreamApp')>=0){//流应用环境  
        plus.stream.open({appid:id});  
    }else{// 非流应用环境  
        if(isInstalled('io.dcloud.streamapps')){//安装了流应用  
            plus.runtime.openURL('streamapp://s/'+id,null,'io.dcloud.streamapps');  
        }else if(isInstalled('com.qihoo.appstore')){//安装了360手机助手  
            plus.runtime.openURL('streamapp://s/'+id,null,'com.qihoo.appstore');  
        }else{//未安装流应用环境  
            plus.runtime.openURL('http://www.dcloud.io/streamapp/');//调用系统浏览器打开流基座下载页面  
        }  
    }  
}

在5+App里安装启动流应用

userAgent中如果包含Html5Plus字符串,则表示当前运行环境支持5+ API,否则表示当前运行环境不支持5+ API。
if(navigator.userAgent.indexOf('Html5Plus')<0){//非5+环境
满足此条件则表示运行环境不支持5+ API,此时可引导用户下载流应用运行环境。

在一个流应用中安装启动另一个流应用

userAgent中如果包含StreamApp字符串(navigator.userAgent.indexOf('StreamApp')>=0),则表示当前运行环境支持流应用,此时可通过plus.stream.open方法启动流应用。

非流应用环境

在非流应用运行环境中,我们可以通过url scheme来启动流应用,目前在“360手机助手”和“流应用”应用中已内置流应用引擎,可以通过5+ API(plus.runtime.openURL)方法来启动url scheme,其格式为:
streamapp://s/%APPID%
其中%APPID%为要启动的流应用APPID。
注意上面的示例代码是js的,实际在原生App中想调起流应用,需要写原生代码,原理也还是url schemes。

注:isInstalled方法使用native.js来判断当前设备上是否安装指定包名的应用。

启动流应用时如何传递参数

如果要调起同时传递参数,那么在调起url后面直接加问号参数。这个是启动大众点评外卖并进入某饭馆的url
:http://m3w.cn/s/H5BCD03E4?scene=share&arg=page%3Dshop%26id%3D2380186&__streamapp 。
这样的参数在启动后,可以通过plus.runtime这个api接收http://html5plus.org/doc/zh_cn/runtime.html#plus.runtime.arguments
这种机制,可以实现内容直达,尤其适合分享直通车等业务场景。

常见需调起的流应用的appid

手机京东 W2Am.sjjd.com
淘宝 W2Am.taobao.com
美团 W2Ameituan.com
卖座电影 H5A0B1958
e代驾 W2Aedaijia.cn
唯品会 H52588A9C
一号店 W2Am.yhd.com
去哪儿旅行 W2AH5E349CB7
携程酒店 H5B5EEFBB
途牛机票 W2AH56B3FED7
艺龙旅行网 W2Am.elong.com
趣趣游戏 H5E7A7BE6
传奇世界 H55269FFC
决战沙城  H54AA3D1F

如果你的app流量较大,希望变现,可以邮件stream@dcloud.io,我们与列表里的这些开发商都有商务推广分成协议。
比如在你的app中给手机京东流应用导流,产生的订单你就可以拿到提成。

继续阅读 »

传统的应用A导应用B,比如积分墙、换量广告、各种广告sdk....他们的导流效率是非常低的。
因为原生App的下载、安装、启动有很高的门槛,进一步导致广告的效果很差。

但如果应用B是一款流应用,就可以大幅降低折损,提升广告投放效果。
流应用的下载、安装、启动是三合一的,并且全过程完成时间在2-5秒之间,非常快。调了下面的代码,如果手机上已经有了流应用B,则启动之;如果没有,则安装并启动之。

如何在应用A里给流应用B导流?我们分3种情况。

  1. 应用A是5+ App,即本身是使用5+runtime打包的
  2. 应用A是流应用,即一个流应用给另一个流应用导流
  3. 应用A不是上面2种情况的普通App。

以下的示例代码里,同时判断了3种情况,先上代码

// 判断程序是否已安装  
function isInstalled(pn){  
    var main = plus.android.runtimeMainActivity();  
    var pm = main.getPackageManager();  
    var PackageManager = plus.android.importClass(pm);  
    try{  
        var pi = pm.getPackageInfo(pn,PackageManager.GET_ACTIVITIES);  
        if(pi){  
            return true;  
        }  
    }catch(e){  
    }  
    return false;  
}  
function openStream(id){  
    if(navigator.userAgent.indexOf('Html5Plus')<0){//非5+环境  
        location.href='http://m3w.cn/s/'+id;  
    }else if(navigator.userAgent.indexOf('StreamApp')>=0){//流应用环境  
        plus.stream.open({appid:id});  
    }else{// 非流应用环境  
        if(isInstalled('io.dcloud.streamapps')){//安装了流应用  
            plus.runtime.openURL('streamapp://s/'+id,null,'io.dcloud.streamapps');  
        }else if(isInstalled('com.qihoo.appstore')){//安装了360手机助手  
            plus.runtime.openURL('streamapp://s/'+id,null,'com.qihoo.appstore');  
        }else{//未安装流应用环境  
            plus.runtime.openURL('http://www.dcloud.io/streamapp/');//调用系统浏览器打开流基座下载页面  
        }  
    }  
}

在5+App里安装启动流应用

userAgent中如果包含Html5Plus字符串,则表示当前运行环境支持5+ API,否则表示当前运行环境不支持5+ API。
if(navigator.userAgent.indexOf('Html5Plus')<0){//非5+环境
满足此条件则表示运行环境不支持5+ API,此时可引导用户下载流应用运行环境。

在一个流应用中安装启动另一个流应用

userAgent中如果包含StreamApp字符串(navigator.userAgent.indexOf('StreamApp')>=0),则表示当前运行环境支持流应用,此时可通过plus.stream.open方法启动流应用。

非流应用环境

在非流应用运行环境中,我们可以通过url scheme来启动流应用,目前在“360手机助手”和“流应用”应用中已内置流应用引擎,可以通过5+ API(plus.runtime.openURL)方法来启动url scheme,其格式为:
streamapp://s/%APPID%
其中%APPID%为要启动的流应用APPID。
注意上面的示例代码是js的,实际在原生App中想调起流应用,需要写原生代码,原理也还是url schemes。

注:isInstalled方法使用native.js来判断当前设备上是否安装指定包名的应用。

启动流应用时如何传递参数

如果要调起同时传递参数,那么在调起url后面直接加问号参数。这个是启动大众点评外卖并进入某饭馆的url
:http://m3w.cn/s/H5BCD03E4?scene=share&arg=page%3Dshop%26id%3D2380186&__streamapp 。
这样的参数在启动后,可以通过plus.runtime这个api接收http://html5plus.org/doc/zh_cn/runtime.html#plus.runtime.arguments
这种机制,可以实现内容直达,尤其适合分享直通车等业务场景。

常见需调起的流应用的appid

手机京东 W2Am.sjjd.com
淘宝 W2Am.taobao.com
美团 W2Ameituan.com
卖座电影 H5A0B1958
e代驾 W2Aedaijia.cn
唯品会 H52588A9C
一号店 W2Am.yhd.com
去哪儿旅行 W2AH5E349CB7
携程酒店 H5B5EEFBB
途牛机票 W2AH56B3FED7
艺龙旅行网 W2Am.elong.com
趣趣游戏 H5E7A7BE6
传奇世界 H55269FFC
决战沙城  H54AA3D1F

如果你的app流量较大,希望变现,可以邮件stream@dcloud.io,我们与列表里的这些开发商都有商务推广分成协议。
比如在你的app中给手机京东流应用导流,产生的订单你就可以拿到提成。

收起阅读 »

HBuilder是否可以支持JSX和ES6?

HBuilder

现在写JSX和ES6只能靠其他编辑器写,希望HB能直接支持.

现在写JSX和ES6只能靠其他编辑器写,希望HB能直接支持.

聊天实现读取包含图片和文字的记录

chat

聊天实现读取包含图片和文字的记录

聊天实现读取包含图片和文字的记录

5+sdk安卓widget集成示例

经过半个月的集成过程,终于集成好了一个示例,
本人看了几个帖子做的集成,分别是:
1、官方发布的集成方案:
http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/81
2、网友给的集成方案(相对比较实用):
http://ask.dcloud.net.cn/article/526?notification_id-76397__item_id-3005

在集成过程中,我遇到了几个问题,在社区里提问了,官方骁骑同学帮忙解答了,这里要感谢骁骑同学。
http://ask.dcloud.net.cn/question/19108

我做集成方案的目标主要有两点:
1、不希望每次打开webapp都重新初始化5 内核,能做到5 内核初始化一次后,每次都可以重用5 内核的实例,
这样既省去了内核初始化的过程,又加快了webapp加载的速度;这样做还有一个好处,就是可以集成多个webapp,同时共用一个5 内核实例。 我的示例代码里面只集成了一个webapp。
2、webapp页面打开方式能以动画形式从右侧推出,同时去掉闪屏。

基于这两个目标,我把官网的集成方案做了改动,同时官网骁骑同学帮忙写了5+ 内核初始化的方案,在此万分感谢骁骑!

示例代码github地址:https://github.com/hehelhx/widgetHtml5Plus

继续阅读 »

经过半个月的集成过程,终于集成好了一个示例,
本人看了几个帖子做的集成,分别是:
1、官方发布的集成方案:
http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/81
2、网友给的集成方案(相对比较实用):
http://ask.dcloud.net.cn/article/526?notification_id-76397__item_id-3005

在集成过程中,我遇到了几个问题,在社区里提问了,官方骁骑同学帮忙解答了,这里要感谢骁骑同学。
http://ask.dcloud.net.cn/question/19108

我做集成方案的目标主要有两点:
1、不希望每次打开webapp都重新初始化5 内核,能做到5 内核初始化一次后,每次都可以重用5 内核的实例,
这样既省去了内核初始化的过程,又加快了webapp加载的速度;这样做还有一个好处,就是可以集成多个webapp,同时共用一个5 内核实例。 我的示例代码里面只集成了一个webapp。
2、webapp页面打开方式能以动画形式从右侧推出,同时去掉闪屏。

基于这两个目标,我把官网的集成方案做了改动,同时官网骁骑同学帮忙写了5+ 内核初始化的方案,在此万分感谢骁骑!

示例代码github地址:https://github.com/hehelhx/widgetHtml5Plus

收起阅读 »

plus.nativeObj.View解析

nativeObj

HBuilder7.2起,提供了plus.nativeObj.View,简称nview,http://html5plus.org/doc/zh_cn/nativeobj.html,它是一个灵活的底层组件,可以通过js控制样式的原生画布,写字、贴图、做动画,它不属于dom,可盖在webview和各种原生控件上面。
业内有些人认为HTML5渲染不敌原生渲染,确实在非预载的情况下HTML渲染慢于原生,那nview其实就是纯原生渲染了,nview的出现,补齐了HTML5的短板,满足了对体验有苛刻要求的开发者。
合理运用nview的应用,其加载速度已经毫无逊色于原生应用,这里有些视频对比http://ask.dcloud.net.cn/article/12576

nview可灵活运用于多种情况。
举例:

  1. 更高性能的窗体切换动画
    我们知道div动画效果不好,webview的动画效果要好很多,但追求极致的话,nativeobj的动画是效果最好的。
    从HBuilder8.8起,提供了subnview。加载一个webview时,可以把webview的界面部分原生化。这样动画期间,其实webview是不渲染不移动的,移动的是原生绘制的subnview。
    subnview绘制极快,可以在100毫秒渲染,所以动画期间就能看到内容。而普通HTML文件渲染不预载的话是无法在100毫秒渲染的。
  2. 始终悬浮在webview上的圆球按钮
  3. 使用nativeObj.view来做title,不再使用父子双webview,节省更多内存资源,提升加载速度。此需求已经于HBuilder8.8起封装为webview的titleNView,可以在创建webview时配置一个参数,就可以生成一个nview的title,同时这个nview的title也可以继续使用nview的api进行文字图片的绘制。参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles
  4. 自定义原生控件
    扫码、地图...很多HTML5+里提供的原生控件,之前是难以自定义界面的,需要使用github上的5+runtime代码自己改源码、本地打包新引擎。有了nview,可以自由的在这些原生控件上贴图、写字、增加按钮,实现界面的自定义。
  5. 全屏遮罩
    子webview里的popover,弹出时无法全屏遮罩,其实我们可以不用popover的遮罩,直接用plus.nativeObj.View在popover四周贴蒙灰半透明图。
  6. webview选项卡上面多一个弧形
    以前,下图样式通过5+的webview选项卡并不好实现,或者改用div选项卡,或者在中间的webview底部fix一个图。

现在你可以创建一个原生的view放到选项卡中间,然后把圆球图贴进去,这个view是可以跨越webview的边界限制的。具体参考这个文章http://ask.dcloud.net.cn/article/12602

plus.nativeObj.View还支持点击事件,还可以在图上继续贴图,应用场景非常多。
plus.nativeObj.View可以盖在webview上面,从HBuilder7.3起,view还支持内嵌于webview,可跟随webview一起动。

plus.nativeObj.View的引入极大的提升了5+app的性能和ui自定义性,对父子双webview的使用产生很大替代作用,但注意mui封装过的父子webview是可以兼容到非5+的普通浏览器里使用的,而native view则必须依赖5+环境。

继续阅读 »

HBuilder7.2起,提供了plus.nativeObj.View,简称nview,http://html5plus.org/doc/zh_cn/nativeobj.html,它是一个灵活的底层组件,可以通过js控制样式的原生画布,写字、贴图、做动画,它不属于dom,可盖在webview和各种原生控件上面。
业内有些人认为HTML5渲染不敌原生渲染,确实在非预载的情况下HTML渲染慢于原生,那nview其实就是纯原生渲染了,nview的出现,补齐了HTML5的短板,满足了对体验有苛刻要求的开发者。
合理运用nview的应用,其加载速度已经毫无逊色于原生应用,这里有些视频对比http://ask.dcloud.net.cn/article/12576

nview可灵活运用于多种情况。
举例:

  1. 更高性能的窗体切换动画
    我们知道div动画效果不好,webview的动画效果要好很多,但追求极致的话,nativeobj的动画是效果最好的。
    从HBuilder8.8起,提供了subnview。加载一个webview时,可以把webview的界面部分原生化。这样动画期间,其实webview是不渲染不移动的,移动的是原生绘制的subnview。
    subnview绘制极快,可以在100毫秒渲染,所以动画期间就能看到内容。而普通HTML文件渲染不预载的话是无法在100毫秒渲染的。
  2. 始终悬浮在webview上的圆球按钮
  3. 使用nativeObj.view来做title,不再使用父子双webview,节省更多内存资源,提升加载速度。此需求已经于HBuilder8.8起封装为webview的titleNView,可以在创建webview时配置一个参数,就可以生成一个nview的title,同时这个nview的title也可以继续使用nview的api进行文字图片的绘制。参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles
  4. 自定义原生控件
    扫码、地图...很多HTML5+里提供的原生控件,之前是难以自定义界面的,需要使用github上的5+runtime代码自己改源码、本地打包新引擎。有了nview,可以自由的在这些原生控件上贴图、写字、增加按钮,实现界面的自定义。
  5. 全屏遮罩
    子webview里的popover,弹出时无法全屏遮罩,其实我们可以不用popover的遮罩,直接用plus.nativeObj.View在popover四周贴蒙灰半透明图。
  6. webview选项卡上面多一个弧形
    以前,下图样式通过5+的webview选项卡并不好实现,或者改用div选项卡,或者在中间的webview底部fix一个图。

现在你可以创建一个原生的view放到选项卡中间,然后把圆球图贴进去,这个view是可以跨越webview的边界限制的。具体参考这个文章http://ask.dcloud.net.cn/article/12602

plus.nativeObj.View还支持点击事件,还可以在图上继续贴图,应用场景非常多。
plus.nativeObj.View可以盖在webview上面,从HBuilder7.3起,view还支持内嵌于webview,可跟随webview一起动。

plus.nativeObj.View的引入极大的提升了5+app的性能和ui自定义性,对父子双webview的使用产生很大替代作用,但注意mui封装过的父子webview是可以兼容到非5+的普通浏览器里使用的,而native view则必须依赖5+环境。

收起阅读 »

上市公司子公司招聘高级移动APP研发(HTML5)

mui HBuilder HTML5 招聘
    我们公司是由两家上市公司合资成立的子公司,项目前景很好,具有核心垄断资源,现需要招聘高级移动APP研发经理(HTML5),请注意,我们需要的是真正的高手,非诚勿扰,诚邀您的加盟!   

    **联系方式:** QQ 4258336(验证信息请注明:应聘H5)  

    **薪资:** 20K起  
    **工作地点:** 北京望京  
    **岗位职责:**  
        1、领导技术团队成员开发移动端APP;  
        2、负责移动端APP的构架设计及核心代码编写;  
        3、配合产品经理和UI设计师,研究并改善用户体验;  
        4、维护和优化现有系统。  
    **任职要求:**  
        1、最少3年以上移动端APP开发经验,必须有至少2款移动APP开发经验;  
        2、精通并使用符合W3C标准的Html5、JavaScript和CSS3等相关技术  
        3、熟悉HTTP协议以及JQuery、JSON、AJAX等前端WEB技术;  
        4、熟练使用Hbuilder开发工具,熟悉5+Runtime、Mui框架开发,熟悉其他Hybrid流行框架如:Cordova/PhoneGap、AppCan、jQuery Mobile等;  
        5、熟悉Android和iOS的知识,除了多线程,文件存储等基础知识,Android需要熟练的掌握WebView、WebSettings、WebChromeClient、WebClient四大对象。iOS需要熟练掌握UIWebView对象;  
        6、对响应式布局、动态交互特效、页面性能优化、浏览器兼容问题有一定经验,有微信相关开发经验者优先。  
继续阅读 »
    我们公司是由两家上市公司合资成立的子公司,项目前景很好,具有核心垄断资源,现需要招聘高级移动APP研发经理(HTML5),请注意,我们需要的是真正的高手,非诚勿扰,诚邀您的加盟!   

    **联系方式:** QQ 4258336(验证信息请注明:应聘H5)  

    **薪资:** 20K起  
    **工作地点:** 北京望京  
    **岗位职责:**  
        1、领导技术团队成员开发移动端APP;  
        2、负责移动端APP的构架设计及核心代码编写;  
        3、配合产品经理和UI设计师,研究并改善用户体验;  
        4、维护和优化现有系统。  
    **任职要求:**  
        1、最少3年以上移动端APP开发经验,必须有至少2款移动APP开发经验;  
        2、精通并使用符合W3C标准的Html5、JavaScript和CSS3等相关技术  
        3、熟悉HTTP协议以及JQuery、JSON、AJAX等前端WEB技术;  
        4、熟练使用Hbuilder开发工具,熟悉5+Runtime、Mui框架开发,熟悉其他Hybrid流行框架如:Cordova/PhoneGap、AppCan、jQuery Mobile等;  
        5、熟悉Android和iOS的知识,除了多线程,文件存储等基础知识,Android需要熟练的掌握WebView、WebSettings、WebChromeClient、WebClient四大对象。iOS需要熟练掌握UIWebView对象;  
        6、对响应式布局、动态交互特效、页面性能优化、浏览器兼容问题有一定经验,有微信相关开发经验者优先。  
收起阅读 »

web封装,外部页面跳转,href按返回键 返回 后退问题的解决。

在封装一个简单的手机网站时,或者访问外部链接,按返回键失效
因在一个webview 中打开多个外部链接,h5+或本平台 返回键针对的是一个webview的释放回收。

解决办法:
外部页面或网站,引入mui.js 并 mui.init(); 初始化 ,则此页面 按返回键 有反应。也就是让外部页面也在mui平台下运行。
其测试,本部分代码 ,与浏览器请求页面不会报错,都可以正常访问。

有的页面没法引入 mui.js ,目前本人还没有发现好的解决办法。

继续阅读 »

在封装一个简单的手机网站时,或者访问外部链接,按返回键失效
因在一个webview 中打开多个外部链接,h5+或本平台 返回键针对的是一个webview的释放回收。

解决办法:
外部页面或网站,引入mui.js 并 mui.init(); 初始化 ,则此页面 按返回键 有反应。也就是让外部页面也在mui平台下运行。
其测试,本部分代码 ,与浏览器请求页面不会报错,都可以正常访问。

有的页面没法引入 mui.js ,目前本人还没有发现好的解决办法。

收起阅读 »

mui框架api

mui官网api少的可怜,相当于没有,我想知道有没有大神有更详细点的api,让我参考一下,本人实在是菜鸟中的菜鸟,这样用mui框架实在是寸步难行,求大神指点指点,膝盖已奉上

mui官网api少的可怜,相当于没有,我想知道有没有大神有更详细点的api,让我参考一下,本人实在是菜鸟中的菜鸟,这样用mui框架实在是寸步难行,求大神指点指点,膝盖已奉上

双指放大缩小问题(不需要第三方

看到很多去年甚至前年没有回答的双指放大缩小问题,自己折腾了半天实现了,感觉挺简单的,为什么没人回答呢,所以我把自己弄出来的写出来给大家瞅瞅。是原生的mui解决,不需要第三方

<meta name="viewport" content="user-scalable=yes,width=device-width,minimum-scale=1.0"> 

先写这个,重点是这句user-scalable=yes
引入mui.js之后

var wv =null;  
mui.plusReady(function()  
{  
  var wv=plus.webview.currentWebview();  
  wv.setStyle({'scalable':'true'});  
 });  

在文件底下写js,直接把上面这段copy,有bug的话估计也是括号之类的问题,然后运行吧
基本上这样就能实现了
对大家的有帮助的话请务必给我回复鼓励,靴靴

继续阅读 »

看到很多去年甚至前年没有回答的双指放大缩小问题,自己折腾了半天实现了,感觉挺简单的,为什么没人回答呢,所以我把自己弄出来的写出来给大家瞅瞅。是原生的mui解决,不需要第三方

<meta name="viewport" content="user-scalable=yes,width=device-width,minimum-scale=1.0"> 

先写这个,重点是这句user-scalable=yes
引入mui.js之后

var wv =null;  
mui.plusReady(function()  
{  
  var wv=plus.webview.currentWebview();  
  wv.setStyle({'scalable':'true'});  
 });  

在文件底下写js,直接把上面这段copy,有bug的话估计也是括号之类的问题,然后运行吧
基本上这样就能实现了
对大家的有帮助的话请务必给我回复鼓励,靴靴

收起阅读 »