H5 uniapp 接入wx sdk

rrrrroy_Ha

已于 2023-11-27 18:02:18 修改

阅读量1.4k

点赞数 8

文章标签： uni-app

于 2023-11-27 18:01:35 首次发布

本文链接：https://blog.csdn.net/rrrrroy_Ha/article/details/134650700

版权

uniapp因为要兼容小程序等，会重写wx对象，导致引入的jweixin-1.6.0.js中对象不生效。

综合网络资料，有两种解决方案：

一，通过npm工具引入

npm install jweixin-module --save

实际上是借用了wx的另一个对象jWeixin

//main.js

import jWeixin from 'jweixin-module'
Vue.prototype.$wx = jWeixin

// index.js

this.$wx.config({
    debug: true,
    appId,
    timestamp,
    nonceStr,
    signature,
    jsApiList,
})
this.$wx.ready(()=> {})

参考文章：uniapp开发h5 调用微信sdk 全网最全指南！！！！血泪史！！!

二，手动引入

鉴于uniapp会重写wx的特性，在初始化后，可以再手动引入js，覆盖原有的wx对象

// 新增模板 template.html 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- Open Graph data -->
    <!-- <meta property="og:title" content="Title Here" /> -->
    <!-- <meta property="og:url" content="http://www.example.com/" /> -->
    <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
    <!-- <meta property="og:description" content="Description Here" /> -->
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
          (coverSupport ? ', viewport-fit=cover' : '') +
          '" />'
      )
    </script>
    <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
  </head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <!-- <script>
    window.wx = {}
  </script>
  <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
</html>

// manifest.json
"h5" : {
        "optimization" : {
            "treeShaking" : {
                "enable" : true
            }
        },
        "sdkConfigs" : {
            "maps" : {}
        },
        "router" : {
            // "base" : "/process-client/",
            "mode" : "history"
        },
        "devServer" : {
            "disableHostCheck" : true,
            "proxy" : {
                "/api" : {
                    "target" : "http://xxx.xx.xxx.xxx:xxx",
                    "changeOrigin" : true,
                    "secure" : false,
                    "logLevel" : "debug",
                    "pathRewrite" : {
                        "^/api" : ""
                    }
                }
            },
            "https" : false
        },
        "template" : "template.html"
    }

// utils/wx-sdk.js

export const createdScript = (callback) => {
  window.wx = null
  const script1 = document.createElement('script')
  script1.setAttribute('type', 'text/javascript')
  script1.setAttribute('src', 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js')
  document.head.appendChild(script1)
  script1.onload = function () {
    window.wx = window.jWeixin
    callback && callback()
  }
}

// App.vue

<script>
import { createdScript } from '@/utils/wx-sdk.js'
export default {
  onShow: function () {
    console.log('App Show')
    createdScript(() => {
      api({
        url: window.location.href
      }).then(([err, res]) => {
        if (err) {
          return
        }
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appId, // 必填，企业微信的corpID
          timestamp: Number(res.timestamp), // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: []
        })
      })
    })
  },
}
</script>