【微信小程序】案例

微信小程序里的商品也能通过微信支付购买 #生活知识# #生活小知识# #电子支付#

效果：

目录

首页效果以及实现步骤

① 新建项目并梳理项目结构

 ② 配置导航栏效果

③ 配置 tabBar 效果

④ 实现轮播图  九宫格效果

首页效果以及实现步骤

① 新建项目并梳理项目结构

   "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],

 效果：

 

 ② 配置导航栏效果

   "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle": "white"
  },

③ 配置 tabBar 效果

素材：

素材放入里面:

效果：

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },

④ 实现轮播图  九宫格效果

效果：

获取轮播图数据列表的接口 【GET】https://www.escook.cn/slides

获取九宫格数据列表的接口 【GET】https://www.escook.cn/categories

WXML:

<swiper indicator-dots circular>

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

<image src="{{item.image}}"></image>

</swiper-item>

</swiper>

<view class="grid-list">

<view class="grid-item" wx:for="{{gridList}}" wx:key="id">

<image src="{{item.icon}}"></image>

<text>{{item.name}}</text>

</view>

</view>

<view class="img-box">

<image src="/images/link-01.png" mode="widthFix"></image>

<image src="/images/link-02.png" mode="widthFix"></image>

</view>

html

JS:

Page({

data: {

swiperList: [],

gridList: []

},

onLoad: function (options) {

this.getSwiperList()

this.getGridList()

},

getSwiperList() {

wx.request({

url: 'https://www.escook.cn/slides',

method: 'GET',

success: (res) => {

this.setData({

swiperList: res.data

})

}

})

},

getGridList() {

wx.request({

url: 'https://www.escook.cn/categories',

method: 'GET',

success: (res) => {

this.setData({

gridList: res.data

})

}

})

},

onReady: function () {

},

onShow: function () {

},

onHide: function () {

},

onUnload: function () {

},

onPullDownRefresh: function () {

},

onReachBottom: function () {

},

onShareAppMessage: function () {

}

})

javascript

运行

WXSS:

/* pages/home/home.wxss */

swiper {

height: 350rpx;

}

swiper image {

width: 100%;

height: 100%;

}

.grid-list {

display: flex;

flex-wrap: wrap;

border-left: 1rpx solid #efefef;

border-top: 1rpx solid #efefef;

}

.grid-item {

width: 33.33%;

height: 200rpx;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

border-right: 1rpx solid #efefef;

border-bottom: 1rpx solid #efefef;

box-sizing: border-box;

}

.grid-item image {

width: 60rpx;

height: 60rpx;

}

.grid-item text {

font-size: 24rpx;

margin-top: 10rpx;

}

.img-box {

display: flex;

padding: 20rpx 10rpx;

justify-content: space-around;

}

.img-box image {

width: 45%;

}

html

案例来自：黑马程序员 

网址：【微信小程序】案例 https://www.yuejiaxmz.com/news/view/1281133

相关内容

【2024届微信小程序经典案例】基于生活小助手小程序的设计与实现
【微信小程序】基础篇
微信小程序JavaScript SDK
微信小程序项目实例——智能用电
微信小程序 iOS type=“nickname”无效
悦运动小程序作品—微信小程序
微信小程序项目实例——今日美食
定制化生活周边产品小程序微信朋友圈案例分享
微信小程序资讯
微信「小程序」推荐

随便看看