运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevToos Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标。

让我们开始吧

在这篇指南中，我们会用Performance工具去分析一个现有的在线DEMO，然后教会你怎么去分析，从而找到性能瓶颈。

1.打开Chrome的匿名模式。匿名模式可以保证Chrome在一个相对干净的环境下运行。比如说，你安装了许多chrome插件，这些插件可能会影响我们分析性能表现。
2.在匿名模式下打开右边这个链接，DEMO，这个网页就是我们要用来分析的DEMO。这个页面里都是很多上下移动的蓝色小方块。
3.按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 来打开Devtools

模拟移动设备的CPU

移动设备的CPU一般比台式机和笔记本弱很多。当你想分析页面的时候，可以用CPU控制器（CPU Throttling）来模拟移动端设备CPU。

1.在DevTools中，点击 Performance 的 tab。
2.确保 Screenshots checkbox 被选中
3.点击 Capture Settings（⚙️）按钮，DevTools会展示很多设置，来模拟各种状况
4.对于模拟CPU，选择2x slowdown，于是Devtools就开始模拟两倍低俗CPU

设置DEMO

为了使得这个DEMO有相对统一的运行表现（不同的读者，机器的性能千差万别）。这个DEMO提供了自定义功能，用来确保这个DEMO的统一表现。

一直点击 Add 10 这个按钮直到你能很明显看到蓝色小方块移动变慢，在性能比较好的机器上，大概要点击20次左右。
点击 Optimize按钮，你会发现蓝色小方块会变的很快而且动画变得平滑。
点击 un-optimize 按钮，蓝色小方块又会变成之前的模样。
记录运行时性能表现

在之前的DEMO中，当你运行优化模式的时候，蓝色小方块移动地非常快。为什么呢？明明两个模式都是移动了同样数量的小方块而且移动的时间也一样。那么现在我们在Performance界面下录制下发生的一切，并且学习如何分析这个记录，从而找到非优化模式下的性能瓶颈。

1.在DevTools中，点击 Record 。这时候Devtools就开始录制各种性能指标

1.等待几分钟
2.点击Stop按钮，Devtools停止录制，处理数据，然后显示性能报告

wow，看起来有非常多的数据，别害怕，我们一个一个来介绍

分析报告

一旦你得到了页面的性能表现报告，那么就可以用它来分析页面的性能，从而找到性能瓶颈。

分析每一秒的帧

FPS（frames per second）是用来分析动画的一个主要性能指标。能保持在60的FPS的话，那么用户体验就是不错的。

1.观察FPS图表，如果你发现了一个红色的长条，那么就说明这些帧存在严重问题，有可能导致非常差的用户体验。一般来说，绿色的长条越高，说明FPS越高，用户体验越好。

1.就在FPS图表下方，你会看到CPU图表。在CPU图表中的各种颜色与Summary面板里的颜色是相互对应的，Summary面板就在Performance面板的下方。CPU图表中的各种颜色代表着在这个时间段内，CPU在各种处理上所花费的时间。如果你看到了某个处理占用了大量的时间，那么这可能就是一个可以找到性能瓶颈的线索。

1.把鼠标移动到FPS，CPU或者NET图表之上，DevToos就会展示这个时间点界面的截图。左右移动鼠标，可以重发当时的屏幕录像。这被称为scrubbing, 他可以用来分析动画的各个细节。

1.在Frames图表中，把鼠标移动到绿色条状图上，Devtools会展示这个帧的FPS。每个帧可能都在60以下，都没有达到60的标准。

当然这个对于DEMO，可以相当容易观察到性能的问题。但是在现实使用场景下，就不是那么容易观察到了。所以要把常常使用这些工具来分析页面。

小功能：显示实时FPS面板

另外一个好用的小工具就是实时FPS面板，它可以实时展示页面的FPS指标

1.按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打开命令菜单
2.输入Rendering，点选Show Rendering
3.在Rendering面板里，激活FPS Meter。FPS实时面板就出现在页面的右上方。

1.关闭FPS Meter只要按下Escape就可以了。这篇指南里暂时用不上这个功能。
定位瓶颈

