15.【nuxt起步】-Nuxt使用jsweixin sdk
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的更多相关文章
- 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& ...
- 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. ...
- 13.【nuxt起步】-部署到正式环境
已经购买centos服务器,并安装了nodejs环境 Secure CRT链接 Cd / Cd /var/www Mkdir test.abc.cn 用ftp 除了node_modules,其他都上传 ...
- 11.【nuxt起步】-登录验证
1.新建/pages/login.vue 2.安装cookie Cnpm install js-cookie --s 3.Login.vue增加 import Cookie from 'js-cook ...
- 10.【nuxt起步】-引用mintui
这时候我们完成了list.vue,但是怎么返回index.vue,这时候需要这个头部返回 1.我们使用现成的minu-ui,eleme的开源移动端 ,参考 https://www.cnblogs.co ...
- 9.【nuxt起步】-scroll分页加载
面是单页,下面实现一个列表页和分页加载的例子 1.新建pages/list.vue <template> <div> 分页加载列表页面 </div> </te ...
- 7.【nuxt起步】-Nuxt与后端数据交互
接下来就是对接服务端接口,展示真实的数据 1.做了个虚拟接口地址:http://test.yms.cn/testjson.asp 输出数据: { "title": "单间 ...
- 6.【nuxt起步】-完成一个静态的页面
1.接下来新建/component/maincontent.vue 把这些html代码copy到maincontent.vue 发现格式比较难看,就格式化一下 2.插件安装 beautify,安装后重 ...
- 5.【nuxt起步】-swiper组件
接下来是一个比较常用,也比较重要的组件 swiper,可以自行搜索 vue swiper,有很多开源组件,我这里就复用之前一个熟悉的, 1.新建component/banner.vue 刷新报错: 要 ...
随机推荐
- [已解决]Argument list too long如何处理?
Argument list too long 本质是需要处理的长度超过系统的长度,因此无法执行相关命令. 经过搜索发现了两种方法,思想都是将参数切分成小的段落进行执行. 法一:通过xargs传递参数 ...
- SSM框架 springMVC对静态资源访问的处理
https://my.oschina.net/hnqingping1255/blog/415575 错误信息 [org.springframework.web.servlet.PageNotFound ...
- ORA-12012: 自动执行作业 "SYS"."ORA$AT_OS_OPT_SY_21" 出错
oracle 12.2.0.1版本报错: Errors in file /u01/app/oracle/diag/rdbms/easdb/easdb2/trace/easdb2_j000_27520. ...
- 经典SQL语句大全、50个常用的sql语句
50个常用的sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,T ...
- [CQOI2014][bzoj3504] 危桥 [最大流]
题面 传送门 思路 这道题中惟一的特别之处,就在于"危桥"这一个只能走两次的东西 我的第一想法是做一个dp,但是这道题只需要能不能走,也没有必要 网络流?貌似是个很好的选择 我们把 ...
- centos安装arm交叉工具链后常见的问题解决
[root@localhost osdrv]# arm-hisiv400-linux-gcc -vbash: /opt/hisi-linux/x86-arm/arm-hisiv400-linux/ta ...
- kubernetes 数据持久化之Glusterfs
1.GlusterFS 部署过程请参考上篇文章 2.配置endpoints [root@manager ~]# cat glusterfs-endpoints.json { "kind&q ...
- 利用Docker搭建本地https环境的完整步骤
利用Docker搭建本地https环境的完整步骤 这篇文章主要给大家介绍了关于如何利用Docker搭建本地https环境的完整步骤,文中通过示例代码将实现的步骤介绍的非常详细,对大家的学习或者工作具有 ...
- POJ1111 Image Perimeters
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8790 Accepted: 5260 Description Techn ...
- 洛谷P2114起床困难综合征
从高位到低位按位枚举,贪心.如果该位填1比填0结果优且填1不会超出m限制,那就填1,否则填0 /*by SilverN*/ #include<iostream> #include<c ...