页面做的比较糙 大家多见谅 看大家发的比较少 就算是抛砖引玉了

首页

具体的大家下了自己看吧 有什么问题留言

一、准备
1> 在http://ask.dcloud.net.cn/article/103下载最新Android平台的5+SDK的demo以及相关文件
二、创建项目
1> 用Hbuilder创建一个自己的项目
2> 用Android studio创建一个demo（我用的是as2.0）
三、最核心步骤（copy）
1> 如何将自己的Hbuilder项目放入andrid studio项目
在as项目中创建目录：src/main/assets/apps/对应的id/www/项目内容，并将hb项目下面的代码copy过来，详情见图

此时需要注意的是：“src/main/assets/apps/对应的id/www/项目内容”中的“对应的id”要求与hb项目中manifest.json文件中id一致。

2> 导入需要的.jar等（这地方我就有些地方直接摘抄别人的了哈，懒得打字了）

1. src/main/assets/data 从 Android-SDK/SDK/assets/data 拷贝来的，此处有几个值需要对应，如图：
   
   
2. src/main/java/io/dcloud/RInformation.java 从 Android-SDK\SDK\src 拷贝来的
3. src/main/res 从 Android-SDK\SDK\res 拷贝来的
   ps: 1.5下面只有一个drawable,drawable-hapi等几个长得很像的文件夹不要放在mipmap-hdpi、mipmap-mdpi文件夹里，重新新建这几个文件
   夹。values文件夹下的文件，你自己没有的就直接copy过来，自己有的（比如strings.xml），就把其中的代码新增进来。
4. 将Android-SDK\HBuilder-Integrate下的libs中的东西copy到as项目的libs中，此处注意：除了android-support-v4.jar（如果你项目没有，那
   就别复制过去了，我复制过去会报错）。
5. 把Android-SDK\HBuilder-Integrate\src\com\HBuilder\integrate\SDK_WebApp.java 拷贝到eclipse项目的src包名下,并修改ppBasePath, 为
   assets的app路径，如图：
   
   
6. 修改启动页面，并且将Android-SDK\HBuilder-Integrate\AndroidManifest.xml中的权限全部copy到你的AndroidManifest.xml中（我是图省事
   哈，这样不专业，嘿嘿~），如图：

以上步骤后，就可以实现在Android studio中运行你的项目了！eclipse的与android studio集成类似！~~~本人才开始用Dcloud，有问题希望大家多多指点

重要说明

鉴定短信验证码仅能在App端实现，其他端无法使用。但在App端，更为合理的方式其实是使用一键登录。即无需短信验证码，一键登录获取真实的手机号。
一键登陆的体验比短信验证码好很多，不需等待验证码、输入验证码，并且一键登陆的费用比短信便宜不少。
所以强烈推荐改用一键登陆，uni一键登陆的文档另见：https://uniapp.dcloud.net.cn/univerify

----------------------------------如不使用一键登陆，请继续阅读下文----------------------------------

目前很多App都选择使用手机号注册或手机号加动态验证码登录的方式，此时用户需要等待短信验证码，然后手动填写，再点击注册或登录按钮，完成注册登录操作。

本文介绍如何利用native.js，实现系统监听短信验证码并帮助用户自动填写验证码输入框，自动提交登录表单。

备注：目前仅支持Android平台

代码主要分为两个部分：

• 标准短信监听部分
• 个性短信内容及登录界面适配部分

标准短信监听部分
该部分为标准函数，开发者基本无需修改；

var callbacks = [];  
var receiver;  
var filter;  
var main;  
var isInit = false;  
var isRegistered = false;  
var isOlderVersion = false;  

//plusReady封装，若使用mui，可直接使用mui.plusReady()方法；  
var plusReady = function(){  
     if (window.plus) {  
        callback();  
    } else {  
        document.addEventListener("plusready", function() {  
            callback();  
        }, false);  
    }  
}  

