微信小程序开发第五课

一 vant-app

# https://vant-contrib.gitee.io/vant-weapp/#/home

1.1 集成步骤

# 0 必须使用专门为小程序提供的npm包，通常好多包用不了，比如第三方包用了dom，小程序没有
https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#%E5%8F%91%E5%B8%83-npm-%E5%8C%85
    
# 1 项目根目录，打开终端【在内建终端打开】
	-npm init -y  # 会生成package.json文件
# 2 安装vant（可以使用cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org）
	npm i @vant/weapp -S  # package.json 能看到下载完成，项目目录下有node_modules
    
# 3 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱


# 4 project.config.json 的settings中加入
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
        
 # 5 构建 工具---》构建npm

# 6 使用，app.json中
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
    
# 7 复制代码放入wxml中即可
<van-image
  round
  width="10rem"
  height="10rem"
  src="https://img.yzcdn.cn/vant/cat.jpeg"
/>

二 项目功能描述

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

三 项目创建

3.1 前端项目创建

3.2 后端项目创建

四 欢迎页面

4.1 wxml

<view class="container">
  <text bindtap="doJump" class="jump">跳过{{seconds}}秒</text>
  <image class="img" src="/images/bg/splash.png" />
</view>

4.2 js

Page({

  data: {
    seconds:3
  },

  doJump(e){
    wx.switchTab({
      url: '/pages/index/index'
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var instance = setInterval(()=>{
      if(this.data.seconds <= 0){
        //定时器清除
        clearInterval(instance)
        //跳转到项目页面 + 配置tabBar
        wx.switchTab({
          url: '/pages/index/index',
        })
      }else{
        this.setData({
          seconds:this.data.seconds - 1
        })
      }
    },1000)
  },

})

4.3 wxss

page{
	height: 100%;
}

.container {
  height: 100%;
  width: 100%;
} 

.container .img{
  height: 100%;
  width: 100%;
}

.jump{
  font-size: 30rpx;
  position: absolute;
  left: 600rpx;
  top: 80rpx;
  background-color: #dddddd;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

4.5 后端加载的欢迎页

4.5.1 表模型

class Welcome(models.Model):
    img = models.ImageField(upload_to='welcome', default='slash.png')
    order = models.IntegerField()
    create_time = models.DateTimeField(auto_now=True)
    is_delete = models.BooleanField(default=False)

4.5.2 开启media访问

## settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')

### urls.py
path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT})

4.5.3 视图函数

from .models import Welcome
from django.http import JsonResponse
def welcome(requesst):
    welcome=Welcome.objects.all().order_by('order').first()
    return JsonResponse({'code':100,'msg':'成功','result':{'img':'http://127.0.0.1:8000/media/'+str(welcome.img)}})

4.5.4 微信小程序端

const api = require("../../config/settings.js")
Page({

  data: {
    img:'http://127.0.0.1:8000/media/welcome/splash3.png',
    seconds:3
  },

  doJump(e){
    wx.switchTab({
      url: '/pages/index/index'
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.request({
      url: api.welcome,
      method:'GET',
      success:(res)=>{
        this.setData({
          img:res.data.result.img
        })
      }
    })

    var instance = setInterval(()=>{
      if(this.data.seconds <= 0){
        //定时器清除
        clearInterval(instance)
        //跳转到项目页面 + 配置tabBar
        wx.switchTab({
          url: '/pages/index/index',
        })
      }else{
        this.setData({
          seconds:this.data.seconds - 1
        })
      }
    },1000)
  },
})

五 首页

5.1 app.json

{
  "pages": [
    "pages/welcome/welcome",
    "pages/index/index",
    "pages/my/my",
    "pages/interaction/interaction",
    "pages/neighbor/neighbor",
    "pages/collection/collection",
    "pages/face/face",
    "pages/voice/voice",
    "pages/activity/activity",
    "pages/goods/goods",
    "pages/heart/heart",
    "pages/form/form",
    "pages/statistics/statistics",
    "pages/camera/camera",
    "pages/login/login"
    
  
  ],
  "window": {
    "navigationBarTitleText": "智慧社区",
    "navigationBarBackgroundColor": "#fff",
    "enablePullDownRefresh": false,
    "backgroundColor": "#00FFFF",
    "backgroundTextStyle": "light",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#1c1c1b",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon/home.png",
        "selectedIconPath": "images/icon/home-o.png"
      },
      {
        "pagePath": "pages/interaction/interaction",
        "text": "活动",
        "iconPath": "images/icon/aid.png",
        "selectedIconPath": "images/icon/aid-o.png"
      },
      {
        "pagePath": "pages/neighbor/neighbor",
        "text": "公告",
        "iconPath": "images/icon/circle.png",
        "selectedIconPath": "images/icon/circle-o.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/icon/my.png",
        "selectedIconPath": "images/icon/my-o.png"
      }
    ]
  },
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-nav-bar": "@vant/weapp/nav-bar/index", 
    "van-grid": "@vant/weapp/grid/index",
    "van-grid-item": "@vant/weapp/grid-item/index", 
    "van-cell": "@vant/weapp/cell/index",
    "van-notice-bar": "@vant/weapp/notice-bar/index",
    "van-image": "@vant/weapp/image/index",
    "van-divider": "@vant/weapp/divider/index"
  },
  "sitemapLocation": "sitemap.json"
}

5.2 wxml

