微信小程序主页及报名页面的简单实现

主页效果图

代码里关键部分带有注释

index.wxml代码实现

<!-- 轮播图 -->
<view class="index_selection"><view class="index_swiperBanner"><swiper indicator-dots="true" autoplay="true" circular="true" indicator-active-color="white" interval="3000" duration="500"><swiper-item wx:for="{{imgurls}}" wx:for-index="idx" wx:for-item="itemName"><image src="{{itemName.url}}"/></swiper-item></swiper></view><view class="index_search"><input type="text" placeholder="输入搜索关键词" value="{{name}}" bindconfirm="bindconfirm"/><icon size="20" type='search'/></view>
</view><!-- 官方通知(也是轮播图，只是是纵向的) -->
<view class="index_notice-box"><view class="index_notice"><image src="../../images/icon/notice.png"/><swiper class="index_notice_swiper" vertical="true" autoplay="true" circular="true" interval="2000" duration="1000"><!-- 以list的key作为点击标识对跳转后页面获取数据提供依据，页面从数据库获取的数据存到全局变量，点击时判断是哪个模块点击确定要从哪个全局list变量里取数据，事件处理判断点击了哪个 --><swiper-item wx:for="{{guanfanctivity}}"  data-key="{{index}}" bindtap="offonclick"><view class="index_notice_itemr">{{item.content}}</view></swiper-item></swiper></view><view class="index_more"><navigator url="/pages/notice/index">更多 ></navigator></view>
</view><!-- 链接 -->
<view class="index_plate"><navigator class="index_plate-item" url="/pages/US/US" open-type="redirect" hover-class="other-navigetor-hover"><view class="index_plate-item-img"><image src="../../images/a3.png"/></view><view class="index_plate-item-info">活动资讯</view></navigator><navigator class="index_plate-item" url="/pages/US/US" open-type="redirect" hover-class="other-navigetor-hover"><view class="index_plate-item-img"><image src="../../images/a4.png"/></view><view class="index_plate-item-info">完善信息</view></navigator><navigator class="index_plate-item" url="/pages/US/US" open-type="redirect" hover-class="other-navigetor-hover"><view class="index_plate-item-img"><image src="../../images/a1.png"/></view><view class="index_plate-item-info">报名预约</view></navigator><navigator class="index_plate-item" url="/pages/US/US" open-type="redirect" hover-class="other-navigetor-hover"><view class="index_plate-item-img"><image src="../../images/a2.png"/></view><view class="index_plate-item-info">联系我们</view></navigator>
</view>
<!-- 猜你喜欢 -->
<view class="index_header"><text class="index_header_title">猜你喜欢</text><navigator url="/pages/US/US" class="index_header_order">更多推荐 ></navigator>
</view>
<view class="index_like">
<!-- 以list的key作为点击标识对跳转后页面获取数据提供依据，页面从数据库获取的数据存到全局变量，点击时判断是哪个模块点击确定要从哪个全局list变量里取数据 --><view class="index_like-item" wx:for="{{likeActivity}}" data-key="{{index}}" bindtap="likeonclick"><image src="{{item.url}}"/><view class="index_like-item-text">{{item.text}}</view></view>
</view>
<!-- 热门活动 -->
<view class="index_header"><text class="index_header_title">热门活动</text>
</view>
<view class="index_max"><scroll-view scroll-x="true"><!-- 一个滚动视图，可以对超出部分进行滚动处理，同样以key作为点击标识 --><view class="index_max-scroll" scroll-x="true" ><view class="index_max-scroll-item" wx:for="{{maxActivity}}" data-key="{{index}}" bindtap="maxonclick"><image src="{{item.url}}"></image></view><navigator class="index_max-scroll-item">点击查看更多 ></navigator></view></scroll-view>
</view>
<!-- 最新活动 -->
<view class="index_header"><text class="index_header_title">最新活动</text><navigator url="/pages/US/US" class="index_header_order">全部活动 ></navigator>
</view>
<view class="index_list-item" wx:for="{{newActivity}}" data-key="{{index}}" bindtap="newonclick"><view class="index_list-item-images"><image src="{{item.url}}" class="index_list-item-images-img"/><image src="{{item.url}}" class="index_list-item-images-avatar"/></view><view class="index_list-item-text"><view class="index_list-item-text-title"><text>{{item.text}}</text></view><view class="index_list-item-text-content"><text>{{item.content}}</text></view></view>
</view>
<view class="weui-loadmore weui-loadmore_line" style='margin-top:60rpx;margin-bottom:30rpx;'><view class="weui-loadmore__tips weui-loadmore__tips_in-line">没有更多啦</view>
</view>