现在已经确定到这个页面的动画性能表现不太好，那么下一步就是找到为什么

1.注意Summary面板，你会发现CPU花费了大量的时间在rendering上。因为提高性能就是一门做减法的艺术，你的目标就是减少rendering的时间

1.展开Main图表，Devtools展示了主线程运行状况。X轴代表着时间。每个长条代表着一个event。长条越长就代表这个event花费的时间越长。Y轴代表了调用栈（call stack）。在栈里，上面的event调用了下面的event。

1.在性能报告中，有很多的数据。可以通过双击，拖动等等动作来放大缩小报告范围，从各种时间段来观察分析报告。

1.在事件长条的右上角出，如果出现了红色小三角，说明这个事件是存在问题的，需要特别注意。
2.双击这个带有红色小三角的的事件。在Summary面板会看到详细信息。注意reveal这个链接，双击它会让高亮触发这个事件的event。如果点击了app.js:94这个链接，就会跳转到对应的代码处。

1.在app.update这个事件的长条下方，有很多被触发的紫色长条。如果放大这些事件长条，你会看到它们每个都带有红色小三角。点击其中一个紫色事件长条，Devtools在Summary面板里展示了更多关于这个事件的信息。确实，这里有很多reflow的警告。
2.在summary面板里点击app.js:70链接，Devtools会跳转到需要优化的代码处

OK！Devtools里面还有很多很多指标需要你去探索，但是，对于怎么用Devtools去分析网页的运行时性能表现，你现在已经有了一个基本的概念。

译者博客：NIC's UTOPIA

原文出处：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

mui用openwindow打开新页面请求网络资源出现白屏

App打包上线后，用户活跃度如何？留存如何？这就需要分析统计数据了。

wap2app支持三种方式上报查看统计数据，分别是：

• DCloud统计
• 友盟统计
• 开发者自定义统计

本教程对如上三种方式分别介绍。

DCloud uni统计

DCloud提供了wap2app应用的默认统计，登录DCloud开发者中心，可以查看自己创建发布的应用列表，选择目标应用，可以查看该应用的所有统计数据，界面如下：

DCloud统计分为5+应用版、流应用版两种统计数据。

5+应用版

通过HBuilder云端打包生成的ipa/apk安装包，统称为5+应用版，5+ 应用版支持查看如下统计数据：

• 日活趋势：支持当日日活、当日总启动次数两个维度，支持iOS/Android分平台查看；

• 启动时间：支持启动时间分档查看（见下图），可针对启动时间较长的终端重点优化测试；

• 崩溃日志：支持原生崩溃（引擎崩溃）、前端崩溃两个维度，支持iOS/Android分平台查看

流应用版

wap2app发布到流应用平台后，相关统计数据在“流应用版”菜单下查看，支持查看应用趋势、应用来源、更新记录三项。
应用趋势支持查看当日新增下载、激活、总发行量、日活、总启动次数、总独立设备等维度数据，如下图：

应用来源分别从下载、启动维度，展示用户来源占比，通过对比可以分析出推广效果更好的渠道，从而优化推广方案，提升推广转化率，如下图：

Tips:M站引入gostream.js，用户通过浏览器访问M站时，会启动流应用，将wap用户低成本转化为App用户，此时应用启动来源就是“浏览器”；更多gostream.js的介绍，请参考流量转换 - wap2app教程。

流应用更新记录：保存开发者发布到正式服务器的流应用资源及更新说明，开发者可以下载历史版本的资源代码到本地。

友盟统计

wap2app云端打包已集成友盟统计，参考友盟统计配置教程，配置参数后重新提交云端打包即可。若要查看统计数据，则需要登录友盟官网，选择目标应用，查看对应的统计数据，如下图：

Tips：友盟统计仅对打包成ipa/apk的独立安装包有效果，在流应用下无效；流应用的统计数据，需要在DCloud开发者中心查看。

开发者自定义统计

开发者也可以编写Javascript代码，向自己的服务器上报数据，实现自定义统计报表。

