首页 > 使用vue cli 构建的项目,现在需要使用微信js sdk,如何使用?

使用vue cli 构建的项目,现在需要使用微信js sdk,如何使用?

在vue组件中
const wx = require('../assets/js/wx')
后直接报出错误,

error in ./src/assets/js/wx.js

  error        space-unary-ops        Unexpected space after unary operator '!'                                                                      
  /Users/Niok/Documents/Work/so/ga-piclike/src/assets/js/wx.js:1:1
  ! function(a, b) { "function" == typeof define && (define.amd || define.cmd) ? define(function() {
   ^

应该是es6的问题,但是现在没有解决思路,所以前来提问

第一次使用vue写正式项目但是在这里卡住了。
还有开发模式时候的请求数据也有问题希望能得到解答。
谢谢

更新直接引入后的结果,在模块中无法找到这个wx

//更新
引入https://www.npmjs.com/package/weixin-js-sdk。
可以在app.js看到jweixin的引入。
import wx from 'weixin-js-sdk'
但是当我在组件下打印
console.log(wx)
控制台报 undefined;

//更新 已经解决
使用
https://www.npmjs.com/package/weixin-js-sdk

//更新些最终解决方案
一:安装 weixin-js-sdk 这个模块 npm install weixin-js-sdk --save-dev
二:开始使用 import wx from 'weixin-js-sdk'

然后就可以使用了。wx.config 然后使用接口了。不过现在我还有问题


eslint 的关系,用vue-cli 创建的项目,代码格式检查很严格,你把 ! function 中间的空格删掉试试,


将微信的sdk文件放在项目的 static 目录下,然后再引用。

类似于:

<script src="static/js/jquery-2.1.1.js"></script>

请问一下楼主最终是怎么解决的,我也碰到这个问题
import wx from 'weixin-js-sdk'
ready下
console.log(wx)
:undefined


在webpack配置文件中把eslint干掉,咳咳...


在index.html里面用script标签引用就可以了


好像可以这么用:

require(['../libs/jweixin-1.0.0.js'], function (wx) {
  console.log(wx)
})

参考:https://webpack.github.io/docs/code-splitting.html

上面还是不对!!!

如果不想改动jweixin-1.0.0.js,需要使用webpack的imports-loader(https://github.com/webpack/imports-loader),但要注意一个问题:https://github.com/webpack/imports-loader/issues/23

when using both 'babel-loader' and 'imports-loader', this=>window will not work #23

最终写成这样:

var wx = require('imports?this=>window!../libs/jweixin-1.0.0.js')
console.log(wx)

使用webpack的imports-loader 或者你使用<script></script> 然后使用

  externals: {
    'wx': 'jWeixin'
  },

在项目中使用

import wx from 'wx'
【热门文章】
【热门文章】