Vue Wechat

最新推荐文章于 2024-08-21 09:43:15 发布
最新推荐文章于 2024-08-21 09:43:15 发布
阅读量708 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JunChow520/article/details/104512510
版权

项目结构

  • 前端：Vue
  • 后端：Koa
  • 数据库：MySQL

问题

  • SPA单页应用如何解决微信授权时的跳转？
  • SPA单页应用应该在那个环节获取微信授权呢？

微信网页授权

微信网页授权操作流程

  1. 用户同意授权以获取code
  2. 通过code换取网页授权的access_token

首先需要明确的是，前后端分离的项目，是不能直接在前端使用AJAX调用微信接口获取到用户信息的。为什么？前端是基于浏览器，浏览器具有同源策略限制。使用AJAX直接获取本域名外的地址，是需要跨域处理的。虽然前端提供了JSONP，但需要服务端配置。你在前端使用JSONP访问微信的接口，微信的程序员是不会配合你的。所以除了获取code直接使用跳转到微信，微信在跳转会你的前端页面是可行的。不过需要将前端的地址配置到公众后台。否则redirect_uri不会被微信识别。至于网页授权的其他接口，直接使用AJAX访问，微信则会提示跨域错误。因此，必须将这些接口放到后端来实现。

用户授权获取code，发起授权何时触发呢？

  • 前端获取code传递给后端

向微信发起授权时需传递一个重定向的 redirectUri 地址，该地址用于获取微信返回的 code。当微信接收到授权请求后会将 code 拼接到 redirectUri 链接后面并重定向回来。我们可以拿到code之后再传递给后端，后端利用 code 去获取access_token。

若前后端分离且使用不同的URL地址，此时需要在微信公众平台配置前后端两套域名，因为前端也调用了微信接口，不然会出现 redirect_uri 参数错误的提示。

  • 前端传递授权地址，后端调用微信接口

前端首先获取当前地址并传递给后端，后端通过微信授权接口，将此地址作为微信授权中的redirect_uri参数，重定向到前端后获取code。

前端首先使用路由拦截，然后先后端发起请求。后端向微信发起获取code的请求，微信重定向到前端授权页面，在前端授权页面中获取code值。前端获取code值后向后端发送请求，后端向微信发起授权请求并获取用户数据，返回给前端。

  • 后端认证授权返回前端地址

前后端约定授权成功后返回的前端地址，用户直接访问后端微信授权的地址。后端与微信交互时前端不参与。当授权成功后，后端在跳转到前端指定地址。若前端地址修改，则后端必须更改。

这里采取的方式是在前端通过微信接口获取code，再请求后端通过微信接口获取access_token，通过access_token获取用户信息，完成用户关注后自动注册。

需要注意的，由于前端使用微信接口，针对使用vue做了前后端分离的项目，需要提前为前端配置域名，并在微信公众平台中添加，这样前端才能访问微信接口，否则会出现 redirect_uri 错误的提示。

微信网页授权获取票据code

微信的code参数作为换取access_token的票据，每次用户同意授权后，所携带的code值都不一样。code只能使用一次，若5分钟未被使用将自动过期。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE&connect_redirect=1#wechat_redirect

由于微信接口授权操作安全等级较高，在发起授权请求时，微信会对授权链接做正则匹配校验。若链接参数顺序错误，授权页面将无法正常访问。

接口参数必填描述
appid是微信公众号开发者唯一编号
redirect_uri是微信授权后重定向的回调链接地址，必须使用urlencode对链接进行处理。
response_type是返回类型，默认为code。
scope是应用授权作用域，分为snsapi_base和snsapi_user_info。
state否重定向后会携带state参数，开发者可自定义参数值，128个字节。
#wechat_redirect是-

确保微信公众号拥有授权作用域即scope参数的权限下，使用授权接口。微信服务号获取高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo。

应用授权作用域描述
snsapi_base静默授权，不弹出授权界面，直接跳转，只能获取用户openid，无法获取用户信息。
snsapi_userinfo主动授权，弹出授权界面，可通过openid获取昵称、性别、所在地。

