vue3 uniapp wx-open-launch-app 在微信浏览器里唤醒app(手把手)

sreat61

已于 2024-05-09 08:34:05 修改

阅读量1.6k

点赞数 8

文章标签：微信 javascript 前端微信开放平台微信小程序 uni-app

于 2024-04-08 12:05:02 首次发布

本文链接：https://blog.csdn.net/Sreat/article/details/137502122

版权

由于实习的需求让我实现微信的浏览器里唤醒app

接下来我来告诉大家到底应该怎么做

首先呢

你得有app 并且获得了app的appid

而后需要你去微信的开发平台去看这两个东西

如果这两个都有了那就行

但是得注意咱们的公众号一定得是服务号！服务号！服务号！重要的事情说三遍

关联设置一定得是同一主体

就是看你的绑定的公司是不是一个一定得是同一个才可以

js安全域名这些的绑定需要你去微信公众号哪里去绑定这个步骤比较简单去功能设置里看会有

要跟你们的后端商量一下要把有个文件上传到你们设置的安全域名才生效哦

这些都有了我们就要开始用一个微信的开放组件了

你需要去vue里index.html里

放入

 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js "></script>

这样放入就行了

接下来需要使用wx-open-launch-app

 <wx-open-launch-app
    id="launch-btn"
    @launch="handleLaunch"
    :extinfo="extinfoStrTwo"
    @error="handleError"
    appid="你的appid"
  >
    <!-- <span class="download">前往下载</span> -->
    <component :is="'script'" type="text/wxtag-template">
      <button
        style="
          width: 7rem;
          height: 3rem;
          border-radius: 15px;
          background-color: #d7655f;
          border: none;
          color: white;
          font-size: 1rem;
        "
      >
        前往下载
      </button>
    </component>
  </wx-open-launch-app>

这边你可以看的有一个属性和两个事件分别是:

:extinfo="extinfoStrTwo"
就是传的值 用于唤醒指定的页面

@launch="handleLaunch"//成功唤醒app的事件
@error="handleError"//失败唤醒app的事件 一般跳转去下载app的地方

这样就解释清楚了

接下来我们要使用它

先在vue.config.js里(没有就创建一个)

写以下这样的代码

module.exports = {
    //...其他配置
    chainWebpack: config => {
        config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          // 忽略wx-开头的组件，这些是微信的默认组件
          isCustomElement: (tag) => tag.startsWith('wx-open')
        }
        return options
      })

    }
  }

而后要这样用可以在mounted或者onMounted

const getWxSign = async () => {
  const apiurl = '跟后端商量的接口'
  try {
    const response = await fetch(apiurl)
    const data = await response.json()
    console.log(data.body)
    const timestamp = String(parseInt(new Date().getTime() / 1000))
    const nonceStr = randomString(6)
    const shaBefore = decodeURIComponent(
      `jsapi_ticket=${data.body.jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${
        location.href.split('#')[0]
      }`
    )
    // decodeURItimestampComponent
    console.log('时间戳', timestamp)
    console.log('随机串', nonceStr)
    const signature = sha1(shaBefore)
    wx.config({
      debug: false,
      appId: 'wx69f18ce18a781d5e',
      timestamp: timestamp,
      nonceStr: nonceStr,
      signature: signature,
      jsApiList: ['wx-open-launch-app'],
      openTagList: ['wx-open-launch-app']
    })
    wx.ready(function () {
      console.log('成功了')
    })
    wx.error(function (res) {
      console.log(res)
    })
  } catch (error) {
    console.log(error)
  }
}

你可能会疑惑这个跟后端的接口是啥

就是这个你需要去微信公众号的设置里面找到ip白名单设置输入你的ip 或者后端服务的ip 去测试官方的这个接口前端直接调用是不可以的会报跨域问题

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='你的appid'&secret='这个在开放平台或者微信公众号都可以找到'

这个你可以接口文档去调试你就可以获得一个token 用这个token再去调另外一个接口获取ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='这个就是你获得token'&type=jsapi

这样去使用然后后端的老哥获得里面的值以后写一个接口给你就行了

