• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

07黑马优购小程序-项目搭建与选型-首页

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.项目技术选型

小程序的第三方开发框架,例如

  • 腾讯的wepy :语法类似vue
  • 美团mpvue:语法类似vue
  • 京东taro:语法类似react
  • 滴滴chameleon:语法类似vue
  • uniapp:语法类似vue
  • 原生框架:MINA

考虑到原生的版本迭代较快,我们先用原生框架

2.黑马优购小程序搭建步骤

  • 新建小程序项目
  • 搭建目录结构

          (1)styles 存放公告样式

          (2)components 存放组件

          (3)lib 存放第三方库

          (4)utils 自己的帮助库

          (5)request 自己的接口帮助库

至此配置如下:

  • 搭建项目的页面


  • 引入字体图标

引入阿里图标库 ,在styles中创建iconfont.wxss文件,放入下面链接内容

      //at.alicdn.com/t/font_2180986_xu7t62w171i.css
引入后,在app.wxss中引入,这样这个css就可以全局使用

                /**app.wxss**/

               @import "./styles/iconfont.wxss";


  • 搭建项目tabbar结构

2.1 搭建项目的tabbar结构

       项目tabbar结构就是优购下面的首页、分类、购物车、我的这些图标在app.json文件中,和windows同层级

"tabBar": {

"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"

}

]

},

定义导航条颜色为红色,app.json中进行

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#eb4450",

"navigationBarTitleText": "黑马优购",

"navigationBarTextStyle":"black"

},

下面实现以下功能


第一个自定义组件,类似于搜索框,很多页面都用,所以我们将它自定义组件,而且点击它会自动变换,实际上是一个导航链接。

自定义组件文件夹中

<!--components/SearchInput/SearchInput.wxml-->

<view class="SearchInput">

<view class="back">

<!-- open-type="navigate"表示跳转的是非tabbar页面 -->

<navigator url="/pages/search/index" open-type="navigate">搜索</navigator>

</view>

</view>


/* components/SearchInput/SearchInput.wxss */

.back{

background-color: white;

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

border-radius: 10rpx;

}

.SearchInput{

height:90rpx;

padding: 15rpx;

background-color:var(--themeColor);

/* border: 1rpx solid black; */

display: flex;

justify-content: center;

align-items: center;

}

index文件夹中:

<!--index.wxml-->

<view class="pyg_index">

<!-- 搜索框 开始 -->

<SearchInput>开始</SearchInput>

<!-- 搜索框 结束 -->

</view>

{

"usingComponents": {

"SearchInput":"../../components/SearchInput/SearchInput"

},

"navigationBarTitleText": "优购首页"

}

2.2.获取轮播图数据

获取轮播图数据分为:

  • 1获取轮播图的接口数据
  • 2是接口数据与轮播图标签结合

<!--index.wxml-->

<view class="pyg_index">

<!-- 搜索框 开始 -->

<SearchInput>开始</SearchInput>

<!-- 搜索框 结束 -->

<!-- 轮播图开始 -->

<view class="index_swiper">

<!-- 1.swiper标签默认宽度高度是100%*150px

       2.image标签页存在默认宽度和高度 320px*240px

       3.我们需要设计下轮播图的宽高 原图是 750*340

          我们需要设置图片的高度自适应,而宽度等于100%

          我们需要设置swiper标签高度和图片的高度一样

          图片标签z自带mode属性,渲染模式

             widthfix:让图片的标签宽高与内容(也就是真正图片)宽高等比例发生变化

  -->

<swiper autoplay="true" indicator-dots circular>

<swiper-item wx:for="{{swiperList}}" wx:key="goods_id">

<navigation-bar>

<image src="{{item.image_src}}"mode="widthfix"></image>

</navigation-bar>

</swiper-item>

</swiper>

</view>

<!-- 轮播图结束 -->

</view>


//index.js

// 0 引入用来发送请求的方法

import {request} from "../../request/index.js";

//获取应用实例

