前段時(shí)間開(kāi)發(fā)的微信h5公眾號(hào)頁(yè)面，又添加新需求了~ 原本有些跳轉(zhuǎn)是直接跳h5外鏈，現(xiàn)在要改成跳轉(zhuǎn)到微信小程序，通過(guò)一系列的文檔、經(jīng)驗(yàn)分享，發(fā)現(xiàn)這個(gè)坑可以踩，并且能夠填上，那就開(kāi)始吧。

首先要能成功填坑，需要滿足最基礎(chǔ)的三個(gè)條件：

1、微信版本要求為：7.0.12及以上。 系統(tǒng)版本要求為：iOS 10.3及以上、Android 5.0及以上。

2、引入的sdk至少要1.6以上

3、公眾號(hào)和要跳轉(zhuǎn)的小程序需要進(jìn)行關(guān)聯(lián)

只有能做到以上三點(diǎn)，才能開(kāi)始我們下邊的開(kāi)發(fā)工作~

一、需要在main.js里注冊(cè)組件

就是在使用前要把組件綁定到app實(shí)例上，類(lèi)似于日常我們的組件引用。

	

		
		

			
			

				
			
ini
		

		

			
			

				復(fù)制代碼
			

		

	
app.config.ignoredElements = [  'wx-open-launch-weapp', ] 

二、跳轉(zhuǎn)內(nèi)容開(kāi)發(fā)

關(guān)于wx-open-launch-weapp這個(gè)組件的使用方法，是有兩種：一種是在頁(yè)面中直接使用組件方式插入，另一種是通過(guò)v-html的方式插入。

1、對(duì)于第一種方式我試過(guò)了，但是并沒(méi)有生效，可能是缺少配置，有興趣的小伙伴可以研究下，簡(jiǎn)單放個(gè)示例代碼。

	

		
		

			
			

				
			
xml
		

		

			
			

				復(fù)制代碼
			

		

	
<wx-open-launch-weapp id="launch-btn" username="gh_12345678" path="pages/index/index" >   <script type="text/wxtag-template">  <style>  .btn {   width: 100px;  height: 100px;   }  </style>   <button class="btn">打開(kāi)小程序</button>  </script> </wx-open-launch-weapp> 

2、 主要說(shuō)一下第二種v-html方式：

簡(jiǎn)單說(shuō)就是將上邊代碼的內(nèi)容，通過(guò)模板字符串形式插入到html中，相比上邊的寫(xiě)法，html插入的方式更接近我們?nèi)粘５拈_(kāi)發(fā)語(yǔ)法，寫(xiě)起來(lái)也更容易。

	

		
		

			
			

				
			
css
		

		

			
			

				復(fù)制代碼
			

		

	
// home.vue <span v-html="indexData.miniHtml"></span>  const indexData = relative({  miniHtml: '' })  const getHtml = () => {  let script = document.createElement('script')  script.type = 'text/wxtag-template'  script.text = `  <div style="  width: 100px;  height: 100px;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;"  >  <img style="width: 32px; height: 32px;" src="" />  <span style="  font-size: 16px;  font-family: PingFangSC-Regular, PingFang SC;  font-weight: 400;  color: #333333;  line-height: 22px;  margin-top: 13px;  ">充值</span>  </div>`  if(process.env.NODE_ENV === 'production'){  // 生產(chǎn)環(huán)境  indexData.miniHtml =  `<wx-open-launch-weapp style="height: 107px;width: 100%;" id="launch-btn"  username="gh_123456789"  path="/pages/index/index">${script.outerHTML}  </wx-open-launch-weapp>`  } else {  // 測(cè)試環(huán)境  indexData.miniHtml =  `<wx-open-launch-weapp style="height: 107px;width: 100%;" id="launch-btn"  username="gh_987654321  path="/pages/index/index">${script.outerHTML}  </wx-open-launch-weapp>`  }  nextTick(() => {  let launchButton = document.getElementById('launch-btn');  (launchButton as any).addEventListener('launch', function(e: any) {  console.log('success', e)  });   (launchButton as any).addEventListener('error', function(e: any) {  console.log('fail', e)  })  }) } 

