[小程序开发]在公众号网页中跳转到小程序

2024-04-19 15:11:00 by wst

出发点

网页中有一个按钮，跳转到商城，由于已经开发好的有一个商城小程序，打算直接跳过去。

问题

怎么在网页中跳转到商城小程序呢？

官方个给的有文档，但在项目中怎么引用呢，这里用的vue开发。

解决方法

把官方文档中的代码放到vue的html标签中。

<template>
    <div v-html="html"></div>
</template>

<script>
import wx from 'weixin-js-sdk'

export default {
    name: 'myInfo',
    components: {
    },
    data() {

        return {
            html: '<wx-open-launch-weapp id="launch-btn" appid="wxb38188335ebxxxxx8" username="gh_5ff2axxxx6" path="/pages/index/index.html" @launch="launchHandle"  @error="errorHandle"><template><style>.btn { display: flex;align-items: center; }</style><button class="btn">跳转小程序</button></template></wx-open-launch-weapp>'
        }
    },
created() {
    this.loadWxConfig()
    },
methods: {
        handleLaunchFn (e) {
              console.log(e)
          },
          handleErrorFn(e){
              console.log('fail', e.detail);
          },
/**载入微信公众号配置 */
        loadWxConfig() {
            this.config = {
                appid: "wxd430d499d539xxxx",
                jsapi_ticket: "O3SMpm8bGxxxxxxxxxxxxxxxwNEb812R-8Zb8A0SR_5pLAFBNIIuW3a0YwcIAP3pt-69xOGoZ0rHOsiA",
                noncestr: "0d8f1de3054bxxxxxxxxxx4bac",
                sign: "c8e4db447f02ae9d84f0158a4xxxxxxxxxxxe3",
                timestamp: 1713506938,
                url: "https://xxxx.com/"
            };
            wx.config({
                debug: false,
                appId: this.config.appid,
                timestamp: this.config.timestamp,
                nonceStr: this.config.noncestr,
                signature: this.config.sign,
                jsApiList: ["chooseImage", "previewImage", "uploadImage"],
                openTagList: ['wx-open-launch-weapp']
            });
            wx.ready(function () {
                console.log('ready')
            });
        },
    }，
}
</script>

注意：

运行的时候需要替换里面的参数。

如果有更好的方法，欢迎留言!