search

博客列表 >【记账小程序】记账系统备注与收入功能完善、用户登陆与用户账目统计功能开发

【记账小程序】记账系统备注与收入功能完善、用户登陆与用户账目统计功能开发

　一纸荒凉* Armani
　一纸荒凉* Armani原创
2021年06月07日 15:22:011410浏览

记账备注信息添加

添加点击事件，判断备注信息是否为空，不为空则显示内容，为空则显示默认的添加备注信息

  1. <a class="color-blue" bindtap="edit_bt" href="#">
  2.    <block wx:if="{{content}}">
  3.        {{content}}
  4.    </block>
  5.    <block wx:else>
  6.        添加备注
  7.    </block>
  8. </a>

在data数据中添加content字段默认为空，事件调用模态框获取并设置备注信息到data中

  1. edit_bt(e){
  2.    wx.showModal({
  3.      title: '请输入备注',
  4.      content: this.data.content,
  5.      editable: true,
  6.      success:(e)=>{
  7.       // 判断是否点击了确认
  8.       if(e.confirm){
  9.         this.setData({
  10.           content: e.content
  11.         })
  12.       }
  13.      }
  14.    })
  15.   }


收入和支出Tab栏切换时，再次返回来重新默认选择收入或支出下面的第一个分类图标

  1. // 收入和支出tab栏切换事件
  2. changeTab: function( e ) {
  3.     // 当点击支出的时候，支出是1 收入是2
  4.     // 为支出1的时候，我们把支出分类全部拿出来，this.data.zhichu
  5.     if(e.currentTarget.dataset.current==1){
  6.       var zhichu = this.data.zhichu;
  7.       // 目的是当点击回到支出的时候，让他重新选择第一个
  8.       // 拿到数据后，进行循环吧图标改变，第一个也就是第0项，修改为选中图标，其他全部修改为未选中
  9.       for(var i=0;i<zhichu.length;i++){
  10.         if(i==0){
  11.             // 将当前选中的索引也赋值为0
  12.           zhichu_select = 0;
  13.             // 将当前的分类id赋值记录
  14.           cat_id = zhichu[i].id;
  15.             // 将第一个设置为选中
  16.           zhichu[i].select_img = zhichu[i].img_s;
  17.         }else{
  18.             // 如果不是第一个全部设置为未选中
  19.           zhichu[i].select_img = zhichu[i].img;
  20.         }
  21.       }
  22.       this.setData({
  23.         zhichu:zhichu
  24.       })
  25.     }else{
  26.       var shouru = this.data.shouru;
  27.       for(var i=0;i<shouru.length;i++){
  28.         if(i==0){
  29.           shouru_select = 0;
  30.           cat_id = shouru[i].id;
  31.           shouru[i].select_img = shouru[i].img_s;
  32.         }else{
  33.           shouru[i].select_img = shouru[i].img;
  34.         }
  35.       }
  36.       this.setData({
  37.         shouru:shouru
  38.       })
  39.     }
  40.     // 存储当前选中的Tab栏是哪一个 状态：1支出 2收入
  41.     this.setData({
  42.       currentData:e.currentTarget.dataset.current
  43.     })
  44.   },

前面做了支出金额的添加和支出分类图片的选中，这里来完善收入分类的图片选中及添加信息

  1. select_cat(e){
  2.     console.log(e.currentTarget.dataset.key);
  3.     // 选中的key 也就是分类的ID
  4.     var key = e.currentTarget.dataset.key;
  5.     // currentData=1 支出页面图标选择
  6.     if(this.data.currentData==1){
  7.         // 判断当前选中如果不是自己才执行
  8.         if(key != zhichu_select){
  9.           // 修改当前选中的key的img为选中图片
  10.           this.data.zhichu[key].select_img = this.data.zhichu[key].img_s;
  12.           // key === zhichu_select 将上一次选中的修改为未选中图片
  13.           this.data.zhichu[zhichu_select].select_img = this.data.zhichu[zhichu_select].img;
  14.           // 将这次的key赋值
  15.           zhichu_select = key;
  16.           // 同步数据
  17.           this.setData({
  18.           zhichu : this.data.zhichu
  19.           })
  20.           // 将当前选中的id赋值给
  21.           cat_id = e.currentTarget.dataset.id;
  22.         }
  23.     }else{
  24.         // 收入页面图标选择
  25.         // 判断当前选中如果不是自己才执行
  26.         if(key != shouru_select){
  27.           // 修改当前选中的key的img为选中图片
  28.           this.data.shouru[key].select_img = this.data.shouru[key].img_s;
  29.           // key === shouru_select 将上一次选中的修改为未选中图片
  30.           this.data.shouru[shouru_select].select_img = this.data.shouru[shouru_select].img;
  31.           // 将这次的key赋值
  32.           shouru_select = key;
  33.           // 同步数据
  34.           this.setData({
  35.           shouru : this.data.shouru
  36.           })
  37.           // 将当前选中的id赋值给
  38.           cat_id = e.currentTarget.dataset.id;
  39.         }
  40.     }
  41.   },
  42.   submit(){
  43.     // 请求添加记账明细
  44.     wx.request({
  45.       url : 'https://jz.easys.ltd/index.php/api/Jizhang/add_jizhang',
  46.       data : {
  47.         input_v : this.data.input_v, //金额
  48.         type : this.data.currentData, // 类型
  49.         uid : 1, // 用户ID
  50.         cid : cat_id, // 分类ID
  51.         date : this.data.date, // 日期
  52.         remarks : this.data.content // 备注
  53.       },
  54.       method : 'POST',
  55.       success:(e)=>{
  56.         // 如果返回的code不为1，表示添加失败
  57.         if(e.data.code != 0){
  58.           wx.showToast({
  59.             title: e.data.msg,
  60.             icon: 'error',
  61.             duration: 2000
  62.           })
  63.           return false;
  64.         }else{
  65.           // 记账成功提示
  66.           wx.showToast({
  67.             title: e.data.msg,
  68.             icon: 'success',
  69.             duration: 2000
  70.           });
  71.           // 清空还原所有数据
  72.           this.setData({
  73.             currentData: 1, 
  74.             input_v : '',
  75.             zhichu :  default_zhichu,
  76.             shouru : default_shouru,
  77.             date : default_shijian,
  78.             week : default_week,
  79.             content: '',
  80.           })
  81.         }
  82.       }
  83.     })
  84.   }

