React Native实现短信转发到微信上
缘由
都说需求来源于生活我为什么会有一个这么奇葩的需求呢?来看一个故事。
昨天为了省点手续费导航走了3公里多去找一家工行ATM机(没办法穷
)然后到了以后发现ATM机在人家的园区里面,现在疫情进入要通行证,没办法一脸的无奈然后又走了2公里找到一个可以用的,结果卡插进去,输入取款金额后点击取款,原本以为一切顺利,突然屏幕上弹出一个提示该卡种不能做此种交易
瞬间懵逼。
然后搜索发现没有开通境外取现功能,打电话客服去开通,突然我就意识到我绑定的手机号码没带(万一要我手机验证码怎么办
)。还好没要(偷笑
)。
天天装两个手机在兜里有点笨重,于是乎就萌生了一个需求能不能把短信直接转发到我主要使用的手机上,开干。
实现效果图
进入正题
既然要做短信转发第一时间想到的就是Android(因为Android比较开放什么都能获取到不要IOS各种限制
),了解了一下发现都要用原生代码来实现。
毕竟我们是前端就不要用纯原生的东西了,之前用Flutter
写过一个小功能还行现在还有100
个人左右在用,后面想想还是React
比较熟悉,那就用React Native
把。
我们首先需要考虑的是短信转发,我们需要先监听到短信的到来,通过我们的服务器处理。
找到一个这个库react-native-android-sms-listener可以实现,但是发现有几个问题。
- 退出后台以后就不在实现监听了(
这要程序一直保持在前台这肯定不行
) - 测试过程中发先长短信拆分成几段顺序还不一致这样转发出效果很差
- 没有短信接收时间(
虽然可用用当前时间代替
) - 我手机上有
2
张卡不知道是哪张卡来的短信
自己改了改大概实现了这些功能react-native-android-sms-listener2感兴趣的朋友可以去看看主要是这个文件SmsReceiver.java
。
客户端主要实现逻辑就是通过设备Id
去看有没有绑定微信,没有则出现二维码绑定。
import React, {useState, useEffect} from 'react';
import {StyleSheet, View, Text, PermissionsAndroid} from 'react-native';
import SmsListener from 'react-native-android-sms-listener2';
import {getUniqueId} from 'react-native-device-info';
import QRCode from 'react-native-qrcode-svg';
import axios from 'axios';
axios.defaults.baseURL = 'https://service.wx.hengkx.com';
axios.interceptors.response.use(
response => response.data,
error => Promise.reject(error.response.data),
);
async function requestReadSmsPermission() {
try {
var granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_SMS,
{
title: '阅读短信',
message: '需要获取阅读短信权限',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECEIVE_SMS,
{
title: '接收短信',
message: '需要获取接收短信权限',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('RECEIVE_SMS permissions granted', granted);
} else {
console.log('RECEIVE_SMS permissions denied');
}
} else {
console.log('sms read permissions denied');
}
} catch (err) {
console.log(err);
}
}
const App: () => React$Node = () => {
const [url, setUrl] = useState();
const [openId, setOpenId] = useState();
useEffect(() => {
requestReadSmsPermission();
axios
.get('/api/account/info', {params: {deviceId: getUniqueId()}})
.then(res => {
if (res.code === 0) {
if (res.data.url) {
setUrl(res.data.url);
const interval = setInterval(async () => {
const {data} = await axios.get('/api/account/check', {
params: {deviceId: getUniqueId()},
});
if (data) {
setUrl();
setOpenId(data.openId);
clearInterval(interval);
}
}, 1000);
} else {
setOpenId(res.data.openId);
}
}
});
SmsListener.addListener(message => {
if (openId) {
axios.post('/api/sms/receive', {
...message,
openId,
tel: message.originatingAddress,
content: message.body,
});
}
});
}, [openId, setUrl]);
return (
<>
<View style={styles.qrCodeContainer}>
{url && (
<>
<QRCode value={url} size={200} bgColor="purple" fgColor="white" />
<Text style={styles.qrCodeTip}>微信扫描二维码绑定</Text>
</>
)}
{openId && <Text>已为您自动开启短信转发</Text>}
</View>
</>
);
};
const styles = StyleSheet.create({
qrCodeContainer: {
flexDirection: 'column',
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
qrCodeTip: {
marginTop: 10,
},
});
export default App;
源码
React Native实现短信转发到微信上的更多相关文章
- 短信转发Q群
※◆☆★☆◆※欢迎使用!!!如有问题或新功能需求请联系作者QQ:82850696*4*您使用的测试版已到期,如需继续使用,请联系作者 QQ : 82850696*0*2015-1-7 23:59:59 ...
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- 【转载】利用tasker推送手机短信到企业微信(App或者微信公众号)
本随笔转载自:https://www.52pojie.cn/thread-804477-1-1.html 转载声明:本文转自酷安tasker评论区 ID:随风荡 的评论,我只是按照我的需求进行了一次修 ...
- React Native商城项目实战13 - 首页中间上部分内容
1.HomeMiddleView.js /** * 首页中间上部分内容 */ import React, { Component } from 'react'; import { AppRegistr ...
- react native 安卓生产包无法获取线上数据
android:usesCleartextTraffic="true"
- [系统集成] RT(Request Tracker)执行自定义脚本及发送微信、短信的实现方法
RT(Request Tracker)是一个基于 Perl 语言的开源状态跟踪和工作流系统,支持审批.权限管理等功能,中文化支持的也不错,可以作为企业的流程审批系统使用.可惜的是,该系统在国内使用的不 ...
- 从iMessage到微信,QQ离线短信服务,米聊,易信
把iMessage.米聊.QQ离线短信服务.微信.易信放到一下,毫无疑问大家能够看出他们的共同点,iMessage与米聊我们就不用说了,有雷布斯的存在就有米聊的存在,QQ离线短信服务是提供给QQ会员的 ...
- React Native绑定微信分享/登录/支付(演示+实现步骤+注意事项)
React Native(以下简称RN)绑定微信分享/微信登录/微信支付的实现演示+源码+注意事项!微信的调用大同小异,本文实现了微信的分享功能,其他功能可以在链接文档里面找到具体的方法. 本文分文三 ...
- 用Tasker实现收到Android手机短信自动转发到邮箱
发送短信到邮箱的原理与 <用Tasker实现收到Android手机短信自动转发到邮箱>有些类似. 发送短信到邮箱是利用Ifttt这个服务将短信转发到邮箱中.Ifttt服务的可扩展性很强, ...
随机推荐
- 前端js代码以备不时之需
//获取id元素信息let getId = (args) => { return document.getElementById(args);} //获取类名元素let getClassName ...
- php捕获致命错误
php捕获致命错误 记录php错误日志可以有力的帮我们查找问题.修复bug,php提供了set_error_handler.set_exception_handler来捕获错误和异常.但是set_er ...
- 吴裕雄--天生自然KITTEN编程:逃离漩涡
- SpringMVC_Day01
项目结构 //SpringMVC配置文件 <?xml version="1.0" encoding="UTF-8"?> <!-- spring ...
- shell的循环嵌套语法
测试shell的循环嵌套语法 [root@localhost test]# vi Xunhuanqiantao.sh #!/bin/bash #程序功能描述: # 测试循环嵌套 #作者:孤舟点点 #版 ...
- 安装Redis内存分析工具rdbtools
一.安装Python2.7 1. wget http://10.12.29.98:8090/tools/Python-2.7.11.tgz 2. ln -s /usr/local/python2.7/ ...
- Vue1.0用法详解
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...
- SpringBoot图文教程10—模板导出|百万数据Excel导出|图片导出「easypoi」
有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...
- python随用随学-元类
python中的一切都是对象 按着我的逻辑走: 首先接受一个公理,「python中的一切都是对象」.不要问为什么,吉大爷(Guido van Rossum,python之父)人当初就是这么设计的,不服 ...
- 端口占用的一种形式 Failed to initialize end point associated with ProtocolHandler ["ajp-bio-8090"] java.net.BindException: Address already in use: JVM_Bind <null>:8090
严重: Failed to initialize end point associated with ProtocolHandler ["ajp-bio-8090"]java.ne ...