【项目介绍】

# 智慧社区-小程序
    -欢迎页面
    -首页
        -轮播图
        -公告
        -信息采集，社区活动，人脸检测，语音识别，心率检测，积分商城
   -信息采集页面
        -采集人数
   -采集详情页面
   -采集统计页面
   -人脸检测页面
   -语音识别页面
   -积分商城页面
   -活动
        -活动列表
        -报名活动
        -加载更多
   -公告
        -公告列表
   -我的
        -信息展示
   -登录
 

【项目创建】

【欢迎页面】

　　# 1 欢迎页面
　　-onLoad---》向后端发送请求
　　-拿回图片，盖住整个屏幕
　　-倒计时3s（跳过）--》进入到首页

前期准备:

 tabBar配置

app.json里部分配置修改

 安装vant app

 编译以后的样式

 welcome

 1 wxml
 2 
 3 <!--pages/welcome/welcome.wxml-->
 4 <view class="container">
 5     <text bindtap="doJump" class="jump">跳过{{seconds}}秒</text>
 6     <image class="img" src="{{img}}" bind:tap="goPage"/>
 7 </view>
 8 
 9 
10 -------------------------------------------------------------------------------------------
11 js
12 
13 import api from '../../static/js/api.js'
14 Page({
15 
16   data: {
17     seconds:3,
18     img:'/static/img/bg/splash2.png',
19     url:'/pages/log/log'
20   },
21   onl oad(options) {
22 
23     // 发送请求，获取欢迎页
24     wx.request({
25       url: api.welcome,
26       method:'GET',
27       success:(res)=>{
28         this.setData({
29           img:res.data[0].img,
30           url:res.data[0].url
31         })
32       }
33     })
34 
35 
36     
37     let t=setInterval(()=>{
38       if(this.data.seconds <= 0){
39         //定时器清除
40         clearInterval(t)
41         //跳转到项目页面 + 配置tabBar
42         wx.switchTab({
43           url: '/pages/index/index',
44         })
45       }else{
46         this.setData({
47           seconds:this.data.seconds - 1
48         })
49       }
50     },1000)
51   },
52   goPage(){
53     wx.navigateTo({
54       url: '/pages/second/heart/heart',
55     })
56   },
57   doJump(){
58     wx.switchTab({
59       url: '/pages/index/index',
60     })
61   }
62   
63 })
64 
65 -------------------------------------------------------------------------------
66 wxss
67 
68 /* pages/welcome/welcome.wxss */
69 page{
70     height: 100%;
71 }
72 
73 .container {
74   height: 100%;
75   width: 100%;
76 } 
77 
78 .container .img{
79   height: 100%;
80   width: 100%;
81 }
82 
83 .jump{
84   font-size: 30rpx;
85   position: absolute;
86   left: 600rpx;
87   top: 80rpx;
88   background-color: #dddddd;
89   padding: 10rpx 20rpx;
90   border-radius: 20rpx;
91 }