静默授权由于是自动授权并跳转的，因此对用户来说是无感知的，但这种授权方式只能获取用户的openid，无法获取用户其他信息。在只需要标识用户而无需收集其他信息的场景中使用。比如投票、点赞等。

主动授权是当用户进入页面后会弹出授权窗口，需手动同意。因此可获取用户的基本信息。对于已关注微信公众号的用户，当用户从公众号会话或自定义菜单进入授权页面时，即使使用snsapi_userinfo也是静默授权的。

当用户同意授权后页面间跳转到redirect_uri/?code=CODE&state=STATE页面。

vue中使用微信授权获取code值

$ vim Index.vue

在vue的craeted方法中，首先判断运行环境是否为生产环境，然后判断是否为微信浏览器，通过获取当前连接地址中的code参数来判断，是否使用微信接口来授权。如果没有code则跳转授权。若获取到code值则根据code值去请求后台微信接口获取用户信息。

created(){
    const env = process.env.NODE_ENV;
    if(env === "production"){
        if(!this.isWechat()){
            Toast("请在微信中打开");
            return;
        }
        const code = this.$route.query.code;
        //console.log(code, !code, !!code, code===undefined);
        if(code === undefined){
            const appId = process.env.VUE_APP_WX_APPID;
            //const redirectUrl = process.env.VUE_APP_URL;
            const redirectUrl = window.location.href;//当前地址
            this.auth(appId, redirectUrl);
        }else{
            //微信授权获取用户信息
            const url = `${this.apiUrl}/api/grant?code=${code}`;
            this.axios.get(url).then(res=>{
                const ret = res.data;
                if(ret.code !== 200){
                    Toast(ret.message);
                    return;
                }
            }).catch(err=>{
                //console.error(err);
            });
        }
    }
    this.env = env;
},
methods:{    //微信浏览器判断
    isWechat(){
        const ua = window.navigator.userAgent.toLowerCase();
        return ua.indexOf('micromessenger') !== -1;
    },
    //微信授权
    auth(appId, redirectUrl, state="STATE"){
        const redirectUri = encodeURIComponent(redirectUrl);
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
        console.log(url);
        window.location.href = url;
    },
}

是否需要缓存code呢？

当用户进入目标URL首先会获取code，然后将code传递给后端以获取用户信息并返回。缓存code会出现的问题是，如果code缓存时间过长则会出现重复code。这里面涉及的问题是code是否能够被重复消费呢？如果使用code作为缓存键值，则需要定时清理。当使用code能获取到缓存则走缓存，否则重新获取。为避免出现code出现重复，因此需要定理清理缓存。因为code是一次性的，若重复消费则在获取微信openid时会出现为空的现象。

{
  “errcode”:40163,
  "errmsg":"code been used"
}

如何解决刷新网页出现code重复消息的问题呢？

通过code获取openid时，code只能使用一次。因此，可以在第一次获取到opennid后就将其缓存起来。刷新时判断openid是否存在，若不存在则通过code获取openid。

JavaScript封装

//网页授权 获取临时凭证code
exports.authorize = (appid, redirect_uri, state="STATE", scope="snsapi_userinfo")=>{
    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
    return url;
};

access_token

微信开发中access_token分为两种，一种是普通的access_token即公众号接口全局唯一票据，是调用接口访问的凭证。另一种是网页授权时通过code换取的access_token，用于获取微信用户信息。若两种access_token发生混淆则会出现"invalid access_token"的错误。

网页授权凭证 access_token

当用户在微信客户端中访问第三方页面时，微信公众号可通过微信网页授权机制，获取用户的基本信息。

微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获得一个网页授权特有的接口调用凭证access_token，通过此access_token可以在授权后调用接口获取微信用户基本信息。

网页授权凭证access_token有效期为7200秒，用于获取对应微信用户的信息，与微信用户是一对一的关系且调用次数无限制。使用网页授权时，不管用户是否关注过微信公众号，均可获取对应用户的个人信息。

网页授权接口地址GET

GET https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
接口参数必须描述
appid是微信公众号唯一标识，开发者账号。
secret是微信公众号开发者密钥
code是-
grant_type是授权类型，为authorization_code。

取网页授权凭证时会遇到跨域问题，解决的方法是利用代理进行中转。