index.js代码实现

Page({data: {imgurls: [{ url: "../../images/活动1.png" },{ url: "../../images/活动2.jpg" },{ url: "../../images/活动2.jpg" }],},/*** 将数据库数据取出并作为json数据获取后存到data里，以及存到全局变量*/onLoad: function (options) {wx.request({url:"http://127.0.0.1:8808/allActivity/",success:res=>{App.all = res.datathis.setData({allActivity:res.data})}})wx.request({url: "http://127.0.0.1:8808/likeActivity/",success: res => {App.likeAc = res.datathis.setData({likeActivity: res.data})}})wx.request({url: "http://127.0.0.1:8808/guanfanActivity/",success: res => {App.guanfanAc = res.datathis.setData({guanfanctivity: res.data})}})wx.request({url: "http://127.0.0.1:8808/maxActivity/",success: res => {App.maxAc = res.datathis.setData({maxActivity: res.data})}})wx.request({url: "http://127.0.0.1:8808/newActivity/",success: res => {App.newAc = res.datathis.setData({newActivity: res.data})}})},bindconfirm(e) {wx.navigateTo({})},/**点击时获取点击的活动并传给下一个页面*/offonclick(e){wx.navigateTo({url: '/pages/registration/resgistration?list=guanfan&index=' + e.currentTarget.dataset.key,})},likeonclick(e){wx.navigateTo({url: '/pages/registration/resgistration?list=like&index=' + e.currentTarget.dataset.key,})},maxonclick(e){wx.navigateTo({url: '/pages/registration/resgistration?list=max&index=' + e.currentTarget.dataset.key,})},newonclick(e){wx.navigateTo({url: '/pages/registration/resgistration?new=new&index=' + e.currentTarget.dataset.key,})}
})

index.wxss代码实现

