H5 uniapp 接入wx sdk

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 


  
    
    
    <%= htmlWebpackPlugin.options.title %>
    
    
    
    
    
    
    
  
  
    
    
// 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

你可能感兴趣的:(uni-app)