Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【记账小程序】记账系统备注与收入功能完善、用户登陆与用户账目统计功能开发
Blogger Information
Blog 128
fans 9
comment 5
visits 241318
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【记账小程序】记账系统备注与收入功能完善、用户登陆与用户账目统计功能开发
　一纸荒凉* Armani
Original
1403 people have browsed it

记账备注信息添加

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

  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. }



Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post