npm install weixin-js-sdk --save 这个不行,这个是vue前端用的

网上找了一些vue jsweixin的案例 不能直接用 因为nuxt是后端运行,windows对象取不到,通过查找到了一个可用的案例

就是把js注入到前端

其中jssdkInfo和要分享的appid,noncestr等参数要去接口后端请求过来,核心代码复制如下:


wxInit(){
  const script = document.createElement('script');
  // 返回一个独立的promise
  script.src = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js';
  new Promise((resolve, reject) => {
  let done = false;
  script.onload = script.onreadystatechange = () => {
  if (
    !done &&
    (!script.readyState ||
      script.readyState === 'loaded' ||
      script.readyState === 'complete')
    ) {
      done = true;
      // 避免内存泄漏
      script.onload = script.onreadystatechange = null;
      resolve(script);
      }
    };
    script.onerror = reject;
    document
      .getElementsByTagName('head')[0]
      .appendChild(script);
      }).then(res => {
      wx.config({
        debug: false,
        appId: this.jssdkInfo.AppId,
        timestamp: this.jssdkInfo.TimeStamp,
        nonceStr: this.jssdkInfo.NonceStr,
        signature: this.jssdkInfo.Signature,
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
});  

15.【nuxt起步】-Nuxt使用jsweixin sdk的更多相关文章

  1. ERROR EPERM: operation not permitted, mkdir 'C:\Users\Administrator\Desktop\text\nuxt\basic\.nuxt\components'

    C:\Users\Administrator\Desktop\text\nuxt>cd basic C:\Users\Administrator\Desktop\text\nuxt\basic& ...

  2. 14.【nuxt起步】-Pm2 和nuxt服务运行

    1.安装pm2 npm install pm2 -gd 2.启动 Pm2 start ./bin/www 3. pm2 save 4.Pm2 startup 5.Pm2 save修改 package. ...

  3. 13.【nuxt起步】-部署到正式环境

    已经购买centos服务器,并安装了nodejs环境 Secure CRT链接 Cd / Cd /var/www Mkdir test.abc.cn 用ftp 除了node_modules,其他都上传 ...

  4. 11.【nuxt起步】-登录验证

    1.新建/pages/login.vue 2.安装cookie Cnpm install js-cookie --s 3.Login.vue增加 import Cookie from 'js-cook ...

  5. 10.【nuxt起步】-引用mintui

    这时候我们完成了list.vue,但是怎么返回index.vue,这时候需要这个头部返回 1.我们使用现成的minu-ui,eleme的开源移动端 ,参考 https://www.cnblogs.co ...

  6. 9.【nuxt起步】-scroll分页加载

    面是单页,下面实现一个列表页和分页加载的例子 1.新建pages/list.vue <template> <div> 分页加载列表页面 </div> </te ...

  7. 7.【nuxt起步】-Nuxt与后端数据交互

    接下来就是对接服务端接口,展示真实的数据 1.做了个虚拟接口地址:http://test.yms.cn/testjson.asp 输出数据: { "title": "单间 ...

  8. 6.【nuxt起步】-完成一个静态的页面

    1.接下来新建/component/maincontent.vue 把这些html代码copy到maincontent.vue 发现格式比较难看,就格式化一下 2.插件安装 beautify,安装后重 ...

  9. 5.【nuxt起步】-swiper组件

    接下来是一个比较常用,也比较重要的组件 swiper,可以自行搜索 vue swiper,有很多开源组件,我这里就复用之前一个熟悉的, 1.新建component/banner.vue 刷新报错: 要 ...

随机推荐

  1. ThinkPHP5 配置文件

    配置目录 系统默认的配置文件目录就是应用目录(APP_PATH),也就是默认的application下面,并分为应用配置(整个应用有效)和模块配置(仅针对该模块有效). ├─application 应 ...

  2. python安装pattern失败

    做文本分类需要用到pattern.en进行词形还原,安装了一上午都没有成功,mysqlclient安装失败.最后解决办法,pip install --only-binary :all: mysqlcl ...

  3. 聊聊、SpringBoot 静态资源访问

    SpringBoot 1.X 版本和 SpringBoot 2.X 版本在静态资源访问上有一些区别,如果直接从 1.X 升级到 2.X 肯定是有问题的.这篇文章就来讲讲这方面问题,也是项目中的坑. 先 ...

  4. sql 使用存储过程传递列名或表名作为参数

    原网址: http://www.cnblogs.com/85538649/archive/2011/09/23/2186155.html alter procedure Proc_UpdateDate ...

  5. allocator class

    当分配一大块内存时,我们通常计划在这块内存上按需构造对象,这样的我们希望将内存分配和对象构造分离.但是通常的new关键字的分配的动态空间,有时候会造成一些浪费,更致命的是“如果一个类没有默认构造函数, ...

  6. jquery中attr和prop的区别介绍

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  7. 异常为"当IDENTITY_INSERT设置为OFF时" 解决办法

    当 IDENTITY_INSERT 设置为 OFF 时,不能向表"A" 中的标识列插入显示值. 一般来说是自增ID造成的. 因此可以在数据库insert语句前加上 SET iden ...

  8. ZigBee学习三 UART通信

    ZigBee学习三 UART通信 在使用串口时,只需掌握ZigBee协议栈提供的串口操作相关的三个函数即可. uint8 HalUARTOpen(uint8 port,halUARTCfg_t *co ...

  9. Java EE 学习(5):IDEA + maven + spring 搭建 web(1)

    参考:http://www.cnblogs.com/lonelyxmas/p/5397422.html http://www.ctolib.com/docs-IntelliJ-IDEA-c--1590 ...

  10. Mysql和sqlServer命令比较

    http://cool.china.blog.163.com/blog/static/697310642010111202531210 Mysql和sqlServer命令比较 按语句功能划分,依次讲解 ...