微信小程序:11.本地生活小程序制作


开发工具:

  • 微信开发者工具
  • apifox进行创先Mock

项目初始化

  1. 新建小程序项目
  2. 输入ID
  3. 选择不使用云开发,js传统模版
  4. 在project.private.config中setting配置项中配置checkinalidKey:false

梳理项目结构

因为该项目有三个tabbar所以我们要创建三个页面

  1. 首页
  2. 消息
  3. 联系我们

设置文本以及导航栏

配置tabBar效果

复制代码
 "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "image/tabBar/home.png",
      "selectedIconPath": "/image/tabBar/home1.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "image/tabBar/message.png",
      "selectedIconPath": "image/tabBar/message1.png"
    },{
      "pagePath": "pages/contaceus/contaceus",
      "text": "联系我们",
      "iconPath": "image/tabBar/content.png",
      "selectedIconPath": "image/tabBar/content1.png"
    }]
  },

使用阿里矢量图标库下载图片放入,image进行使用,效果如下

设置banner轮播图

使用apifox进行后台模拟Mock数据,使用Mock语法进行数据生成

在js中请求api

复制代码
// 获取轮播图函数
  getSwiperList(){
    wx.request({
    url: 'https://mock.apifox.com/m1/4376673-0-default/api/swiperList',
    method:'GET',
    success:(res)=>{
        console.log(res);
        this.setData({
          swiperList:res.data.image
        })
    }
  })
  },

定义swiperList进行数据存放,然后在wxml中进行数据渲染

复制代码
<!-- 轮播图 -->
<swiper indicator-dots>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.path}}" mode=""/>
  </swiper-item>
</swiper>

设置九宫格

在js中请求数据

复制代码
// 获取九宫格函数
  getGrideList(){
    wx.request({
      url: 'https://mock.apifox.com/m1/4376673-4020798-default/api/gridelist',
      method:'GET',
      success:(res)=>{
        console.log(res.data.gridelist);
        this.setData({
          gridList:res.data.gridelist
        })
      }
    })
  },

在wxml中进行数据渲染

复制代码
<!-- 九宫格区域 -->
<view class="gride-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}" mode=""/>
    <text>{{item.name}}</text>
  </view>
</view>

wxss样式

复制代码
/* 九宫格样式设置 */
.gride-list{
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1px solid #efefef;
}
.grid-item{
  width: 33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}

.grid-item image {
  width: 60rpx;
  height: 60rpx;
}

.grid-item text{
  margin-top: 10rpx;
  font-size: 24rpx;
}

底部图片的设置

wxml设置

复制代码
<!-- 图片区域 -->
<view class="img-box">
  <image src="../../image/link01.png" mode="widthFix heightFix"/>
  <image src="../../image/link02.png" mode="widthFix heightFix"/>
</view>

wxss设置

复制代码
/* 底部样式 */
.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 340rpx;
  height: 300rpx;
}

样式总览

相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
向往鹰的翱翔2 天前
BKY莱德因:5大黑科技逆转时光
大数据·人工智能·科技·生活·健康医疗
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
华新嘉华DTC创新营销2 天前
华新嘉华:AI搜索优化重塑本地生活行业:智能推荐正取代“关键词匹配”
人工智能·百度·生活
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode