微信小程序搭建项目

一、项目介绍

这是一款小米商城的小程序项目，其中包括登陆，购物车添加商品等操作，用到了本地存储，全局变量等技术实现，和vant组件。

二、项目创建

2.1 创建项目

我么该项目用到了vant组件，所以我们创建项目之后，要先配置vant相关的依赖
第一步 创建一个平平无奇的项目

2.2 安装依赖

注意！ 微信开发助手目前只支持npm，不支持pnpm

第一步、 打开我们创建文件的终端输入指令

 pnpm init -y //初始化项目

第二步、 安装vant的依赖

npm i @vant/weapp -S --production 

把app.json里的"style": "v2"给删掉，这个容易造成样式混乱

第三步、 点击工具构建npm

这就已经创建好了 ，接下来就可以去vant官方找到自己需要的组件引进来可以直接使用了。

2.3 vant的使用

比如我们现在需要用到一个button按钮，就可以去vant官方学习下配置

我们照着上面的步骤来
先到当前页面的json文件里配置

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

之后在项目里使用标签

<van-button type="default">默认按钮</van-button>

这样就配置好了 更多组件可以到vant官方学习
链接地址：https://vant.pro/vant-weapp/#/button

三、项目实施

3.1 项目思路介绍

接下来我们就可以开始写项目了，首先可以看到首页的ui ，顶部是一个轮播图，下面都是我们最喜欢的贴图，一个for循环全搞定 ，像这种项目，我们肯定是要先配置好了各个页面的文件，和tab栏的跳转。

3.2 创建页面所需文件

在pages文件夹里我们先配置各个页面的主件

3.3 tab栏跳转

小程序的tab栏很简单，我们只需要在全局的app.json文件配置“tabBar”即可。
pagePath：页面路径，
text:页面名称,
iconPath：跳转前的图标，
selectedIconPath：跳转后的图标，

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#ED712E",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/assets/icons/home.png",
        "selectedIconPath": "/assets/icons/home_active.png"
      },
      {
        "pagePath": "pages/classification/classification",
        "text": "分类",
        "iconPath": "/assets/icons/category.png",
        "selectedIconPath": "/assets/icons/category_active.png"
      },
      {
        "pagePath": "pages/find/find",
        "text": "发现",
        "iconPath": "/assets/icons/discovery.png",
        "selectedIconPath": "/assets/icons/discovery_active.png"
      },
      {
        "pagePath": "pages/ShoppingCart/ShoppingCart",
        "text": "购物车",
        "iconPath": "/assets/icons/cart.png",
        "selectedIconPath": "/assets/icons/cart_active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "/assets/icons/mine.png",
        "selectedIconPath": "/assets/icons/mine_active.png"
      }
    ]
  }

一个tab栏就这样完成了，当前页面的图标会随着当前跳转的页面而变化

3.4 轮播图

微信开发给我们提供了轮播图的组件，不用我们自己手写逻辑，直接配置相关需求即可。
轮播图片的渲染用到了wx:for 和vue的v-for一样，顾名思义就是循环，可以将数据循环的每一项取出来，默认是item，我这里的轮播图图片的数据在item的slide_url里面，所以我们直接胡须语法{{item.slide_url}}

 <!-- 轮播图 -->
<view>
    <swiper class="swiper" indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{swiper}}" wx:key="*this">
          <swiper-item>
          <image class="swiper_image" src="{{item.slide_url}}" mode=""/>
          </swiper-item>
        </block>
  </swiper>
</view>

js文件配置

  data: {
   
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500,
   
  },
  
onShareAppMessage() {
    return {
      title: 'swiper',
      path: 'page/component/pages/swiper/swiper'
    }
  }

项目总结

本次项目用到了很多微信开发官方文档的组件和api，很大程度的方便了我们的开发，比如轮播图就是一个很典型的例子，更多api组件可以到微信官方文档学习一下。
地址：https://developers.weixin.qq.com/miniprogram/dev/api/