微信小程序技术文档

1.只显示用户头像和名称（简化代码）

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

使用实例

wxml

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

wxss

.avatar{
  border-radius: 45%;
  width: 90px;
  height: 90px;
  display:inline-block;
  overflow: hidden;
}

使用效果 

2.授权登录

使用wx.getUserProfile

<button bindtap="login">授权登录<button>//绑定点击事件进行登录

// pages/index/index.js
Page({
  data:{
    userinfo:''
  },
  login(){
    wx.getUserProfile({
      desc: '完善资料',
      success:res=>{//使用es6语法（箭头函数）避免this指向问题，简化代码
        console.log(res)
        this.setData({userinfo:res.userInfo})
      }
    })
  }
})
// Page({
    
//   data:{
//   userinfo:''
//   },

//   login(){
//    let that=this;//这的this指向page
//    wx.getUserProfile({
//       desc:"获取数据用途"//必填
//       sucess(res){
//           that.setData({//这里不可以使用this，为undefined
//               userinfo:res.userinfo
//          })
//       },
//        fail(res){
//         console.log("授权失败"，res)
//       }
//   })
// })

接着可以在wxml中进行渲染头像和昵称（优化登录进行条件渲染）

<button wx:if="{{!userinfo}}" bindtap="login">授权登录</button>
<view wx:else class="user_wrap">
  <image class="user_image" src="{{userinfo.avatarUrl}}"></image>
  <view class="user_message">
    <view class="user_name">{{userinfo.nickName}}</view>
    <view class="user_number"></view>
  </view>
</view>

3.缓存

Page({
  data:{
    userinfo:''
  },
  onLoad(){
    let user=wx.getStorageSync('userinfo')//调用缓存wx.getStorageSync('Key')
    this.setData({
      userinfo:user
    })
  },
  login(){
    wx.getUserProfile({
      desc: '完善资料',
      success:res=>{            //wx.setStorageSync("Key",value)
        wx.setStorageSync("userinfo",res.userInfo)//登陆的时候获取缓存，
        this.setData({userinfo:res.userInfo})
      }
    })
  }
})

4.退出登录

loginout(){
  this.setData({
    userinfo:''//清空数据
  })
  wx.setStorageSync('userinfo', NULL)//清理缓存
}

5.绑定点击事件获取当前index并对所点击进行选中（选中边框为绿色）

Page({

  data: {
   currentindex:''
  },
  handletap(e){//点击事件函数
    this.setData({
      currentindex:e.currentTarget.dataset.index
    })
  },
)}

 <view class="order" bindtap="handletap" data-index="{{index}}"">
    <view class="order_detail {{index===currentindex?'active':''}}">
    <view class="order_head">
    </view>
    <view class="order_body">
    </view>
    </view>
 </view>

.active .order_body{
  border:rgb(93, 219, 114) solid ;
  border-top: 0px;
}
.active .order_head{
  border:rgb(93, 219, 114) solid ;
  border-bottom: 0px;
}

效果如图

 6.横向滚动视图窗

我写了三层嵌套

    <scroll-view  class="scroll-view_H" scroll-x="true" >/*横向滚动必备*/
      <view class="bb">
        <view class="b">
        </view>
      </view>
    </scroll-view>

样式

.scroll-view_H{
  display: flex;/*一点要写这两个属性*/
  white-space:nowrap；
}
.bb{
  height:120px;
  display: flex;//一定要写
  overflow: scroll;/*溢出隐藏*/
}
.b{
  margin-left: 5px;
  display: inline-table;//一定要写
  border-radius: 5%;
  width: 110px;
  height: 100%;
  background-color:#f2f2f7;
}

7.文字居中竖直排列

wxss

