微信小程序开发第五课

标签：index vant flex 微信 top 程序开发 weapp 第五课 pages

一 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'
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad(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'
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad(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": "个人中心"
}

标签：index,vant,flex,微信,top,程序开发,weapp,第五课,pages
From： https://blog.csdn.net/weixin_50556117/article/details/142362772

微信小程序开发第五课

一 vant-app

1.1 集成步骤

二项目功能描述

三项目创建

3.1 前端项目创建

3.2 后端项目创建

四欢迎页面

4.1 wxml

4.2 js

4.3 wxss

4.5 后端加载的欢迎页

4.5.1 表模型

4.5.2 开启media访问

4.5.3 视图函数

4.5.4 微信小程序端

五首页

5.1 app.json

5.2 wxml

5.3 wxss

5.4 js

六个人中心

6.2 wxml

6.2 wxss

6.3 js

6.4 json

相关文章

赞助商

阅读排行

微信小程序开发第五课

一 vant-app

1.1 集成步骤

二 项目功能描述

三 项目创建

3.1 前端项目创建

3.2 后端项目创建

四 欢迎页面

4.1 wxml

4.2 js

4.3 wxss

4.5 后端加载的欢迎页

4.5.1 表模型

4.5.2 开启media访问

4.5.3 视图函数

4.5.4 微信小程序端

五 首页

5.1 app.json

5.2 wxml

5.3 wxss

5.4 js

六 个人中心

6.2 wxml

6.2 wxss

6.3 js

6.4 json

相关文章

赞助商

阅读排行

二项目功能描述

三项目创建

四欢迎页面

五首页

六个人中心