百度资源_沈阳网站页面设计公司_网络推广渠道分类_新网站推广方案

一 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-imageroundwidth="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)//跳转到项目页面 + 配置tabBarwx.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)//跳转到项目页面 + 配置tabBarwx.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-barleft-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": "个人中心"
}