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

问题描述

这里贴一下server酱的官网
server酱
看了一下server酱的api调用实例,是php版本的
【Vue】vue使用server酱发送微信通知实战案例,axios发送server酱通知信息实战,js发送server酱教程_第1张图片
这里用vue,也就是前端js来实现发送消息


原因分析:

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

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

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


解决方案:

这是我实现的js方法,
【Vue】vue使用server酱发送微信通知实战案例,axios发送server酱通知信息实战,js发送server酱教程_第2张图片

// 点击发送消息
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里面的。

【Vue】vue使用server酱发送微信通知实战案例,axios发送server酱通知信息实战,js发送server酱教程_第3张图片
在要使用的页面中引用,然后给他一个点击事件,执行方法。

来看看成功结果

【Vue】vue使用server酱发送微信通知实战案例,axios发送server酱通知信息实战,js发送server酱教程_第4张图片
【Vue】vue使用server酱发送微信通知实战案例,axios发送server酱通知信息实战,js发送server酱教程_第5张图片

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

它的参数如下

  • title: 消息标题,必填。最大长度为 32
  • desp: 消息内容,选填。支持 Markdown语法 ,最大长度为 32KB ,消息卡片截取前 30 显示。
  • short: 消息卡片内容,选填。最大长度64。如果不指定,将自动从desp中截取生成。
  • 【Vue】vue使用server酱发送微信通知实战案例,axios发送server酱通知信息实战,js发送server酱教程_第6张图片

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

你可能感兴趣的:(Vue,javascript,vue.js,微信,ajax,node.js)