【微信小程序】小茶书项目
2024-05-23 14:47:19
1. app.json代码：
"pages": ["pages/home/home","pages/auction/auction","pages/promulgate/promulgate","pages/news/news","pages/mine/mine","pages/index/index","pages/logs/logs","pages/redirect/redirect","pages/bind/bind","pages/login/login","pages/goods/goods","pages/publish/publish","pages/detail/detail","pages/telphone/telphone"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#FF8247","navigationBarTitleText": "小茶书","navigationBarTextStyle": "black"},"tabBar": {"selectedColor": "#EE5C42","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "pages/images/1.png","selectedIconPath": "pages/images/1.1.png"},{"pagePath": "pages/auction/auction","text": "拍卖","iconPath": "pages/images/2.png","selectedIconPath": "pages/images/2.2.png"},{"pagePath": "pages/promulgate/promulgate","text": "发布","iconPath": "pages/images/3.png","selectedIconPath": "pages/images/3.3.png"},{"pagePath": "pages/news/news","text": "消息","iconPath": "pages/images/4.png","selectedIconPath": "pages/images/4.4.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "pages/images/5.png","selectedIconPath": "pages/images/5.5.png"}]},"style": "v2","sitemapLocation": "sitemap.json"}2.首页
wxml代码:
<view class="container"><view class="top-view"><view class="item"><image src="../images/6.png"></image><text>精品文章</text></view><view class="item"><image src="../images/7.png"></image><text>小视频</text></view><view class="item"><image src="../images/8.png"></image><text>名人堂</text></view><view class="item"><image src="../images/9.png"></image><text>观点说</text></view></view><view class="middle-view"><view class="mood1"><image src="../images/10.png"></image><view class="author"><view class="left"><image src="../images/touxiang.png"></image><view class="name">枫叶堂堂主</view></view><view class="right"><image src="../images/28.png"></image><text>20</text></view></view><view class="Content">小茶书图册</view></view><view class="mood"><image src="../images/11.png"></image><view class="author"><view class="left"><image src="../images/touxiang.png"></image><view class="name">枫叶堂堂主</view></view><view class="right"><image src="../images/28.png"></image><text>20</text></view></view><view class="Content">乾隆年间青花瓷</view></view></view></view>wxss代码：
.item image{width: 100rpx;height: 100rpx;border-radius: 50rpx;}.top-view{display: flex;flex-direction: row;justify-content: space-around;padding: 40rpx;}.item{display: flex;flex-direction:column;align-items:center;font-size: 30rpx;font-weight: 550;}.menu1 {display: flex;flex-direction: row;justify-content: space-around;}.mood image{width: 350rpx;height: 200rpx;}.mood1 image{width: 350rpx;height: 400rpx;}.middle-view{display: flex;flex-direction:row;justify-content: space-between;padding: 10rpx;}.mood{display: flex;flex-direction:column;align-items:center;}.author{display: flex;flex-direction:row;justify-content: space-between;background-color: #2e2c2c62;color: white;padding: 14rpx;width: 93%;margin-top: -80rpx;font-size: 25rpx;font-weight: 600;}.author image{width: 30rpx;height: 30rpx;}.left{display: flex;flex-direction:row;justify-content: flex-start;padding: 8rpx;align-items:center;}.right{display: flex;flex-direction:row;justify-content: flex-end;padding: 8rpx;align-items:center;}.Content{ font-size: 30rpx;font-weight: 600;background-color: #ffffff;border: 2rpx solid #2e2c2c62;width: 100%;height: 100rpx;}3.拍卖
wxml代码：
<view class="container"><view class="top-view"><view class="title">{{title}}</view><view class="row"><view class="tips"><view class="status">{{status}}</view><view class="date">{{date}}</view></view><view class="count">{{count}}</view></view></view><view class="middle-view"><navigator url="/pages/detail/detail?id=666"><view class="big"><image src="{{img}}"></image></view><view class="item"><view class="left"><view class="small"><image src="{{img}}"></image></view><view class="small"><image src="{{img}}"></image></view><view class="small"><image src="{{img}}"></image></view><view class="small"><image src="{{img}}"></image></view><view class="small"><image src="{{img}}"></image></view></view><view class="number">14拍品</view></view></navigator></view><view class="top-view"><view class="title">{{title1}}</view><view class="row"><view class="tips"><view class="status">{{status1}}</view><view class="date">{{date1}}</view></view><view class="count">{{count1}}</view></view></view><view class="middle-view"><navigator url="/pages/detail/detail?id=666"><view class="big"><image src="{{img1}}"></image></view><view class="item"><view class="left"><view class="small"><image src="{{img1}}"></image></view><view class="small"><image src="{{img1}}"></image></view><view class="small"><image src="{{img1}}"></image></view><view class="small"><image src="{{img1}}"></image></view><view class="small"><image src="{{img1}}"></image></view></view><view class="number">14拍品</view></view></navigator></view></view>wxss代码：
.top-view{padding: 10rpx;margin-top: 10rpx;}.title{font-size: 32rpx;font-weight: 600;margin-bottom: 10rpx;margin-top: 20rpx;}.row{display: flex;flex-direction: row;justify-content: space-between;}.status{font-size: 28rpx;color: #ffffff;background-color: #0a8888;padding: 5rpx;border-radius: 23rpx;}.tips{display: flex;flex-direction: row;justify-content: space-around;}.date{font-size: 28rpx;color: #8c8c8c;padding: 8rpx;}.count{font-size: 28rpx;color: #8c8c8c;padding: 8rpx;}.big{height: 450rpx;overflow: hidden;padding: 10rpx;}.big image{width: 100%;height: 100%;}.item{display: flex;flex-direction: row;justify-content: space-between;box-shadow: 0rpx 20rpx 0rpx 0rpx #efefefd3; padding: 10rpx;margin-bottom: 30rpx;}.left{display: flex;flex-direction: row;justify-content: space-around;}.small{padding: 5rpx;margin-left: -4rpx;}image{height: 150rpx;width: 130rpx;}.number{font-size: 20rpx;writing-mode: vertical-rl;background-color: #080000;color:#ffffff;padding: 10rpx;text-align: center;border-top-left-radius: 10rpx;border-bottom-left-radius: 10rpx;margin-bottom: 14rpx;}4.发布
wxml代码”：
<view class="container"><view class="top-view"><view bindtap="uploadimage"><view class="tupian"><image wx:for="{{imagelist}}" src="{{item}}"></image></view></view><textarea>这一刻，想说点什么</textarea></view><view class="middle-view"><view class="row"><view class="left"><image src="../images/18.png"></image><view bindtap="getlocalpath">{{localpath}}</view></view></view><view class="line"></view><view class="row"><view class="left"><image src="../images/19.png"></image><text>参与话题</text></view><view class="right"><text>选择适合的话题会有更多的赞</text><image src="../images/jiantou.png"></image></view></view><view class="line"></view><view class="row"><view class="left"><image src="../images/20.png"></image><text>提醒谁看</text></view><view class="right"><text>你可以提醒关注你的朋友看你的文章</text><image src="../images/jiantou.png"></image></view></view></view></view>wxss代码：
.top-view{font-size: 32rpx;color: #8c8c8c;padding: 30rpx;}.uploadimage{display: flex;flex-direction: row;justify-content: space-between;}.row{display: flex;flex-direction: row;justify-content: space-between;padding: 20rpx;}.left{display: flex;flex-direction: row;justify-content: flex-start;color: #8c8c8c;padding: 10rpx;align-items: center;}.right{display: flex;flex-direction: row;justify-content: flex-end;align-items: center;font-size: 28rpx;color: #8c8c8c;}.line{width: 92%;height: 1rpx;background: #f3f3f3;margin-left: 40rpx;}.tupian image{width: 200rpx;height: 200rpx;}.left image{width: 60rpx;height: 60rpx;}.right image{width: 30rpx;height: 30rpx;}5.消息
wxml代码：
<view class="container"><view class="top-view"><view class="item"><image src="../images/12.png"></image><text>赞和收藏</text></view><view class="item"><image src="../images/13.png"></image><text>最近来访</text></view><view class="item"><image src="../images/14.png"></image><text>评论和@</text></view></view><view class="middle-view"><view class="row"><view class="left"><image src="../images/15.png"></image></view><view class="right"><view class="tips"><view class="System">系统消息</view><view class="day">2021-06-04</view></view><view class="Content">这个周末我们可以一起去逛街，吃饭看电影吗</view><view class="line"></view></view></view><view class="row1"><view class="left"><image src="../images/15.png"></image></view><view class="right"><view class="tips"><view class="System">系统消息</view><view class="day">2021-06-04</view></view><view class="Content">这个周末我们可以一起去逛街，吃饭看电影吗</view><view class="line"></view></view></view></view></view>wxss代码：
.left image{width: 100rpx;height: 100rpx;border-radius: 50rpx;}.item image{width: 120rpx;height: 100rpx;}.top-view {display: flex;flex-direction: row;justify-content: space-around;padding: 60rpx;box-shadow: 0rpx 20rpx 0rpx 0rpx #efefefd3; }.top-view .item{display: flex;flex-direction:column;align-items:center;font-size: 30rpx;font-weight: 700;}.row{display: flex;flex-direction: row;justify-content: flex-start;padding: 30rpx;margin-top: 40rpx;}.row1{display: flex;flex-direction: row;justify-content: flex-start;padding: 30rpx;}.tips{display: flex;flex-direction: row;justify-content:space-between;}.tips .day{font-size: 30rpx;color: #8c8c8c;}.tips .System{font-size: 30rpx;font-weight: 700;}.line{width: 100%;height: 3rpx;background: #f3f3f3;margin-top: 40rpx;}.Content{font-size: 30rpx;color: #8c8c8c;margin-top: 10rpx;}6.我的
wxml代码：
<view class="container"><view class="top-view"><view class="user"><view class="row"><image class="avatar" src="../images/touxiang.png"></image><view class="name"><navigator url="/pages/detail/detail">登录</navigator>|<navigator url="/pages/detail/detail">注册</navigator></view></view><view class="site">查看个人主页</view></view><view class="numbers"><view class="row"><text>0</text><text>关注</text></view><view class="row"><text>0</text><text>粉丝</text></view><view class="row"><text>0</text><text>赞与收藏</text></view><view class="row"><text>0</text><text>好友动态</text></view></view></view><view class="middle-view"><view class="item"><image src="../images/21.png"></image><text>待支付</text></view><view class="item"><image src="../images/22.png"></image><text>待支付</text></view><view class="item"><image src="../images/23.png"></image><text>待支付</text></view><view class="item"><image src="../images/24.png"></image><text>待支付</text></view><view class="item"><image src="../images/25.png"></image><text>待支付</text></view></view><view class="function-view"><view class="row"><view class="left">我的钱包</view><view class="right"><text>￥20</text><image class="go-icon" src="../images/jiantou.png"></image></view></view><view class="line"></view><view class="row"><view class="left">我的优惠券</view><view class="right"><text>暂无课用</text><image class="go-icon" src="../images/jiantou.png"></image></view></view><view class="line"></view><view class="row"><view class="left">领券中心</view><view class="right"><text>你的福利都在这里</text><image class="go-icon" src="../images/jiantou.png"></image></view></view><view class="line"></view></view><view class="contact-view"><button open-type="contact"><image src="../images/26.png"></image></button><button bindtap="onclickcall"><image src="../images/27.png"></image></button></view></view>wxss代码：
.top-view{background-color: #01ccb6;color: white;padding: 40rpx;}.user{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}.user .row{display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}.avatar{width: 100rpx;height: 100rpx;border-radius: 50%;}.name{display: flex;flex-direction: row;justify-content: space-around;width: 200rpx;font-size: 32rpx;}.site{background-color: #00000029;padding: 20rpx;border-top-left-radius: 32rpx;border-bottom-left-radius: 32rpx;font-size: 35rpx;}.numbers {display: flex;flex-direction: row;justify-content: space-around;}.numbers .row{display: flex;flex-direction:column;align-items:center;font-size: 28rpx;}.middle-view {display: flex;flex-direction: row;justify-content: space-around;}.middle-view{box-shadow: 0rpx 10rpx 0rpx 0rpx #efefefd3; }.item{display: flex;flex-direction:column;align-items:center;font-size:28rpx;margin-top: 35rpx;margin-bottom: 35rpx;}.item image{width: 50rpx;height: 50rpx;margin-bottom: 10rpx;}.function-view{padding: 20rpx;margin-top: 35rpx;}.function-view .row{display: flex;flex-direction: row;justify-content: space-between;align-items:center;padding: 20rpx;font-size: 25rpx;}.line{width: 93%;height: 1rpx;background: #f3f3f3;margin-left: 20rpx;}.right{color: #8c8c8c;font-size: 25rpx;display: flex;flex-direction: row;justify-content: space-between;align-items:center;}.go-icon{margin: 0 20rpx;width: 30rpx;height: 30rpx;}.contact-view{padding: 40rpx;display: flex;flex-direction: row;justify-content: space-around;}.contact-view button{background-color: transparent;border: 0;padding: 0;}.contact-view button::after{border: 0;}.contact-view image{width: 204rpx;height: 66rpx;}7.登录
wxml代码：
<view class="logo"><image src="../images/logo.png"></image><text>茶生活交流交易社区</text></view><view class="form"><view class="row-group"><text>手机</text><input placeholder="请输入手机号码" placeholder-class="txt" maxlength="11" bindinput="bindphoneinput"></input></view><view class="row-group"><text>验证码</text><input placeholder="请输入验证码" placeholder-class="txt" maxlength="4" bindinput="bindcodeinput"></input><view class="code" bindtap="onclickcheckcode">获取验证码</view></view><view><button class="submit">登录 | 注册</button></view></view>wxss代码：
.logo{display: flex;flex-direction: column;align-items: center;}.logo image{margin-top: 140rpx;width: 216rpx;height: 100rpx;}.logo text{margin-top: 26rpx;margin-bottom: 50rpx;font-size: 24rpx;line-height: 24rpx;font-weight: 400;color: #8c8c8c;text-align: center;}.form{padding: 40rpx;}.form .row-group{padding: 20rpx 0;border-bottom: 1rpx solid #dddddd;position: relative;}.form .row-group text{font-size: 28rpx;padding: 10rpx 0;}.form .row-group input{font-size: 30rpx;}.form .row-group .code{position: absolute;right: 0;bottom: 26rpx;z-index: 2;width: 206rpx;height: 60rpx;border: 2rpx solid #00c8b6;border-radius: 12rpx;font-size: 26rpx;font-weight: 400;color: #00c8b6;display: flex;justify-content: center;align-items: center;}.form .submit{margin-top: 80rpx;color: #ffffff;border: 2rpx solid #00c8b6;background-color: #00c8b6;font-size: 32rpx;font-weight: boid;}【微信小程序】小茶书项目相关推荐
- 详解微信小程序开发（项目从零开始）
关注公众号 风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
- 微信读书登陆界面java_（JAVA后端）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好...
转载地址:(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 一.环境搭建 相关环境软件:JDK1 ...
- 微信小程序云开发项目-个人待办事项-02今日模块开发
上一篇: 微信小程序云开发项目-个人待办事项-01介绍 https://blog.csdn.net/IndexMan/article/details/124485626 模块开发步骤 本篇介绍今日模块 ...
- 微信小程序云音乐项目
微信小程序云音乐项目 微信小程序云音乐项目 1. 项目介绍 技术栈 项目使用库 项目目标 2. 页面效果和功能展示 3. 项目源码与 API 接口 4. 项目说明 5. 致谢 微信小程序云音乐项目 1 ...
- 微信小程序电商项目开发实战漫谈
原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...
- 微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
- 微信小程序在线考试项目开发-接口封装调用
本项目会耗时一周到两周来完成,最近要又要辛苦加班了,项目给的时间不多,程序员太不容易了,做完项目调休好好休息一下! 此时此刻,记录一下项目实现. 小程序在线考试项目介绍: 技术选型:轻量.可靠的小程序 ...
- 微信小程序电商项目实战-前言
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
- 微信小程序电商项目源代码开放连载二三事
大家好,我发布的微信小程序电商项目连载视频,正式进入实战化阶段了,为了让大家更好的去学习微信小程序开发,我在gitbub上面,开放了源代码.随着视频的连载更新,我会逐步将源代码进行更新. 源代码发布地 ...
- 微信小程序练手项目-音乐播放器
微信小程序练手项目-音乐播放器 该项目只适合练手,大佬请绕道 项目展示图: 项目介绍 微信小程序音乐播放器 页面: 音乐推荐.播放器.播放列表 功能: 播放.暂停.上一首.下一首.跳转播放列表.实时进 ...
最新文章
- 程序员学霸！top2大学毕业！不到30岁第一次升P9失败！挫折感极强，怀疑人生？网友：没升P7的我，不要面子的吗？？...
- Oracle 创建函数的权限
- Android实现分享代码,Android 分享功能的实现代码
- HTTP Cookie详解
- 二进制位运算中‘1’的个数
- java break 在if 中使用_Java | 使用JNA在Java中实现cls(cmd清屏)功能
- Cisco路由器上传和下载IOS
- tmb100a linux,天猫魔盒Tmb100系列_LetvUi_YYF终极版
- 数列极限：无穷量与待定型
- linux使用客户端连接redis,使用redis客户端连接windows和linux下的redis并解决无法连接redis的问题...
- 你是否也陷入了《能力陷阱》？
- 怎么计算一个月有多少天
- BIOS设置|win10最快启动的方式
- 17期-什么是MySQL数据库？看这一篇干货文章就够了！
- 【图像处理】非线性滤波
- 五十条经典的做人哲学
- 【国产数据库】GBase学习⑤ - gsql 客户端连接工具
- 2021年甘肃省高考成绩一分一段表查询,2021年甘肃高考成绩排名查询系统,甘肃高考位次排名查询...
- Mixly第三方库开发——OLED库
- python中var是什么变量_python变量