首页index

  1 wxml
  2 
  3 <!--index.wxml-->
  4 <view class="container">
  5 
  6 <!-- 轮播图 -->
  7 <view class="banner">
  8   <swiper autoplay indicator-dots circular indicator-color='#FFFFF' interval='3000'>
  9     <swiper-item>
 10       <image src="/static/img/banner/banner1.png" mode="widthFix" />
 11     </swiper-item>
 12     <swiper-item>
 13       <image src="/static/img/banner/banner2.png" mode="widthFix" />
 14     </swiper-item>
 15     <swiper-item>
 16       <image src="/static/img/banner/banner3.png" mode="widthFix" />
 17     </swiper-item>
 18   </swiper>
 19 </view>
 20 
 21 <van-notice-bar left-icon="volume-o" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
 22 
 23 <van-grid column-num="3">
 24   <van-grid-item icon="/static/img/menu/ht.png" text="信息采集" bind:click="gotoCollection" />
 25   <van-grid-item icon="/static/img/menu/wyf.png" text="社区活动" bind:click="gotoActivity" />
 26   <van-grid-item icon="/static/img/menu/wygl.png" text="人脸检测" bind:click="gotoFace" />
 27   <!-- 可以根据需要添加更多的快捷入口 -->
 28   <van-grid-item icon="/static/img/menu/wylx.png" text="语音识别" bind:click="gotoVoice" />
 29   <van-grid-item icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" text="心率检测" bind:click="gotoHeart" />
 30   <van-grid-item icon="/static/img/menu/ht.png" text="积分商城" bind:click="gotoGoods" />
 31 </van-grid>
 32 
 33 <view class="bottom">
 34   <view>
 35     <image src="/static/img/home/cute_1.jpg" mode="scaleToFill" />
 36   </view>
 37   <view>
 38     <image src="/static/img/home/cute_2.jpg" mode="scaleToFill" />
 39   </view>
 40   <view>
 41     <image src="/static/img/home/cute_3.jpg" mode="scaleToFill" />
 42   </view>
 43   <view>
 44     <image src="/static/img/home/cute_4.jpg" mode="scaleToFill" />
 45   </view>
 46 
 47 </view>
 48 
 49 </view>
 50 
 51 
 52 =================================================
 53 js
 54 
 55 // index.js
 56 Page({
 57 
 58 
 59   gotoCollection(){
 60     wx.navigateTo({
 61       url: '/pages/second/collection/collection'
 62     })
 63   },
 64   gotoFace(){
 65     wx.navigateTo({
 66       url: '/pages/second/face/face'
 67     })
 68   },
 69   gotoVoice(){
 70     wx.navigateTo({
 71       url: '/pages/second/voice/voice'
 72     })
 73   },
 74 
 75   gotoActivity(){
 76     wx.switchTab({
 77       url: '/pages/activity/activity',
 78     })
 79   },
 80 gotoHeart(){
 81   wx.navigateTo({
 82     url: '/pages/second/heart/heart',
 83   })
 84 },
 85 gotoGoods(){
 86   wx.navigateTo({
 87     url: '/pages/second/goods/goods',
 88   })
 89 },
 90 
 91 })
 92 
 93 
 94 ================================================
 95 wxss
 96 
 97 /**index.wxss**/
 98 .banner image{
 99   width: 100%; /* 图片宽度拉伸至容器宽度 */
100   height: 100%; /* 图片高度拉伸至容器高度 */
101   object-fit: cover; /* 图片将覆盖整个容器区域，可能被裁剪 */
102 }
103 
104 .bottom{
105   display: flex;
106   justify-content: space-evenly;
107   margin-top: 20rpx;
108   flex-wrap: wrap;
109 }
110 
111 .bottom>view>image{
112   width: 345rpx;
113   height: 200rpx;
114 }

信息采集collection