上报统计数据的代码建议在app.js的onLaunch事件属性中编写，如下是一个示例代码：

/**  
 * 当wap2app初始化完成时，会触发 onLaunch  
 * @param {Object} options  
 */  
onLaunch: function(options) {  
    //TODO wap2app其它初始化代码  

    /************上报用户数据开始********** */  
    var url = "http://www.example.com/collect/data";//服务端接口地址  
    var req = {//需要上报的数据  
        "appid": plus.runtime.appid,  
        "imei":plus.device.imei,//设备的国际移动设备身份码  
        "version": plus.runtime.version,//应用版本号  
        "type":navigator.userAgent.indexOf('StreamApp')>-1?"stream":"plus",//应用类型：流应用（stream）、5+应用（plus）  
        "launcher":plus.runtime.launcher //应用启动来源：应用市场、桌面快捷方式、浏览器url scheme等；  
    };  
    //TODO 开发者可以补充更多想要的数据，比如当前用户网络  

    wap2app.ajax.post(url, req, function(rsp) {  
        if(rsp && rsp.status){  
            //上报成功回调  
        }              
    });  
    /************上报用户数据结束********** */  
}

服务端接收数据后保存数据库，定时（或实时）生成数据报表即可。

之前的代码用new plus.maps.Map好好的，Huilder更新以后，调用地图时放大缩小拖动几次很大几率会卡死，点APP任何地方都没反应，必须重启

一直没有找到一款适合在MUI上的播放器，网上很多都是基于JQ的播放，样式不好看，也难修改，不好用难于兼职安卓和苹果手机，
实在没办法，只能亲自操刀，自己写一个播放器了，给遇到我一样情况的朋友们，封装起来只直调用，大家可以自由修改

没有测试过，当网络缓慢时，视频加载出现加载提示框，有遇到问题的小伙伴，可以分享处理经验

新增：手势控制 左边上下滑动控制音量，右边上下滑动控制亮度， 左右滑动 控制前进后退， 可以播放m3u8格式视频

20180517：新增： 支持点击播放就全屏播放视频， 支持在浏览器和微信上播放视频，支持使用IOS系统自带的播放器，大家可以根据自己的需求设置

20180620：支持同一个页面切换视频的方法，新增可以禁止拖动调节,音量和亮度，是否显示全屏按钮, IOS支持强制全屏播放

**20180913：修复IOS对.m3u8 视频的兼容性

运行环境： MUI 5+ 和浏览器或微信

微信扫一扫，可以浏览微信里视频播放例子

