React Native实现短信转发到微信上
时间:2020-03-24
本文章向大家介绍React Native实现短信转发到微信上,主要包括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;
源码
原文地址:https://www.cnblogs.com/hengkx/p/12557569.html
- 用Python从零开始创建区块链
- 基于 Python 的僵尸网络将 Linux 机器变成挖矿机器人
- Oracle导入导出常用命令
- Spring Cloud实战小贴士:Zuul处理Cookie和重定向
- 设计模式之代理模式(二)CGLIB动态代理实现
- ios手势复习值之换图片-转场动画(纯代码)
- 顺序广播和无序广播
- Netflix Zuul与Nginx的性能对比
- 最有价值的50道java面试题(一)
- 用 Python 从零开始玩微信跳一跳
- ios地图小例子和手势的使用 供大家参考一下呦
- Spring Cloud源码分析(四)Zuul:核心过滤器
- basicAnimation移动图形
- 一个layer可以跟着画完的线移动ios程序 好玩啊。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RSA实现JS前端加密与PHP后端解密功能示例
- Laravel源码解析之路由的使用和示例详解
- Linux中crontab输出重定向不生效问题的解决办法
- PHP swoole和redis异步任务实现方法分析
- thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
- 教你一招实现Linux中的文本比对
- PHP基于swoole多进程操作示例
- PHP格式化显示时间date()函数代码
- php函数式编程简单示例
- php进程(线程)通信基础之System V共享内存简单实例分析
- Laravel5.1 框架数据库查询构建器用法实例详解
- php swoole多进程/多线程用法示例【基于php7nts版】
- PHP JWT初识及其简单示例
- PHP保存Base64图片base64_decode的问题整理
- php实现小程序支付完整版