/**  
* 初始化  
*/  
var init = function(callback) {  
    //仅支持Android版本  
    if (plus.os.name !== 'Android') {  
        return;  
    }  
    try {  
        var version = plus.runtime.innerVersion.split('.');  
        isOlderVersion = parseInt(version[version.length - 1]) < 22298;  
        main = plus.android.runtimeMainActivity();  
        var Intent = plus.android.importClass('android.content.Intent');  
        var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
        var SmsMessage = plus.android.importClass('android.telephony.SmsMessage');  
        var receiverClass = 'io.dcloud.feature.internal.reflect.BroadcastReceiver';  
        if (isOlderVersion) {  
            receiverClass = 'io.dcloud.feature.internal.a.a';  
        }  
        filter = new IntentFilter();  
        var onReceiveCallback = function(context, intent) {  
            try {  
                var action = intent.getAction();  
                if (action == "android.provider.Telephony.SMS_RECEIVED") {  
                    var pdus = intent.getSerializableExtra("pdus");  
                    var msgs = [];  
                    for (var i = 0, len = pdus.length; i < len; i++) {  
                        msgs.push(SmsMessage.createFromPdu(pdus[i]));  
                    }  
                    for (var i = 0, len = callbacks.length; i < len; i++) {  
                        callbacks[i](msgs);  
                    }  
                }  
            } catch (e) {}  
        }  
        receiver = plus.android.implements(receiverClass, {  
            a: onReceiveCallback,  
            onReceive: onReceiveCallback  
        });  
        filter.addAction("android.provider.Telephony.SMS_RECEIVED");  
        callback && callback();  
    } catch (e) {}  
}  

//注册短信监听  
var register = function(callback) {  
    callbacks.push(callback);  
    if (!isInit) {  
        isInit = isRegistered = true;  
        plusReady(function() {  
            init(function() {  
                setTimeout(function() {  
                    //                  console.log('registerReceiver');  
                    try {  
                        if (isOlderVersion) {  
                            main.a(receiver, filter);  
                        } else {  
                            main.registerReceiver(receiver, filter); //注册监听  
                        }  
                    } catch (e) {}  
                }, 300);  
            });  
        });  
    } else if (!isRegistered) {  
        //      console.log('registerReceiver');  
        try {  
            if (isOlderVersion) {  
                main.a(receiver, filter);  
            } else {  
                main.registerReceiver(receiver, filter); //注册监听  
            }  
        } catch (e) {}  
    }  
};  
//注销监听，在登录成功或从登录页跳转到其它页面后调用  
var unregister = function(callback, remove) {  
    for (var i = 0, len = callbacks.length; i < len; i++) {  
        if (callbacks[i] === callback) {  
            callbacks.splice(i, 1);  
        }  
    }  
    if (remove && !callbacks.length) {  
        if (main && isRegistered) {  
            try {  
                if (isOlderVersion) {  
                    main.a(receiver);  
                } else {  
                    main.unregisterReceiver(receiver);  
                }  
            } catch (e) {}  
            isRegistered = false;  
            //          console.log('unregisterReceiver');  
        }  
    }  
};

个性短信内容及登录界面适配部分
这部分开发者需要根据具体App或登录页面，修改短信匹配内容和验证码输入框选择器，参考如下注释

//验证码匹配规则，需要根据实际站点匹配  
var codeRegex = /[0-9]{6}/g;  

var handleSMS = function(msgs) {  
    for (var i = 0, len = msgs.length; i < len; i++) {  
        var content = msgs[i].getDisplayMessageBody();  
        //匹配短信内容，若短信内容包含“XX网”，则认为初步匹配成功  
        if (~content.indexOf('XX网')) {  
            //匹配验证码规则，比如包含6位数字  
            var matches = content.match(codeRegex);  
            if (matches && matches.length) {  
                var code = matches[0];  
                //验证码输入框控件，需根据实际页面修改选择器  
                var codeElem = document.querySelector('.login-view form input[type="password"]');  
                if (codeElem) {  
                    codeElem.value = code;  

                    //TODO 这里可以取消短信监听  

                    //模拟表单提交，需根据实际页面修改选择器  
                    document.querySelector('.login-view form button[type="submit"]').click();  
                    plus.nativeUI.toast('获取短信验证码成功，自动登录..');  

                }  
                break;  
            }  
        }  
    }  
};  

//登录页面注册短信监听事件  
register(handleSMS);

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

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

传统的应用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中给手机京东流应用导流，产生的订单你就可以拿到提成。

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

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

经过半个月的集成过程，终于集成好了一个示例，
本人看了几个帖子做的集成，分别是：
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

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），请注意，我们需要的是真正的高手，非诚勿扰，诚邀您的加盟！   

    **联系方式：** 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、对响应式布局、动态交互特效、页面性能优化、浏览器兼容问题有一定经验，有微信相关开发经验者优先。