比如我们就用vue仿着淘宝写一个项目，我最近做了一个仿淘宝

首先打包你的 vue 项目 生成 dist 文件夹

看完上面的教程，请确保 你是 将：

项目目录下的​​config​​文件夹里的​​index.js​​文件中,将​​build​​对象下的​​assetsPublicPath​​中的​​“/”​​，改为​​“./”后，打包生成的 dist 文件。​​

手把手教你如何用HbuildX打包vue项目_返回键

 

 

 

开始使用 HBuiderX 打包。（工具下载地址：http://www.dcloud.io/）

手把手教你如何用HbuildX打包vue项目_退出应用_02

 

手把手教你如何用HbuildX打包vue项目_提示框_03

 

手把手教你如何用HbuildX打包vue项目_退出应用_04

 

 

 

 手把手教你如何用HbuildX打包vue项目_提示框_05

 

手把手教你如何用HbuildX打包vue项目_退出应用_06

 

 

 手把手教你如何用HbuildX打包vue项目_html_07

 

 手把手教你如何用HbuildX打包vue项目_html_08

 

 手把手教你如何用HbuildX打包vue项目_退出应用_09

 

 手把手教你如何用HbuildX打包vue项目_返回键_10

 

 手把手教你如何用HbuildX打包vue项目_html_11

 

 手把手教你如何用HbuildX打包vue项目_退出应用_12

 

设置沉浸状态栏：（什么是沉浸状态栏和设置方法 请移步： http://ask.dcloud.net.cn/article/32  地址里的  http://ask.dcloud.net.cn/article/1150）

 手把手教你如何用HbuildX打包vue项目_.net_13

 

 上图中添加位置的代码：

"statusbar": { //应用可视区域到系统状态栏下透明显示效果
            "immersed": true
        },


手把手教你如何用HbuildX打包vue项目_提示框_14

 

 手把手教你如何用HbuildX打包vue项目_返回键_15

 

 手把手教你如何用HbuildX打包vue项目_html_16

 

 解决打包成App后，单击 手机返回键退出应用的bug。（可以直接把这段代码放到你vue项目中，重新打包，再放回来，也可以直接修改这个index.html）

手把手教你如何用HbuildX打包vue项目_退出应用_17

 

 上图中的代码：



1 <script type="text/javascript">
 2     //如下代码主要是解决, 打包后的app点击返回键直接退出的bug.
 3     /* 自己写的 toast 提示框 */
 4     //下面用的是调的 Android 自身的 toast方法。 我把我自己写的toast 注释掉 
 5     /* 
 6     let flag = false;
 7     function toast(tip){
 8         if(flag) return;
 9         let oDiv  = document.createElement('div');
10         let oBody = document.getElementsByTagName('body')[0];
11         oDiv.innerText = tip;
12         oDiv.style.background = 'rgba(50, 50, 51, 0.88)';
13         oDiv.style.color = '#fff';
14         oDiv.style.textAlign = 'center';
15         oDiv.style.fontSize = '14px';
16         oDiv.style.lineHeight = '30px';
17         oDiv.style.width = '200px';
18         oDiv.style.borderRadius = '4px';
19         oDiv.style.position = 'fixed';
20         oDiv.style.left = '50%';
21         oDiv.style.transform = 'translateX(-50%)';
22         oDiv.style.bottom = '100px';
23         oDiv.style.zIndex = '1000';
24         oBody.appendChild(oDiv);
25         flag = true;
26         setTimeout(function(){
27             oBody.removeChild(oDiv);
28             flag = false;
29         },1000);
30     }
31      */
32     /* 自己写的 toast 提示框---END--- */
33     
34     document.addEventListener('plusready', function(a) { //等待plus ready后再调用5+ API：
35                 //// 在这里调用5+ API
36                 var first = null;
37                 plus.key.addEventListener('backbutton', function() { //监听返回键
38                         //首次按键，提示‘再按一次退出应用’
39                         if (!first) {
40                             first = new Date().getTime(); //获取第一次点击的时间戳
41                             // console.log('再按一次退出应用');//用自定义toast提示最好
42                             // toast('双击返回键退出应用'); //调用自己写的吐丝提示 函数
43                             plus.nativeUI.toast("双击退出", {duration:'short'}); //通过H5+ API 调用Android 上的toast 提示框
44                             setTimeout(function() {
45                                 first = null;
46                             }, 1000);
47                         } else {
48                             if (new Date().getTime() - first < 1000) { //获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,
49                                 plus.runtime.quit(); //退出应用
50                             }
51                         }
52                     }, false);
53             });
54 </script>


上面这段代码：我参考的文章和文档链接：


这个是 H5+ API 的（通过js调取Android等平台的原生方法）学习链接：http://ask.dcloud.net.cn/docs/