学程序开发语言(送你6套核心教程)


//发送订阅消息给多个用户
  sendAll() {
    if (name == null || name == '') {
      wx.showToast({
        icon: "none",
        title: '请输入课程名',
      })
      return
    }
    let users = [
      "oc4sa0Vp_s65LEItm4JSWT5WFQds",
      "oc4sa0dZ-pSCu95djiLCt7jo97bY"
    ]
    users.forEach(item => {
      console.log("for循环", item)
      this.sendFun(item, name)
    })
  },
  //封装的方式方法
  sendFun(openid, name) {
    wx.cloud.callFunction({
      name: "fasong",
      data: {
        openid: openid,
        name: name
      }
    }).then(res => {
      console.log("发送单条成功", res)
    }).catch(res => {
      console.log("发送单条失败", res)
    })
  }

实战二,短信验证码老规矩先看效果图

普通短信

学程序开发语言

验证码短信

学程序开发语言

今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜。

官方文档:

进入官方文档一看,云开发给咱们开发者的福利还真不小。

不仅仅可以很方便的使用短信功能,还送了咱们1000条免费短信。不用白不用嘛。这1000条短信足够咱们把小程序短信功能,和小程序短信验证码功能都学会了。

废话不多说了,咱们直接来撸代码

1,使用云开发短信的条件

这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。

使用条件

上面条件都满足以后,我们就可以来愉快的撸代码了。

年卡福利

感兴趣可以加石头哥微♥ 2501902696 备注年卡

2,开通静态网站功能

如果你不开通静态网站,直接调用短信发送,会报如下错误。

学程序开发语言

其实官方文档里也有给出这个错误。

学程序开发语言

那么我们就来开通静态网站功能。开通静态网站功能之前,必须开通云开发,配置好云开发的环境。这些我在云开发入门里讲过很多遍。还不知道的同学可以翻看下我前面的文章或者视频:

这里开通云开发我们借助小程序开发者工具来实现快速开通。

2-1,注册小程序

这里我就不再多说了,只有注册过小程序的appid才可以开通云开发

学程序开发语言

我们注册好小程序后,就可以拿到appid了,如上图

2-2,创建一个小程序项目

小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学习》

学程序开发语言

这里强调一点,就是创建小程序项目时一定要用我们自己的appid不要用测试号。

在这里插入图片描述

如果你一开始是用测试appid创建的,也可以通过上图的方式更换成自己的小程序的appid。

2-3,开通云开发

这里云开发的开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下

学程序开发语言

只需要点击开发者工具里的云开发按钮,跟着提示一步步操作就可以快速开通云开发。

2-4,开通静态网站功能

学程序开发语言

我们上面云开发开通好以后,就可以在这里快速开通静态网站了。

学程序开发语言

点击以后,直接点击开通即可

学程序开发语言

这时候开通有个条件

学程序开发语言

我们必须按照要求改变自己小程序的付费方式,把我们的付费方式改成按量付费即可。

学程序开发语言

这里不用担心,这里的按量付费,每月都有免费额度。这些额度我们开发学习基本上够用了

学程序开发语言

学程序开发语言

这个时候我们的静态网站功能就开通成功了。

学程序开发语言

开通成功以后如下图。

学程序开发语言

学程序开发语言

3,编写发送短信的云函数

其实上面静态网站功能开通以后,我们不用上传网站资源,就可以直接来使用短信功能了。

下面我们就来使用云开发的云函数功能来做短信发送功能。

老规矩先看效果图

学程序开发语言

代码编写也很简单

学程序开发语言

其实发送短信的代码很简单,就上面这几行。下面就来教大家如何编写这个云函数。

3-1,初始化云开发环境id

新建一个和pages平级的目录cloud,用于存放云函数

学程序开发语言

然后在project.config.json里添加cloudfunctionRoot选项。

学程序开发语言

然后对cloud选择当前环境

学程序开发语言

在app.js里配置环境变量

学程序开发语言

这个env环境id需要你去云开发控制台获取

学程序开发语言

3-2,创建云函数

右键cloud目录,新建Node.js云函数

学程序开发语言

然后新建一个云函数,名字你可以自定随便定。我这里用sendSms

学程序开发语言

3-3,编写云函数

