WeChatミニプログラムモールプロジェクト：
このページには次の内容が表示されます。
コードの一部は次のことを示しています。
//app.js
App({
//onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
onLaunch: function(options){
},
onShow: function(options){
},
onHide: function(){
},
onError: function(msg){
},
//options(path,query,isEntryPage)
onPageNotFound: function(options){
},
});
{
"pages": [
"pages/index/index",
"pages/category/index",
"pages/goods_list/index",
"pages/goods_detail/index",
"pages/cart/index",
"pages/collect/index",
"pages/order/index",
"pages/search/index",
"pages/user/index",
"pages/feedback/index",
"pages/login/index",
"pages/auth/index",
"pages/pay/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#EB4450",
"navigationBarTitleText": "商城项目",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
}
,
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart-o.png"
}
,
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
@import "./styles/iconfont.wxss";
/* 在微信小程序中 不支持 通配符 '*' */
page,view,text,swiper,swiper-item,image,navigator{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
主题颜色 通过变量来实现
1 less 中 存在 变量这个知识
2 原生的css和wxss也是支持 变量
*/
page{
/* 定义主题颜色 */
--themeColor:#EB4450;
/*
定义统一字体大小 假设设计稿 大小是 375px
1px= 2rpx
14px = 28rpx
*/
font-size: 28rpx;
}
image{
width: 100%;
}
インデックスページ：
// 0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from "../../request/index.js";
Page({
data: {
// 轮播图数组
swiperList: [],
// 导航 数组
catesList:[],
// 楼层数据
floorList:[]
},
// 页面开始加载 就会触发
onLoad: function (options) {
// 1 发送异步请求获取轮播图数据 优化的手段可以通过es6的 promise来解决这个问题
// wx.request({
// url: 'https://api.zbztb.cn/api/public/v1/home/swiperdata',
// success: (result) => {
// this.setData({
// swiperList: result.data.message
// })
// }
// });
this.getSwiperList();
this.getCateList();
this.getFloorList();
},
// 获取轮播图数据
getSwiperList(){
request({ url: "/home/swiperdata" })
.then(result => {
this.setData({
swiperList: result
})
})
},
// 获取 分类导航数据
getCateList(){
request({ url: "/home/catitems" })
.then(result => {
this.setData({
catesList: result
})
})
},
// 获取 楼层数据
getFloorList(){
request({ url: "/home/floordata" })
.then(result => {
this.setData({
floorList: result
})
})
},
})
index.json：
{
"usingComponents": {
"SearchInput": "../../components/SearchInput/SearchInput"
},
"navigationBarTitleText": "项目首页"
}index.wxml：
<view class="pyg_index">
<!-- 搜索框 开始 -->
<SearchInput></SearchInput>
<!-- 搜索框 结束 -->
<!-- 轮播图 开始 -->
<view class="index_swiper">
<!--
1 swiper标签存在默认的宽度和高度
100% * 150px
2 image标签也存在默认的宽度和高度
320px * 240px
3 设计图片和轮播图
1 先看一下原图的宽高 750 * 340
2 让图片的高度自适应 宽度 等于100%
3 让swiper标签的高度 变成和图片的高一样即可
4 图片标签
mode属性 渲染模式
widthFix 让图片的标签宽高 和 图片标签的内容的宽高都等比例的发生变化
-->
<swiper autoplay indicator-dots circular>
<swiper-item
wx:for="{
{swiperList}}"
wx:key="goods_id"
>
<navigator url="{
{item.navigator_url}}">
<image mode="widthFix" src="{
{item.image_src}}"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 轮播图 结束 -->
<!-- 导航 开始 -->
<view class="index_cate">
<navigator
wx:for="{
{catesList}}"
wx:key="name"
url="/pages/category/index"
open-type="switchTab"
>
<image mode="widthFix" src="{
{item.image_src}}" ></image>
</navigator>
</view>
<!-- 导航 结束 -->
<!-- 楼层 开始 -->
<view class="index_floor">
<view class="floor_group"
wx:for="{
{floorList}}"
wx:for-item="item1"
wx:for-index="index1"
wx:key="floor_title"
>
<!-- 标题 -->
<view class="floor_title">
<image mode="widthFix" src="{
{item1.floor_title.image_src}}"></image>
</view>
<!-- 内容 -->
<view class="floor_list">
<navigator
wx:for="{
{item1.product_list}}"
wx:for-item="item2"
wx:for-index="index2"
wx:key="name"
url="{
{item2.navigator_url}}"
>
<image mode="{
{index2===0?'widthFix':'scaleToFill'}}" src="{
{item2.image_src}}"></image>
</navigator>
</view>
</view>
</view>
<!-- 楼层 结束 -->
</view>index.less：
.index_swiper{
swiper{
width: 750rpx;
height: 340rpx;
image{
width: 100%;
}
}
}
.index_cate{
display: flex;
navigator{
padding: 20rpx;
flex: 1;
image{
width: 100%;
}
}
}
.index_floor{
.floor_group{
.floor_title{
padding: 10rpx 0;
image{
width: 100%;
}
}
.floor_list{
// 清除浮动
overflow: hidden;
navigator{
float: left;
width: 33.33%;
/* 后四个超链接 */
&:nth-last-child(-n+4){
/* 原图的宽高 232 *386 */
// 232 / 386 = 33.33vw / height
// 第一张图片的高度 height:33.33vw * 386 / 232
height:33.33vw * 386 / 232 /2 ;
border-left: 10rpx solid #fff;
}
/* 2 3 两个超链接 */
&:nth-child(2),
&:nth-child(3){
border-bottom: 10rpx solid #fff;
}
image{
width: 100%;
height: 100%;
}
}
}
}
}index.wxss：
.index_swiper swiper {
width: 750rpx;
height: 340rpx;
}
.index_swiper swiper image {
width: 100%;
}
.index_cate {
display: flex;
}
.index_cate navigator {
padding: 20rpx;
flex: 1;
}
.index_cate navigator image {
width: 100%;
}
.index_floor .floor_group .floor_title {
padding: 10rpx 0;
}
.index_floor .floor_group .floor_title image {
width: 100%;
}
.index_floor .floor_group .floor_list {
overflow: hidden;
}
.index_floor .floor_group .floor_list navigator {
float: left;
width: 33.33%;
/* 后四个超链接 */
/* 2 3 两个超链接 */
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
/* 原图的宽高 232 *386 */
height: 27.72711207vw;
border-left: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator:nth-child(2),
.index_floor .floor_group .floor_list navigator:nth-child(3) {
border-bottom: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator image {
width: 100%;
height: 100%;
}
2020年の冬休みはとても特別です。記録してください。残り300日です。次に、大学院入試の準備をします。。。