随着小程序越來(lái)越火爆，使一個(gè)産品如果隻有公衆号H5頁面和(hé / huò)APP顯得不(bù)怎麽完美，總感覺不(bù)搭上(shàng)小程序這(zhè)趟流量車，就(jiù)會少了(le／liǎo)點什麽，心裏别扭地(dì / de)很。在(zài)此驅動下，我所在(zài)公司也(yě)決定趕緊上(shàng)車。

但是(shì)，如果要(yào / yāo)按照小程序的(de)套路重新寫一份的(de)話，又感覺付出(chū)的(de)時(shí)間成本太大(dà)了(le／liǎo)，非常的(de)不(bù)劃算。于(yú)是(shì)乎，腦子(zǐ)靈光一閃，想起了(le／liǎo)小程序貌似有個(gè)小弟叫webview，webview是(shì)啥，按字面意思就(jiù)是(shì)網頁視圖（來(lái)自百度翻譯）。官方是(shì)這(zhè)麽定義的(de)：

web-view 組件是(shì)一個(gè)可以(yǐ)用來(lái)承載網頁的(de)容器，會自動鋪滿整個(gè)小程序頁面。個(gè)人(rén)類型與海外類型的(de)小程序暫不(bù)支持使用。

簡單的(de)講就(jiù)是(shì)我們可以(yǐ)在(zài)小程序内放置一個(gè)<web-view>組件來(lái)鏈接我們的(de)HTML頁面了(le／liǎo)。也(yě)就(jiù)是(shì)說(shuō)，已經寫好的(de)微信公衆号H5頁面可以(yǐ)直接挪到(dào)小程序了(le／liǎo)。一行代碼就(jiù)完成公衆号到(dào)小程序的(de)轉移，一行代碼就(jiù)讓我們多了(le／liǎo)一個(gè)流量入口，一行代碼就(jiù)解決了(le／liǎo)重新開發一套小程序代碼的(de)難題。想到(dào)這(zhè)真的(de)是(shì)激動死了(le／liǎo)。

當我興緻沖沖的(de)把鏈接放進webview中，就(jiù)像這(zhè)樣：

//H5頁面js
navigate(modelName) { //控制頁面跳轉---小程序、公衆号、非微信跳轉方式 【modelName---vue路由名字】
      this.isMiniProgram((res)=>{//判斷是(shì)否是(shì)小程序頁面的(de)回調函數
        if (res) {//小程序頁面
             wx.miniProgram.navigateTo({url: '../webview/webview?weburl=https://www.hxkj.vip/#/' + modelName});
        } else {
             this.$router.push({name: modelName});//非小程序頁面使用vue路由跳轉
        }
      })
},
isMiniProgram(callback) { //是(shì)否爲(wéi / wèi)小程序環境
      //是(shì)否在(zài)微信環境
      if (!isWeixin()) {
          callback(false);
      } else {
           //微信API獲取當前運行環境
           wx.miniProgram.getEnv((res) => {
               if (res.miniprogram) {//小程序環境
                   callback(true);
               } else {
                   callback(false);
               }
          })
      }
}

并賦值給webview.wxml中的(de)src屬性