Page({

/**

   * 页面的初始数据

   */

  data: {

// 轮播图数组

    swiperList:[]

},

/**

   * 生命周期函数--监听页面加载

   */

onLoad: function (options) {

//  // 1.发送数据获取请求

//  wx.request({

//   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',

//   success: (result) => {

//     this.setData({

//       swiperList:result.data.message

//     })

//   },

// })

request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})

.then(result=>{

this.setData({

          swiperList:result.data.message

})

})

},

2.3.获取导航模块数据

获取轮播图数据分为:

  • 1获取导航的接口数据
  • 2是接口数据与导航图标签结合(也就是渲染)

//index.js

// 0 引入用来发送请求的方法

import {request} from "../../request/index.js";

//获取应用实例

Page({

/**

   * 页面的初始数据

   */

  data: {

// 轮播图数组

    swiperList:[],

//导航数组

    cateList:[]

},

/**

   * 生命周期函数--监听页面加载

   */

onLoad: function (options) {

//  // 1.发送数据获取请求

//  wx.request({

//   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',

//   success: (result) => {

//     this.setData({

//       swiperList:result.data.message

//     })

//   },

// })

// request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})

// .then(result=>{

//   this.setData({

//       swiperList:result.data.message

//     })

// })

this.getSwiperList();

this.getCateList();

},

// 获取轮播图数据

getSwiperList(){

request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})

.then(result=>{

this.setData({

          swiperList:result.data.message

})

})

},

//获取导航数据

getCateList(){

request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"})

.then(result=>{

this.setData({

          cateList:result.data.message

})

})

},


<!-- 导航开始 -->

<view class="index_cate">

<navigator wx:for="{{cateList}}"

wx:key="name">

<image mode="widthFix" src="{{item.image_src}}"></image>

</navigator>

</view>

<!-- 导航结束 -->


.index_cate{

display: flex;

border: solid 1rpx black;

}

.index_cate navigator image{

width: 185rpx;

padding: 20rpx;

}




/**index.wxss**/

.index_swiper{

  swiper{

width: 750rpx;

height: 340rpx;

image{

width: 100%;

// 高height不用管 因为image的mode设置为widthFix

    }

  }

}

.index_cate{

display: flex;

  navigator{

padding: 20rpx;

flex:1;/*让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容*/

image{

width: 100%;

    }

  }

}

.index_floor{

.floor_group{

.floor_title{

padding: 10rpx;

image{

border:1rpx solid black;

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 white;

        }

&:nth-child(2),&:nth-child(3){

border-bottom: 10rpx solid white;

        }

image{

width: 100%;

height: 100%;

        }

      }

    }

  }

}


<!--index.wxml-->

<view class="pyg_index">

<!-- 搜索框 开始 -->

<SearchInput>开始</SearchInput>

<!-- 搜索框 结束 -->

<!-- 轮播图开始 -->

<!-- 1.swiper标签默认宽度高度是100%*150px

       2.image标签页存在默认宽度和高度 320px*240px

       3.我们需要设计下轮播图的宽高 原图是 750*340

          我们需要设置图片的高度自适应widthFix,而宽度等于100%

          我们需要设置swiper标签高度和图片的高度一样

          图片标签z自带mode属性,渲染模式

             widthfix:让图片的标签宽高与内容(也就是真正图片)宽高等比例发生变化

  -->

<view class="index_swiper">

<swiper autoplay="true" indicator-dots circular>

<swiper-item wx:for="{{swiperList}}" wx:key="goods_id">

<navigation-bar>

<image src="{{item.image_src}}"mode="widthFix"></image>

</navigation-bar>

</swiper-item>

</swiper>

</view>

<!-- 轮播图结束 -->

<!-- 导航开始 -->

<view class="index_cate">

<navigator wx:for="{{cateList}}" wx:key="name">

<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_titile">

<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">

<image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image>

</navigator>

</view>

</view>

</view>

<!-- 楼层结束 -->

</view>

















































鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序防止多次点击发布时间:2022-07-18
下一篇:
微信小程序点击navigator,页面不跳转发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap