前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手把手教你完成微信小程序用户信息绑定(微信报修小程序源码讲解八)

手把手教你完成微信小程序用户信息绑定(微信报修小程序源码讲解八)

原创
作者头像
热心的程序员
修改2020-04-07 10:49:33
8500
修改2020-04-07 10:49:33
举报
文章被收录于专栏:编程之路编程之路

针对本套源码,微信交流群和微信好友的有些同学反应,缺少用户绑定的业务逻辑 ,同时自己扩展源码无从下手问题 ,今天我给大家补上 , 手把手教你完成用户信息绑定功能,包括:详细前台页面编写、后台api接口编写 。

小程序页面编写

在这里插入图片描述
在这里插入图片描述

1、打开微信开发工具,找到 app.json 文件,在 app.json 下添加一个页面:pages/binding/index

代码语言:txt
复制
  "pages": [
    "pages/home/home",
    "pages/index/index",
    "pages/auth/auth",
    "pages/add_repair/add_repair",
    "pages/repair/repair",
    "pages/repair_detail/index",
    "pages/binding/index"
  ],

2、在 pages/binding/index.wxml 中编写页面 ,代码如下:

代码语言:txt
复制
<!--pages/binding/index.wxml-->
<view class='binding-item'>
	<view>真实姓名</view>
	<input placeholder="请输入您的真实姓名" value="{{realName}}" bindinput="inputRealName"></input>
</view>
<view class='binding-item'>
	<view>联系电话</view>
	<input placeholder="请输入您的手机号码" value="{{mobile}}" bindinput="inputMobile"></input>
</view>
<view>
	<view class="binding-btn" bindtap="bindingAdd">{{buttonText}}</view>
</view>

3、pages/binding/index.wxss 中编写 pages/binding/index.wxml 对应的页面样式 。

注意: margin 、padding 、font-size 等均使用 rpx 作为单位, 如果使用 px 作为单位, 不同的设备大小差异很大 。在使用 iphone6 作为模拟器时候 ,1px = 2rpx ,在以后的开发中,建议美工页面效果图采用iphone6来标注 px ,开发人员使用 iphone6 模拟器开发,转换 px 大小。

代码语言:txt
复制
/* pages/binding/index.wxss */
.binding-item {
  margin: 40rpx;
  padding-top: 20rpx;
  padding-bottom: 40rpx;
  display: flex;
  font-size: 32rpx;
  /* 在模拟器为iphone 6 时,1px=2rpx ,这里设置32rpx,即16px */
  border-bottom: 1rpx solid #dedede;
}

.binding-item input {
  display: flex;
  align-items: center;
  justify-content: center;  
  height: 100%;
  padding-left: 20rpx;
}

.binding-btn{
  background-color:#19be6b;
  padding: 26rpx;
  margin: 40rpx;
  color: white;
  text-align: center;
}

4、在 pages/binding/index.js 中编写相关业务逻辑代码 ,相关解释直接注解在代码中

代码语言:txt
复制
// pages/binding/index.js
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mobile: '',
    openid: '',
    realName: '',
    buttonText: '完成认证'
  },

  /**
   * 监听真实姓名的输入
   */
  inputRealName: function (e) {
    var realName = e.detail.value
    this.setData({
      realName: realName
    })
  },

  /**
   * 监听手机号码的输入
   */
  inputMobile: function (e) {
    var mobile = e.detail.value
    this.setData({
      mobile: mobile
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
       //获取用户信息,若存在则初始化填充页面中的姓名和手机号
       var userInfo = app.globalData.userInfo 
       console.log(userInfo)
       if(userInfo){
         this.setData({
           mobile:userInfo.mobile,
           realName:userInfo.realName
         })
       }
  },

  /**
   * 提交绑定信息到后台api接口
   */
  bindingAdd: function () {
    var that = this
    //调用后台接口,提交用户id、真实姓名、手机号 
    wx.request({
      url: app.serverUrl + "api/v1/user/binding",
      method: "POST",
      data: {
        mobile: that.data.mobile,
        realName: that.data.realName,
        userId: app.globalData.userInfo.id //传递用户id、根据id去绑定真实姓名和手机号
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res.data)
        //若 res.data.status==200 表示保存成功、更新 app.globalData.userInfo 的信息供其他页面使用
        if(res.data.status==200){
          app.globalData.userInfo.mobile=that.data.mobile
          app.globalData.userInfo.realName=that.data.realName
          app.globalData.userInfo.isBindingMobile=1
          wx.showModal({
            title:'友情提醒',
            content:'身份认证成功,快去体验报修吧!',
            confirmText: '去报修',
            success:function(res){
              if(res.confirm){
                  wx.switchTab({
                    url: '/pages/repair/repair',
                  })
              }
            }
          })
        }else{
          wx.showToast({
            title: '绑定失败,请重试!',
            icon:'none'
          })
        }
      }
    })
  }
})

flask 后台 api 接口编写

1、在 model.py 中修改 WxUser 用户模型 ,增加字段 realName 、mobile

代码语言:txt
复制
# 微信用户模型
class WxUser(db.Model):
    tableName = 'wx_user'
    id = db.Column(db.INTEGER, primary_key=True, autoincrement=True)
    openid = db.Column(name='openid', nullable=False)
    nickName = db.Column(name='nickName', nullable=False)
    avatarUrl = db.Column(name='avatarUrl', nullable=False)
    mobile = db.Column(name='mobile', nullable=False)
    realName = db.Column(name='realName', nullable=False)
    isBindingMobile = db.Column(name='isBindingMobile', nullable=False)

2、在 api.py 中增加路由 v1/user/binding ,只接受 post 表单请求

代码语言:txt
复制
# 用户绑定
@api.route('v1/user/binding', methods=['POST'])
def binding():
    realName = request.form.get("realName")
    mobile = request.form.get("mobile")
    userId = request.form.get("userId")
    wxUser = WxUser.query.filter(WxUser.id == userId).first()
    wxUser.realName = realName
    wxUser.mobile = mobile
    wxUser.isBindingMobile = 1
    db.session.commit()
    return jsonify({'status': 200, 'errmsg': '绑定成功!'})

到此,一个完成的用户信息绑定功能就完成了 。功能虽简单,确定解决很多如:职场新人、在校大学生、编程爱好者的疑惑 。

总结:

本文讲述的功能:为实际开发项目的流程,大家扩展源码可参考此步骤来完成。

对此,你有什么疑问?欢迎加我个人微信 study2100 或扫码关注微信公众号与我一起交流!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小程序页面编写
  • flask 后台 api 接口编写
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档