微信小程序——校园服务小程序（二）校园论坛加预约理发服务

微信小程序——校园服务小程序（二）

环境搭建好了，我们开始编写代码。

首先我们来看 “我的“ 界面，先写一下登录功能。

先看一下wxml

通过判断canIUseGetUserProfile来决定是渲染手机号和验证码输入框还是渲染头像和昵称。

<view class="userinfo">

    <input wx:if="{{canIUseGetUserProfile}}" bindinput="getName" type="number" auto-focus placeholder="请输入手机号：" class="input_css"/>
    <input wx:if="{{canIUseGetUserProfile}}" bindinput="getqwe" auto-focus placeholder="请输入验证码：" class="input_css"/>

    <button  wx:if="{{!hasUserInfo}}" wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile" class="huoqutouxiang"> 登录 </button>
    <block wx:else>
      <view>
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>

登录功能主要是为了获取用户的头像、昵称、电话号、openid

那么 怎么获取呢：

头像和昵称通过getUserProfile获取用户的信息。（微信开发者文档上有）

wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })

通过对应的点击事件的event获取相应的值

默认为：

昵称：nickName

头像：avatarUrl

openid我这里使用云函数获取；（云函数的使用方法很简单，网上有很多）

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

直接返回对应的值就好了。

电话号则通过诱导用户输入获得。

使用input组件的bindinput获取用户输入的内容

getName(event){
    console.log(event.detail.value);
     shoujihao=event.detail.value
  
  },

手机号的验证使用了正则表达式

/^1[34578]\d{9}$/.test(shoujihao)

有需要的可以购买短信端口发送验证码。

将用户的信息导入库中，因为这是一个需要联网的项目，需要让其他用户也能看到你的信息，所以我们要将当前用户的信息导入库中，方便其他人通过服务器获取到我们的信息，

我们使用的是小程序自带的云开发技术，

peopleviewnum 和viewpeoplenum涉及到关注功能这里不做过多解释。

const db = wx.cloud.database()
const people1Collection = db.collection('people')//people是库的名字
people1Collection.add({//添加用户信息到数据库
      
            data:{
              shouji:shoujihao,
              wxtitle: this.data.weixinname,
              wxpages: this.data.weixinpages,
              viewpeoplenum:0,//关注数量
              peopleviewnum:0//粉丝数量
            },
            success:res=>{
              console.log("添加成功",res);
            },
            fail: res=>{
              console.log("添加失败");
            }
          })

记录登录状态，

因为许多操作只有登录过后才能操作，比如：评论，上传帖子，预约订单等，这里把登录状态存在缓存中，当缓存中存入响应的值，其他界面才能进行对应的操作。

还有用户不可能每次进入小程序都重新登陆，所以已注册的账号要有一个自动登录功能。

这里的思路是：

在onLoad（）里面先获取当前用户的openid，通过openid查询数据库，若返回值为空，则当用户是一个新用户，需要注册，这时渲染注册界面，当返回值不为空，说明这是一个已经注册过的用户，直接从库中获取数据，渲染已登录界面。

wx.cloud.callFunction({
      name:"getopenid"
    }).then(res=>{
      console.log(res,"登陆状态");
       open1=res.result.openid
      //console.log(zhuangtaiopenid);
      people1Collection.where({
        _openid:open1
      }).get().then(res =>{
         this.setData({
           people: res.data
         })
         console.log(res);
    
    if(res.data!=''){
      console.log("重复---------------------------------------------------吗");
      this.setData({
        canIUseGetUserProfile: false
      })
      this.gettitlepages();
      wx.setStorageSync('stopenid',open1)//将数据导入缓存
      
      wx.setStorageSync('loginzhuangtai', "yidenglu")//将数据导入缓存
      people1Collection.where({
        _openid:open1
      }).get().then(res=>{
        this.setData({
          people:res.data
        })
        console.log(res,"获取用户数据成功");
        shoujihao=res.data[0].shouji
        console.log(shoujihao);
        wx.setStorageSync('oldshouji', shoujihao)//将数据导入缓存
      })
     
      
  }else{
    console.log("新用户填写手机号");
    this.setData({
      loadingHidden: true
     });
     people1Collection.where({
      _openid:open1
    }).get().then(res=>{
      this.setData({
        people:res.data
      })
      console.log(res,"获取用户数据成功");
    })
    
  }
})
  })
    //if(open1!=''&&open1!=null){
    
  //}
  if (wx.getUserProfile) {
    this.setData({
      canIUseGetUserProfile: true
    })
  }
  },