学程序开发语言

我这里把代码贴给大家,记得把env和接收短信的手机号换成你自己的。

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.cloudbase.sendSms({
      env: 'xiaoshitou-zfl2q',
      content: '编程小石头发布了新的能力',
      phoneNumberList: [
        "+8615611823564"
      ]
    })
    return result
  } catch (err) {
    return err
  }
}

3-4,部署云函数

上面云函数编写好了学程序开发语言,一定要记得部署下云函数。右键sendSms然后点击下面箭头所示的即可。

学程序开发语言

上传部署成功后,会有下面这样的提示

学程序开发语言

4,调用云函数发送短信

我们上面云函数编写并部署成功以后,就可以来调用这个云函数,发送短信了。

4-1,编写wxml文件

在wxml文件里写一个button按钮,编写一个bindtap点击事件

学程序开发语言

4-2,编写js文件

在js文件里实现上面button的点击事件,然后调用云函数

学程序开发语言

调用云函数时,一定要记得这里的name必须和你的云函数名一模一样。

4-3,点击发送短信

点击发送短信

学程序开发语言

点击发送 短信以后,可以看到日志里打印openapi.cloudbase.sendSms:ok

这就代表发送成功了。

然后再看下手机,收到下面的短信。

学程序开发语言

到这里我们的短信发送功能就完整的实现了。

其实到这里该实现的功能,就已经实现了。但是我们使用短信场景更多的是用短信发送验证码。所以接下来给大家做一个发送短信验证码的例子出来

5,发送验证码短信

老规矩,先看效果图

学程序开发语言

我们只需要获取用户输入的手机号,然后点击获取验证码,最后输入短信里接收到的验证码,进行验证即可。

5-1,编写wxml

页面比较简单,就两个输入框和两个按钮

vivo x5l 开发程序_开发手机程序及移动应用_学程序开发语言

学程序开发语言

5-2,编写js

js里主要是获取用户输入的手机号学程序开发语言,然后发送验证码,发送验证码调用云函数实现短信验证码发送功能。用户输入验证码以后进行校验即可。

学程序开发语言

5-3,发送短信验证码

用户输入手机号以后,点击发送,可以看到我们手机上收到了如下短信。

学程序开发语言

然后用户输入获取到的验证码,点击验证。

学程序开发语言

可以看到验证成功,验证成功以后后面的操作就可以自己定了,比如验证成功以后跳转到登录成功页。

到这里我们就实现了验证码发送功能了。

5-4,生成随机验证码的方法

我这里把生成随机验证码的方法贴给大家。

字母和数字混合

  //获取随机验证码,n代表几位
  generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    let res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    return res;
  }

数字混合

  //获取随机验证码,n代表几位
  generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    let res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 9);
      res += chars[id];
    }
    return res;
  }

实战三,群发短信

我们上面给单个手机发送验证码的功能实现了,接下来就教大家如何群发短信。

老规矩,先看效果图

学程序开发语言

官方文档:

使用云开发短信的条件

这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。

上面条件都满足以后,我们就可以来愉快的撸代码了。

年卡福利

感兴趣可以加石头哥微♥ 2501902696 备注年卡

1,编写wxml页面

简单起见,我这里只定义一个输入手机号的输入框和一个button按钮

学程序开发语言

对应的代码如下

在这里插入图片描述

2,获取用户输入的手机号

我这里以*来分割手机号,如下图所示。

学程序开发语言

然后我们定义一个bindinput事件来获取用户输入的内容。

学程序开发语言

可以看到,我们成功的获取到了用户输入的手机号了。

学程序开发语言

但是官方文档里已经说明,我们群发短信的时候需要用到的是一组手机号,也就是说需要用数组来存放数据。但是我们这里是一个字符串。那么我们就要分割字符串成数组了。

3,分割字符串成数组

我们分割字符串用到的是字符串的split()方法

学程序开发语言

当然触发的时机,应该是在用户点击群发按钮的时候。那么我们就为群发按钮定义bindtap点击事件send

学程序开发语言

可以看到我们成功的把字符串分割成了数组。

学程序开发语言

但是我们数组里的手机号前面有个回车键,所以安全起见,我们在分割字符串之前,需要先把这回车键给剔除掉。