跨域是浏览器的同源策略问题而衍生出的需求，跨域请求是指服务器A的页面去请求服务器2的资源，服务器1和2之间只要域名、端口、IP不同都属于跨域。

在Node.js环境中，可以使用SuperAgent，SuperAgent是一个轻量级、灵活的、易读的、低学习曲线的客户端请求代理模块。

成功返回

{ 
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}
成功参数描述
access_token网页授权接口调用凭证
expires_in网页授权接口调用凭证超时时间，单位为秒。
refresh_token用户刷新access_token
openid用户唯一标识
scope用户授权作用域

当用户未关注公众号时，访问需网络授权的页面时，也会产生一个用户和公众号唯一的openid。

错误返回

{
 errcode: 40125,
 errmsg: 'invalid appsecret, view more at http://t.cn/RAEkdVq, hints: [ req_id: YhmAs.5ce-Jw_PAa ]'
}

出现错误码40125，提示非法的AppSecret。核对32位AppSecret并未发现错误，可微信公众平台重置AppSecret。并在代码中对应位置错误处理。出现这种问题，可能是微信公众平台中的AppSecret被重置导致原始AppSecret失效造成的。

JavaScript封装

//网页授权 根据code换取access_token。
exports.accessToken =  (appid, secret, code)=>{
    const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code`;
    return this.httpGet(url);
};

刷新访问凭证

关于refresh_token为什么需要刷新呢？

因为access_token的使用周期是7200秒（2小时），若超时则失效就无法再使用。此时就需要进行刷新操作，根据原来获取access_token时返回的refresh_token来刷新。

refresh_token的有效期为30天，但refresh_token失效后则需用户重新授权。

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
接口参数必须描述
appid是微信公众号唯一标识
grant_type是授权类型refresh_token
refresh_token是通过access_token获取的refresh_token

成功返回

{ 
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}
返回参数描述
access_token网页授权接口调用凭证
expires_inaccess_token接口调用凭证超时秒数
refresh_token用户刷新的access_token
openid用户唯一标识
scope用户授权作用域，多个使用逗号分隔

错误返回

{
  "errcode":40029,
  "errmsg":"invalid code"
}

JS封装

//网页授权 access_token超时刷新
exports.refreshToken = (appid, refresh_token)=>{
    const url = `https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=${appid}&grant_type=refresh_token&refresh_token=${refresh_token}`;
    return this.httpGet(url);
};

接口访问凭证access_token

access_token是微信公众号全局唯一票据，是公众号调用接口访问的凭证。

access_token存储至少要保存512个字符空间，有效期为2小时7200秒，需定时刷新。当access_token过期时，才需要再次调用接口获取。理想情况下，一个7x24小时运行的系统，每天需要获取12次access_token，即每隔2小时获取一次。若在有效期内再次获取access_token将会导致上次获取的access_token失效。

获取access_token接口调用频率限制为2000次/天，因此需要将获取到的access_token存储起来，然后定期调用access_token更新，以保证随时取出的access_token都是有效的。

接口地址GET

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
接口参数必须描述
grant_type是获取access_token使用client_credential
appid是第三方用户唯一凭证
secret是第三方用户唯一凭证密钥，即appsecret。

成功返回

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200
}
成功返回参数描述
access_token接口访问凭证
expires_in凭证有效时长，单位为秒。

错误返回

{
  "errcode":40013,
  "errmsg":"invalid appid"
}
错误返回参数描述
errcode错误编码
errmsg错误信息

JS封装方法

//获取微信接口访问凭证
exports.token= async (appid, secret)=>{
    const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
    return this.httpGet(url);
};

获取微信用户信息

网页授权后若需拉取用户信息，则必须在获取code值将scope接口访问作用域设置为snsapi_userinfo。在通过code获取access_token和openid后，在通过接口获取用户信息。

接口地址

GET https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
接口参数描述
access_token网页授权接口调用凭证
openid用户唯一标识
lang返回国家地区语言版本，zh_CN简体 / zh_TW繁体 / en英语

成功返回

{    
  "openid": "OPENID",
  "nickname": "NICKNAME",
  "sex": "1",
  "province": "PROVINCE"
  "city": "CITY",
  "country": "COUNTRY",
  "headimgurl":    "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege": [ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
返回参数描述
opoenid用户唯一标识
unionid微信公众号绑定到微信开放平台后才会出现此字段
nickname微信用户昵称
headimgurl微信用户头像
sex微信用户性别 0未知 / 1男性 / 2女性
province省份
city城市
country国家，CN中国
privilege微信用户特权信息，JSON格式。
//网页授权 获取微信用户信息
exports.userinfo =  (access_token, openid, lang="zh_CN")=>{
    const url = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=${lang}`;
    return this.httpGet(url);
};

