点我获取验证码 3. jsdata: { phone: "", code: "", }..._微信小程序发送请求">
当前位置:   article > 正文

微信小程序---发送网络请求_微信小程序发送请求

微信小程序发送请求

1. 微信开发者工具设置(跨域设置)

 

 

 2.html

  1. <view class="code">
  2. <input type="text" bindinput="bindCode" placeholder="输入验证码" />
  3. <text bindtap="get_code">点我获取验证码</text>
  4. </view>

3. js

  1. data: {
  2. phone: "",
  3. code: "",
  4. },
  5. // 双向绑定验证码
  6. bindCode: function (e) {
  7. this.setData({
  8. code: e.detail.value
  9. })
  10. },
  11. // 获取验证码
  12. get_code: function () {
  13. var phone = this.data.phone
  14. // 前端校验1 手机号长度是否为11位
  15. if (phone.length != 11) {
  16. console.log(phone.length)
  17. wx.showToast({
  18. title: '手机号长度不对',
  19. icon: 'error',
  20. duration: 1500
  21. })
  22. return
  23. }
  24. // 前端校验2 手机号是否符合格式
  25. var rag = /^1[3-9][0-9]{9}$/
  26. if (!rag.test(phone)) {
  27. wx.showToast({
  28. title: '手机号格式不对',
  29. icon: 'error',
  30. duration: 1500
  31. })
  32. return
  33. }
  34. wx.request({
  35. url: 'http://127.0.0.1:8030/api/sms/code/',
  36. method: "POST",
  37. data: {
  38. phone: phone,
  39. tpl: "login",
  40. },
  41. success: (res) => {
  42. if (res.data.status === 200) {
  43. wx.showToast({
  44. title: '验证码已发送',
  45. icon: 'success',
  46. duration: 1500
  47. })
  48. return
  49. } else {
  50. wx.showToast({
  51. title: '请求失败',
  52. icon: 'error',
  53. duration: 1500
  54. })
  55. return
  56. }
  57. },
  58. })
  59. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/677655
推荐阅读
相关标签
  

闽ICP备14008679号