其中里面的有些要获得随机字符串时间戳的函数是这些

const encodeUTF8 = (s) => {
  let i,
    r = [],
    c,
    x
  for (i = 0; i < s.length; i++)
    if ((c = s.charCodeAt(i)) < 0x80) r.push(c)
    else if (c < 0x800) r.push(0xc0 + ((c >> 6) & 0x1f), 0x80 + (c & 0x3f))
    else {
      if ((x = c ^ 0xd800) >> 10 == 0)
        //对四字节UTF-16转换为Unicode
        (c = (x << 10) + (s.charCodeAt(++i) ^ 0xdc00) + 0x10000),
          r.push(0xf0 + ((c >> 18) & 0x7), 0x80 + ((c >> 12) & 0x3f))
      else r.push(0xe0 + ((c >> 12) & 0xf))
      r.push(0x80 + ((c >> 6) & 0x3f), 0x80 + (c & 0x3f))
    }
  return r
}
const randomString = (e) => {
  e = e || 32
  var t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678',
    a = t.length,
    n = ''
  for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a))
  return n
}

const sha1 = (s) => {
  var data = new Uint8Array(encodeUTF8(s))
  var i, j, t
  var l = (((data.length + 8) >>> 6) << 4) + 16,
    s = new Uint8Array(l << 2)
  s.set(new Uint8Array(data.buffer)), (s = new Uint32Array(s.buffer))
  for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2)
  s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8)
  s[l - 1] = data.length << 3
  var w = [],
    f = [
      function () {
        return (m[1] & m[2]) | (~m[1] & m[3])
      },
      function () {
        return m[1] ^ m[2] ^ m[3]
      },
      function () {
        return (m[1] & m[2]) | (m[1] & m[3]) | (m[2] & m[3])
      },
      function () {
        return m[1] ^ m[2] ^ m[3]
      }
    ],
    rol = function (n, c) {
      return (n << c) | (n >>> (32 - c))
    },
    k = [1518500249, 1859775393, -1894007588, -899497514],
    m = [1732584193, -271733879, null, null, -1009589776]
  ;(m[2] = ~m[0]), (m[3] = ~m[1])
  for (i = 0; i < s.length; i += 16) {
    var o = m.slice(0)
    for (j = 0; j < 80; j++)
      (w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1)),
        (t = (rol(m[0], 5) + f[(j / 20) | 0]() + m[4] + w[j] + k[(j / 20) | 0]) | 0),
        (m[1] = rol(m[1], 30)),
        m.pop(),
        m.unshift(t)
    for (j = 0; j < 5; j++) m[j] = (m[j] + o[j]) | 0
  }
  t = new DataView(new Uint32Array(m).buffer)
  for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2)

  var hex = Array.prototype.map
    .call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
      return (e < 16 ? '0' : '') + e.toString(16)
    })
    .join('')
  return hex
}

这样就可以使用了记住要去微信开发者工具中进行调试

把wx.config里的debug:false改成true

这样方便看调试直到{"errMsg":"config:fail,invalid url domain"}这样的错出现

这样子就可以把你的项目打包放在你们的安全域名下了试试了基本应该没啥问题了

最后如果要跳转到指定路径

先把extinfoStrTwo赋值

 extinfoStrTwo.value = 'pages/find/components/colleges?data='+dataValue

可以封装一个

export function sharePaga(){
	console.log('跳转了')
	uni.navigateTo({
		url:plus.runtime.arguments
	})
	plus.runtime.arguments = '/'
}

这样子

然后去app.vue里的uniapp里

		import { sharePaga } from './config/plusShare.js';
onShow() {
		sharePaga()	
		},

这样去使用这样大概整个流程就跑完了希望你们都能把这个需求给解决

如果这个跳转有bug 那就用这个

const pages = getCurrentPages()
			  const pageCount = pages.length
			  console.log('页面栈数量:', pageCount)
			if(pageCount==0){
				uni.navigateTo({
					url:'/pages/index/index',
					success: () => {
						sharePaga()
					}
				})
			}else{
				sharePaga()
			}