【Vue】vue使用server酱发送微信通知实战案例,axios发送server酱通知信息实战,js发送server酱教程

问题描述

这里贴一下server酱的官网
server酱
看了一下server酱的api调用实例,是php版本的
在这里插入图片描述
这里用vue,也就是前端js来实现发送消息


原因分析:

前端发送请求需要用到ajax,或者axios。
我这里用axios
代码示例

axios({
	methods:"get",
	url:"http://****************"
})

由于没有开server酱的会员,我测试post请求一直出问题,但是get请求成功了。这里贴一下get请求的案例。非常简单


解决方案:

这是我实现的js方法,
在这里插入图片描述

// 点击发送消息
handleSend(){
	let content=`2004年,教育部宣布实施“一村一名大学生计划”。
				2005年,省委组织部联合相关单位正式实施“一村一名大学生计划”,
				2014年12月,将该项目升级为“农民大学生培养计划”。
				截至目前,长沙县已累计招收1988名“农民大学生”。
				其中一部分人担任村(社区)党(总)支部书记,一部分人成为了村(社区)“两委”干部,
				还有一部分人创业致富成为农村致富“带头人”。
				即日起,长沙县党建O2O开设“走近农民大学生”专栏,
				讲述“农民大学生”筑梦乡村的故事。`
	sendMessage('填你的key','这是一句标题',content).then((res)=>{
			console.log('res:',res);
		})
}

封装的方法,在另一个js里面

import axios from 'axios'
// 利用server酱发送消息
export function sendMessage(key,title,content) {
	console.log('发送参数:',key,title,content);
	return axios({
		method: 'get',
		url: "https://sctapi.ftqq.com/"+ key +".send?title="+title+"&desp="+content
	})
}

把这个封装方法的js,导入在你要使用的vue页面中,并且引入这个方法名。

我这个方法名叫sendMessage,是封装在一个js里面的。

在这里插入图片描述
在要使用的页面中引用,然后给他一个点击事件,执行方法。

来看看成功结果

在这里插入图片描述
在这里插入图片描述

缺点就是只能打开页面才能看到详情,比起网上的python写天气预报,给女朋友提醒消息啥的,还是不够用,不过那个是测试公众号,server酱效果也类似,不过server酱为了运行更安全,防止审核机制屏蔽啥的,卡片只能展示标题。

它的参数如下

  • title: 消息标题,必填。最大长度为 32
  • desp: 消息内容,选填。支持 Markdown语法 ,最大长度为 32KB ,消息卡片截取前 30 显示。
  • short: 消息卡片内容,选填。最大长度64。如果不指定,将自动从desp中截取生成。
  • 在这里插入图片描述

挖个坑:用node.js来发送server酱消息。丢到服务器的青龙面板去做定时任务,每天来一个消息通知啥的。微信测试公众号的发送请求在学了。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
好的,如果你想使用Vue3来实现前端微信授权,具体步骤如下: 1. 在项目中安装Vue3,可以使用npm或yarn进行安装,例如: ``` npm install vue@next ``` 2. 在Vue3项目中引入微信JS-SDK,可以在public/index.html中添加以下代码: ``` <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 3. 在Vue3组件中使用微信JS-SDK提供的API进行授权操作,可以在setup函数中添加以下代码: ``` import { reactive, onMounted } from 'vue'; import axios from 'axios'; export default { setup() { const state = reactive({ wxReady: false }); onMounted(() => { axios.get('/api/getWxConfig', {params: {url: window.location.href}}).then(res => { let data = res.data; wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: ['chooseWXPay', 'chooseImage', 'getLocation', 'updateAppMessageShareData'] // 具体可用的api列表 }); wx.ready(function () { state.wxReady = true; }); }); }); const getUserInfo = () => { wx.getUserInfo({ success: function (res) { let userInfo = res.userInfo; let nickName = userInfo.nickName; let avatarUrl = userInfo.avatarUrl; let gender = userInfo.gender; //性别:0:未知、1:男、2:女 let province = userInfo.province; let city = userInfo.city; let country = userInfo.country; // 在这里可以将用户信息保存到Vuex或者发送到后端进行处理 }, fail: function (res) { console.log(res); } }); }; return { state, getUserInfo }; } }; ``` 在以上代码中,我们使用reactive()函数创建了一个响应式对象state,在onMounted()钩子函数中发送请求获取微信配置信息,并使用wx.config()方法进行微信配置。在wx.ready()方法中,我们设置state.wxReady变量为true,表示微信JS-SDK已准备完成。在getUserInfo()函数中,我们使用wx.getUserInfo()方法获取用户信息。 4. 在Vue3组件中使用state和getUserInfo()函数获取微信授权信息和用户信息,例如: ``` <template> <div v-if="state.wxReady"> <button @click="getUserInfo">微信授权</button> </div> </template> <script> import { reactive, onMounted } from 'vue'; import axios from 'axios'; export default { setup() { const state = reactive({ wxReady: false }); onMounted(() => { axios.get('/api/getWxConfig', {params: {url: window.location.href}}).then(res => { let data = res.data; wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: ['chooseWXPay', 'chooseImage', 'getLocation', 'updateAppMessageShareData'] // 具体可用的api列表 }); wx.ready(function () { state.wxReady = true; }); }); }); const getUserInfo = () => { wx.getUserInfo({ success: function (res) { let userInfo = res.userInfo; let nickName = userInfo.nickName; let avatarUrl = userInfo.avatarUrl; let gender = userInfo.gender; //性别:0:未知、1:男、2:女 let province = userInfo.province; let city = userInfo.city; let country = userInfo.country; // 在这里可以将用户信息保存到Vuex或者发送到后端进行处理 }, fail: function (res) { console.log(res); } }); }; return { state, getUserInfo }; } }; </script> ``` 在以上代码中,我们使用v-if指令判断微信JS-SDK是否已准备完成,并使用@click指令调用getUserInfo()函数获取用户信息。 以上就是使用Vue3实现前端微信授权的基本步骤,希望对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿民不加班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值