說(shuō)一下上邊代碼，通過(guò)動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，添加到頁(yè)面中。組件部分通過(guò)innerHtml方式插入，編寫(xiě)采用模板字符串方式。

其中wx-open-launch-weapp的幾個(gè)主要參數(shù)：

username：要跳轉(zhuǎn)的小程序原始id，就是gh開(kāi)頭的id

path：要跳轉(zhuǎn)的小程序?qū)?yīng)的路徑，可以跳轉(zhuǎn)webview內(nèi)嵌的h5頁(yè)面

最后通過(guò)addEventListener監(jiān)聽(tīng)組件是否加載成功，如果有需要處理組件加載成功、失敗邏輯的，可以在這里進(jìn)行區(qū)分判斷。

3、 配置wx.config并加載組件

大家都知道，在wx內(nèi)嵌的h5頁(yè)面，如果需要調(diào)用相關(guān)api和組件，需要進(jìn)行配置，配置成功后才可使用。

	

		
		

			
			

				
			
typescript
		

		

			
			

				復(fù)制代碼
			

		

	
const params = {   } http.getWxShare(params).then((res) => {  if (res.code === 200 && res.data) {  (proxy as any).$wx.config({  debug: false,  appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)  timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳  nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串  signature: res.data.signature, // 必填，簽名  jsApiList: ["onMenuShareAppMessage"],  openTagList: ['wx-open-launch-weapp'] //,'wx-open-launch-weapp'  });  setTimeout(() => {  // 加載組件內(nèi)容  getHtml();  (proxy as any).$wx.ready(() => {  document.addEventListener("WeixinOpenTagsError", function (e: any) {  console.error(e!.detail.errMsg); // 無(wú)法使用開(kāi)放標(biāo)簽的錯(cuò)誤原因，需回退兼容。僅無(wú)法使用開(kāi)放標(biāo)簽，JS-SDK其他功能不受影響  });  console.log('config配置成功')  });  (proxy as any).$wx.error((res: any) => {  console.log('config配置失敗')  });  }, 1000)  } else {  console.log('準(zhǔn)備失敗');  } }, function (err: any) {  console.log('準(zhǔn)備失敗', err); }) 

上邊代碼就不過(guò)多解釋了，很容易看懂。至此開(kāi)發(fā)就完成了，發(fā)布測(cè)試環(huán)境我們可以看到能成功加載，并能正常跳轉(zhuǎn)。

但是對(duì)于我這個(gè)頁(yè)面，有個(gè)很明顯的問(wèn)題

有一列圖標(biāo)都可以點(diǎn)擊跳轉(zhuǎn)，其他圖標(biāo)是跳轉(zhuǎn)h5頁(yè)面或者公眾號(hào)內(nèi)部跳轉(zhuǎn)，只有這一個(gè)是需要加載組件跳轉(zhuǎn)小程序。

在頁(yè)面初始化進(jìn)來(lái)的時(shí)候可以看到，其他圖標(biāo)和文字都是瞬間加載出來(lái)了，但是跳轉(zhuǎn)組件會(huì)晚一點(diǎn)才會(huì)出現(xiàn)，會(huì)有明顯的空白位置出現(xiàn)，用戶體驗(yàn)不好

針對(duì)上面的問(wèn)題，我這邊的處理方式是：先將圖片和文字初始化進(jìn)去，此時(shí)組件未加載，也就相當(dāng)于頁(yè)面上只是個(gè)靜態(tài)圖和文字，并不能點(diǎn)擊。組件加載完成之后，直接替換掉初始化內(nèi)容。體現(xiàn)在代碼上就是我們給上邊的miniHtml變量一個(gè)初始值：

	

		
		

			
			

				
			
css
		

		

			
			

				復(fù)制代碼
			

		

	
const indexData = reactive({  miniHtml: `<div style="  width: 100px;  height: 100px;  >  <img style="width: 32px; height: 32px;" src="" />  <span style="  font-size: 16px;  font-family: PingFangSC-Regular, PingFang SC;  font-weight: 400;  color: #333333;  line-height: 22px;  margin-top: 13px;  ">充值</span>  </div>` )} 

至此完美~入了坑并且完好的爬出來(lái)了