采用了阿里矢量图标库，加入购物车的用法

 然后在

  1 wxml
  2 
  3 <!--pages/second/collection/collection.wxml-->
  4 <!-- 信息采集页 -->
  5 <view class="container">
  6   <view class="top">
  7     <view class="tip">今日采集数量(人)</view>
  8     <view class="count">{{dataDict.today_count}}</view>
  9   </view>
 10   <view class="function">
 11     <view class="menu" style="border-right:1rpx solid #ddd;" bindtap="bindToForm"> 
 12       <text class="iconfont icon-xinxicaiji"></text> 信息采集
 13     </view>
 14     <view class="menu" bindtap="bindToStatistics">  
 15       <text class="iconfont icon-shujutongji" ></text> 数据统计
 16     </view>
 17   </view>
 18   <view class="table">
 19     <view class="item">
 20       <view class="title">社区信息列表（{{dataDict.today_count}}人）</view>
 21     </view>
 22     <view class="item" wx:for="{{dataDict.result}}" wx:for-item="row" wx:key="index">
 23       <view class="record">
 24         <view class="avatar">
 25           <image src="{{row.avatar}}"></image>
 26         </view>
 27         <view class="desc">
 28           <view class="username">{{row.name}}</view>    
 29           <view>
 30             <view class="txt-group">
 31               <label class="zh">网格区域</label>
 32               <label class="en"> | {{row.area.desc}}</label>
 33             </view>
 34             <view class="area"> 
 35               <label class="fa fa-map-marker"></label> {{row.area.name}} 
 36             </view>
 37           </view>
 38         </view>
 39         <view class="delete" bindtap="doDeleteRow" data-nid="{{row.id}}" data-index="{{index}}" >
 40           <label class="iconfont icon-shanchu"></label>
 41         </view>
 42       </view>
 43     </view>
 44   </view>
 45 </view>
 46 
 47 --------------------------------------------------------------------------------
 48 js
 49 
 50 Page({
 51   bindToForm(){
 52     wx.navigateTo({
 53       url: '/pages/second/camera/camera',
 54     })
 55   }
 56 })
 57 
 58 -------------------------------------------------------------------------------------
 59 
 60 wxss
 61 
 62 /* pages/second/collection/collection.wxss */
 63 .top{
 64   background-color: #01ccb6;
 65   height: 200rpx;
 66   display: flex;
 67   flex-direction: column;
 68   align-items: center;
 69   color:white;
 70 }
 71 
 72 .top .tip{
 73   font-size: 22rpx;
 74   font-weight: 100;
 75 }
 76 
 77 .top .count{
 78   padding: 10rpx;
 79   font-size: 58rpx;
 80 }
 81 
 82 .function{
 83   display: flex;
 84   flex-direction: row;
 85   justify-content: space-around;
 86   background-color: #02bfae;
 87 }
 88 
 89 .function .menu{
 90   font-size: 28rpx;
 91   margin: 25rpx 0;
 92   color: white;
 93   width: 50%;
 94   text-align: center;
 95   flex-direction: row;
 96   flex-direction: column;
 97   align-items: center;
 98 }
 99 
100 .table .item{
101   border-bottom: 1rpx solid #e7e7e7;
102 }
103 
104 .table .item .title{
105   margin: 20rpx 30rpx;
106   padding-left: 10rpx;
107   border-left: 5rpx solid #02bfae;
108   font-size: 26rpx;
109 }
110 
111 .record{
112   margin: 30rpx 40rpx;
113   display: flex;
114   flex-direction: row;
115   justify-content: flex-start;
116 }
117 
118 .record .avatar{
119   width: 200rpx;
120   height: 200rpx;
121 }
122 
123 .record .avatar image{
124   width: 100%;
125   height: 100%;
126   border-radius: 30rpx;
127 }
128 
129 .record .desc{
130   margin: 0 40rpx;
131 }
132 
133 .desc{
134   width: 290rpx;
135   display: flex;
136   flex-direction: column;
137   justify-content: space-between;
138 }
139 
140 .desc .username{
141   margin-top:25rpx ;
142   font-size: 38rpx;
143 }
144 
145 .txt-group{
146   font-size: 27rpx;
147   margin:10rpx 0;
148 }
149 
150 .txt-group .zh{
151   color: #8c8c8c;
152 }
153 
154 .txt-group .en{
155   color: #cccccc;
156 }
157 
158 .area{
159   color: #00c8b6;
160   font-weight: bold;
161 }
162 
163 .delete{
164   width: 100rpx;
165   color: red;
166   text-align: center;
167   display: flex;
168   flex-direction: column;
169   justify-content: center;
170 }
171 
172 
173 ------------------------------------------------------------------------------------
174 wxjson
175 
176 {
177   "usingComponents": {},
178   "navigationBarBackgroundColor": "#01ccb6",
179   "navigationBarTitleText": "",
180   "enablePullDownRefresh": true,
181   "navigationBarTextStyle":"white",
182   "backgroundColor":"#01ccb6"
183 }