微信自定义分享

微信自定义分享主要是分享网页，是将自己的页面分享到微信中以卡片形式展现，含有标题、摘要、缩略图，而非单纯的分享链接。

  • 在微信公众号管理平台中设置JS接口安全域名，域名需通过ICP备案。
  • 微信自定义分享需通过微信认证
  • 微信自定义分享只能定义分享内容和格式，不能为DOM元素绑定事件来执行分享，只能点击微信右上角的分享才有效果。
  • 微信自定义分享需首先引入JSSDK的JS文件

微信自定义分享JSSDK文件

http://res.wx.qq.com/open/js/jweixin-1.2.0.js
http://res.wx.qq.com/open/js/jweixin-1.4.0.js
http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
...

使用JSSDK的页面首先必须注入配置信息，否则将无法调用，每个URL仅需调用一次，对于变化URL的SPA的WebApp可以在每次URL变化时进行调用。

注入配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

配置参数可使用后台接口获取，需要获取的参数包括signature、nonceStr、timestamp，最核心的参数是signature签名。

生成签名

  1. 后台获取微信接口全局访问凭证 access_token，接口调用单日2000次限制。
  2. 使用access_token获取jsapi_ticket
  3. 生成签名

获取接口全局访问凭证

//微信接口 获取微信接口访问凭证 access_token
exports.token = async (appid, secret)=>{
    const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
    return this.httpGet(url);
};

成功返回

成功返回参数描述
access_token接口访问凭证
expires_in凭证有效时长，单位为秒，默认7200秒即2小时。

由于access_token有效期为2小时，每日使用上限为2000次。需要缓存并定时刷新，缓存的方式可以使用设置过期时间的Session，也可以使用设置过期时间的Redis。另外，最好添加上时间标识。

使用Redis保存access_token时，由于每个appid会对应一个不同的access_token，因此使用hash哈希形式保存对象，以appid作为key。

jsapi_ticket

jsapi_ticket 是微信公众号用于调用微信JS接口的临时票据，正常情况下，jsapi_ticket的有效期是7200秒即2小时。jsapi_ticket可通过全局接口访问票据access_token来获取。由于获取jsapi_ticket的API接口调用次数具有每日上限，频繁刷新jsapi_ticket将会导致API调用受限，影响自身业务，因此开发者必须在自己的服务器中全局缓存jsapi_ticket。

接口地址

GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

