前段时间开发的微信h5公众号页面，又添加新需求了~ 原本有些跳转是直接跳h5外链，现在要改成跳转到微信小程序，通过一系列的文档、经验分享，发现这个坑可以踩，并且能够填上，那就开始吧。

首先要能成功填坑，需要满足最基础的三个条件：

1、微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

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

3、公众号和要跳转的小程序需要进行关联

只有能做到以上三点，才能开始我们下边的开发工作~

一、需要在main.js里注册组件

就是在使用前要把组件绑定到app实例上，类似于日常我们的组件引用。

	

		
		

			
			

				
			
ini
		

		

			
			

				复制代码
			

		

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

二、跳转内容开发

关于wx-open-launch-weapp这个组件的使用方法，是有两种：一种是在页面中直接使用组件方式插入，另一种是通过v-html的方式插入。

1、对于第一种方式我试过了，但是并没有生效，可能是缺少配置，有兴趣的小伙伴可以研究下，简单放个示例代码。

	

		
		

			
			

				
			
xml
		

		

			
			

				复制代码
			

		

	
<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">打开小程序</button>  </script> </wx-open-launch-weapp> 

2、 主要说一下第二种v-html方式：

简单说就是将上边代码的内容，通过模板字符串形式插入到html中，相比上边的写法，html插入的方式更接近我们日常的开发语法，写起来也更容易。

	

		
		

			
			

				
			
css
		

		

			
			

				复制代码
			

		

	
// 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'){  // 生产环境  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 {  // 测试环境  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)  })  }) } 

说一下上边代码，通过动态创建一个script标签，添加到页面中。组件部分通过innerHtml方式插入，编写采用模板字符串方式。

其中wx-open-launch-weapp的几个主要参数：

username：要跳转的小程序原始id，就是gh开头的id

path：要跳转的小程序对应的路径，可以跳转webview内嵌的h5页面

最后通过addEventListener监听组件是否加载成功，如果有需要处理组件加载成功、失败逻辑的，可以在这里进行区分判断。

3、 配置wx.config并加载组件

大家都知道，在wx内嵌的h5页面，如果需要调用相关api和组件，需要进行配置，配置成功后才可使用。

	

		
		

			
			

				
			
typescript
		

		

			
			

				复制代码
			

		

	
const params = {   } http.getWxShare(params).then((res) => {  if (res.code === 200 && res.data) {  (proxy as any).$wx.config({  debug: false,  appId: res.data.appId, // 必填，公众号的唯一标识  timestamp: res.data.timestamp, // 必填，生成签名的时间戳  nonceStr: res.data.nonceStr, // 必填，生成签名的随机串  signature: res.data.signature, // 必填，签名  jsApiList: ["onMenuShareAppMessage"],  openTagList: ['wx-open-launch-weapp'] //,'wx-open-launch-weapp'  });  setTimeout(() => {  // 加载组件内容  getHtml();  (proxy as any).$wx.ready(() => {  document.addEventListener("WeixinOpenTagsError", function (e: any) {  console.error(e!.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响  });  console.log('config配置成功')  });  (proxy as any).$wx.error((res: any) => {  console.log('config配置失败')  });  }, 1000)  } else {  console.log('准备失败');  } }, function (err: any) {  console.log('准备失败', err); }) 

上边代码就不过多解释了，很容易看懂。至此开发就完成了，发布测试环境我们可以看到能成功加载，并能正常跳转。

但是对于我这个页面，有个很明显的问题

有一列图标都可以点击跳转，其他图标是跳转h5页面或者公众号内部跳转，只有这一个是需要加载组件跳转小程序。

在页面初始化进来的时候可以看到，其他图标和文字都是瞬间加载出来了，但是跳转组件会晚一点才会出现，会有明显的空白位置出现，用户体验不好

针对上面的问题，我这边的处理方式是：先将图片和文字初始化进去，此时组件未加载，也就相当于页面上只是个静态图和文字，并不能点击。组件加载完成之后，直接替换掉初始化内容。体现在代码上就是我们给上边的miniHtml变量一个初始值：

	

		
		

			
			

				
			
css
		

		

			
			

				复制代码
			

		

	
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>` )} 

至此完美~入了坑并且完好的爬出来了