信息采集详情camera

 1 wxml
 2 
 3 <!--pages/second/camera/camera.wxml-->
 4 <!-- 拍照页面 -->
 5 <camera class="camera"  device-position="{{ backFront ? 'back' : 'front' }}"  flash="off" frame-size="medium" ></camera>
 6 
 7 <view class="function">
 8   <view class="switch"> </view>
 9   <view class="record" bindtap="takePhoto">
10     <image src="/static/img/camera/record_on.png"></image>
11   </view>
12   <view class="switch" bindtap="switchCamera">
13     <image src="/static/img/camera/rotate-camera-white.png"></image>
14   </view>
15  </view>
16 
17 
18 -------------------------------------------------------------------------
19 js
20 
21 // pages/second/camera/camera.js
22 Page({
23   data: {
24     backFront:true
25 
26   },
27 
28   switchCamera(e) {
29     var old = this.data.backFront
30     this.setData({
31       backFront: !old
32     })
33   },
34 })
35 
36 ---------------------------------------------------------------------------------
37 wxss
38 
39 page{
40     height: 100%;
41 }
42 .camera{
43   height: 80%;
44   width: 100%;
45 }
46 
47 
48 .function{
49   height: 20%;
50   background-color: black;
51   
52   display: flex;
53   flex-direction: row;
54   justify-content: space-around;
55   align-items: center;
56 }
57 .record image{
58   width: 160rpx;
59   height: 160rpx;
60 }
61 
62 .switch{
63   color: white;
64   width: 80rpx;
65   height: 80rpx;
66 }
67 .switch image{
68   width: 80rpx;
69   height: 80rpx;
70 }

人脸识别

# 1 注册百度人脸识别接口
https://cloud.baidu.com/product/face.html
# 2 免费领取额度：https://console.bce.baidu.com/ai/#/ai/face/overview/index

# 3 创建应用：https://console.bce.baidu.com/ai/#/ai/face/app/list

# 4 查看人脸库：https://console.bce.baidu.com/ai/#/ai/face/facelib/groupList~appId=4652887

 还有一个语音识别

首页轮播图和公告接口

 1 index页面
 2 
 3 js
 4 
 5 // index.js
 6 import api from '../../static/js/api'
 7 
 8 Page({
 9   data: {
10     banner_list: ['/images/banner/banner1.png'],
11     notice:'社区最大交友平台上线啦~~'
12   },
13   onl oad(options) {
14     console.log(api)
15     wx.request({
16       url: api.banner,
17       method:'GET',
18       success:(res)=>{
19         console.log(res.data)
20         if(res.data.code==100){
21           this.setData({
22             banner_list:res.data.banner,
23             notice:res.data.notice.content
24           })
25         }else{
26           wx.showToast({
27             title: '轮播图网络加载失败',
28           })
29         }
30       }
31     })
32   },
33 
34   gotoCollection(){
35     wx.navigateTo({
36       url: '/pages/second/collection/collection'
37     })
38   },
39   gotoFace(){
40     wx.navigateTo({
41       url: '/pages/second/face/face'
42     })
43   },
44   gotoVoice(){
45     wx.navigateTo({
46       url: '/pages/second/voice/voice'
47     })
48   },
49 
50   gotoActivity(){
51     wx.switchTab({
52       url: '/pages/activity/activity',
53     })
54   },
55 gotoHeart(){
56   wx.navigateTo({
57     url: '/pages/second/heart/heart',
58   })
59 },
60 gotoGoods(){
61   wx.navigateTo({
62     url: '/pages/second/goods/goods',
63   })
64 },
65 
66 })
67 
68 
69 ============================================
70 wxml
71 
72 <!-- 轮播图 -->
73 <view class="banner">
74   <swiper autoplay indicator-dots circular indicator-color='#FFFFF' interval='3000'>
75     <swiper-item wx:for="{{banner_list}}" wx:key="*this" >
76       <image src="{{item.img}}" mode="widthFix" />
77     </swiper-item>
78   </swiper>
79 </view>
80 <van-notice-bar left-icon="volume-o" text="{{notice}}"/>