//微信接口 获取授权页ticket
exports.getTicket = (access_token, type="jsapi")=>{
    const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=${type}`;
    return this.httpGet(url);
};

成功返回

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

封装

由于项目是前后端分离，前端使用vue后端使用koa，后端使用koa做HTTP服务器，用于提供API接口使用。当前端获取到code时，会见code传递给后端。

后端封装微信接口的处理方法

$ npm i -S superagent
$ vim wechat.js

const crypto = require("crypto");
const superagent = require("superagent");

//微信接口错误信息
const error = {
    "-1":"系统繁忙，请稍后再试。",
    "0":"请求成功",
    "40001":"AppSecret错误",
    "40002":"请确保grant_type为client_credential",
    "40164":"调用接口的IP不在白名单内"
};

//SHA1加密
exports.sha1 = code=>crypto.createHash("sha1").update(code).digest("hex");
//生成随机字符串
exports.noncestr = _=>Math.random().toString(36).substr(2, 15);
//生成秒级时间戳
exports.timestamp = _=>parseInt(new Date().getTime() / 1000);
//生成签名
exports.signature = args=>{
    const raw = `jsapi_ticket=${args.jsapi_ticket}&noncestr=${args.noncestr}&timestamp=${args.timestamp}&url=${args.url}`;
    console.log(raw);
    const sha1 = this.sha1(raw);
    console.log(sha1);
    return sha1;
};
//微信接口 获取微信接口访问凭证 access_token
exports.token = async (appid, secret)=>{
    const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
    return this.httpGet(url);
};
//微信接口 获取授权页ticket
exports.getTicket = (access_token, type="jsapi")=>{
    const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=${type}`;
    return this.httpGet(url);
};
//网页授权 获取临时凭证code
exports.authorize = (appid, redirect_uri, state="STATE", scope="snsapi_userinfo")=>{
    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
    return url;
};
//网页授权 根据code换取access_token。
exports.accessToken =  (appid, secret, code)=>{
    const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code`;
    return this.httpGet(url);
};
//网页授权 access_token超时刷新
exports.refreshToken = (appid, refresh_token)=>{
    const url = `https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=${appid}&grant_type=refresh_token&refresh_token=${refresh_token}`;
    return this.httpGet(url);
};
//网页授权 获取微信用户信息
exports.userinfo =  (access_token, openid, lang="zh_CN")=>{
    const url = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=${lang}`;
    return this.httpGet(url);
};