格式化当前选中的时间，传给后台接口，将其2021-06-06转换为年月日星期几形式的数据

  1.   // 执行日期的选中方法
  2.   edit_date(e){
  3.     var date = e.detail.value
  4.     console.log(date);
  5.       // 将当前选择的时间请求发送给后台接口
  6.     wx.request({
  7.         url: 'https://jz.easys.ltd/index.php/api/Jizhang/format_date',
  8.         data: {date},
  9.         method : 'POST',
  10.         success:(e)=>{
  11.             this.setData({
  12.               date: e.data.data.date,
  13.               week: e.data.data.week
  14.             })
  15.         }
  16.     });
  17.   },

后台处理格式化时间接口

  1. <?php
  2. namespace app\api\controller;
  3. use app\api\controller\Base;
  4. use think\facade\Db;
  5. use think\facade\Request;
  7. class Jizhang extends Base{
  8.     // 获取分类列表接口
  9.     public function cat_list(){
  10.         // 查询支出分类列表，并处理图片链接
  11.         $zhichu = Db::table('oyk_cat')->where('status',1)->where('type',1)->select()->each(function($res){
  12.             $res['img'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img'];
  13.             $res['img_s'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img_s'];
  14.             return $res;
  15.         });
  16.         // 查询收入分类列表，并处理图片链接
  17.         $shouru = Db::table('oyk_cat')->where('status',1)->where('type',2)->select()->each(function($res){
  18.             $res['img'] = 'https://'.$_SERVER['SERVER_NAME']. $res['img'];
  19.             $res['img_s'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img_s'];
  20.             return $res;
  21.         });
  22.         // 返回当前时间格式化年月日数据
  23.         $date = date('Y年m月d日',time());
  24.         $arr = [
  25.             'zhichu' => $zhichu,
  26.             'shouru' => $shouru,
  27.             'date' => $date
  28.         ];
  29.         $this->returnCode(0,$arr);
  30.     }
  31.     // 添加记账记录数据
  32.     public function add_jizhang(){
  33.         // 判断是否输入金额
  34.         $input_v = Request::post('input_v');
  35.         if(empty($input_v)){
  36.             $this->returnCode(1,'请输入数字');
  37.         }
  38.         // 接受添加记录数据
  39.         $uid = Request::post('uid');
  40.         $cid = Request::post('cid',1);
  41.         $date = Request::post('date');
  42.         $type = Request::post('type',1);
  43.         $remarks = Request::post('remarks','');
  44.         // 处理前台返回的年月日时间
  45.         $date =str_replace('年','-',$date);
  46.         $date =str_replace('月','-',$date);
  47.         $date =str_replace('日','-',$date);
  49.         // 执行添加操作
  50.         $insert = Db::table('oyk_jz')->insert([
  51.             'uid' => $uid,
  52.             'cid' => $cid,
  53.             'date' => $date,
  54.             'type' => $type,
  55.             'money' => $input_v,
  56.             'add_time' => time(),
  57.             'remarks' => $remarks,
  58.         ]);
  59.         // 返回错误信息
  60.         if(empty($insert)){
  61.             $this->returnCode(1,'记录失败');
  62.         }
  63.         $this->returnCode(0,'成功');
  64.     }
  65.     // 将时间格式化为年月日星期几形式
  66.     public function format_date(){
  67.         $date = Request::post('date');
  68.         if(empty($date)){
  69.             $this->returnCode(1,'请选择年月日');
  70.         }
  71.         // 获取当前时间为星期几
  72.         $array = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
  73.         // 将传递过来的时间转换为时间戳
  74.         $time = strtotime($date);
  75.         // 获取星期几
  76.         $week = $array[date('w',$time)];
  77.         // 年月日
  78.         // $time = explode('-'$date);
  79.         // $date = $time[0].'年'.$time[1]."月".$time[0].'日';
  80.         $date = date('Y年m月d日',$time);
  81.         $this->returnCode(0,[
  82.             'week'=>$week,
  83.             'date'=>$date
  84.         ]);
  85.     }
  86. }


完整记账页面代码

index.wxml

  1. <!--index.wxml-->
  2. <view class="wrapper-bg">
  3.   <view class="income-wrap">
  4.     <view class="income-header">
  5.       <!-- 支出和收入切换 -->
  6.       <view class="layout-row layout-align-start-start income-tab">
  7.         <view class="{{currentData == 1 ? 'outlay' : ''}}" data-current="1" bindtap="changeTab">支出
  8.           <text  data-current="0"  class="tab-active"></text>
  9.         </view>
  10.         <view class="{{currentData == 2 ? 'income-nav' : ''}}" data-current="2" bindtap="changeTab">
  11.           收入
  12.           <text data-current="1"  class="tab-active"></text>
  13.         </view>
  14.       </view>
  15.       <!-- 金额输入框 -->
  16.       <view class="int layout-row layout-align-start-start">
  17.         <text style="{{currentData == 2 ? 'color:#cda337' : ''}}">￥</text><input value="{{input_v}}" disabled></input>
  18.       </view>
  19.     </view>
  20.     <scroll-view scroll-y='ture' class="income-center text-center">
  21.      <!-- 支出分类列表 -->
  22.       <view class="layout-row layout-align-start-start layout-wrap" hidden="{{currentData != 1}}">
  23.         <view class="in-icon" wx:for="{{zhichu}}" wx:key="index" bindtap="select_cat" data-id="{{item.id}}" data-key="{{index}}">
  24.           <image src="{{item.select_img}}"></image>
  25.           <text>{{item.name}}</text>
  26.         </view>
  27.       </view>
  28.       <!-- 收入分类列表 -->
  29.       <view class="layout-row layout-align-start-start layout-wrap" hidden="{{currentData != 2}}">
  30.         <view class="in-icon" wx:for="{{shouru}}" wx:key="index" bindtap="select_cat" data-id="{{item.id}}" data-key="{{index}}">
  31.           <image src="{{item.select_img}}"></image>
  32.           <text>{{item.name}}</text>
  33.         </view>
  34.       </view>
  35.     </scroll-view>
  36.     <!-- 备注和日期 -->
  37.     <view class="income-footer layout-row layout-align-space-between-center">
  38.       <a class="color-blue" bindtap="edit_bt" href="#">
  39.         <block wx:if="{{content}}">
  40.           {{content}}
  41.         </block>
  42.         <block wx:else>
  43.           添加备注
  44.         </block>
  45.       </a>
  46.       <picker mode="date" class="income-time" bindchange="edit_date">{{date}} <text>{{week}}</text></picker>
  47.     </view>
  48.   </view>
  49.   <!-- 数字键 -->
  50.   <view class="calculator layout-row layout-align-start-start">
  51.     <view class="calculator-left layout-row layout-align-start-center layout-wrap text-center">
  52.       <view class="calculator-key" bindtap="input_num" data-num="1">1</view>
  53.       <view class="calculator-key" bindtap="input_num" data-num="2">2</view>
  54.       <view class="calculator-key" bindtap="input_num" data-num="3">3</view>
  55.       <view class="calculator-key" bindtap="input_num" data-num="4">4</view>
  56.       <view class="calculator-key" bindtap="input_num" data-num="5">5</view>
  57.       <view class="calculator-key" bindtap="input_num" data-num="6">6</view>
  58.       <view class="calculator-key" bindtap="input_num" data-num="7">7</view>
  59.       <view class="calculator-key" bindtap="input_num" data-num="8">8</view>
  60.       <view class="calculator-key" bindtap="input_num" data-num="9">9</view>
  61.       <view class="calculator-key calculator-in" bindtap="input_num" data-num="0">0</view>
  62.       <view class="calculator-key" bindtap="input_num" data-num=".">.</view>
  63.     </view>
  64.     <view class="calculator-right">
  65.       <view class="calculator-delete" style="text-align:center;" bindtap="input_del">
  66.         <image style="width:40rpx;height:40rpx;margin-top:20rpx;" src="/img/del.png"></image>
  67.       </view>
  68.       <view class="calculator-enter" bindtap="submit">确定</view>
  69.     </view>
  70.   </view>
  71. </view>

index.js

  1. var zhichu_select = 0;
  2. var cat_id = 0;  // 要传给接口的id
  3. var shouru_select = 0;
  4. // 初始化默认数据
  5. var default_zhichu ;
  6. var default_shouru ;
  7. var default_shijian;
  8. var default_week;
  9. Page({
  10.   data: {
  11.     currentData: 1, // 状态：1支出 2收入
  12.     input_v : '',
  13.     zhichu : [],
  14.     shouru : [],
  15.     date : '',
  16.     week: '',
  17.     content: ''
  18.   },
  19.   onLoad: function (options) {
  20.     wx.request({
  21.       url : 'http://jz.easys.ltd/index.php/api/Jizhang/cat_list',
  22.       data :{},
  23.       method:'POST',
  24.       success:(e)=>{
  25.         var zhichu = e.data.data.zhichu;
  26.         // 循环支出列表
  27.         for(var i=0;i<zhichu.length;i++){
  28.           if(i == 0){
  29.             // 如果是第一项，将id赋值给当前的id
  30.             cat_id = zhichu[i].id; // 第一次获取接口时，默认也第一个分类的id，就是要传的id，是选中的分类id
  31.             // 将选中图标复制给变量select_img，我们在渲染列表的时候就用select_img默认第一项是选中的图片
  32.             zhichu[i].select_img = zhichu[i].img_s;
  33.           }else{
  34.             // 否则则赋值未选中的图片
  35.             zhichu[i].select_img = zhichu[i].img;
  36.           }
  37.         }
  38.         // 收入列表同上
  39.         var shouru = e.data.data.shouru;
  40.         for(var i=0;i<shouru.length;i++){
  41.           if(i==0){
  42.             shouru[i].select_img = shouru[i].img_s;
  43.           }else{
  44.             shouru[i].select_img = shouru[i].img;
  45.           }
  46.         }
  47.         this.setData({
  48.           zhichu : zhichu,
  49.           shouru : shouru,
  50.           date : e.data.data.date,
  51.           week: e.data.data.week
  52.         });
  53.         // 记录初始化的默认数据
  54.         default_zhichu = zhichu;
  55.         default_shouru = shouru;
  56.         default_shijian = e.data.data.date;
  57.         default_week = e.data.data.week;
  58.       }
  59.     })
  60.   },
  61.   changeTab: function( e ) {
  62.     // 当点击支出的时候，支出是1 收入是2
  63.     // 为支出1的时候，我们把支出分类全部拿出来，this.data.zhichu
  64.     if(e.currentTarget.dataset.current==1){
  65.       var zhichu = this.data.zhichu;
  66.       // 目的是当点击回到支出的时候，让他重新选择第一个
  67.       // 拿到数据后，进行循环吧图标改变，第一个也就是第0项，修改为选中图标，其他全部修改为未选中
  68.       for(var i=0;i<zhichu.length;i++){
  69.         if(i==0){
  70.           zhichu_select = 0;
  71.           cat_id = zhichu[i].id;
  72.           zhichu[i].select_img = zhichu[i].img_s;
  73.         }else{
  74.           zhichu[i].select_img = zhichu[i].img;
  75.         }
  76.       }
  77.       this.setData({
  78.         zhichu:zhichu
  79.       })
  80.     }else{
  81.       var shouru = this.data.shouru;
  82.       for(var i=0;i<shouru.length;i++){
  83.         if(i==0){
  84.           shouru_select = 0;
  85.           cat_id = shouru[i].id;
  86.           shouru[i].select_img = shouru[i].img_s;
  87.         }else{
  88.           shouru[i].select_img = shouru[i].img;
  89.         }
  90.       }
  91.       this.setData({
  92.         shouru:shouru
  93.       })
  94.     }
  95.     // 存储当前选中的Tab栏是哪一个
  96.     this.setData({
  97.       currentData:e.currentTarget.dataset.current
  98.     })
  99.   },
  100.   bindChange: function( e ) {
  101.       this.setData( { currentTab: e.detail.current });
  102.   },
  103.   select_cat(e){
  104.     console.log(e.currentTarget.dataset.key);
  105.     // 选中的key 也就是分类的ID
  106.     var key = e.currentTarget.dataset.key;
  107.     // current=1 支出页面图标选择
  108.     if(this.data.currentData==1){
  109.         // 判断当前选中如果不是自己才执行
  110.         if(key != zhichu_select){
  111.           // 修改当前选中的key的img为选中图片
  112.           this.data.zhichu[key].select_img = this.data.zhichu[key].img_s;
  114.           // key === zhichu_select 将上一次选中的修改为未选中图片
  115.           this.data.zhichu[zhichu_select].select_img = this.data.zhichu[zhichu_select].img;
  116.           // 将这次的key赋值
  117.           zhichu_select = key;
  118.           // 同步数据
  119.           this.setData({
  120.           zhichu : this.data.zhichu
  121.           })
  122.           // 将当前选中的id赋值给
  123.           cat_id = e.currentTarget.dataset.id;
  124.         }
  125.     }else{
  126.         // 收入页面图标选择
  127.         // 判断当前选中如果不是自己才执行
  128.         if(key != shouru_select){
  129.           // 修改当前选中的key的img为选中图片
  130.           this.data.shouru[key].select_img = this.data.shouru[key].img_s;
  132.           // key === shouru_select 将上一次选中的修改为未选中图片
  133.           this.data.shouru[shouru_select].select_img = this.data.shouru[shouru_select].img;
  134.           // 将这次的key赋值
  135.           shouru_select = key;
  136.           // 同步数据
  137.           this.setData({
  138.           shouru : this.data.shouru
  139.           })
  140.           // 将当前选中的id赋值给
  141.           cat_id = e.currentTarget.dataset.id;
  142.         }
  143.     }
  144.   },
  145.   // 执行日期的选中方法
  146.   edit_date(e){
  147.     var date = e.detail.value
  148.     console.log(date);
  149.       // 将当前选择的时间请求发送给后台接口
  150.     wx.request({
  151.         url: 'https://jz.easys.ltd/index.php/api/Jizhang/format_date',
  152.         data: {date},
  153.         method : 'POST',
  154.         success:(e)=>{
  155.             this.setData({
  156.               date: e.data.data.date,
  157.               week: e.data.data.week
  158.             })
  159.         }
  160.     });
  161.   },
  162.   input_num(e){
  163.     // 获取点击的数字按钮的自定义属性dataset
  164.     var input_v = e.target.dataset.num;
  165.     // 判断当前点击的是否为小数点
  166.     if(input_v == '.'){
  167.       // 如果小数点已经存在则累加一个空值
  168.       if(this.data.input_v.indexOf(".") != -1  ){
  169.         input_v = '';
  170.       }
  171.       // 如果还没有输入内容则不能输入小数点
  172.       if(!this.data.input_v){
  173.         input_v = '';
  174.       }
  175.       // 判断点击的是否是0
  176.     }else if(input_v == 0){
  177.       // 如果值已经是0则不在添加0，否则则添加0
  178.       if(this.data.input_v == '0'){
  179.         input_v = '';
  180.       }else{
  181.         input_v = 0;
  182.       }
  183.     }
  184.     if(this.data.input_v>=100000){
  185.       wx.showToast({
  186.         title: '请输入小于10万的值',
  187.         icon: 'error'
  188.       });
  189.       input_v = '';
  190.     }
  192.     this.setData({
  193.       // 将当前输入的值和原始值合并
  194.       input_v : this.data.input_v.concat(input_v)
  195.     })
  196.   },
  197.   input_del(e){
  198.     var input_v = this.data.input_v;
  199.     // 删除最后一个字符
  200.     input_v = input_v.substr(0, input_v.length - 1);  
  201.     this.setData({
  202.       input_v : input_v
  203.     })
  204.   },
  205.   submit(){
  206.     // 请求添加记账明细
  207.     wx.request({
  208.       url : 'https://jz.easys.ltd/index.php/api/Jizhang/add_jizhang',
  209.       data : {
  210.         input_v : this.data.input_v, //金额
  211.         type : this.data.currentData, // 类型
  212.         uid : 1, // 用户ID
  213.         cid : cat_id, // 分类ID
  214.         date : this.data.date, // 日期
  215.         remarks : this.data.content // 备注
  216.       },
  217.       method : 'POST',
  218.       success:(e)=>{
  219.         // 如果返回的code不为1，表示添加失败
  220.         if(e.data.code != 0){
  221.           wx.showToast({
  222.             title: e.data.msg,
  223.             icon: 'error',
  224.             duration: 2000
  225.           })
  226.           return false;
  227.         }else{
  228.           // 记账成功提示
  229.           wx.showToast({
  230.             title: e.data.msg,
  231.             icon: 'success',
  232.             duration: 2000
  233.           });
  234.           // 清空还原所有数据
  235.           this.setData({
  236.             currentData: 1, 
  237.             input_v : '',
  238.             zhichu :  default_zhichu,
  239.             shouru : default_shouru,
  240.             date : default_shijian,
  241.             week : default_week,
  242.             content: '',
  243.           })
  244.         }
  245.       }
  246.     })
  247.   },
  248.   // 添加备注
  249.   edit_bt(e){
  250.    wx.showModal({
  251.      title: '请输入备注',
  252.      content: this.data.content,
  253.      editable: true,
  254.      success:(e)=>{
  255.        // 判断是否点击了确认
  256.       if(e.confirm){
  257.         this.setData({
  258.           content: e.content
  259.         })
  260.       }
  261.      }
  262.    })
  263.   }
  264. })

登录流程时序

img

说明：

  1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
  2. 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key。

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

注意：

  1. 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
  2. 临时登录凭证 code 只能使用一次

调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

我的页面获取微信头像和微信登陆功能开发

主要思路：当用户第一次进入小程序未点击登陆的时候，我们将默认创建一个用户，返回uid，当用户点击了登陆获取到唯一识别码openid时，在修改对应uid的用户信息，将其openid添加进去。小程序端通过缓存来保持用户登陆状态。

  1. <!--pages/my/index.wxml-->
  2. <view style="padding:130rpx 13rpx 13rpx; font-size: 30rpx;background:url('../../img/background.png')">
  3.   <view style="text-align:center;background: rgb(251 250 250 / 0.8);box-shadow: 3px 3px 6px #eee;padding: 30rpx;border-radius: 4%;" >
  4.     <image src="{{userInfo['avatarUrl']}}" style="width:160rpx;height:160rpx;border-radius:50%;margin-bottom:22rpx;"></image>
  5.     <view>{{userInfo['nickName']}}</view>
  6.     <view>
  7.       <text>地区：{{userInfo['province']}} {{userInfo['city']}}</text>
  8.       <text> 性别：<block wx:if="{{userInfo['gender']==1}}"> 男</block><block wx:elif="{{userInfo['gender']==2}}"> 女</block><block wx:else> 未知</block></text>
  9.     </view>
  10.     <block wx:if="{{!hasUserInfo}}"><button style="margin-top:20rpx;background:#eee" bindtap="getUserProfile">使用微信头像</button></block>
  11.     <block wx:if="{{!hasLogin}}"><button style="margin-top:20rpx;" plain="true" open-type='getUserInfo' bindgetuserinfo='bindGetUserInfo' lang="zh_CN">使用微信登陆</button></block>
  12.   </view>
  14.   <view style="text-align:center;display:flex;margin-top:40rpx;background: rgb(251 250 250 / 0.8);padding: 30rpx 15rpx;box-shadow: 3px 3px 6px #eee;">
  16.     <view style="width:33%;">
  17.       <view style="color:#CFA348">+{{shouru}}</view>
  18.       <view style="font-size:26rpx;">年收入</view>
  19.     </view>
  21.     <view style="width:34%">
  22.       <view>-{{zhichu}}</view>
  23.       <view style="font-size:26rpx;">年支出</view>
  24.     </view>
  26.     <view style="width:33%" bindtap="setMoney">
  27.       <view wx:if="{{yusuan == 0}}">未设置</view>
  28.       <view wx:elif="{{yusuan < 0}}" style="color:red;">{{yusuan}}</view>
  29.       <view wx:elif="{{yusuan > 0}}" style="color:green;">{{yusuan}}</view>
  30.       <view style="font-size:26rpx;">月预算余额</view>
  31.     </view>
  33.   </view>
  34.   <view style="text-align:center;display:flex;margin-top:40rpx;background: rgb(251 250 250 / 0.8);padding: 30rpx;box-shadow: 3px 3px 6px #eee;">
  35.     <view style="width:20%;" >
  36.       <image src="{{userInfo['avatarUrl']}}" style="width:100rpx;height:100rpx;border-radius:50%;"></image>
  37.       <view style="font-size:20rpx;">{{userInfo['nickName']}}</view>
  38.     </view>
  39.     <view style="width:20%;">
  40.       <button style="width:100%;padding:0;background: transparent;" open-type="share" >
  41.         <image src="../../img/index.png" style="width:90rpx;height:90rpx;border-radius:50%;"></image>
  42.         <view>添加</view>
  43.       </button>
  44.     </view>
  45.   </view>
  47.   <view style="margin-top:40rpx;background: rgb(251 250 250 / 0.8);padding: 26rpx;box-shadow: 3px 3px 6px #eee;">
  48.     <button style="width:100%;padding:0;text-align: left;background: transparent;" open-type="feedback">
  49.       <view style="border-bottom: 3px solid #eee;padding: 10px 0;" >
  50.         <image src="../../img/feedback.png" style="width:30px;height:30px;padding-right:20px"></image>
  51.         <text style="vertical-align: super;">反馈问题</text>
  52.       </view>
  53.     </button>
  54.     <button style="width:100%;padding:0;text-align: left;background: transparent;" open-type="share">
  55.       <view style="width:100%;border-bottom: 3px solid #eee;padding: 10px 0;" >
  56.         <image src="../../img/share.png" style="width:30px;height:30px;padding-right:20px"></image>
  57.         <text style="vertical-align: super;">推荐好友</text>
  58.       </view>
  59.     </button>
  60.     <view style="margin-top:26rpx;">
  61.       <text style="font-size:30rpx">设置手机亮度</text>
  62.       <slider value="{{Brightness}}" bindchange="sliderchange" min="0" max="100" step='1' left-icon="cancel" show-value right-icon="success_no_circle"/>
  63.     </view>
  64.   </view>
  65.   <view style="margin-top:26rpx;">
  66.     <text>当前手机亮度：<block wx:if="{{Brightness==100}}">闪瞎眼</block><block wx:elif="{{Brightness>=80}}">刺眼</block><block wx:elif="{{Brightness>=60}}">超量</block><block wx:elif="{{Brightness>=40}}">适合</block><block wx:elif="{{Brightness>=20}}">较暗</block><block wx:else>看不见</block>
  67.     </text>
  68.     <progress percent="{{Brightness}}" show-info border-radius='50' stroke-width="10"/>
  69.   </view>
  70.   <view style="margin-top:26rpx;">
  71.     <text>当前手机电量：<block wx:if="{{isCharging}}">正在充电</block></text>
  72.     <progress percent="{{level}}" show-info border-radius='50' stroke-width="10"/>
  73.   </view>
  74. </view>
  1. // pages/my/index.js
  2. Page({
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     userInfo :'',
  9.     hasUserInfo: false,
  10.     hasLogin: false,
  11.     shouru:100000,
  12.     zhichu:30000,
  13.     yusuan:0,
  14.     Brightness: 0,
  15.     level:'',
  16.     isCharging:false
  17.   },
  18.   getUserProfile(){
  19.    if(!this.data.hasUserInfo){
  20.       wx.getUserProfile({
  21.         desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  22.         lang:'zh_CN',
  23.         success: (res) => {
  24.           console.log(res);
  25.           this.setData({
  26.             userInfo: res.userInfo,
  27.             hasUserInfo: true
  28.           });
  29.           wx.setStorage({
  30.             key:"userInfo",
  31.             data: res.userInfo
  32.           })
  33.         }
  34.       });
  35.    }
  36.   },
  37.   bindGetUserInfo: function(res) {
  38.     if (res.detail.userInfo) {
  39.       var nickName = res.detail.userInfo.nickName;
  40.       var avatarUrl = res.detail.userInfo.avatarUrl;
  41.       var gender = res.detail.userInfo.gender;
  42.       var province = res.detail.userInfo.province;
  43.       var city = res.detail.userInfo.city;
  44.       var userInfo = res.detail.userInfo;
  45.       wx.login({
  46.         success:(res)=>{
  47.           if(!res.code){
  48.             wx.showToast({
  49.               title: '微信授权失败，请刷新重试',
  50.               icon: 'none',
  51.               duration: 1200
  52.             })
  53.             return;
  54.           }
  56.           wx.request({
  57.             url: 'https://jz.easys.ltd/index.php/api/Jizhang/wx_login',
  58.             data: {
  59.               code: res.code,
  60.               nickName:nickName,
  61.               avatarUrl:avatarUrl,
  62.               gender:gender,
  63.               province:province,
  64.               city:city
  65.             },
  66.             method : 'POST',
  67.             success:(e)=>{
  68.               if(e.data.code!=0){
  69.                 wx.showToast({
  70.                   title: e.data.msg,
  71.                   icon: 'error',
  72.                   duration: 2000
  73.                 });
  74.                 return false;
  75.               }
  76.               console.log(userInfo);
  77.               wx.setStorage({
  78.                 key: 'userInfo',
  79.                 data: userInfo
  80.               })
  81.               wx.setStorage({
  82.                 key: 'user',
  83.                 data: e.data.data
  84.               });
  85.               this.setData({
  86.                 hasLogin: true,
  87.                 hasUserInfo:true,
  88.                 userInfo: userInfo
  89.               })
  90.             }
  91.           });
  93.         },
  94.         fail:()=>{
  95.           wx.showToast({
  96.             title: '网络错误，请刷新重试',
  97.             icon: 'none',
  98.             duration: 1200
  99.           });
  100.         }
  101.       })
  102.     }
  103.   },
  104.   sliderchange(event){
  105.     // 获取当前滑块的值
  106.     console.log(event.detail.value);
  107.     this.setData({
  108.       Brightness: parseInt(event.detail.value)
  109.     });
  110.       // 设置手机屏幕亮度0~1
  111.     wx.setScreenBrightness({
  112.       value: this.data.Brightness/100,
  113.       success(e){
  114.         console.log(e);
  115.       }
  116.     });
  117.       // 获取屏幕亮度
  118.     wx.getScreenBrightness({
  119.           success:(e)=>{
  120.             console.log("屏幕当前亮度：",e.value);
  121.           }
  122.       });
  123.   },
  124.   /**
  125.    * 生命周期函数--监听页面加载
  126.    */
  127.   onLoad: function (options) {
  128.     wx.getStorage({
  129.       key: 'user',
  130.       success:(res)=>{
  131.         console.log(res.data)
  132.         this.setData({
  133.           hasLogin: true
  134.         });
  135.         wx.request({
  136.           url: 'https://jz.easys.ltd/index.php/api/Jizhang/user_info',
  137.           data: {
  138.             uid: res.data.uid
  139.           },
  140.           method: 'POST',
  141.           success:(e)=>{
  142.             this.setData({
  143.               shouru: e.data.data.shouru,
  144.               zhichu: e.data.data.zhichu,
  145.               yusuan: e.data.data.yue,
  146.             })
  147.           }
  148.         })
  149.       }
  150.     })
  151.     wx.getStorage({
  152.       key: 'userInfo',
  153.       success:(res)=>{
  154.         console.log(res.data)
  155.         this.setData({
  156.           userInfo: res.data,
  157.           hasUserInfo: true
  158.         });
  160.       },
  161.       fail:(e)=>{
  162.         wx.getUserInfo({
  163.           lang: 'zh_CN',
  164.           success: (res)=>{
  165.             this.setData({
  166.               userInfo: res.userInfo
  167.             })
  168.           }
  169.         });
  170.       }
  171.     })
  173.     // 获取手机屏幕亮度
  174.     wx.getScreenBrightness({
  175.       success:(e)=>{
  176.         this.setData({
  177.           Brightness: Math.ceil(e.value*100)
  178.         })
  179.       }
  180.     });
  181.     // 同步调用获取电量
  182.    const BatteryInfo = wx.getBatteryInfoSync();
  183.     // 设备电量，范围 1 - 100
  184.     console.log(BatteryInfo.level);
  185.     // 是否正在充电中
  186.     console.log(BatteryInfo.isCharging);
  187.     this.setData({
  188.       level: BatteryInfo.level,
  189.       isCharging: BatteryInfo.isCharging
  190.     })
  191.   },
  193.   /**
  194.    * 生命周期函数--监听页面初次渲染完成
  195.    */
  196.   onReady: function () {
  198.   },
  200.   /**
  201.    * 生命周期函数--监听页面显示
  202.    */
  203.   onShow: function () {
  205.   },
  207.   /**
  208.    * 生命周期函数--监听页面隐藏
  209.    */
  210.   onHide: function () {
  212.   },
  214.   /**
  215.    * 生命周期函数--监听页面卸载
  216.    */
  217.   onUnload: function () {
  219.   },
  221.   /**
  222.    * 页面相关事件处理函数--监听用户下拉动作
  223.    */
  224.   onPullDownRefresh: function () {
  226.   },
  228.   /**
  229.    * 页面上拉触底事件的处理函数
  230.    */
  231.   onReachBottom: function () {
  233.   },
  235.   /**
  236.    * 用户点击右上角分享
  237.    */
  238.   onShareAppMessage: function () {
  239.     wx.showShareMenu({
  240.       withShareTicket: true,
  241.       menus: ['shareAppMessage', 'shareTimeline']
  242.     });
  244.   }
  245. })

后台数据接口

  1. <?php
  2. namespace app\api\controller;
  3. use app\api\controller\Base;
  4. use think\facade\Db;
  5. use think\facade\Request;
  7. class Jizhang extends Base{
  8.     // 获取分类列表接口
  9.     public function cat_list(){
  10.         // 查询支出分类列表，并处理图片链接
  11.         $zhichu = Db::table('oyk_cat')->where('status',1)->where('type',1)->select()->each(function($res){
  12.             $res['img'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img'];
  13.             $res['img_s'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img_s'];
  14.             return $res;
  15.         });
  16.         // 查询收入分类列表，并处理图片链接
  17.         $shouru = Db::table('oyk_cat')->where('status',1)->where('type',2)->select()->each(function($res){
  18.             $res['img'] = 'https://'.$_SERVER['SERVER_NAME']. $res['img'];
  19.             $res['img_s'] = 'https://'.$_SERVER['SERVER_NAME'] . $res['img_s'];
  20.             return $res;
  21.         });
  22.         // 返回当前时间格式化年月日数据
  23.         $date = date('Y年m月d日',time());
  24.         $array = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
  25.         $week = $array[date('w',time())];
  26.         $arr = [
  27.             'zhichu' => $zhichu,
  28.             'shouru' => $shouru,
  29.             'date' => $date,
  30.             'week'=>$week,
  31.         ];
  32.         $this->returnCode(0,$arr);
  33.     }
  34.     // 添加记账记录数据
  35.     public function add_jizhang(){
  36.         // 判断是否输入金额
  37.         $input_v = Request::post('input_v');
  38.         if(empty($input_v)){
  39.             $this->returnCode(1,'请输入数字');
  40.         }
  41.         // 接受添加记录数据
  42.         $uid = Request::post('uid');
  43.         $cid = Request::post('cid',1);
  44.         $date = Request::post('date');
  45.         $type = Request::post('type',1);
  46.         $remarks = Request::post('remarks','');
  47.         // 处理前台返回的年月日时间
  48.         $date =str_replace('年','-',$date);
  49.         $date =str_replace('月','-',$date);
  50.         $date =str_replace('日','-',$date);
  52.         // 执行添加操作
  53.         $insert = Db::table('oyk_jz')->insert([
  54.             'uid' => $uid,
  55.             'cid' => $cid,
  56.             'date' => $date,
  57.             'type' => $type,
  58.             'money' => $input_v,
  59.             'add_time' => time(),
  60.             'remarks' => $remarks,
  61.         ]);
  62.         // 返回错误信息
  63.         if(empty($insert)){
  64.             $this->returnCode(1,'记录失败');
  65.         }
  66.         $this->returnCode(0,'成功');
  67.     }
  68.     // 将时间格式化为年月日星期几形式
  69.     public function format_date(){
  70.         $date = Request::post('date');
  71.         if(empty($date)){
  72.             $this->returnCode(1,'请选择年月日');
  73.         }
  74.         // 获取当前时间为星期几
  75.         $array = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
  76.         // 将传递过来的时间转换为时间戳
  77.         $time = strtotime($date);
  78.         // 获取星期几
  79.         $week = $array[date('w',$time)];
  80.         // 年月日
  81.         // $time = explode('-'$date);
  82.         // $date = $time[0].'年'.$time[1]."月".$time[0].'日';
  83.         $date = date('Y年m月d日',$time);
  84.         $this->returnCode(0,[
  85.             'week'=>$week,
  86.             'date'=>$date
  87.         ]);
  88.     }
  90.     public function wx_login(){
  91.         $code = Request::post('code');
  92.         $appid = "wxdd3486cff1c813a6";
  93.         $appSecret = "4fb84f7fd1f8fbac1554f60de272720e";
  94.         if (!$code) {
  95.             $this->returnCode(1,'微信授权失败，请刷新重试！');
  96.         }
  98.         # 根据code获取openid
  99.         $url = "https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$appSecret}&js_code={$code}&grant_type=authorization_code";
  100.         $auth = file_get_contents($url);
  101.         $auth = json_decode($auth,true);
  102.         $openid = $auth['openid'];
  103.         if(!isset($auth['openid'])){
  104.             $this->returnCode(1,'微信授权失败，请刷新重试！');
  105.         }
  107.         $data['openid'] = $auth['openid'];
  108.         $data['nickname'] = input('post.nickName');
  109.         $data['avatar'] = input('post.avatarUrl');
  110.         $data['province'] = input('post.province');
  111.         $data['city'] = input('post.city');
  112.         $data['sex'] = input('post.gender');
  113.         $data['last_time'] = time();
  115.         //如果已经绑定账号，直接登录，返回ticket
  116.         $user = Db::table('oyk_user')->where('openid',$openid)->find();
  117.         if($user && $user['status'] !=1 ){
  118.             $this->returnCode(1,'账号已被禁用');
  119.         }
  121.         // 如果用户openid不存在，则添加
  122.         if (empty($user)) {
  123.             $data['add_time'] = time();
  124.             $ret = Db::table('oyk_user')->insertGetId($data);
  125.             $user = Db::table('oyk_user')->where('uid',$ret)->find();
  126.         }else{    
  127.             Db::table('oyk_user')->where('openid',$openid)->update($data);
  128.         }
  129.         // 返回uid和openid
  130.         $arr = [
  131.             'uid' => $user['uid'],
  132.             'openid' => $openid
  133.         ];
  134.         $this->returnCode(0,$arr);
  135.     }
  136.     public function user_info(){
  137.         $uid = Request::post('uid');
  139.         $find = Db::table('oyk_user')->where('uid',$uid)->find();
  140.         $y = date('Y',time());
  142.         $start = $y.'-01-01';
  143.         $end = $y.'-12-31';
  145.         $zhichu = Db::table('oyk_jz')->where('uid','=',$uid)->whereTime('date','between',[$start,$end])->where('type','=',1)->sum('money');
  146.         $shouru = Db::table('oyk_jz')->where('uid','=',$uid)->whereTime('date','between',[$start,$end])->where('type','=',2)->sum('money');
  148.         $m = date('m',time());
  150.         $start = $y.'-'.$m.'-01';
  151.         $d = date('d',time());
  152.         $end = $y.'-'.$m.'-'.$d;
  154.         $yue = Db::table('oyk_jz')->where('uid','=',$uid)->whereTime('date','between',[$start,$end])->where('type','=',1)->sum('money');
  156.         $arr = [
  157.             'zhichu' => $zhichu,
  158.             'shouru' => $shouru,
  159.             'yue' => $find['money']-$yue,
  160.             'find' => $find
  161.         ];
  162.         $this->returnCode(0,$arr);
  163.     }
  164. }



上一条：JS基本数据类型下一条：TP6之多数据库，路由设置与多应用模式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多