weixin-js-sdk常见使用方法（vue）

1.安装npm install weixin-js-sdk

2.判断是否是在微信浏览器中

env.js<script>
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if(!isWeixin) {document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
}
</script>

在main.js中引用

main.jsimport Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import env from "./env";//运行环境
import "./all/axios";
Vue.config.productionTip = false;
new Vue({router,store,env,render: h => h(App)
}).$mount("#app");

3.微信登录，通过code换取openid，在起始页使用该方法

<script>
methods:{// 微信登陆wxLogin() {var that = this;axios.get("/common/loginAuth").then(function(res) {console.log("后台返回的链接地址", res.data);window.location.href = res.data;//跳转后台返回的链接地址}).catch(function(error) {});},
//换取用户信息postCode(res) {var that = this;axios.post("/common/getUserInfo", {code: res}).then(function(res) {cookie.set("openid", res.data.openid);//code像后台换取openid并存入}).catch(function(error) {console.log(error);});}},
created() {var r = window.location.href;//获取当前链接，拆分当前链接//当前链接地址为后台返回的参数，有拆分得到链接中的code,通过postCode()方法获取openid，没有则通过wxLogin()方法开始微信登录if (r.indexOf("?") != -1) {r = r.split("?");r = r[1].split("&");r = r[0].split("=");r = r[1];} else {this.wxLogin();}if (r) {this.postCode(r);} else {this.wxLogin();}},
</script>

weixin-js-sdk常见使用方法（vue）相关推荐

【微信分享】微信分享集成使用weixin js sdk 兼容旧版本 2
之前有写过一份微信分享集成的文章, 这次进行了重新的整理, 具体的功能有: 1.分享到朋友圈(图+一句话) 2.分享到朋友(图+标题+一句话) 3.强制显示or隐藏右上角更多按钮 4.强制关闭当 ...
JS类型转换常见方法
转自:微点阅读 https://www.weidianyuedu.com JS类型转换常见的方法集合一.类型转换 1.转换成字串 ECMAScript的Boolean值.数字和字串的原始值的有趣之 ...
vue移动端，使用腾讯提供的JS SDK实现第三方登录
1. 首先需要申请接入QQ登录,并成功获取到appid和appkey 1-1 在QQ互联上先申请为开发者 1-2 申请审核通过之后在首页上方点击应用管理,然后创建应用选创建网站应用 1-3 注意:这个 ...
pHp封装成vue,vue.js生成条形码的方法
本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家. 1.下载插件npm install @xkeshi/vue-barcode //下载条形码插件 2.在m ...
.php中js写法,js函数常见的写法以及调用方法
写在前面:本文详细的介绍了5中js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法.不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考. 1.常规 ...
创建Vue项目，找不到router文件（router.js）的解决方法
创建Vue项目,找不到router文件(router.js)的解决方法问题描述: 安装 Vue Router 原因分析: 解决方案: 命令窗口创建使用图形化界面问题描述: 如图所示: 安装 Vu ...
JS常见正则方法整理
JS常见正则方法整理目录文章目录前言 1. 使用测试方法 - `test` 2. 同时用多种模式匹配文字字符串 - `x|y` 3. 匹配时忽略大小写 - `/x/i` 4. 提取匹配项 - ` ...
学JS的心路历程 -数组常见处理方法
昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果. 话不多说,我们赶紧来看吧! Array.prototype.map() 会回传一 ...
cli vue 外部js 引入文件_javascript - vue cli构建的项目中，vue组件里怎么引入外部js文件里的方法...
问题我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...

weixin-js-sdk常见使用方法（vue）

weixin-js-sdk常见使用方法（vue）相关推荐

最新文章

热门文章