微信小程序开发【Coffee Shopping】（1）

KiriSoyer

已于 2024-05-28 10:50:54 修改

阅读量883

点赞数 7

文章标签：微信小程序小程序前端框架

于 2024-05-11 16:03:36 首次发布

本文链接：https://blog.youkuaiyun.com/Shryuie/article/details/138706998

版权

1.环境准备

微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
前端常用网站集合：http://www.wwp666.cn/
微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/
对app.json的相关配置，参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
Vant Weapp 开发文档：https://vant-ui.github.io/vant-weapp/#/home

2.创建Coffee项目

2.1 新建JS-基础模板

如果只是学习，使用测试号即可

在这里插入图片描述

文件目录结构如下

在这里插入图片描述

2.2 更改导航栏标题

app.json

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Coffee",
    "navigationBarBackgroundColor": "#07c160"
  }

2.3 新建Page页面的两种方式

2.3.1 在app.json配置文件直接写入

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/menu/menu",
    "pages/shopbag/shopbag",
    "pages/my/my",
    "pages/test/test"
  ]

Tips：这种方式有一个Bug，即直接删除文件夹，第二次使用这种方法生成页面的话，会有两个页面缺失。（不推荐）

2.3.2 手动创建Page页面

在这里插入图片描述

2.4 创建存放图片资源目录 images（根目录）

在这里插入图片描述

3.实现底部tab栏

app.json

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index", //页面路径
        "text": "首页", //tab 上按钮文字
        "iconPath": "images/icons/home.png", //图片路径
        "selectedIconPath": "images/icons/home_active.png" //选中图片路径
      },
      {
        "pagePath": "pages/menu/menu",
        "text": "菜单",
        "iconPath": "images/icons/menu.png",
        "selectedIconPath": "images/icons/menu_active.png"
      },
      {
        "pagePath": "pages/shopbag/shopbag",
        "text": "购物袋",
        "iconPath": "images/icons/shopbag.png",
        "selectedIconPath": "images/icons/shopbag_active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/icons/my.png",
        "selectedIconPath": "images/icons/my_active.png"
      }
    ],
    "selectedColor": "#0c34ba" //选中文字颜色
  }

在这里插入图片描述

扩展：轮播图组件的使用方式

<!-- swiper 里面只能添加 swiper-item 标签 -->
<!-- 需要轮播的图片或者文字只能放在 swiper-item 里面 -->
<!-- 一个 swiper-item 就是一张轮播图 -->
<!-- 在微信小程序中 {{}} 表示一个变量 -->
<!-- 属性值不填默认为True -->
<!-- indicator-dots 是否显示面板指示点-->
<!-- indicator-active-color 当前选中的指示点颜色-->
<!-- autoplay 是否自动切换-->
<!-- circular 是否采用衔接滑动-->
<!-- interval 自动切换时间间隔-->
<!-- duration 滑动动画时长-->
<!-- vertical 滑动方向是否为纵向-->
<swiper indicator-dots indicator-active-color="#07c160" autoplay circular interval="1000" duration="1000" vertical>
    <swiper-item>
      <image src="https://img2.baidu.com/it/u=3248444863,3972533161&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1115" mode=""/>
    </swiper-item>
      
    <swiper-item>
      <image src="/images/icons/home.png" mode=""/>
    </swiper-item>
     
    <swiper-item>
      <image src="https://img2.baidu.com/it/u=3248444863,3972533161&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1115" mode=""/>
    </swiper-item>
</swiper>