VUE项目引入微信jssdk

最新推荐文章于 2025-07-23 11:52:31 发布

原创最新推荐文章于 2025-07-23 11:52:31 发布 · 3.7w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #jssdk

vue-js 同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍了一个基于Vue和Webpack的单页应用如何集成微信JS-SDK，实现微信内置浏览器的功能调用，如支付和API权限验证等。文章详细展示了前端代码配置过程，包括依赖包安装、配置项设置及与后端API交互获取必要参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们的一个vue + webpack的 SPA项目需要在微信中使用，因此需要导入微信的jssdk库。

通过搜索发现npm有微信jssdk的依赖包： weixin-js-sdk, 于是

导入依赖包

npm i -S weixin-js-sdk

前端页面Usage

import wx from 'weixin-js-sdk'

export default {
    created(){
     let param = {
        debug:true,
        url:'http://localhost:8081/productgroups',
        jsApiList: [
          'chooseWXPay',
          'checkJsApi'
      ]};
      wechatlib.queryJsConfig(param,(err,obj)=>{
        if(err){
          return this.$toast(err);
        }

        console.log('jsconfig ',obj);

        wx.config(obj);

        wx.ready(()=>{
          console.log('wx.ready');
        });

        wx.error(function(res){

          console.log('wx err',res);

          //可以更新签名
        });
      });
    }
}

wechatlib中获取jsconfig的方法

queryJsConfig(param,callback){
    networklib.post('/wechat/jsconfig',param).then(obj=>{

      callback(null,obj);
    })
        .catch(err=>{callback(err)});
  },

这里的jsconfig由后端服务器API生成

TO BE CONTINUE