先看效果

先貼代碼：
1、先下載依賴

npm install jweixin-module --save

2、main.js

Vue.config.ignoredElements.push('wx-open-launch-weapp')

3、使用的頁面引入（或者main引入）

import wx from 'jweixin-module'

4、初始化、注冊

wx.config({
  debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
  appId: "XXXXXXXXXXX", // 必填，公眾號的唯一標識
  timestamp: this.timestamp, // 必填，生成簽名的時間戳
  nonceStr: this.nonceStr, // 必填，生成簽名的隨機串
  signature: this.signautre, // 必填，簽名
  jsApiList: ["wx-open-launch-weapp"], // 必填，需要使用的JS接口列表
  openTagList:['wx-open-launch-weapp'], // 可選，需要使用的開放標簽列表，例如['wx-open-launch-weapp','wx-open-launch-app']
});
wx.ready(function() {
  //config信息驗證后會執(zhí)行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數(shù)中調用來確保正確執(zhí)行。對于用戶觸發(fā)時才調用的接口，則可以直接調用，不需要放在ready函數(shù)中
});
wx.error(function(res) {
  console.log('res',res);
  // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});

5、html

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打開小程序</button>
  </template>
</wx-open-launch-weapp>

接下來才是重點：

要在公眾號后臺配置JS接口安全域名、網(wǎng)頁授權域名、IP白名單，而且域名需要備案，在微信開發(fā)者工具中不能通過ip調試，可以修改本地hosts代理一下127.0.0.1,用域名訪問：

公眾號后臺配置：

hosts文件修改

微信開發(fā)者工具：

現(xiàn)在可以開發(fā)了，結果一直注冊失敗，以下是我的代碼：

這里的wx.config里面的參數(shù)最好通過調后端接口返回，前端也能自己生成，但是不建議(為了安全)，下面是我自己的代碼，以供參考：

import webConfig from '@/config/config.js' // 我自己的配置參數(shù)，用來獲取公眾號appId

created() {
	this.getConfig()
}

getConfig() {
	let hrefs = ''
	if (uni.getSystemInfoSync().platform == 'ios') {
		hrefs = window.location.href.split('#')[0] || window.location.href
	} else {
		hrefs = window.location.href
	}
	console.log(hrefs, 'hrefs')
	const params = {
		url: encodeURIComponent(hrefs),
		appId: webConfig.appId
	}
	this._$getWxVerify(params).then(res => { // 調接口獲取
		wx.config({
			debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
			appId: res.data.appid, // 必填，公眾號的唯一標識，填自己的！
			timestamp: res.data.timestamp, // 必填，生成簽名的時間戳，剛才接口拿到的數(shù)據(jù)
			nonceStr: res.data.noncestr, // 必填，生成簽名的隨機串
			signature: res.data.signature, // 必填，簽名，見附錄1
			jsApiList: ['wx-open-launch-weapp'],
			openTagList: ['wx-open-launch-weapp'] // 跳轉小程序時必填
		});
		wx.ready(res => {
			console.log(res);
			// this.$nextTick(() => {
			// 	let btn = document.getElementById('launch-btn');
			// 	btn.addEventListener('launch', e => {
			// 		console.log('success');
			// 	});
			// 	btn.addEventListener('error', e => {
			// 		console.log('fail', e.detail);
			// 	});
			// });
		});
			
		wx.error(res => {
			// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名
			console.log(res, 'res');
		});
	})
}

<wx-open-launch-weapp
	@launch="handleLaunchFn"
    class="launch-btn"
    :username="item.originid"
    :path="item.pageUrl"
	style="display: block;"
>
  <script type="text/wxtag-template">
      <style>
		  .grid_icon {
			width: 33px;
			height: 33px;
			display: block;
			margin: auto;
			margin-bottom: 5px;
		  }
		  .text {
			font-size: 14px;
		  }
      </style>
      <image v-if="_legalUrl(item.icon)" src={{item.icon}} class="grid_icon"></image>
	  <view class="text">{{ item.name }}</view>
  </script>
</wx-open-launch-weapp>

handleLaunchFn (e) {
	console.log('success', e)
}

運行后，在微信開發(fā)者工具中提示invalid signature
這個時候我打開微信文檔仔細核對，附文檔地址：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#66

發(fā)現(xiàn)沒有任何問題，此時已經(jīng)崩潰，最后發(fā)現(xiàn)了端倪，我的請求url是這樣的

后端拿到后，用http%253A%252F%252Fprewnyitong.gjyxtest.top%252Fgxyy 生成了簽名，但是我用來注冊用的url是用window.location.href.split(‘#’)[0]拿到的，是http://prewnyitong.gjyxtest.top/gxyy，對不上，所以報錯，所以又讓后端拿到url后轉碼，轉成http://prewnyitong.gjyxtest.top/gxyy后再生成簽名返回給我，然后報錯又變成了invalid url domain，又找了一圈csdn,還是沒解決，最后部署到準生產(chǎn)后，用手機試了試，沒報錯，返回“errMsg：ok”
解決了。微信開發(fā)者工具會一直報invalid url domain，不用管。
備注：微信開發(fā)者工具不顯示用wx-open-launch-weapp包裹的內容，所以是空的，樣式也沒法調，只能盲調，扔到服務器在手機調試，手機正常顯示

最后需要注意的是樣式的書寫方式，要寫在wx-open-launch-weapp里面，可以仔細看看我的寫法文章來源地址http://www.zghlxwxcb.cn/news/detail-487763.html

到了這里，關于uniapp微信公眾號跳轉到小程序（是點擊微信頁面上面的按鈕/菜單跳轉）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！