微信小程序踩坑—用户登录界面

第一种方式官方文档的流程图已经说得足够明白清晰。

步骤分为两步：

1.小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。

2.开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

具体接口详见

第二种方式就简单多了，只需要发起wx.request()请求将输入的账号密码送至服务器换取登录信息。

wxml代码

<view class="container">
 
 <open-data type="userAvatarUrl" class=avatar></open-data>
 <!-- <image src={
         
  {avatarUrl}} class=avatar></image>-->
  <form bindsubmit="formSubmit" class=form>
    <view class="row">

    <input type="text" name="userId" placeholder="请输入用户账号" placeholder-class=placeholder value="{
         
  {userId}}" />
   </view>
   <view class="row">
     <input type="password" name="userPassword" placeholder="请输入密码" placeholder-class=placeholder value="{
         
  {userPassword}}" />
   </view>
    <view class="row">
      <button class=btn  form-type="submit"><text class=lable>绑定账号</text></button>
    </view>
 
  </form>
</view>

这里特别要提一嘴的是，用到了这行代码显示用户头像。

<open-data type="userAvatarUrl" class=avatar></open-data>

获取用户信息时，如果是只需要获取用户的头像和昵称，可以直接使用<open data />组件，如果还需要更多用户信息要通过获取。

最终的界面是这样子的

登陆按钮的bindsubmit事件中的wx.request()

wx.request({
        url: ,           //服务器的登录接口
        data: {
          id: objData.userId,
           password: objData.userPassword
        },
        header: { Content-Type: application/x-www-form-urlencoded },
        method: POST,
        success: function (res) {
        if(res.data.code == 0){              //账号密码比对正确
           var userInfo = res.data.data    //用户登录信息
           wx.setStorageSync(userInfo, userInfo);  
                //跳转到成功页面
          wx.switchTab({
             url: ../onDuty/onDuty
          })
          }
           else {                //出现error
             wx.showToast({
              title: res.data.message.slice(5),
               icon: loading
             })
          }
        },
        fail: function () {
          console.log(绑定失败QAQ)
          wx.showModal({
          title: 失败,
          content: 绑定失败，请重试,
          })
              }})

需要同服务端保持seesion见