<view class="container">

  <!-- 轮播图 -->
  <view class="banner">
  <swiper autoplay indicator-dots circular indicator-color='#FFFFF' interval='3000'>
    <swiper-item>
      <image src="/images/banner/banner1.png" mode="widthFix" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner/banner2.png" mode="widthFix" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner/banner3.png" mode="widthFix" />
    </swiper-item>
  </swiper>
</view>
<van-notice-bar
  left-icon="volume-o"
  text="今天下午广大社区居民在中心小广场集合。"
/>
  <!-- 快捷入口 -->
  <van-grid column-num="3" >
    <van-grid-item icon="/images/menu/ht.png" text="信息采集" bind:click="gotoCollection"/>
    <van-grid-item icon="/images/menu/wyf.png" text="社区活动" bind:click="gotoActivity"/>
    <van-grid-item icon="/images/menu/wygl.png" text="人脸检测" bind:click="gotoFace"/>
    <!-- 可以根据需要添加更多的快捷入口 -->
    <van-grid-item icon="/images/menu/wylx.png" text="语音识别" bind:click="gotoVoice"/>
    <van-grid-item icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" text="心率检测" bind:click="gotoHeart"/>
    <van-grid-item icon="/images/menu/ht.png" text="积分商城" bind:click="gotoGoods"/>
  </van-grid>


  <view class="bottom">
  <view>
    <image src="/images/home/cute_1.jpg" mode="scaleToFill" />
  </view>
  <view>
    <image src="/images/home/cute_2.jpg" mode="scaleToFill" />
  </view>
  <view>
    <image src="/images/home/cute_3.jpg" mode="scaleToFill" />
  </view>
  <view>
    <image src="/images/home/cute_4.jpg" mode="scaleToFill" />
  </view>

</view>



</view>

5.3 wxss

.banner image{
  width: 100%; /* 图片宽度拉伸至容器宽度 */
  height: 100%; /* 图片高度拉伸至容器高度 */
  object-fit: cover; /* 图片将覆盖整个容器区域，可能被裁剪 */
}
.bottom{
  display: flex;
  justify-content: space-evenly;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.bottom>view>image{
  width: 345rpx;
  height: 200rpx;
}

5.4 js

// index.js
Page({


  gotoCollection(){
    wx.navigateTo({
      url: '/pages/collection/collection'
    })
  },
  gotoFace(){
    wx.navigateTo({
      url: '/pages/face/face'
    })
  },
  gotoVoice(){
    wx.navigateTo({
      url: '/pages/voice/voice'
    })
  },

  gotoActivity(){
    wx.navigateTo({
      url: '/pages/activity/activity',
    })
  },
gotoHeart(){
  wx.navigateTo({
    url: '/pages/heart/heart',
  })
},
gotoGoods(){
  wx.navigateTo({
    url: '/pages/goods/goods',
  })
},
})

六 个人中心

6.2 wxml

<block wx:if="{{userInfo==null}}">
  <navigator class="login-area" url="/pages/login/login">
    <view class="btn">一键登录</view>
  </navigator>
</block>
<block wx:else>
  <view class="container">
    <view class="top-view">
      <view class="user">
        <view class="row">
          <image class="avatar" src="{{userInfo.avatar}}"></image>
          <view class="name">
            <view bindtap="logout">{{userInfo.name}}</view>
          </view>
        </view>

      </view>
      <view class="numbers">
        <view class="row">
          <text>{{userInfo.score}}</text>
          <text>积分</text>
        </view>
        <view class="row">
          <text>55</text>
          <text>其他</text>
        </view>
        <view class="row">
          <text>77</text>
          <text>其他</text>
        </view>
        <view class="row">
          <text>56</text>
          <text>其他</text>
        </view>
      </view>
    </view>
    <van-list>
      <van-cell title="积分兑换记录" is-link />
      <van-cell title="我参加的活动" is-link />
      <van-cell title="分享应用" is-link />
      <van-cell title="联系客服" is-link  />
    </van-list>
  </view>


</block>

6.2 wxss

page{
  height: 100%;
}

.login-area{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-area .btn{
  width: 200rpx;
  height: 200rpx;
  border-radius: 500%;
  background-color: #5cb85c;
  color: white;
  
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}




.user-area{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.user-area image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 500%;
}
.user-area .name{
  font-size: 30rpx;
  padding: 30rpx 0;
}

.user-area .logout{
  color: #a94442;
}



.top-view{
  background-color: #01ccb6;

  color: white;
  padding: 40rpx;
}

.top-view .user{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.top-view .user .row{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.top-view .user .avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.top-view .user .name{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 20rpx;
}
.top-view .user .name navigator{
  padding: 0 5rpx;
}

.top-view .site{
  background-color: rgba(0, 0, 0, 0.16);
  padding: 20rpx;
  border-top-left-radius: 32rpx;
  border-bottom-left-radius: 32rpx;
}

.top-view .numbers{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 28rpx;
  padding: 40rpx;
  padding-bottom: 0rpx;
}

.top-view .numbers .row{
   display: flex;
  flex-direction: column;
  align-items: center;
}

6.3 js

Page({
  data: {
    userInfo:{
      avatar:'/images/img/b.jpg',
      name:'justin',
      score:100
    },
  },
})

6.4 json

{
  "usingComponents": {},
  "navigationBarTitleText": "个人中心"
}