微信小程序手机号+验证码登录 thinkphp5(短信宝)

最新推荐文章于 2023-12-05 14:57:55 发布

原创

最新推荐文章于 2023-12-05 14:57:55 发布 · 583 阅读

标签

#微信小程序 #小程序

收录于

本文介绍了如何使用ThinkPHP5框架与微信小程序配合，实现手机号验证登录的功能。通过WXML、WXSS和JS文件的配置，以及引入相关服务，详细讲解了登录流程的关键步骤。

wxml

<!--pages/logins/logins.wxml-->
<view class="container">
  <view class="title">登录</view>
  <form catchsubmit="login">
    <view class="inputView">
      <input class="inputText" placeholder="请输入手机号" name="phone" bindinput="phone" />
    </view>
    <view class="inputView">
      <input class="inputText" placeholder="请输入验证码" name="code" />
      <button class="line"  size="mini" bindtap="sendcode">{
  
  {codebtn}}</button>
    </view>
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" formType="submit">登录</button>
    </view>
  </form>
</view>

wxss

.container { 
  display: flex;  
  flex-direction: column; 
  padding: 0; 
 } 
 .inputView { 
  line-height: 45px; 
  border-bottom:1px solid #999999;
 } 
.title{
  width: 80%;
  font-weight: bold;
  font-size: 30px;
}
 .inputText { 
  displa