4,去除字符串里的回车键

去除字符串里的回车键语法如下

可以看到我们只需要调用字符串.replace方法即可,后面括号里跟的是回车键对应的正则表达式。这里不需要记住,后面用的时候来我笔记这里复制就行了。

学程序开发语言

可以看到我们剔除回车键以后,再分割的字符串里就没有回车键了。

5,遍历数组给手机号前面+86

如果你有仔细阅读官方文档,可以看到我们群发的手机号前面必须以+86开头。并且每次群发的手机号不能超过1000条。

学程序开发语言

那么我们接下来就要遍历数组,给每个手机号前面都添加‘+86’了。

当然了这里有很多种方法来实现这一目的,我这里用一个for循环和一个map方法来分别实现下。

学程序开发语言

可以看出用map方法更简介一点。但是对于新手来说第二种方法可能不是很好理解。所以这里你用那种方法都可以,不做强制要求。

5-1,通过for循环来实现

学程序开发语言

5-2,通过map方法来实现

学程序开发语言

6,编写群发短信的内容

那么我们接下来要做的就是实现群发功能了。我们这里要想成功的实现群发,需要两个元素

关于手机号和群发内容都有要求

学程序开发语言

我们群发手机号这里已经符合要求了,接下来就是群发的内容了。群发内容最长不能超过60个字节,一个汉字通常2~3个字节。也就是说我们短信内容不能超过20个字,所以群发的短信一定要精细。用最少的字来吸引用户。

这里其实就是一个input来获取用户输入的内容就行了。我不再多讲,直接把代码贴出来。

学程序开发语言

在js里获取用户输入的短信内容

学程序开发语言

现在完事具备学程序开发语言(
实战二,短信验证码老规矩先看效果图(组图)),只欠一个云函数了

7,编写群发短信的云函数

短信内容和群发的手机号都已经成功拿到了,我们接下来就要来编写群发的云函数了。

学程序开发语言

云函数其实我们短信验证码那一节基本上一样,区别就是

云函数编辑好,记得重新部署下。

8,调用云函数实现群发

上面云函数编辑好了,也部署好了,接下来就是要调用云函数实现短信群发了。

学程序开发语言

调用其实很简单。

9,群发演示失败

接下来我们就要验证自己的劳动成果了。如下,我发这样的内容给两个手机号。为什么是两个呢,我这里是学习,要节省短信条数。官方只送我们1000条。所以要省着点用。

其实群发两个手机号,和群发1000个没区别,只要群发两个成果,那么群发1000个也一样的。

学程序开发语言

辛辛苦苦编写好了,测试了下,居然报错

学程序开发语言

什么鬼,代码明明没有错误啊,程序员有时候就是莫名的自信。

官方给的发送成果返回字段如下

学程序开发语言

石头哥发送返回结果如下

学程序开发语言

百思不得其解啊。不会真是代码写错了吧。。。。

还好石头哥比较聪明,翻译了一下报错信息。

学程序开发语言

发送时间限制,也没看到官方文档有说时间限制啊。后来又去官方文档翻来覆去,终于在一个角落里看到了这句话。

学程序开发语言

原来是石头哥写文章太晚了。。。。

学程序开发语言

本来想写完文章,直接录讲解视频给大家的,,,,看来只能等第二天8-22:00来续写这篇文章了。。。。

10,群发演示成功

学程序开发语言

终于等到了第二天8点47,下面我们把昨天的群发短信再演示一遍,看这次能不能成功。

先来看我们的日志

学程序开发语言

可以看出日志上显示成功的发送两个。那么收到的短信长什么样子,也给大家截个图。

第一个手机号是安卓手机

学程序开发语言

第二个手机号是苹果手机

学程序开发语言

到这里我们的群发短信功能就完整的实现了。


免费领取: 只要加微信,回复“入门视频”,即刻获取 全网最系统,最容易入门的的Web前端入门全套视频,C语言入门全套入门视频,大数据全套入门视频,PhP全套入门视频,Pathon全套入门视频,Java全套入门视频!!!微信号:18370228235 ,立即领取!
版权申明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站不拥有所有权,不承担相关法律责任。如发现有侵权/违规的内容, 联系QQ892482387,本站将立刻清除。

分享到