1. android， 要开启硬件加速，manifest.json文件加 "hardwareAccelerated":true

   
   "google": {       
      "hardwareAccelerated":true  
            ｝  

或者创建文件时加
// true表示开启Webview的硬件加速，false表示关闭Webview的硬件加速
var webview = plus.webview.create( "url", "id",{hardwareAccelerated:true});
webview.show();

2. IOS iphone, 加 "allowsInlineMediaPlayback": true 禁止视频自动弹出播放，去掉原生播放控件
```javascript  

"plus":{  
    "allowsInlineMediaPlayback": true  
}  

3.调用

//#video_Container 是视频区域DIV的ID  

       //初始化插件  
var htmlvideo=Html5video("#video_Container",  
{  
 title:"新坦结衣Gakki雪肌精广告", //视频标题，当全屏时会显示  
 url:"2017123101.mp4", //支持本地视频和网络视频，格式MP4  
 img:"img/002.jpg", //视频截图封面  
 time:"02:30", //视频总时间以分钟单位，当网络缓慢时，没办法及时加载出来，如已知可以填写，可不填。  
 autoplay:false, //是否自动播放视频  
 isMobile:false, //是否开启当处于移动网络时，提示用户是否继续播放视频。,不支持浏览器环境  
 isFull:true, //是否点击播放就全屏显示  
 iospay:false, //如果是IOS系统是否采用苹果系统自带播放器, 可以在浏览器或微信中，全屏观看视频  
 drag:true, //禁止拖动,调节,音量和亮度  
 isfull:true, //是否显示全屏按钮  
 prompt:function(video) //当开启isMobile时,这里可以写提示用户的内容,h5+环境才有效  
 {    
               mui.confirm('你当前处于移动手机网络将会消耗手机流量，是否继续播放？', '提示',["取消","确定"], function(e)  
               {  
                    if(e.index == 1)  
                    {  
                      video.play();   
                    }   
              },"div");         
 }  
});   

新增了，同一页面，可以切换视频播放

mui("body").on("tap","#openvideo",function()  
{  
//切换视频播放  
htmlvideo.getplayUrl({url:"  ",img:"  ",title:" "});  
});

新版视频播放器
http://www.html5-app.com/show/115

目前该版本播放器，不再维护了，如有任何问题，请自行修改源代码自行解决。

一个非常常用的方法，手势滑动控制窗口改变。
可以在不引入mui等其他插件的情况下，单独使用
可以改变底部选项卡，
也可以用来手势关闭单页面
第一次发分享，好激动…………

//因为手机性能的问题，绑定事件，可能会发生在创建的窗口之前，
//我的做法是，使用setTimeout，使他延迟绑定
//创建窗口的部分省略……，想看创建窗口部分代码的人，留言/评论

function move (webviewID,dom,classname){  
      /*    

     *  第一个参数为webview的id数组，  
     *   
     *  第二个参数为需要改变的导航，获取好的dom数组  
     *   
     *  第三个需要改变的classname  
     *   
     *  如果只有一个参数，代表关闭当前窗口，  
     * 请传入窗口id  
     *   
     * */  
var i;  
    if(arguments.length>1){  
        for(i=0; i<webviewID.length ; i++){  
            if(i+1 < webviewID.length){  
                mov(get(webviewID[i]),get(webviewID[i+1]),dom[i],dom[i+1],"rtl");                 
            }  
            if(i-1 >= 0){  
                mov(get(webviewID[i]),get(webviewID[i-1]),dom[i],dom[i-1],"ltr")                  
            }  
        }  
    }else {  
        get(webviewID).drag(  
            {direction:"ltr",moveMode:"followFinger"},  
            {moveMode:"follow"},  
            function(e){  
                if(e.result){  
                    get(webviewID).back();  
                }  
            }  
        )  
    }  

    function get (d){  
        return plus.webview.getWebviewById(d);  
    }  
    function mov(w, w1, d, d1, s) {  
        w.drag({  
                direction: s,  
                moveMode: "followFinger"  
            }, {  
                view: w1,  
                moveMode: "follow"  
            },  
            function(e) {  
                if(e.result == true) {  
                    d.classList.remove(classname);  
                    d1.classList.add(classname);  
                }  
            }  
        )  
    }  
}

开发安卓离线打包时，使用下面的代码配置状态栏透明：

"statusbar": {  
    "immersed": true  
},

发现一个问题：只有安卓4.4可以状态栏透明，高版本安卓状态栏反而不能透明了，而是黑底。经过一番折腾之后，终于改好了，原来是AndroidManifest里面<uses-sdk android:targetSdkVersion="21" android:minSdkVersion="17" />的android:targetSdkVersion没写，加上之后就都透明了。

很早之前写的代码了，突然觉得值得分享，就有了此文。
这里讲的包装ajax请求就为了两个方面，
1、将所有ajax请求全部加上loading效果；
2、省去一些常用的dataType: "json",type: "post"属性，改成默认；
3、如果请求出现了逻辑上需要（需与后台有关）提示的信息时，可直接弹出提示；
另外，调用方式与mui的ajax一致，由于之前一直使用于jquery的ajax包装，改成兼容mui调用一致的方式。
代码比较简单，使用方式为：
mui.ajaxRequest({
//......
});
其中wait参数为false则不添加loading效果，参考如下：

/**  
 * mui.ajaxRequest  
 * 封装mui.ajax请求，调用方式与一致  
 */  
(function($, doc) {  
    mui.extend({  
        ajaxRequest: function(url , options){  
            var defaults = commonDefaules(options);  
            var options = mui.extend(defaults, options);  
            options.beforeSend = defaults.onBeforeSend;  
            options.success = defaults.onSuccess;  
            options.error = defaults.onError;  
            mui.ajax(url , options);  
        }  
    })  

    function commonDefaules(options){  
        //默认参数定义  
        var defaults = {  
            dataType: "json",  
            type: "post",  
            timeout: 10000,  
            wait: true,  
            waitMessage: "努力奔跑中，等等我...",  
            onBeforeSend : function(xhr){  
                if(defaults.wait == true){  
                    showLoading(defaults.waitMessage);  
                }  
                if(options.beforeSend){  
                    options.beforeSend(xhr);  
                }  
            },  
            onSuccess : function(data){  

                if(defaults.wait == true){  
                    hideLoading();  
                }  
                //也可用于后台验证失败时的提示信息  
                if(data && data.result && (data.result === "input")){  
                    plus.nativeUI.alert(data.message , function(){} , "提示：" , "取消");  
                    return;  
                }  
                if(options.success){  
                    options.success(data);  
                }  
            },  
            onError : function(a , b , c){  
                hideLoading();  
                if(options.error){  
                    options.error(a , b , c);  
                }  
            }  
        };  
        return defaults;  
    }  

    function showLoading(msg){  
        plus.nativeUI.showWaiting(msg , {  
            /*round: "1px", //圆角*/  
            style: "white",  
            back:"none",//不响应返回按钮事件  
            background: "#66CDAA",  
            /*background:"rgba(110,120,50,1)",*/  
            loading:{  
                display:"inline" ,  
                icon:"/images/waiting.png"  
            }  
        });  
    }  

    function hideLoading(){  
        plus.nativeUI.closeWaiting();  
    }  
}(mui, document));

本文以Android Studio为例讲解如何一步步创建一个最精简的5 SDK工程，如果还需要在工程中添加更多的扩展插件，可以参考SDK内附带的Feature-Android.xls文件，文件中有扩展插件和需要添加的配置

1 创建Android原生工程
首先创建一个空的Android Studio工程
打开AndroidStudio点击File->New->New Project

然后一路点击“next”到下面这个页面点击“finish”即可

2 添加5 SDK需要使用的jar包到工程
原生工程中使用5 SDK必须要在工程中添加如下几个jar

• 需要加入到工程里的Jar 包
  nineoldandroid-2.4.0.jar
  pdr.jar
  my-imageloader.jar
  my-nineoldandroids-2.4.0.jar
  ui.jar
  nativeui.jar
  （需要用到别的包的话可以自行添加，我这边可能会添加了几个gif.jar等等的包）

1. 从SDK/libs目录下找到这几个文件并拷贝到工程的libs目录下

2. 添加成功后选中libs目录里的库文件，鼠标右键打开菜单，选择“Add As Library...”将填加到工程内的jar文件链接到工程里

3. 成功后静态库文件前会出现一个三角形的图标，我们还可以通过修改build.gradle文件修改引用的库文件。(这一步编译器会自动同步加完库后会自动添加，Build-Clean Project会同步)；
   

3 添加资源到工程

1. 在res目录上右键打开菜单，点击“Show in Explorer”打开res文件所在的目录
   

2. 删除目录下已有的目录，拷贝SDK/res目录下的全部目录到工程的res目录下
   

3. 选择project，在app->src->main目录下添加assets目录
   

4. 拷贝SDK/assets/目录下的data目录和res目录到工程的目录下

注意 fonts文件夹及其中的字体文件是供app中页面窗口标题栏控件左侧返回按钮使用的。

4 修改原生工程的Androidmanifest.xml文件
打开工程的AndroidManifest.xml文件

在AndroidManifest.XML文件中添加配置

1 修改application节点下

1 修改android:icon属性值为@drawable/icon
2 删除android:theme属性
3 删除allowBackup属性
4 添加android:largeHeap="true"
5 添加 android:name="io.dcloud.application.DCloudApplication"
6 添加android:allowClearUserData="true"

<application  
    android:allowClearUserData="true"  
    android:icon="@drawable/icon"  
    android:label="@string/app_name"  
    android:largeHeap="true"  
    android:name="io.dcloud.application.DCloudApplication" >  

2 添加文件支持的屏幕旋转方向

3 添加最低支持系统版本，5 sdk支持的最低系统版本为8，（注意：不要填写targetSDKVersion参数）

4 添加5 SDK必需引用的系统权限

<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:resizeable="true"
android:smallScreens="true"
/>
<uses-sdk android:maxSdkVersion="8"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.GET_TASKS"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
5 删除文件中原来配置的Activity

6 添加5 内核需要的Activity和service到AndroidManifest.xml文件

<activity
android:name="io.dcloud.PandoraEntry"
android:configChanges="orientation|keyboardHidden|keyboard|navigation"
android:label="@string/app_name"
android:launchMode="singleTask"
android:hardwareAccelerated="true"
android:theme="@style/TranslucentTheme"
android:screenOrientation="user"
android:windowSoftInputMode="adjustResize" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />  
        </intent-filter>  
    </activity>  
    <activity  
        android:name="io.dcloud.PandoraEntryActivity"  
        android:configChanges="orientation|keyboardHidden|screenSize|keyboard|navigation|mcc|mnc|fontScale"  
        android:hardwareAccelerated="true"  
        android:label="5+Debug"  
        android:launchMode="singleTask"  
        android:screenOrientation="user"  
        android:theme="@style/DCloudTheme"  
        android:windowSoftInputMode="adjustResize" >  
    </activity>  

    <service  
        android:name="io.dcloud.common.adapter.io.MiniServerService"  
        android:exported="true" />  

5 修改工程使用的源码

1. 删除创建工程时自动生成的源码。工程中使用5 SDK默认的Activity作为应用的入口Activity，所以如果没有原生开发的需求，则可以删除自动生成的源码文件。
   

2. 在java目录下添加io.dcloud包
   
   
   

3. 拷贝SDK\src\io\dcloud\Rinfomation.java文件到工程的io.dcloud包下
   

4. 根据工程的包名修改Rinfomation.java的import资源的包名，

如果需要引入NativeUI.模块需要import io.dcloud.feature.ui.nativeui.NativeUIR;, 并且RInformation类需要implements NativeUIR类

如果需要引入gallery模块（图片选择）需要import io.dcloud.js.gallery.GalleryR;, 并且RInformation类需要implements GalleryR类

6 添加Web应用资源到工程

1. 在assets目录下创建apps/[appid]/www目录，将web应用拷贝到www目录下，【APPID】为Web应用mainfest.json文件id节点的内容。

注意：应用存放的目录是有层级的，目录千万不要命名成apps.[appid].www不要被as的表现迷惑，新建的目录类型为Android resource directory

2. 修改src/main/assets/data/control.xml文件成dcloud_control,xml(目录下的三个文件都要加个dcloud_前缀,不然引用不了权限)，修改app节点的appid属性和appver属性的值。appid属性填写Web应用的mainfest.json文件的ID节点内容，appver属性填写manifest.json文件的version节点下的name节点的内容。
   

注意：dcloud_control.xml文件配置的appid和应用所在目录和web应用的manifest.json文件的id节点必须一致，否则会导致应用无法启动
7 修改APK桌面显示的图标和Splash图片
将应用的图标（文件名为icon.png）启动图片（文件名为splash.png）按照对应的尺寸拷贝到工程的app->src->main->res -> drawable-XXX目录下：

8 修改APK桌面显示的应用名
打开app->src->res->values->strings.xml文件,修改string节点对应的内容即可修改apk在手机桌面上显示的应用名称

运行时如果提示“打包时未添加XXX模块”，请参考SDK/Feature-Android.xls文件，查找对应插件名需要引入的5+库文件和系统库文件，添加到工程即可

最简工程Androidmanifest.xml文件示例（注意包名需要修改）

转自（http://ask.dcloud.net.cn/article/924）

App开发完了，还得做一个App发布（下载）页面？

不用！利用HBuilder开发打包的App，通过DCloud发行平台可以一键生成App发布页面！

有图有真相，下图就是Hello MUI的发布页面：

Tips：你也可以通过手机、PC浏览器直接访问http://m3w.cn/hellomui，体验真机效果。

DCloud的发布平台，给开发者带来了哪些实实在在的福利？我们列出最主要的3项说明一下：

• 一键生成：无需开发，通过简单配置即可一键发布到CDN服务器，方便快捷；

• 易于传播：http://m3w.cn/ + 应用简称 这样的短地址，好记易扩散，例如http://m3w.cn/vip；不过短地址数量有限，手慢就没哦；

• 提升激活：DCloud流引擎装机量目前已过亿，用户访问发布页面时，支持直接秒开流应用，创建桌面快捷方式，这样可以大幅提升App的推广激活率，解决原生App下载激活折算过高的问题。

心动不如行动，还不快来试试？特别是发布地址，好地址就像好域名，先来先得，手慢的话，就被别人抢走喽！

立即点击教程开始制作。

使用webpack 构建 vue项目 使用 5+ 开发App Hbuilder打包App video 不显示问题.......
video 为 mp4 和 swf 格式

wap2app可以快速将H5网站转换成App，接下来问题来了，如果App开发完毕，如何引导用户安装呢？

DCloud提供了两种方案：

• 制作发布页面，在线生成应用下载页，详细参考制作App发布页面 - DCloud云服务；
• M站首页引入gostream.js，用户访问wap站时，自动启动流应用（用户手机安装有流引擎的情况下）；流应用版本功能体验，和打包成可独立安装的apk/ipa安装包完全一致（原因见后面FAQ部分），从而实现将低价值的wap流量转换为高价值的App流量

本文重点讲解gostream.js的使用方法。

功能介绍及快速体验

网站引入gostream.js后，网站主可以获得如下收益：

• 用户通过手机浏览器访问wap站时，自动启动该wap2app项目的流应用版本，窗体切换、定位、分享等用户体验更佳；
• 启动流应用时，自动在手机桌面创建快捷方式，用户下次可直接从桌面启动，大幅提升用户留存；

开发者可以先从liuyingyong.cn下载安装流基座，然后使用手机浏览器访问http://hello.wap2app.dcloud.io，会自动启动hello wap2app的流应用版本。

gostream使用方法

发行为流应用

要使用gostream.js，首先需要将wap2app项目发布到流应用正式平台；在HBuilder中点击顶部菜单“发行 —> 发行为流应用”，分两步操作：

• 提交流应用测试服务器，然后使用流基座扫码测试
• 测试没问题后，点击“发布为正式”按钮申请发布正式平台；鉴于有关部门的规定，流首次发布正式时，需经过平台审核后才能上线

H5网页引入gostream.js

在H5网站插入如下代码：

<script>  
    (function() {  
        var gostream = document.createElement("script");  
        gostream.src = "//cdn.dcloud.net.cn/gostream.min.js?appid=__W2A__m.example.com";  
        var s = document.getElementsByTagName("script")[0];  
        s.parentNode.insertBefore(gostream, s);  
    })();  
</script>

Tips：如上示例中，"W2Am.example.com"需要换成自己的真实appid。

更多gostream.js的资料，建议参考gostream.js，把wap流量转换为app流量

FAQ

1、为什么说流应用版本和打包后的原生安装包功能体验一致？

wap2app（以及普通5+ App）和流应用一样，底层都依赖DCloud强化引擎。

wap2app项目打包为原生ipa/apk安装包时，实际上是把DCloud的强化引擎和开发者的资源文件（sitemap.json、app.js、css文件等）混合成一个原生安装包（apk或ipa），用户安装时，是将DCloud的强化引擎和开发者的资源文件作为一个整体整包下载。当DCloud的强化引擎已经提前安装在手机上时，用户安装就无需再下载强化引擎，仅下载资源文件即可。参考下图更直观：

2、如果用户手机上未安装流引擎，是否会影响wap站原有业务

不会，gostream.js为异步加载，不会阻塞原有wap站的渲染及业务；尝试启动流应用失败的话，也不会影响wap站的原有逻辑。