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. ogre3D学习基础14 -- 雾化效果与天空面,天空盒,天空穹

    前几天设置天空盒时一直出问题,现在问题终于解决了,问题来的莫名其妙,走的也莫名其妙. 第一,还是框架,我们依然使用ExampleApplication文件,框架如下 #include "Ex ...

  2. Python-S9——Day100-Web前端框架之Vue

    01 课程简介: 02 let和const: 03 箭头函数: 04 对象的单体模式: 05 nodejs介绍和npm操作: 06 webpack.babel介绍和vue的第一个案例: 07 昨日内容 ...

  3. python 学习分享-函数篇2

    递归 自己玩自己的函数: 1. 必须有一个明确的结束条件 2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少 3. 递归效率不高,递归层次过多会导致栈溢出 递归例子和二分查找都放在里面了 ...

  4. LeetCode661图片平滑器

    题目描述:包含整数的二维矩阵 M 表示一个图片的灰度.你需要设计一个平滑器来让每一个单元的灰度成为平均灰度 (向下舍入) ,平均灰度的计算是周围的8个单元和它本身的值求平均,如果周围的单元格不足八个, ...

  5. OgnlContext 源码

    // Copyright (c) 1998-2004, Drew Davidson and Luke Blanshard package ognl; import ognl.enhance.Local ...

  6. 企鹅的游戏(penguin)

    企鹅的游戏(penguin) 题目描述 Shiva养了一只小企鹅.小企鹅很聪明,她总是帮Shiva和他的好朋友想出很多很好玩的游 戏.其中有一个游戏特别经典,Shiva和他的小伙伴们百玩不厌. 游戏规 ...

  7. 排列计数(permutation)

    排列计数(permutation) 题目描述 求有多少种长度为n的序列A,满足以下条件: 1) 1~n这n个数在序列中各出现了一次 2) 若第i个数A[i]的值为i,则称i是稳定的.序列恰好有m个数是 ...

  8. CentOS7安装Elasticsearch5.5.3

    一.准备 安装Java环境,elasticsearch推荐安装java1.8.0_131或更高的版本,安装教程CentOS7安装JDK1.8 二.安装 CentOS下可以选择.tar.gz或rpm方式 ...

  9. 集成 Union Pay - 银联支付--ios

    请看这个网址,谢谢谢 http://www.cnblogs.com/oc-bowen/p/6000389.html

  10. hdoj 1175 连连看

    连连看 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...