//CURL发送HTTP协议GET请求
exports.httpGet = async url=>{
    console.log(url);
    const response = await superagent.get(url);
    const result = JSON.parse(response.text);
    //console.log(result);
    return result;
};
JunChow520
关注
探索 Vue-Wechat：一个基于 Vue.js 构建的微信小程序框架
gitblog_00057的博客
03-24 411
探索 Vue-Wechat：一个基于 Vue.js 构建的微信小程序框架 项目地址:https://gitcode.com/useryangtao/vue-wechat Vue-Wechat 是一个强大的工具，它将 Vue.js 的魅力带入了微信小程序的开发世界。对于熟悉 Vue.js 而又希望在微信平台扩展应用的开发者来说，这是一个不可多得的选择。 项目简介 Vue-Wechat 是由开发者 u...
Vue-WechatApplet-SmartHome:基于vue，有赞Vant UI 开发的智能家居微信小程序
05-24
lxapp A Mpvue project Build Setup # 初始化项目 vue init mpvue/mpvue-quickstart myproject cd myproject # 安装依赖 yarn # 开发时构建 npm dev # 打包构建 npm build # 指定平台的开发时构建(微信、百度、头条、支付宝) npm dev:wx npm dev:swan npm dev:tt npm dev:my # 指定平台的打包构建 npm build:wx npm build:swan npm build:tt npm build:my # 生成 bundle 分析报告 npm run build --report For detailed explanation on how things work, checkout the and .
vue-wechat:基于vue搭建的微信页面APP
05-02
起因 看过一遍Vue.js文档后，想做点什么，于是挑了微信作为目标 技术 技术上用的基础的Vue router和axios等等全家桶，实现了几乎全部界面。 界面 在线演示地址 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report For a detailed explanation on how things work, check out the and .
vue2.0+wechat
weixin_30340819的博客
06-02 82
首先遇到的问题就是使用npm下载JSSDK 下载正确的JSSDK 正确的名称是：'weixin-js-sdk' 其实有好几个相似的名称都可以下载，只有这一个能用支付问题使用Vue的路由跳转到支付页面总是报错没有办法支付，使用js跳转到支付页就没问题了另外Vue是数据驱动的框架，组件化开发，目的是实现通过组件的超高重用率提高开发效率 转载于:https://www.cnblogs.com/mi...
Vue WeChat Login 开源项目教程
最新发布
gitblog_00185的博客
08-21 327
Vue WeChat Login 开源项目教程 vue-wechat-loginVue 3.0 + TypeScript 微信网页授权登录示例项目地址:https://gitcode.com/gh_mirrors/vu/vue-wechat-login 1. 项目的目录结构及介绍 Vue WeChat Login 项目的目录结构如下： vue-wechat-login/ ├── public/ ...
vue-wechat-title——微信动态设置标题
前端小知识
09-05 1352
安装 ： npm install vue-wechat-title --save 引入： // 设置每个页面的标题 //在mian.js中引入 作为全局使用 import VueWechatTitle from "vue-wechat-title"; Vue.use(VueWechatTitle); 使用： //在app.vue中的router-view中写入 <templ...
vue微信录音（本地录音）
02-22
在Vue.js前端开发中，实现微信录音功能通常涉及到与微信API的交互，这需要对JavaScript、ECMAScript以及微信JS-SDK有深入的理解。微信录音功能主要应用于微信小程序或者通过微信浏览器访问的网页应用，它允许用户在...
vue 微信扫码登录(自定义样式)
10-15
主要介绍了vue 微信扫码登录(自定义样式)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue微信分享的实现(在当前页面分享其他页面)
10-17
主要介绍了vue微信分享，在当前页面分享其他页面，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue微信公众号授权插件
08-12
vue微信公众号授权插件
Vue2-WxChat
08-14
vue2开发的仿微信，支持pc和移动端，图片压缩修复处理，交互逼真，多页路由，666。
vue--网页微信聊天功能
08-29
使用vue做的网页版微信聊天，里面主要技术点是组建间的通信，localStorage存储聊天数据，v-model数据的双向绑定等
vue-chat是一个使用vue实现的在线聊天应用，该项目基于vue、vuex、vue-router、socket.io-client、sass、axios等技
07-09
功能 注册登录功能，使用rsa非智能智能传输用户登录信息至服务端，对密码进行sha256智能后用户存储信息至数据库。 聊天室在线聊天功能，基于socket.io-client实现。 支持多种消息类型，包括文本/表情表情/长按头像艾特/发送表情包/...待增加。
webchat：基于vue（基于vue2.0的实时聊天项目）的Websocket项目
02-02
网络聊天 说明：master分支还不太稳定，可以查看稳定分支 功能 注册登录功能 聊天功能 查看历史记录 多个聊天室 与机器人对接 图片发送 发送链接 发送表情 图片预览 消息未读 断线重连 好友资料查看 添加好友 单聊 搜索好友 热门好友推荐 启动项目 开发环境：MongoDB，Node 8.5.0 +，Npm 5.3.0+ 产品环境：Redis，MongoDB，Node 8.5.0 +，Npm 5.3.0+ 启动客户端 $webchat cd client $client npm install -----安装依赖 $client npm run serve -----运行 启动服务端 $client cd .. $webchat npm install $webchat npm run dev 打包 打包客户端 cd client npm run build 服务端运行 cd .. npm run prod 在线观看 技术交流 qq群：437938625 加微信，拉你进微信群。 技术栈 前vue，vue-router，vuex 初期nodejs，express 数据库mongo
vue+web端仿微信网页版聊天室功能
11-28
一、项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat，实现了发送消息、表情(动图)，图片、视频预览，右键菜单、截屏、截图可直接粘贴至文本框进行发送。 二、技术框架 •MVVM框架：Vue2.5.6 •状态管理：Vuex •页面路由：Vue-router •iconfont图标：阿里巴巴字体图标库 •自定义滚动条：vue-gemini-scrollbar •弹窗组件：element-ui（饿了么前端UI库） •环境配置：node
uniapp-vue3-wechat：基于uniapp+vue3仿微信app聊天实例(H5+小程序+App端)
码农ICoding
04-29 2557
原创重磅新作uniapp-vue3-wechat聊天，基于最新跨端技术uni-app+vue3+pinia2+vite4+uv-ui构建多端仿微信app实例。支持编译到H5+小程序端+App端。
vue3.2使用vue-wechat-title及路由导航守卫实现浏览器动态标题、替换浏览器的vue小图标
wang13679201813的博客
09-01 2871
vue-wechat-title设置动态浏览器页面标题
vue 使用 vue-wechat-title 动态设置title
黄同学的博客
01-10 1420
【代码】vue 使用 vue-wechat-title 动态设置title。
vue 微信支付自定义键盘
02-08
Vue 微信支付自定义键盘涉及到前端的技术和微信支付的开发文档。 首先，我们需要在Vue应用中创建一个自定义的键盘组件，可以使用Vue的组件特性来实现。这个组件可以包含一个数字键盘和其他带有特殊功能的按钮，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值