As regras antigas primeiro olham para as renderizações
Código de verificação de SMS normal SMS
Hoje, fui informado pelo oficial de desenvolvimento em nuvem que o desenvolvimento em nuvem oferece suporte a mensagens de texto e, então, mal posso esperar para testá-lo.
Entre na documentação oficial, os benefícios do desenvolvimento em nuvem para nossos desenvolvedores não são realmente pequenos.
Não só a função SMS pode ser usada de forma muito conveniente, mas também 1000 mensagens de texto gratuitas foram enviadas para nós. Não precisa de nada. Essas 1.000 mensagens de texto são suficientes para aprendermos a função SMS do miniaplicativo e a função de código de verificação SMS do miniaplicativo.
Sem muita bobagem, vamos apenas escrever o código
1. Condições para desenvolver SMS usando nuvem
Esta pré-condição é muito importante.Se as condições não forem atendidas, você não pode usar a nuvem para desenvolver funções SMS.
Condições de Uso
- 1. Deve ser um miniaplicativo empresarial, e miniaplicativos pessoais não podem ser enviados por SMS no momento
- 2. A função de site estático deve ser ativada (deve ser liberada gradualmente mais tarde)
- 3. O desenvolvimento em nuvem deve ser ativado (isso não quer dizer que função de desenvolvimento em nuvem você usa se não ativar o desenvolvimento em nuvem)
Depois que as condições acima forem atendidas, podemos escrever o código com prazer.
Em segundo lugar, abra a função de site estático
Se você não abrir um site estático e ligar diretamente para o envio de SMS, o seguinte erro será relatado.
Na verdade, esse erro também é fornecido na documentação oficial.
Em seguida, abriremos a função de site estático. Antes de habilitar a função de site estático, você deve habilitar o desenvolvimento em nuvem e configurar o ambiente de desenvolvimento em nuvem. Já falei sobre isso muitas vezes na introdução ao desenvolvimento em nuvem. Alunos que não sabem podem ler meu artigo ou vídeo anterior: https://edu.csdn.net/course/detail/26572
Aqui, abrimos o desenvolvimento em nuvem com a ajuda de ferramentas de desenvolvimento de pequenos programas para obter uma ativação rápida.
2-1, registre o miniaplicativo
Não direi mais aqui. Apenas o appid que registrou o miniprograma pode abrir o desenvolvimento em nuvem. Depois de
registrar o miniprograma, podemos obter o appid, conforme mostrado na figura acima.
2-2, crie um pequeno projeto de programa
Não vou falar mais sobre a criação do projeto do Mini Programa aqui. Já falei sobre isso muitas vezes no Mini Curso Básico anterior. "Mini Program Basic Learning"
enfatiza um ponto aqui, ou seja, devemos usar nosso próprio appid e não um número de teste ao criar um miniprojeto.
Se você o criou com um appid de teste no início, também pode substituí-lo pelo appid de seu próprio miniaplicativo por meio do método acima.
2-3, desenvolvimento de nuvem aberta
Não vou explicar muito sobre a abertura do desenvolvimento em nuvem aqui, e já cobri isso muitas vezes em meu curso de desenvolvimento em nuvem. Você pode ir para a próxima página e
apenas clicar no botão de desenvolvimento em nuvem nas ferramentas do desenvolvedor e seguir as instruções passo a passo para iniciar rapidamente o desenvolvimento em nuvem.
2-4, abrir função de site estático
Depois que nosso desenvolvimento em nuvem for concluído, podemos abrir rapidamente um site estático aqui.
Depois de clicar, você pode clicar diretamente em Ativar.Neste
momento, há uma condição de que
devemos alterar o método de pagamento do nosso mini programa conforme necessário, e alterar o nosso método de pagamento para pagar por volume.
Não se preocupe aqui. Pague conforme o uso, e há uma cota gratuita todos os meses. Essas cotas são basicamente suficientes para o nosso desenvolvimento e aprendizado,
neste momento, a função do nosso site estático foi ativada com sucesso.
Após a abertura com sucesso, a seguinte imagem é mostrada.
Três, escreva uma função de nuvem para enviar SMS
Na verdade, depois que a função de site estático acima é aberta, podemos usar diretamente a função SMS sem carregar recursos do site.
Vamos usar a função de função de nuvem desenvolvida pela nuvem para fazer a função de envio de SMS.
As regras antigas olham primeiro para as renderizações.
A escrita do código também é muito simples.
Na verdade, o código para enviar SMS é muito simples, apenas as linhas acima. Vamos ensiná-lo a escrever essa função de nuvem.
3-1, inicializar a id do ambiente de desenvolvimento em nuvem
Crie uma nova nuvem de diretório no mesmo nível das páginas para armazenar funções de nuvem
e, em seguida, adicione a opção cloudfunctionRoot em project.config.json.
Em seguida, selecione o ambiente atual para nuvem
e configure as variáveis de ambiente em app.js.
Este id de ambiente env precisa que você vá para o console de desenvolvimento em nuvem para obter
3-2, Criar uma função de nuvem
Clique com o botão direito no diretório de nuvem, crie uma nova função de nuvem Node.js
e, em seguida, crie uma nova função de nuvem, o nome pode ser personalizado. Eu uso sendSms aqui
3-3, escrever funções de nuvem
Vou postar o código aqui para todos, lembre-se de alterar o env e o número do celular que recebe o SMS para o seu.
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, implantar funções de nuvem
Depois que a função de nuvem acima for escrita, você deve se lembrar de implantar a próxima função de nuvem. Clique com o botão direito em sendSms e clique na seta mostrada abaixo.
Após o upload e implantação bem-sucedidos, haverá um prompt como o seguinte
Quatro, chame a função de nuvem para enviar SMS
Depois que nossa função de nuvem for escrita e implantada com sucesso, podemos chamar esta função de nuvem e enviar SMS.
4-1, escreva o arquivo wxml
Escreva um botão de botão no arquivo wxml e escreva um evento de clique de bindtap
4-2, escrever arquivo js
Ao implementar o evento click do botão acima no arquivo js e, em seguida, chamar a função de nuvem para
chamar a função de nuvem, você deve se lembrar que o nome aqui deve ser exatamente igual ao nome da função de nuvem.
4-3, clique para enviar SMS
Clique em Enviar SMS e
clique em Enviar SMS, você pode ver openapi.cloudbase.sendSms: ok
está impresso no log, o que significa que o envio foi bem-sucedido.
Então olhei para o meu telefone novamente e recebi a mensagem de texto abaixo.
Neste ponto, nossa função de envio de SMS está totalmente realizada.
Na verdade, as funções que deveriam ser realizadas aqui já foram realizadas. Mas usamos mais cenários de SMS para enviar códigos de verificação por SMS. Então, vamos dar um exemplo de envio de código de verificação por SMS
Caso prático ~ Enviar SMS com código de verificação
Pelas regras antigas, primeiro olhe para as renderizações,
só precisamos pegar o número do celular inserido pelo usuário, depois clicar para obter o código de verificação e, por último, inserir o código de verificação recebido no SMS para verificar.
1. Escreva wxml
A página é relativamente simples, apenas duas caixas de entrada e dois botões
2. Escreva js
O principal objetivo do js é obter o número do telefone celular inserido pelo usuário e, em seguida, enviar o código de verificação e, em seguida, enviar o código de verificação para chamar a função de nuvem para realizar a função de envio do código de verificação SMS. O usuário pode verificar depois de inserir o código de verificação.
3. Envie um código de verificação por SMS
Depois que o usuário digita o número do celular e clica em enviar, podemos ver que a seguinte mensagem curta foi recebida em nosso celular.
Em seguida, o usuário insere o código de verificação obtido e clica em verificar.
Você pode ver que a verificação foi bem-sucedida. Depois que a verificação for bem-sucedida, as operações subsequentes podem ser determinadas por você mesmo, como pular para a página de sucesso do login após a verificação ser bem-sucedida.
Neste ponto, percebemos a função de envio do código de verificação.
Método de geração de código de verificação aleatório
Aqui vou postar o método de geração de códigos de verificação aleatórios para todos.
//获取随机验证码,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;
}
Vou gravar e explicar o vídeo mais tarde
Documento oficial:
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html
Vídeo pago (incluindo código-fonte e notas) :
https://edu.51cto.com/course/19575.html
Vídeo grátis completo (lembre-se dos três links): https://www.bilibili.com/video/BV1Ca4y1n73j/