by草梅友仁

前言

現(xiàn)在用前端技術來寫一個app實在是太方便了，尤其是有像HBuilder（現(xiàn)已更名為HBuilderX，功能一樣）能將原生H5打包成原生APP的軟件，那就更加方便了。

下面我們就來看看，如何在三分鐘之內(nèi)將你的網(wǎng)站轉換為APP。

【本案例以草梅友仁自己的個人網(wǎng)站https://www.caomeiyouren.cn/為例】

0.首先

首先，你肯定得先做好一個網(wǎng)站，也已經(jīng)適配好了手機。但畢竟只是一個網(wǎng)站，還要通過手機瀏覽器來訪問，有點不方便，如果能打包成app豈不美哉？【如圖，已經(jīng)做好了手機適配】

image

1.使用HBuilder新建移動App工程

先用HBuilder建一個空的移動App工程

image

2.在index.html頁面添加如下代碼

<script type="text/javascript">
    window.location.;
    //這段代碼的意思是跳轉到指定網(wǎng)頁
</script>

3.配置App信息

image

4.發(fā)行打包

image

image

5.下載app到手機試用

image

效果可以說是非常完美了！

6.優(yōu)化用戶體驗

但是這個時候又會遇到新的問題了。

• 用戶一旦按了手機的物理退出鍵，會觸發(fā)app的默認退出事件，也就是說這個app就直接退出了

  解決方案如下，在你的網(wǎng)站首頁添加這樣一段代碼。請注意，是你的網(wǎng)站首頁！

  本段示例僅適用于單頁面應用。多頁面應用需要每個頁面都有這么一段。

  同時為了避免在首頁還會返回原來頁面的bug，建議通過路由來判斷是否為首頁

  <script>
      /* 解決App端物理返回鍵的問題 */
      document.addEventListener('plusready', function () {
          var webview = plus.webview.currentWebview();
          plus.key.addEventListener('backbutton', function () {
              webview.canBack(function (e) {
                  //通過哈希路由來判斷是否為首頁，是首頁則按返回鍵退出。避免退出后還會返回原來頁面的BUG
                  if (e.canBack && location.hash !== "#/index") {
                      webview.back();//返回上一個頁面
                  } else {
                      //首頁返回鍵處理
                      //處理邏輯：1秒內(nèi)，連續(xù)兩次按返回鍵，則退出應用；
                      var first = null;
                      plus.key.addEventListener('backbutton', function () {
                          //首次按鍵，提示‘再按一次退出應用’
                          if (!first) {
                              first = new Date().getTime();
                              plus.nativeUI.toast('再按一次退出應用');
                              setTimeout(function () {
                                  first = null;
                              }, 1000);
                          } else {
                              if (new Date().getTime() - first < 1500) {
                                  plus.runtime.quit();
                              }
                          }
                      }, false);
                  }
              })
          });
      });
  </script>