隨著小程序越來越火爆，使一個(gè)產(chǎn)品如果只有公眾號(hào)H5頁面和APP顯得不怎么完美，總感覺不搭上小程序這趟流量車，就會(huì)少了點(diǎn)什么，心里別扭地很。在此驅(qū)動(dòng)下，我所在公司也決定趕緊上車。

但是，如果要按照小程序的套路重新寫一份的話，又感覺付出的時(shí)間成本太大了，非常的不劃算。于是乎，腦子靈光一閃，想起了小程序貌似有個(gè)小弟叫webview，webview是啥，按字面意思就是網(wǎng)頁視圖（來自百度翻譯）。官方是這么定義的：

web-view 組件是一個(gè)可以用來承載網(wǎng)頁的容器，會(huì)自動(dòng)鋪滿整個(gè)小程序頁面。個(gè)人類型與海外類型的小程序暫不支持使用。

簡單的講就是我們可以在小程序內(nèi)放置一個(gè)<web-view>組件來鏈接我們的HTML頁面了。也就是說，已經(jīng)寫好的微信公眾號(hào)H5頁面可以直接挪到小程序了。一行代碼就完成公眾號(hào)到小程序的轉(zhuǎn)移，一行代碼就讓我們多了一個(gè)流量入口，一行代碼就解決了重新開發(fā)一套小程序代碼的難題。想到這真的是激動(dòng)死了。

當(dāng)我興致沖沖的把鏈接放進(jìn)webview中，就像這樣：

//H5頁面js
navigate(modelName) { //控制頁面跳轉(zhuǎn)---小程序、公眾號(hào)、非微信跳轉(zhuǎn)方式 【modelName---vue路由名字】
      this.isMiniProgram((res)=>{//判斷是否是小程序頁面的回調(diào)函數(shù)
        if (res) {//小程序頁面
             wx.miniProgram.navigateTo({url: '../webview/webview?weburl=https://www.hxkj.vip/#/' + modelName});
        } else {
             this.$router.push({name: modelName});//非小程序頁面使用vue路由跳轉(zhuǎn)
        }
      })
},
isMiniProgram(callback) { //是否為小程序環(huán)境
      //是否在微信環(huán)境
      if (!isWeixin()) {
          callback(false);
      } else {
           //微信API獲取當(dāng)前運(yùn)行環(huán)境
           wx.miniProgram.getEnv((res) => {
               if (res.miniprogram) {//小程序環(huán)境
                   callback(true);
               } else {
                   callback(false);
               }
          })
      }
}

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