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

最近做的一个项目有涉及到用户登录。微信小程序的用户登录在我看来有两种，一种是需要用微信提供的用户身份标识，简单地说就是小程序的登录者就是使用这个小程序的微信用户，还有一种是小程序和服务器之间有自己的一套用户唯一标识，类似于员工id这种，这种就不需要获取微信的登陆凭证换取openid等繁杂操作，就是简单地输入账号密码登陆然后就能从服务器获取用户数据。这次做的项目用的是第二种。

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

步骤分为两步：

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 />组件，如果还需要更多用户信息要通过wx.getUserInfo()获取。

最终的界面是这样子的

登陆按钮的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 {                //出现errorwx.showToast({title: res.data.message.slice(5),icon: 'loading'})}},fail: function () {console.log('绑定失败QAQ')wx.showModal({title: '失败',content: '绑定失败，请重试',})}})

需要同服务端保持seesion见微信小程序踩坑–设置cookie保持session

微信小程序踩坑—用户登录界面相关推荐

微信小程序踩坑记——ColorUI组件的使用
微信小程序踩坑记--组件的使用组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接:官网链接,GitHub链接简介 ColorUI是一个css库!!!在你引入样式后可以 ...
微信小程序+SpringBoot实现用户登录
微信小程序+SpringBoot实现用户登录前言微信小程序越来越吃香了(前话就这么多,嘿嘿) 前端那就开始吧,登录界面就如此了 wxml内容如下,这是格式化后粘贴过来的,emmm,怪像那回事. ...
微信小程序开发之——用户登录-登录流程(1)
一概述新建微信小程序自带用户登录简化小程序登录流程时序二新建微信小程序自带用户登录简化新建的微信小程序默认有用户登录功能,将多余功能去除后,简化如下 2.1 index.wxml < ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
【微信小程序】通过用户登录实现批量收集formId
参考网上多篇文章,本文目的旨在做个记录. [微信小程序]通过用户登录实现批量收集formid,无限次发送模板消息提交1次表单可下发1条模板消息,多次提交下发条数独立,相互不影响. 所以,想无限次发送 ...
Laravel 微信小程序后端实现用户登录的示例代码
Laravel 微信小程序后端实现用户登录的示例代码这篇文章主要介绍了Laravel 微信小程序后端实现用户登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 ...
关于微信小程序踩坑之下载Word失败手机vConsole中提示：downloadfile:fail url not in domain list
下载文件失败提示:downloadfile:fail url not in domain list 1.看响应数据是否成功微信开发工具 -->Network 2.上传时一定要配置详情-& ...
【微信小程序+node】微信小程序结合node用户登录-06
申请一个微信小程序账号,并获取appId,appSecret 1.使用新的qq注册一个新的小程序 2.获取appId,appSecret.特别注意appSecret需要自己保存,每次获取都要验证,特别 ...
微信小程序踩坑-Cookie登陆失败
目录 1 问题描述小程序成功登陆后,安卓用户预约操作时,偶尔会出现登陆异常情况. 2 登陆实现方案后端Cookie校验用户登陆状态 3 排查过程 1)后台日志排查,用户Cookie无效 2)微信小 ...

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

微信小程序踩坑—用户登录界面相关推荐

最新文章

热门文章