.box{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text{
  writing-mode: vertical-rl;
  display: inline-block;
  margin-top: 40px;
 font-size: 30px; 
 letter-spacing: 20px; 
 color:	#bdbdc0;
}

wxml

<view class="box">
  <texy class="text">尚无借用设备</texy>
</view>

8.截取后端字符串并展示

<wxs module="subData">
              module.exports = function (val) {
                if (val == undefined || val == '' || val == null) {
                  return;
                }
                else {
                  return val.substring(5);//从索引5截取字符串
                }
              };
</wxs>
<view style="text-align: center;">{{subData(item.time)}}</view>//展示字符串

9.注册

import { request } from "../../request/index.js"
Page({
  data: {
  ename:'',
  xuehao: '',
  mima: '',
  phone:'',
  },
  //获取姓名
  getName(event) {
  console.log('获取输入的姓名', event.detail.value)
  this.setData({
   ename: event.detail.value
  })
  },
  //获取学号
  getXueHao(event) {
  console.log('获取输入的学号', event.detail.value)
  this.setData({
   xuehao: event.detail.value
  })

  },
  // 获取密码
  getMiMa(event) {
  console.log('获取输入的密码', event.detail.value)
  this.setData({
   mima: event.detail.value
  })
  },
  //获取手机号
  getPhone(event) {
    console.log('获取输入的密码', event.detail.value)
    this.setData({
    phone: event.detail.value
    })
    },
  //注册功能的实现
  zhuce(){
    var that=this;
    console.log("点击注册")
    if(that.data.ename!=''&&that.data.xuehao!=''&&that.data.mima!=''&&that.data.phone!=''){
      request({url:"/UploadUser", data:{
        name:that.data.ename,
        stuid:that.data.xuehao,
        pwd:that.data.mima,
        phone:that.data.phone
      },method:'POST', header:{
        'Content-Type': 'application/json'
      },})
    .then(result=>{
      //页面跳转
      console.log(result)
//注册失败
      if(result.data.desc!=="注册成功")
      {
        wx.showToast({
          title: result.data.desc,
          icon: 'none',
          duration: 2000//持续的时间
        })
        
      }
//注册成功
      else{
        wx.showToast({
          title: result.data.desc,
          icon: 'success',
          duration: 2000,//持续的时间,
          success: function () {
//延时弹窗
            setTimeout(function() {
              wx.redirectTo({
                url: "/pages/login/login"
            }, 2000);
          })
        }
   
      })
      }
    
    })
      
      
    }
    else{
      wx.showToast({
        title: '请全部输入',
        icon: 'none',
        duration: 2000//持续的时间
      })
    }
    },
    })

11.登录

主页js

Page({
  data:{
    userinfo:'',
    loginOK: false,
    phone:'',
    xuehao:''
  
  },


    let phone=wx.getStorageSync('phone')//获取缓存中的手机号
    console.log(phone)
    this.setData({
      phone:phone,
    })
    let xuehao=wx.getStorageSync('xuehao')
    console.log(xuehao)
    this.setData({
      xuehao:xuehao,
    })
  },
  //去登陆页
  denglu() {
    wx.navigateTo({
     url: '/pages/login/login',
    })
    },
    //去注册页
    zhuce() {
    wx.navigateTo({
     url: '/pages/zhuce/zhuce',
    })
    },
    onShow() {//判断是否需要登录
    let user = wx.getStorageSync('xuehao')
    if (user) {
     this.setData({
      loginOK: true,
     })
    } else {
     this.setData({
      loginOK: false
     })
    }
    },

})

主页wxml

<view class="me" wx:if="{{!loginOK}}" >
  <button class="denglu" type="primary" bindtap="denglu" style="background-color: rgb(199, 211, 199);color: rgb(65, 62, 62);margin-bottom: 5px;">登录</button>
  <button class="zhuce" type="primary" bindtap="zhuce" style="background-color: rgb(199, 211, 199);color: rgb(65, 62, 62);">注册</button>
</view>

 登录页面js

登录token

首微信小程序官方文档提供了wx.login
使用wx.login可以获取随机生成的code
然后请求登录接口，向后台发送code，返回的数据，就包含token
我们可以存到本地通过 wx.setStorageSync()，

内含token过期处理

