vue 中IOS无法打开小程序 <wx-open-launch-weapp>标签不起作用

1、在template中直接添加wx-open-launch-weapp标签只在Android中起作用,如下:

<template>
  <div class="container">
    <a-row style="width: 100%;margin-bottom: 20px;">
      <a-col>
        <wx-open-launch-weapp
          style="position: absolute;height: 90px;width: 100%;"
          id="launch-btn"
          username="gh_XXXXXXX"
          path="/pages/splash/index.html"
          @launch="handleLaunchFn"
          @error="handleErrorFn"
        >
          <script type="text/wxtag-template">
            <div style="height: 90px;width: 100%;"></div>
          </script>
        </wx-open-launch-weapp>
        <img src="../../../assets/img.png"/>
      </a-col>
    </a-row>
  </div>
</template>

由于样式不太好调,直接在外部添加一个img用于代替script中的div,其中 handleLaunchFn为调用西小程序成功后的回调方法,handleErrorFn为调用小程序失败后的回调

2、弥补在IOS中wx-open-launch-weapp标签不起作用

<template>
  <div class="container">
    <a-row style="width: 100%;margin-bottom: 20px;">
      <a-col>
        <div v-html="wxHtml"></div>
        <img src="../../../assets/img.png"/>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  export default {
    name: 'Index',
    data() {
      return {
        wxHtml:''
      }
    },

    created() {
      this.getSigna()
      this.getUrl()
    },

    methods: {
      getSigna() {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
          appId: 'appId', // 必填,公众号的唯一标识
          timestamp: 'timestamp', // 必填,生成签名的时间戳
          nonceStr: 'nonceStr', // 必填,生成签名的随机串
          signature: 'signature',// 必填,签名
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 必填,需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
        })
      },

      //获取小程序地址
      getUrl() {
        let script = document.createElement('script')
        script.type = 'text/wxtag-template'
        script.text = `<div style="width: 100%;height:90px;"></div>`
        this.wxHtml = `<wx-open-launch-weapp
                            style="position: absolute;height: 90px;width: 100%;" id="launch-btn"
                            username="gh_XXXXXXX"
                            path="/pages/splash/index.html"
                          >${script.outerHTML}
                        </wx-open-launch-weapp>`
        this.$nextTick(() => {
          let launchButton = document.getElementById('launch-btn')
          launchButton.addEventListener('launch', function(e) {
            console.log('success', e.detail)
          })

          launchButton.addEventListener('error', function(e) {
            console.log('fail', e.detail)
          })
        })
      }
    }
  }
</script>

利用v-html实现IOS调起小程序 

Vue 使用 `<wx-open-launch-weapp>` 组件时,你需要按照以下步骤进行操作: 1. 首先,确保已经在项目引入了微信小程序的相关 SDK。 2. 在 Vue 组件,可以直接使用 `wx-open-launch-weapp` 标签来包裹需要触发打开小程序的内容。 ```html <template> <div> <wx-open-launch-weapp :appid="appId" :path="path" :extra-data="extraData"> <!-- 包裹需要触发打开小程序的内容 --> <button>打开小程序</button> </wx-open-launch-weapp> </div> </template> ``` 3. 在 Vue 组件的 `data` 定义必要的参数,例如 `appId`、`path` 和 `extraData`: ```javascript <script> export default { data() { return { appId: 'yourAppId', // 小程序 AppID path: 'pages/index', // 小程序页面路径 extraData: {} // 打开小程序时传递的额外参数 } } } </script> ``` 4. 根据实际需求,可以对 `<wx-open-launch-weapp>` 组件进行自定义配置,例如可以添加 `bindsuccess` 和 `bindfail` 事件来处理打开小程序成功和失败的情况。 ```html <wx-open-launch-weapp :appid="appId" :path="path" :extra-data="extraData" @bindsuccess="onLaunchSuccess" @bindfail="onLaunchFail" > <!-- 包裹需要触发打开小程序的内容 --> <button>打开小程序</button> </wx-open-launch-weapp> ``` ```javascript <script> export default { // 其他代码... methods: { onLaunchSuccess() { // 打开小程序成功时的回调 console.log('小程序打开成功'); }, onLaunchFail(e) { // 打开小程序失败时的回调 console.log('小程序打开失败', e); } } } </script> ``` 以上是在 Vue 使用 `<wx-open-launch-weapp>` 组件的基本方法,根据自己的实际需求进行配置即可。注意,还需要在微信小程序后台配置好相应的参数,例如 AppID 和页面路径等。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值