• 基于腾讯地图实现精准定位，实现微信小程序考勤打卡功能

    页面效果展示

    集成腾讯地图SDK

    腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

    文档地址：微信小程序JavaScript SDK

    使用步骤说明：

    1.申请开发者密钥（key）：申请密钥

    2.开通webserviceAPI服务

    控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

    (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

    3.下载微信小程序JavaScriptSDK

    微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2 ,这里推荐下载1.2版本，将下载好的SDK放在对应文件夹中，去引用它(即 qqmap-wx-jssdk.min.js 文件)引用到你小程序项目中。

    4.安全域名设置

    在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

    • 这个操作需要小程序管理员进到后台去配置
    • 本地环境开发只需设置 勾上 不校验合法域名 即可

    5.小程序核心代码示例

    1. // 引入SDK核心类，js文件根据自己业务，位置可自行放置
    2. var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
    3. var qqmapsdk;
    4. Page({
    5.  
    6.     onLoad: function () {
    7.         // 实例化API核心类
    8.         qqmapsdk = new QQMapWX({
    9.             key: '申请的key'
    10.         });
    11.     },
    12.     onShow: function () {
    13.         // 调用接口
    14.         qqmapsdk.search({
    15.             keyword: 'DreamCoders',
    16.             success: function (res) {
    17.                 console.log(res);
    18.             },
    19.             fail: function (res) {
    20.                 console.log(res);
    21.             },
    22.         complete: function (res) {
    23.             console.log(res);
    24.         }
    25.      });
    26.   }
    27. })

    微信小程序代码

    wx.getLocation(Object object)

    以 Promise 风格 调用：支持

    用户授权：需要 scope.userLocation

    小程序插件：支持，需要小程序基础库版本不低于 1.9.6

    微信 Windows 版：支持

    微信 Mac 版：支持

    功能描述

    获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。 高频率调用会导致耗电，如有需要可使用持续定位接口 wx.onLocationChange。 基础库 2.17.0 版本起 wx.getLocation 增加调用频率限制，相关公告。

    使用方法

    自 2022 年 7 月 14 日后发布的小程序，若使用该接口，需要在 app.json 中进行声明，否则将无法正常使用该接口，2022年7月14日前发布的小程序不受影响。具体规则见公告

    申请开通

    暂只针对如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通该接口权限。 接口权限申请入口将于2022年3月11日开始内测，于3月31日全量上线。并从4月18日开始，在代码审核环节将检测该接口是否已完成开通，如未开通，将在代码提审环节进行拦截。

    微信小程序获取定位关键方法 getLocation。因此需要在 app.json 中进行声明，后期小程序上线还需要单独申请getLocation 接口权限。

    app.json 部分关键代码

    1. {
    2.   "pages": [
    3.     "pages/index/index",
    4.     "pages/sign/sign"
    5.   ],
    6.   "window": {
    7.     "backgroundTextStyle": "light",
    8.     "navigationBarBackgroundColor": "#fff",
    9.     "navigationBarTitleText": "Weixin",
    10.     "navigationBarTextStyle": "black"
    11.   },
    12.   "tabBar": {
    13. 		"custom": false,
    14. 		"backgroundColor": "#fefefe",
    15. 		"color": "#999999",
    16. 		"selectedColor": "#1C9D9D",
    17. 		"list": [{
    18. 				"pagePath": "pages/index/index",
    19. 				"text": "首页",
    20. 				"iconPath": "/images/home.png",
    21. 				"selectedIconPath": "/images/home_cur.png"
    22. 			},
    23. 			{
    24. 				"pagePath": "pages/sign/sign",
    25. 				"text": "打卡",
    26. 				"iconPath": "/images/day.png",
    27. 				"selectedIconPath": "/images/day_cur.png"
    28. 			},
    29. 		
    30. 			{
    31.         "pagePath": "pages/index/index",
    32. 				"text": "我的",
    33. 				"iconPath": "/images/my.png",
    34. 				"selectedIconPath": "/images/my_cur.png"
    35. 			}
    36. 		]
    37. 	},
    38.   "permission": {
    39. 		"scope.userLocation": {
    40. 			"desc": "您的位置信息将用于小程序考勤签到功能"
    41. 		}
    42. 	},
    43. 	"requiredPrivateInfos":[
    44. 		"getLocation"
    45. 	],
    46.   "style": "v2",
    47.   "sitemapLocation": "sitemap.json",
    48.   "lazyCodeLoading": "requiredComponents"
    49. }

    sign.wxml代码

     部分UI代码参考苏苏就是小苏苏

    2. <view class="index">
    3.   
    4.   <view class="head ">
    5.     <view class="head_box flex-row" style="justify-content:left">
    6.       <view class="user_ava">
    7.         <open-data type="userAvatarUrl">open-data>
    8.       view>
    9.       <view>
    10.         <view class="user_name">DreamCoders <text>{{tip}}text>view>
    11.         <view class="user_add">新的一天开始了，加油哦~view>
    12.       view>
    13.       <view class="mealBtn" bindtap="ToMealTap">
    14.         <image src="/images/meal.png">image>
    15.         <view class="mealText">{{is_meal==2 ? '已订':'订餐'}}view>
    16.       view>
    17.     view>
    18.   view>
    19.  
    20.   <view class="contentBox">
    21.     
    22.     <view class="signRecord">
    23.       <view class="signInfo">上班打卡
    24.         <text class="text-green">{{record[0].times ? record[0].times : '未打卡'}}text>
    25.         <view class="sign_address">
    26.           <view class="">{{record[0].address ? record[0].address : '暂无打卡地址'}}view>
    27.         view>
    28.       view>
    29.       <view class="signInfo">下班打卡
    30.         <text class="text-green">{{record[1].times ? record[1].times : '未打卡'}}text>
    31.         <view class="sign_address">
    32.           <view class="">{{record[1].address ? record[1].address : '暂无打卡地址'}}view>
    33.         view>
    34.       view>
    35.     view>
    36.     <view class="dateInfo ">
    37.       <text>{{nowDate}} {{nowDay}}text>
    38.     view>
    39.     
    40.     <view class="c_clock flex-column">
    41.       <view class="clock_time flex-column j_c {{status==1?'c1':''}} {{is_out==2 ? 'outArea' : ''}}" catchtap="signTap">
    42.         <text>{{signType>0 ? "下班打卡" : "上班打卡"}}text>
    43.         <text>{{now_time}}text>
    44.       view>
    45.       <view class="clock_time_over flex-column j_c  {{status==1?'c2':''}}" catchtap="clockInStart">
    46.         <text>已打卡text>
    47.         <text>{{now_time_stop}}text>
    48.       view>
    49.     view>
    50.     
    51.     <view class="clock_address ">
    52.       <image src="/images/add0.png" class="add_icon" />
    53.       <text>{{current_address}}text>
    54.     view>
    55.     <view class="refresh" catchtap="refreshAdd">刷新位置view>
    56.   view>
    57. view>

    sign.js代码

    具体业务逻辑根据实际情况改写

    1. let qqMapSdk= require("../../utils/qqmap.js");
    2. let util = require('../../utils/util.js')
    3.  
    4. Page({
    5.   /**
    6.    * 页面的初始数据
    7.    */
    8.   data: {
    9.     signType:0,//0上班打卡 1下班打卡
    10.     is_out:2,//1办公地点打卡 2外勤打卡
    11.     is_meal:1,//1未定餐 2已订餐
    12.     now_time: '',//当前时间
    13.     nowDate:'',//当前年月日
    14.     nowDay:'',//星期几
    15.     tip:'',//提示 上午好、下午好
    16.     current_address: '',//当前定位地址
    17.     status: 0, //0未打卡 1已打卡
    18.     latlng:[],//经纬度
    19.     now_time_stop: '', //已打卡时间
    20.     area:{},//考勤点多个
    21.     record:[],//打卡记录
    22.   },
    23.  
    24.  
    25.   onLoad: function (options) {
    26.     this.getCurrentTime();
    27.     this.setData({
    28.       now_time: this.getTime(),
    29.       nowDate: util.formatTime(new Date()),
    30.       nowDay: util.formatDay(new Date()),
    31.       tip: util.formatSole(),
    32.     })
    33.   },
    34.  
    35.   onShow: function () {
    36.     this.getLocation();
    37.     this.setData({
    38.       status:0,
    39.       current_address:'',
    40.     })
    41.   },
    42.  
    43.  
    44.   signTap() {
    45.     var that = this;
    46.     if (!that.data.current_address) {
    47.       return wx.showToast({
    48.         title: '未获取当前定位',
    49.         icon: 'error'
    50.       })
    51.     }
    52.     var list =  that.data.record.concat({'times':that.data.now_time,'address':that.data.current_address});
    53.     wx.vibrateLong();//手机震动提示
    54.     that.getSignRecord();
    55.     that.setData({
    56.       status: 1, //已打卡
    57.       record:list,
    58.       now_time_stop: that.data.now_time,
    59.     })
    60.     console.log(list);
    61.     console.log(that.data.record);
    62.     wx.showToast({
    63.       title: '打卡成功',
    64.       icon: 'none'
    65.     })
    66.   },
    67.  
    68.   getCurrentTime: function () {
    69.     var time = setInterval(() => {
    70.       this.setData({
    71.         now_time: this.getTime()
    72.       })
    73.     }, 1000)
    74.   },
    75.   getTime() {
    76.     let dateTime = '';
    77.     let hh = new Date().getHours()
    78.     let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() :
    79.       new Date().getMinutes()
    80.     let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() :
    81.       new Date().getSeconds()
    82.     dateTime = hh + ':' + mf + ':' + ss;
    83.     return dateTime;
    84.   },
    85.  
    86.   // 请求获取定位授权
    87.   getUserAuth: function () {
    88.     return new Promise((resolve, reject) => {
    89.       wx.authorize({
    90.         scope: 'scope.userLocation'
    91.       }).then(() => {
    92.         resolve()
    93.       }).catch(() => {
    94.         let that = this;
    95.         wx.getSetting({
    96.           success: (res) => {
    97.             if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
    98.               wx.showModal({
    99.                 title: '请求授权当前位置',
    100.                 content: '需要获取您的地理位置，请确认授权',
    101.                 success: function (res) {
    102.                   if (res.cancel) {
    103.                     wx.showToast({
    104.                       title: '拒绝授权',
    105.                       icon: 'none',
    106.                       duration: 1000
    107.                     })
    108.                   } else if (res.confirm) {
    109.                     wx.openSetting({
    110.                       success: function (dataAu) {
    111.                         if (dataAu.authSetting["scope.userLocation"] == true) {
    112.                           //再次授权，调用wx.getLocation的API
    113.                           that.getLocation();
    114.                         } else {
    115.                           wx.showToast({
    116.                             title: '授权失败',
    117.                             icon: 'none',
    118.                             duration: 1000
    119.                           })
    120.                         }
    121.                       }
    122.                     })
    123.                   }
    124.                 }
    125.               })
    126.             } else if (res.authSetting['scope.userLocation'] == undefined) {
    127.               that.getLocation();
    128.             } else {
    129.               that.getLocation();
    130.             }
    131.           }
    132.         })
    133.       })
    134.     })
    135.   },
    136.  
    137.   getLocation: function () {
    138.     const that = this
    139. 		// 实例化腾讯地图API核心类
    140.     const QQMapWX = new qqMapSdk({
    141.       key: '你申请的KEY'// KEY必填
    142.     });
    143.     //获取当前位置
    144.     wx.getLocation({
    145.       type: 'gcj02',
    146.       success: function(res) {
    147.         that.latitude = res.latitude
    148.         that.longitude = res.longitude
    149.         QQMapWX.reverseGeocoder({
    150.           location: {
    151.             latitude: res.latitude,
    152.             longitude: res.longitude
    153.           },
    154.           success: function(res) {
    155.             let address = res.result.address + res.result.formatted_addresses.recommend;
    156.             that.getSignRecord();
    157.             that.setData({
    158.               current_address:address,
    159.               latlng:[res.result.location.lat,res.result.location.lng]
    160.             })
    161.           },
    162.           fail: function(res) {
    163.             this.getUserAuth()
    164.             wx.showToast({
    165.               title: '获取定位失败，请打开手机定位，重新进入！',
    166.               icon: 'none'
    167.             });
    168.           }
    169.         })
    170.       },
    171.     })
    172.   },
    173.   // 刷新定位
    174.   refreshAdd() {
    175.     this.getLocation(),
    176.     this.getSignRecord()
    177.   },
    178.  
    179.   //处理打卡记录及判断打卡位置是否办公地点打卡
    180.   getSignRecord: function () {
    181.     var that = this;
    182.     console.log(that.data.latlng);
    183.     var distance = that.getDistance(that.data.latlng[0],that.data.latlng[1],31.370450,121.228252);
    184.     if(distance < 200000000000000){
    185.       that.setData({
    186.         is_out:1,
    187.       })
    188.     }
    189.   },
    190.  
    191.  
    192. //经纬度距离计算
    193. getDistance:function (lat1, lng1, lat2, lng2, unit = false) {
    194.     var radLat1 = lat1 * Math.PI / 180.0
    195.     var radLat2 = lat2 * Math.PI / 180.0
    196.     var a = radLat1 - radLat2
    197.     var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
    198.     var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    199.       Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
    200.     s = s * 6378.137 // EARTH_RADIUS;
    201.     s = Math.round(s * 10000) / 10000 //输出为公里
    202.     if (0) { //是否返回带单位
    203.       if (s < 1) { //如果距离小于1km返回m
    204.         s = s.toFixed(3)
    205.         s = s * 1000 + "m"
    206.       } else {
    207.         s = s.toFixed(2)
    208.         s = s + "km"
    209.       }
    210.     } else {
    211.       s = s.toFixed(3)
    212.       s = s * 1000
    213.     }
    214. 	return s
    215. },
    216.  
    217. //订餐操作
    218. ToMealTap:function (e) {
    219.   wx.showToast({
    220.     title: '订餐成功',
    221.     icon: 'none'
    222.   })
    223.   this.setData({
    224.     is_meal: 2,
    225.   })
    226. }
    227.  
    228. })

    sign.json 代码

    1. {
    2.   "usingComponents": {},
    3.   "navigationBarTitleText": "考勤打卡"
    4. }

    sign.wxss 代码

    1.  
    2. page {
    3.   height: calc(100% - 10px)
    4. }
    5.  
    6. .index {
    7.   margin-top: 10px;
    8.   background: #fff;
    9.   min-height: 100%;
    10. }
    11.  
    12. .head {
    13.   padding-bottom: 10rpx;
    14.   border-bottom: 2rpx solid #E5E5E5;
    15. }
    16.  
    17. .head_box {
    18.   padding: 26rpx 28rpx 8px;
    19.   width: 750rpx;
    20.   box-sizing: border-box;
    21. }
    22.  
    23. .user_ava {
    24.   width: 116rpx;
    25.   height: 116rpx;
    26.   overflow: hidden;
    27.   border-radius: 25%;
    28.   margin-right: 32rpx;
    29. }
    30.  
    31. .user_name {
    32.   font-size: 32rpx;
    33.   font-weight: 600;
    34.   color: #333333;
    35.   margin-bottom: 18rpx;
    36. }
    37.  
    38. .user_name text {
    39.   font-size: 24rpx;
    40.   color: #999999;
    41.   font-weight: 400;
    42.   margin-left: 40rpx;
    43. }
    44.  
    45. .user_add {
    46.   font-size: 28rpx;
    47.   color: #3380F3;
    48. }
    49.  
    50. .contentBox {
    51.   padding: 44rpx 28rpx;
    52. }
    53.  
    54. .signRecord{
    55.   display: flex;
    56.   flex-flow: row nowrap;
    57.   justify-content: space-between;
    58.   margin-top: 15px;
    59. }
    60.  
    61. .dateInfo{
    62.   text-align: center;
    63.   position: relative;
    64.   top: 50px;
    65.   font-size: 35rpx;
    66. }
    67.  
    68. .c_title {
    69.   font-size: 28rpx;
    70.   color: #666666;
    71.   margin-bottom: 26rpx;
    72. }
    73.  
    74.  
    75. .c_section .c_item {
    76.   position: relative;
    77.   font-size: 30rpx;
    78.   font-weight: 600;
    79.   color: #333333;
    80.   padding-left: 40rpx;
    81.   margin-bottom: 110rpx;
    82. }
    83.  
    84. .c_section text {
    85.   color: #307CED;
    86.   text-overflow: ellipsis;
    87.   overflow: hidden;
    88.   width: 80%;
    89.   white-space: nowrap;
    90. }
    91.  
    92. .c_section .c_item::before {
    93.   content: '';
    94.   position: absolute;
    95.   width: 18rpx;
    96.   height: 18rpx;
    97.   border: 2rpx solid #999999;
    98.   left: 0;
    99.   top: 50%;
    100.   margin-top: -9rpx;
    101.   border-radius: 50%;
    102. }
    103.  
    104. .c_section {
    105.   position: relative;
    106. }
    107.  
    108. .c_section .c_item::after {
    109.   content: '';
    110.   position: absolute;
    111.   width: 2rpx;
    112.   height: 178rpx;
    113.   background: #E6E6E6;
    114.   left: 10rpx;
    115.   top: 34rpx;
    116. }
    117.  
    118. .c_section view:last-child::after {
    119.   display: none;
    120. }
    121.  
    122. .start_lo {
    123.   position: absolute;
    124.   top: 30px;
    125.   left: -5px;
    126. }
    127.  
    128. .start_end {
    129.   position: absolute;
    130.   bottom: -108px;
    131.   left: 20px;
    132. }
    133.  
    134. .c_clock {
    135.   margin: 180rpx auto 0;
    136.   width: 350rpx;
    137.   height: 380rpx;
    138.   perspective: 1500;
    139.   -webkit-perspective: 1500;
    140.   -moz-perspective: 1500;
    141. }
    142.  
    143. .clock_time {
    144.   width: 350rpx;
    145.   height: 350rpx;
    146.   margin-bottom: 30rpx;
    147.   position: absolute;
    148.   transition: all 1s;
    149.   backface-visibility: hidden;
    150. }
    151.  
    152. .clock_time::after {
    153.   content: '';
    154.   top: 0;
    155.   left: 0;
    156.   width: 350rpx;
    157.   height: 350rpx;
    158.   border-radius: 50%;
    159.   position: absolute;
    160.   z-index: 9;
    161.   background: rgba(48, 124, 237, 0.08);
    162.   animation: scale 1s infinite alternate-reverse;
    163. }
    164.  
    165. /* 已打卡 */
    166. .clock_time_over {
    167.   width: 350rpx;
    168.   height: 350rpx;
    169.   margin-bottom: 30rpx;
    170.   border-radius: 50%;
    171.   background: rgba(48, 124, 237, 0.08);
    172.   position: absolute;
    173.   transition: all 1s;
    174.   backface-visibility: hidden;
    175.   transform: rotateY(-180deg);
    176. }
    177.  
    178. .clock_time_over::after {
    179.   position: absolute;
    180.   z-index: 11;
    181.   content: '';
    182.   width: 320rpx;
    183.   height: 320rpx;
    184.   background: #C6CED9;
    185.   border-radius: 50%;
    186.   top: 50%;
    187.   left: 50%;
    188.   transform: translate(-50%, -50%);
    189. }
    190.  
    191.  
    192.  
    193. .clock_time_over text {
    194.   position: relative;
    195.   z-index: 13;
    196.   color: #FFFFFF;
    197. }
    198.  
    199. .clock_time_over text:first-child {
    200.   font-size: 36rpx;
    201.   margin-bottom: 14rpx;
    202. }
    203.  
    204. .clock_time_over text:last-child {
    205.   font-size: 28rpx;
    206. }
    207.  
    208. @keyframes scale {
    209.  
    210.   0% {
    211.     transform: scale(1.1);
    212.   }
    213.  
    214.   100% {
    215.     transform: scale(1);
    216.   }
    217. }
    218.  
    219. .clock_time::before {
    220.   position: absolute;
    221.   z-index: 11;
    222.   content: '';
    223.   width: 320rpx;
    224.   height: 320rpx;
    225.   background: rgb(48, 124, 237, 0.79);
    226.   border-radius: 50%;
    227.   top: 50%;
    228.   left: 50%;
    229.   transform: translate(-50%, -50%);
    230. }
    231.  
    232. .clock_time text {
    233.   position: relative;
    234.   z-index: 13;
    235.   color: #FFFFFF;
    236. }
    237.  
    238. .clock_time text:first-child {
    239.   font-size: 36rpx;
    240.   margin-bottom: 14rpx;
    241. }
    242.  
    243. .clock_time text:last-child {
    244.   font-size: 45rpx;
    245. }
    246.  
    247. .clock_address {
    248.   text-align: center;
    249.   font-size: 30rpx;
    250.   color: #333333;
    251.   width: 80%;
    252.   margin: 20px auto;
    253.   overflow:hidden;  
    254.   text-overflow:ellipsis;
    255.   white-space:nowrap;
    256. }
    257.  
    258. .clock_address text {
    259.   vertical-align: middle;
    260. }
    261.  
    262. .add_icon {
    263.   width: 28rpx;
    264.   height: 36rpx;
    265.   margin-right: 16rpx;
    266.   vertical-align: middle;
    267. }
    268.  
    269. .refresh {
    270.   margin-top: 25px;
    271.   color: #307CED;
    272.   display: flex;
    273.   align-items: center;
    274.   justify-content: center;
    275. }
    276.  
    277.  
    278.  
    279. .now_location {
    280.   font-size: 24rpx;
    281.   color: #333333 !important;
    282. }
    283.  
    284. .upload_box {
    285.   width: 260rpx;
    286.   height: 180rpx;
    287.   background: #F5F5F8;
    288.   border-radius: 5rpx;
    289. }
    290.  
    291. .upload_box text {
    292.   font-size: 20rpx;
    293.   color: #999 !important;
    294.   font-weight: 100;
    295. }
    296.  
    297. .camera_icon {
    298.   width: 42rpx;
    299.   height: 44rpx;
    300.   margin-bottom: 10rpx;
    301. }
    302.  
    303. .clock_img {
    304.   width: 100%;
    305.   height: 100%;
    306. }
    307.  
    308. .del_icon {
    309.   width: 32rpx;
    310.   height: 32rpx;
    311.   position: absolute;
    312.   right: -4px;
    313.   top: -11rpx;
    314. }
    315.  
    316. .ative::before {
    317.   background: #307cedc9;
    318.   border: 2rpx solid #307cedc9 !important;
    319. }
    320.  
    321. .c1 {
    322.   transform: rotateY(180deg)
    323. }
    324.  
    325. .c1::after {
    326.   animation: none !important;
    327. }
    328.  
    329. .c2 {
    330.   transform: rotateY(0deg)
    331. }
    332.  
    333. .mealBtn{
    334.   position: absolute;
    335.   right: 15px;
    336. }
    337. .mealBtn image{
    338.   width: 27px;
    339.   height: 27px;
    340. }
    341. .mealText{
    342.  font-size: 12px;
    343.  color: #999999;
    344. }
    345.  
    346. .outArea::before{
    347.   background: #f44336 !important;
    348. }
    349. .signInfo{
    350.   width: 48%;
    351.   height: 65px;
    352.   background: #f1f1f1;
    353.   padding: 10px;
    354.   border-radius: 5px;
    355. }
    356. .signInfo text{
    357.   float: inline-end;
    358. }
    359. .sign_address{
    360.   display: flex;
    361.   margin-top: 5px;
    362. }
    363.  
    364.  
    365. .sign_address view{
    366.   white-space: nowrap;
    367.   text-overflow: ellipsis;
    368.   overflow: hidden;
    369.   font-size: 14px;
    370.   margin-top: 1px !important;
    371.   color: #5f5a5a;
    372. }
    373.  
    374. .text-green{
    375.   color: green;
    376. }

    util.js 代码

    1. function formatTime(date) {
    2.   var year = date.getFullYear()
    3.   var month = date.getMonth() + 1
    4.   var day = date.getDate()
    5.   return year + "年" + month + "月" + day + "日";
    6. }
    7. const formatDay = dates => {
    8.   let _day = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
    9.   let date = new Date(dates);
    10.   date.setDate(date.getDate());
    11.   let day = date.getDay();
    12.   return _day[day];
    13. }
    14. const formatSole = () => {
    15.   let timeNow = new Date();
    16.   let hours = timeNow.getHours();
    17.   let text = ``;
    18.   if (hours >= 0 && hours <= 6) {
    19.     text = `深夜了,不要熬夜太久哟`;
    20.   } else if (hours > 6 && hours <= 8) {
    21.     text = `早上好`;
    22.   } else if (hours > 8 && hours <= 10) {
    23.     text = `上午好`;
    24.   } else if (hours > 10 && hours <= 13) {
    25.     text = `中午好`;
    26.   } else if (hours > 13 && hours <= 17) {
    27.     text = `下午好`;
    28.   } else if (hours > 17 && hours <= 23) {
    29.     text = `晚上好`;
    30.   }
    31.   return text;
    32. }
    33. module.exports = {
    34.   formatTime: formatTime,
    35.   formatDay: formatDay,
    36.   formatSole: formatSole
    37. }

    源码地址：

    https://gitee.com/iGaoWei/miniWxDemo

  • 相关阅读:
    唐山海德教育二级建造师报考-----考试科目
    HBuilderX在IOS上进行真机调试步骤
    线束测试仪怎么使用的，ATX-3000线束检测仪基本操作流程
    C++ 运算符
    SQL语言概述与SQL语言的数据定义
    Vue 计算属性
    ChatGPT专业术语及有效使用方法概述
    本科生学深度学习-Attention机制
    appliedzkp zkevm（8）中的Plookup Table
    只会建数据库怎么写API？database2api 能帮到你！
  • 原文地址：https://blog.csdn.net/qq_31766533/article/details/125968189