/*轮播*/
.index_selection{position: relative;width:100%;height:400rpx;
}
.index_swiperBanner{width:100%;height:420rpx;
}
swiper{width:100%;height:400rpx;
}
.index_swiperBanner image{width:100%;height:400rpx;
}
.index_search{display: flex;justify-content: space-between;z-index: 10;position:absolute;top:40rpx;left: 5%;width:90%;height:60rpx;background: white;border-radius: 30rpx;box-shadow: 0 0 10rpx #CCC;overflow: hidden;
}
.index_search input{box-sizing: border-box;padding-left: 20rpx;width:90%;height:60rpx;font-size: 35rpx;
}
.index_search icon{margin-top:5rpx;width:10%;height:50rpx;
}
/*官方通知*/
.index_notice-box {display: flex;box-sizing: border-box;width: 100%;height: 88rpx;line-height: 88rpx;justify-content: space-between;align-items: center;padding-right: 32rpx;border-bottom: 1rpx solid #efeff4;
}
.index_notice{display: flex;justify-content: space-between;align-items: center;width: 600rpx;
}
.index_notice image{margin-left:20rpx;width:30rpx;height:30rpx;
}
.index_notice_swiper{height: 60rpx;width: 600rpx;
}
.index_notice_itemr {padding-left: 16rpx;font-size: 24rpx;line-height: 60rpx;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;color: #e64340;
}
.index_notice-box .index_more {color: #CCC;font-size: 24rpx;
}
/*链接*/
.index_plate{margin: 10rpx auto 0;display: flex;justify-content: space-evenly;width:95%;height:180rpx;
}
.index_plate-item{position: relative;width:140rpx;height: 160rpx;margin-top:20rpx;
}
.index_plate-item-img{margin: 0 auto;width:100rpx;height:100rpx;
}
.index_plate-item-img image{width:100rpx;height:100rpx;
}
.index_plate-item-info{margin: 20rpx auto 0;width: 100%;height: 40rpx;text-align: center;font-size: 30rpx;font-family: '微软雅黑';
}
/*猜你喜欢*/
.index_header{margin: 30rpx 0 0;display: flex;justify-content: space-between;box-sizing: border-box;padding-right: 32rpx;width: 100%;height: 110rpx;border-top: 1rpx solid #efeff4;
}
.index_header_title{margin-top:15rpx;margin-left: 10rpx;padding-left: 32rpx;height:70rpx;line-height: 70rpx;color: black;font-size: 35rpx;border-left:10rpx rgb(131, 194, 104) solid;
}
.index_header_order{margin-top:15rpx;height:70rpx;line-height: 70rpx;color: #CCC;font-size: 24rpx;
}
.index_like{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;
}
.index_like-item{height: 250rpx;width: 47%;background-color: goldenrod;margin: 2px;position: relative;
}
.index_like-item image{width: 100%;height: 100%;
}
.index_like-item-text{position: absolute;bottom: 0px;color: white;font-size: 10px;background: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.8),rgba(0,0,0,0));height: 125rpx;width: 100%;display: flex;flex-direction: column;justify-content: flex-end;
}
/*热门活动*/
.index_max{margin: 1rpx auto;width: 96%;height: 200rpx;
}
.index_max-scroll{ width:100%;height:200rpx; display: flex; display: -webkit-box; flex-direction: column;
}
.index_max-scroll-item{box-sizing: border-box;margin-right: 20rpx;width: 280rpx; height: 200rpx;line-height: 200rpx;text-align: center;color: #CCC;background: white;font-size: 35rpx;border: 1rpx solid #efeff4;flex: 1;
}
navigator:active{color: black;background: white;
}
navigator:visited{color: #CCC;background: white;
}
.index_max-scroll-item image{ width: 280rpx; height: 200rpx;
}
/*最新活动*/
.index_list-item{margin: 0 auto 30rpx;position: relative;height:550rpx;width:96%;box-shadow: 0 0 5rpx #CCC;
}
.index_list-item-images{position:relative;height: 450rpx;width: 100%;
}
.index_list-item-images-img{height: 100%;width: 100%;
}
.index_list-item-images-avatar{height: 120rpx;width: 120rpx;border-radius: 50%;position: absolute;right: 70rpx;bottom: -50rpx;
}
.index_list-item-text{box-sizing: border-box;padding-left: 10rpx;margin: auto;height: 100rpx;width: 100%;
}
.index_list-item-text-title{font-size: 40rpx;
}
.index_list-item-text-content{font-size: 20rpx;color:#CCC;
}

报名活动页面效果图

resgistration.wxml代码实现

<view class="resgistration_body"><view class="resgistration_top"><image src="{{item.url}}"/></view><view class="resgistration_title">{{item.text}}</view><view class="resgistration_items"><view class="resgistration_item">活动地点 {{item.shop}}</view><view class="resgistration_item">活动时间 {{item.time}}</view><view class="resgistration_item">活动类型 {{item.type}}</view><view class="resgistration_item">报名费用 {{item.coin}}</view><view class="resgistration_content">报名人数 {{item.num}}</view></view><view class="resgistration_title">活动介绍</view><view class="resgistration_items"><view class="resgistration_content">{{item.content}}</view></view><!--如果还未报名显示报名按钮，已报名显示已报名按钮，点击事件做issu的改变--><view class="resgistration_submit" wx:if="{{issu == 0}}" bindtap="issubmit">报名</view><view class="resgistration_submit" wx:if="{{issu != 0}}" bindtap="issubmit">已报名</view>
</view>