// pages/login/login.js
import { request } from "../../request/index.js";
Page({
  data: {
    ename: '',
    xuehao: '',
    mima: '',
    stuid:'',
    IsAdmin:'',

  },

  //获取学号
  getXueHao(event) {
    console.log('获取输入的学号', event.detail.value)
    this.setData({
      xuehao: event.detail.value
    })
    wx.setStorageSync("xuehao", event.detail.value);
  },
  // 获取密码
  getMiMa(event) {
    console.log('获取输入的密码', event.detail.value)
    this.setData({
      mima: event.detail.value
    })
  },
  login() {
    var that = this;
    if (that.data.mima == "") {
      wx.showModal({
        title: "错误",
        content: "密码不能为空"
      });
    }
    else {
      wx.login({       
        success(res) {
          if (res.code) {
            request({url:"/login", data: {
              code: res.code,
              stuid: that.data.xuehao,
              pwd: that.data.mima
            },method: 'POST',
            header: {
              "content-type": "application/json"
            }})
          .then(_result=>{
            console.log('登录返回',_result)
                      var info = _result.data.code;
                      if (info == "401") {
                        wx.showModal({
                          title: "错误",
                          content: "学号或者密码输入不正确"
                        });
                      } 
                      else {
                        //登录返回，在里面可以找到后台返回的随机token
                        wx.setStorageSync('token', _result.data.token);
                        wx.setStorageSync("stuid", that.data.xuehao);
                        wx.setStorageSync("IsAdmin", _result.data.IsAdmin);
                        wx.setStorageSync("phone", _result.data.phone);
                        wx.setStorageSync("loginOk",true);
                        console.log(wx.getStorageSync('loginOk'))
                       // 页面跳转
                       wx.showToast({
                        title: "登陆成功",
                        icon: 'success',
                        duration: 2000,//持续的时间,
                        success: function () {
                          setTimeout(function() {
                            wx.switchTab({
                              url: "/pages/mine/index"
                          }, 2000);
                          console.log("页面跳转主页");
                        })
                      }
                 
                    })
                        
                      }
                    })            
          } 
          else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
    }
  },

})

退出登录清缓存

// pages/logout/logout.js
Page({
 //清除缓存
 clear:function(){
  wx.clearStorageSync();//清除缓存
  wx.showToast({
     title: '退出登录成功',
     icon: 'none',
     duration: 2000,
     success: function () {
        setTimeout(function () {
           //跳转到首页，强制重启
           wx.reLaunch({
              url: '/pages/index/index',
           })
        }, 2000);
     }
  })
},
})

12封装代码

新建一个request.js文件，

内行token过期和空的处理

export const request=(params)=>{
    // 公共url
    // const baseUrl="http://10.117.10.32:8080" //lyq  
    // const baseUrl="https://xdsbty.cn"   
    const baseUrl="http:// 10.117.14.61:8080"
    return new Promise((resolve,reject)=>{
        wx.request({
            ...params,
            url: baseUrl+params.url,
            success:(result)=>{
                if(result.data=="服务器繁忙解析失败"||result.data.desc=="无token")
                {
                    console.log("000")
                    wx.showModal({
                        title: '提示',
                        content: '请先登录',                    
                        success(res) {
                         //弹窗后执行
                         if (res.confirm) {
                            wx.navigateTo({
                                url: '/pages/login/login',                        
                              })
                          } else if (res.cancel) {
                            console.log('用户点击取消')
                          }
                        
                          }
                        })
                 
                }
                resolve(result);
             
                console.log(result)
            },
            fail:(err)=>{
                reject(err);
                console.log(err)
            }
        });
    })
}
// import { request } from "../../request/index.js";在.js文件中引入
// 使用的时候 request({url:""})
            // .then(result=>{
                // 这里相当于wx.request里的 success: (result) =>{}
            // }) 

// 使用post request({url:"",data: ,method:"post"})

// handlesubmit({
//     const ##=this.data.
// })
// request

在页面中引入即可

import { request } from "../../request/index.js";//引入请求
Page({

  data: {
    usedUav:[],
    stuid:''
  },

  onShow(){
    var that=this;
    let stuid=wx.getStorageSync('stuid')
    console.log(stuid)
    this.setData({
      stuid:stuid
    })
    // 登录则发请求
    if(wx.getStorageSync('loginOk'))
    {
      request({url:"/User/GetOwnHistory",header:{
        'token':wx.getStorageSync("token")
      },
      method:'GET',
      data:{stuid:that.data.stuid},})
      .then(result=>{
        console.log(result)
        if(result.data!=null){
          this.setData({
            usedUav:result.data
          })
        }
        })
    }
 
  },
})