<template><view><view class="txt_ys">注冊成功!</view><view class="tz_but"><wx-open-launch-weapp id="launch-btn" :username="username" :path="path" @launch="handleLaunchFn"@error="handleErrorFn" style="display: block;"><script type="text/wxtag-template"><style>.ant-btn {margin: auto;width: 80%;height: 40px;background: #fff;border-radius: 20px;margin-top: 50px;display: flex;justify-content: center;align-items: center;color: #008CFF;}</style><p class="ant-btn">跳轉小程序</p></script></wx-open-launch-weapp></view><image src="../../static/par_ti.png"></image></view> </template><script>let jweixin = require("jweixin-module")export default {data() {return {username: null,path: 'pages/index/index.html'}},onLoad() {console.log(location.href)uni.request({url: '？？？？？？',method: "POST",header: {'content-type': 'application/x-www-form-urlencoded',},data: {url: location.href},success: (res) => {let config = JSON.parse(res.data.result.data)console.log(config)jweixin.config({debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: config.appId, // 必填，公眾號的唯一標識，填自己的！ timestamp: config.timestamp, // 必填，生成簽名的時間戳，剛才接口拿到的數據 nonceStr: config.nonceStr, // 必填，生成簽名的隨機串 signature: config.signature, // 必填，簽名 jsApiList: config.jsApiList,openTagList: ['wx-open-launch-weapp'] // 跳轉小程序時必填 });// this.path = config.urlthis.username = res.data.result.gzh_idjweixin.ready(() => {console.log(5555);this.$nextTick(() => {let btn = document.getElementById('launch-btn');btn.addEventListener('launch', e => {console.log('success', 666);this.path = ""});btn.addEventListener('error', e => {alert('小程序打開失敗');console.log('fail', e.detail);});});});jweixin.error(res => {// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名console.log(res);});}});},methods: {handleLaunchFn(e) {console.log(e)},handleErrorFn(e) {console.log('fail', e.detail);},}} </script><style scoped>image {width: 100%;opacity: 0.5;margin-top: 100rpx;}.txt_ys {padding-top: 20rpx;font-size: 40rpx;text-align: center;color: #1d1d1d;}.txt_ys text {color: #008BFF;}.tz_but {width: 100%;height: 50px;} </style>

總結

以上是生活随笔為你收集整理的微信公众号H5跳转小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。