resgistration.js代码实现

// pages/registration/resgistration.js
Page({data: {},/*** 判断是点击了哪个活动，然后从全局变量里取出这个活动的信息* 然后从数据库查找这个用户是否报名了这个活动*/onLoad: function (options) {if (options.list == "guanfan") {this.setData({item: App.guanfanAc[options.index]})}if (options.list == "like"){this.setData({item: App.likeAc[options.index]})}if (options.list == "new") {this.setData({item: App.newAc[options.index]})}if (options.list == "max") {this.setData({item: App.maxAc[options.index]})}var userInfo = wx.getStorageSync("userinfo")console.log(userInfo.nickName)var ul = "http://127.0.0.1:8808/query?name=" + userInfo.nickName + "&id=" + this.data.item.id;wx.request({url: ul,success: res => {this.setData({issu: res.data})}})},
/*
*点击报名或已报名后触发,如果是报名就添加数据进数据库，如果是已报名就从数据库删除对应数据
*/issubmit(){var ul = null;var userInfo = wx.getStorageSync("userinfo")if(this.data.issu == 0){ul = "http://127.0.0.1:8808/insert?name=" + userInfo.nickName + "&id=" + this.data.item.id;this.setData({issu: 1})}else{ul = "http://127.0.0.1:8808/delete?name=" + userInfo.nickName + "&id=" + this.data.item.id;this.setData({issu: 0})}wx.request({url: ul, header: { 'content-type': 'application/json' },success: res => {}})}
})

resgistration.wxss代码实现

.resgistration_body{width: 100%;background:rgba(204, 204, 204, 0.425);
}
.resgistration_top{width:100%;height:500rpx;
}
.resgistration_top image{width:100%;height:500rpx;
}
.resgistration_title{box-sizing: border-box;padding: 0 40rpx;width: 100%;height:100rpx;line-height: 100rpx;font-size: 30rpx;font-weight: bold;background: white;overflow: hidden;display:-webkit-box;-webkit-line-clamp:1;text-overflow:ellipsis;-webkit-box-orient:vertical;word-break:break-all;
}
.resgistration_items{margin-bottom: 20rpx;width: 100%;background:white;
}
.resgistration_item{box-sizing: border-box;padding: 10px 0;margin:auto;width: 90%;height: auto;font-size: 30rpx;border-bottom: 1rpx  solid rgba(204, 204, 204, 0.548);background: white;word-break: break-all;
}
.resgistration_content{box-sizing: border-box;padding: 10px 0;margin:auto;width: 90%;height: auto;font-size: 30rpx;background: white;word-break: break-all;
}
.resgistration_submit{margin-top:40rpx;width: 100%;height: 80rpx;line-height: 80rpx;text-align: center;font-size: 35rpx;color: white;font-weight: bold;background: rgb(25, 218, 57);
}
.resgistration_submit:active{background:rgb(36, 187, 61);
}
.resgistration_submit:visited{background: rgb(25, 218, 57);
}

django后端处理
新建一个python文件views.py来对后端进行操作

views.py代码

