我使用的是微信小程序的云开发这种方式来实现的,纯前端操作,无需后端接入。

1,打开微信公众平台中的【云开发】

2,在概览里面点击开通静态网站

3,点击开通

4,确定开通,这地方看上去是要收费的,但是第一个月是有免费的额度给你使用的,后期收不收费要通过测试了,实现短信功能到现在为止我还没有支付一分钱,前期还是可以使用的。

5,等待几分钟过后还要点一次开通,再点下一步,完成这么多操作后静态网站就开通成功了。

6,在你项目的根目录下,于pages同级目录下新建一个cloud文件夹,文件名随意

7,在project.config.json中加入cloudbaseRoot,后面是你的文件名+/,做完这一步文件就会变成上一步中的云开发的样子

8,右击你创建的这个文件夹,点击第一个【同步环境列表】,然后会出现两个文件夹

9,点击打开第二个文件夹,里面有个functions目录,

10,右击functions,点击新建Node.js云函数,然后写个文件名

11,在index.js中写入

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init({env:cloud.DYNAMIC_CURRENT_ENV
})// 云函数入口函数
exports.main = async (event, context) => {console.log(event);console.log(context);try {const result = await cloud.openapi.cloudbase.sendSms({env: '',//在云开发控制台中的环境IDcontent: '有内奸!!!停止交易', //短信内容phoneNumberList: ["+86"+event.name   //要发送的手机号码,我这是方法中传过来的号码,可以先写死测试]})return result} catch (err) {return err}
}

12,然后右击文件夹,我这里是图中的sendSms文件夹,点击上传并部署:云端安装依赖,

sendSms文件中的每次改写都要上传一下

13,然后随便写一个按钮喽,写个点击事件,我这里通过for循环传参过去可以一次性发送给多人,这里的改写不用去上传。

 let phone=['1**********','1**********']for(let i=0;i<phone.length;i++){wx.cloud.callFunction({name:"sendSms",    //这个名字要跟上传并部署的那个文件名一样data:{name:phone[i]}}).then(res=>{console.log("发送成功",res);}).catch(err=>{console.log("发送失败",err);})}

14,最后在app.js中加入一串代码,初始化云函数,写在onLaunch里面

if (!wx.cloud) {console.error("请使用 2.2.3 或以上的基础库使用云能力")} else {wx.cloud.init ({// env 参数说明:// env 参数决定接下来小程序发起的云开发调用 (wx.cloud.xxx) 会默认请求到哪个云环境的资源// 此处请填入环境 ID ,环境 ID 可打开云控制台查看// 如不填则使用默认环境(第一个创建的环境)// env: 'my-env-id',traceUser: true,})    }

点击按钮就可以发送短信了,有些手机的短信设置会给你的短信给屏蔽掉,如果控制台打印发送成功但没有收到短信,可以看看手机上短信中的拦截短信里面有没有。

最好不要一直发送短信,万一要收费就靠了。

这个发送短信功能也可以实现短信获取验证码的操作,无非两个input框 手机号跟验证码,通过传参,云函数中的event.键值  接收,然后Math.ceil(Math.random()),获取0-9 A-B中4个随机数,传给云函数,同时保存到data中,然后用正则判断输入的验证码就可以了。

微信小程序实现发送短信的功能(发送短信)相关推荐

  1. 【微信小程序/实现】实现留言墙功能页面

    [微信小程序/实现]实现留言墙功能 一.需求分析 二.功能设计 三.页面设计 四.代码 (一)核心代码:向服务器发出请求 (二)完整代码 message.wxml message.wxss messa ...

  2. [微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)

    相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...

  3. 微信小程序利用云开发实现评论功能

    微信小程序利用云开发实现评论功能 如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论, <!-- 商品详情 --> <vie ...

  4. 微信小程序基于云数据库实现点赞功能

    微信小程序基于云数据库实现点赞功能 微信小程序基于云数据库实现点赞功能 小Tips 2022.04.27 更新 微信小程序基于云数据库实现点赞功能 首先你要开通云开发,然后点击数据库创建集合(这里我的 ...

  5. 微信小程序图标不支持html,微信小程序实现自定义加载图标功能

    效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...

  6. 微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

    接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...

  7. 微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...

  8. 微信小程序开发(2) - 微信小程序实现拍照和录像拍摄功能方法

    微信小程序开发2 - 本文实例讲述了微信小程序实现拍照和录像拍摄功能方法.分享给大家供大家参考,具体如下: 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组 ...

  9. wifi 小程序 透传_微信小程序实现的一键连接wifi功能示例

    本文实例讲述了微信小程序实现的一键连接wifi功能.分享给大家供大家参考,具体如下: 在已知wifi账号和wifi密码的情况下,一般采用以下的流程来连接wifi Wi-Fi 接口调用: 1.Andro ...

  10. 微信小程序云开发CMS中WebHook功能的使用方法

    微信小程序云开发CMS中WebHook功能的使用方法 官方文档 Webhook 是什么呢,翻译过来就是网页钩子.它的用处是,当我们在CMS进行增添查改的操作后,会自动回调webhook函数,我们就可以 ...

最新文章

  1. 存储虚拟化大幅减少了宕机时间
  2. mysql 存储过程 无限分类_mysql存储过程实现无限分类
  3. JAVA中流水账的实现_流水账式java基础Summary
  4. 《java 进阶之路》 上--推荐书籍
  5. Vue使用全局样式,页面没有发生变化:逗号是中文的,引起错误,样式不变化 也没有报错就是不起作用
  6. POj 3420 Quad Tiling 状态压缩DP+递推+矩阵快速幂
  7. 棋牌游戏服务器架构: 详细设计(三) 数据库设计
  8. 768页,最牛笔记曝光!
  9. cuda stream
  10. Mongo db 与mysql 语法比较
  11. sencha touch 2与phonegap 2.0结合 打包web app
  12. uni-app小程序实现图片上传和压缩
  13. java笔试题-六一儿童节
  14. 音频编解码之 G7221 编码器
  15. 温度转换 python
  16. 金融量化分析基础环境搭建
  17. (新型事件相机有关的论文解读)A Unifying Contrast Maximization Framework for Event Cameras
  18. 使用原生JS+Canvas实现五子棋游戏
  19. 一个完整的Django入门指南 - 第1部分
  20. 解决jest处理es模块

热门文章

  1. JQuery文件上传插件Uploadify
  2. cvtColor使用
  3. 小程序 获取小程序链接
  4. android 仿QQ相册
  5. 优酷KUX1080转码工具如何将KUX视频转换成MP4格式 1
  6. 怎么让放大的图片变清晰?
  7. Android Studio数据库增删改查。
  8. Java 爬取行政区划代码
  9. 数据可视化大屏设计经验分享
  10. Vue实现tab导航栏,支持左右滑动