import pymysql
import jsonfrom django.http import HttpResponsedef query(request):request.encoding = 'utf-8'name=request.GET.get("name")id = request.GET.get("id")conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)count = cursor.execute("select * from zt where user=%s and activity_id=%s", [name, id])conn.commit()cursor.close()conn.close()return  HttpResponse(count)
def insert(request):name=request.GET.get("name")id = request.GET.get("id")conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)count = cursor.execute("insert into zt (user,activity_id) value (%s,%s)", [name, id])conn.commit()cursor.close()conn.close()return HttpResponse(1, content_type="application/json , charset=utf-8")
def delete(request):name=request.GET.get("name")id = request.GET.get("id")conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)count = cursor.execute("delete from zt where user=%s and activity_id=%s", [name, id])conn.commit()cursor.close()conn.close()return HttpResponse(0, content_type="application/json , charset=utf-8")
def guanfanActivity(request):conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)cursor.execute("select * from api where type = '官方'")list = cursor.fetchall()cursor.close()conn.close()return HttpResponse(json.dumps(list,ensure_ascii=False),content_type="application/json , charset=utf-8")
def allActivity(request):conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)cursor.execute("select * from api")list = cursor.fetchall()cursor.close()conn.close()return HttpResponse(json.dumps(list,ensure_ascii=False),content_type="application/json , charset=utf-8")
def likeActivity(request):conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)cursor.execute("select * from api")list = cursor.fetchmany(6)cursor.close()conn.close()return HttpResponse(json.dumps(list,ensure_ascii=False),content_type="application/json , charset=utf-8")
def maxActivity(request):conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)cursor.execute("select * from api")list = cursor.fetchmany(6)cursor.close()conn.close()return HttpResponse(json.dumps(list,ensure_ascii=False),content_type="application/json , charset=utf-8")
def newActivity(request):conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='test', charset='utf8')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)cursor.execute("select * from api")list = cursor.fetchmany(8)cursor.close()conn.close()return HttpResponse(json.dumps(list,ensure_ascii=False),content_type="application/json , charset=utf-8")

uels.py代码

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from django.views.static import serve
from Django2 import settings
from Django2 import views
urlpatterns = [url(r'^images/(P?<path>.*)$', serve, {'document_root': settings.STATICFILES_DIRS[0]}),url(r'query/', views.query),url(r'insert/', views.insert),url(r'delete/', views.delete),url(r'allActivity/', views.allActivity),url(r'likeActivity/',views.likeActivity),url(r'maxActivity/',views.maxActivity),url(r'guanfanActivity/',views.guanfanActivity),url(r'newActivity/',views.newActivity)
]

活动表的设计如下

活动报名表的设计如下

微信小程序主页及报名页面的简单实现相关推荐

springboot+vue微信小程序的驾校报名小程序#毕业设计
驾校报名小程序能够通过互联网得到广泛的.全面的宣传,让尽可能多的用户了解和熟知驾校报名小程序的便捷高效,不仅为群众提供了服务,而且也推广了自己,让更多的群众了解自己.对于驾校报名而言,若拥有自己的系统 ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
微信小程序不能跳转页面跳转不生效
微信小程序不能跳转页面跳转不生效 ,可能是用法不正确哦 wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面.使用 wx ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
微信小程序PHP注册,微信小程序教程之注册页面
微信小程序――Page Page()函数用来注册一个页面.接受一个object参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object参数说明: 属性类型描述 data Objec ...
后退一步小程序_微信小程序返回上一级页面的实现代码
微信小程序返回上一级页面 wx.navigateBack({ delta: 1 //返回上一级页面}) html: 保存 js: //提交 submit(){ let data = this.data ...
微信小程序返回上一级页面时刷新页面
问题描述: 微信小程序返回上一级页面时需要重新加载一下数据问题解决: 方法一: 在需要返回的页面的onShow(){}方法中调用要刷新数据的方法方法二: goBack(){let pages = ...
微信小程序键盘弹起后页面上推问题
微信小程序键盘弹起后页面上推问题小程序的 input 组件聚焦后弹起键盘,自动通过页面上移的方式将输入框所在位置定位到键盘上方. 如果输入框本身就位于页面顶端,则不会造成上推. 但是,如果输入框是位 ...

微信小程序主页及报名页面的简单实现

主页效果图

报名活动页面效果图

微信小程序主页及报名页面的简单实现相关推荐

最新文章

热门文章