使用wepy开发微信小程序商城第二篇：路由配置和页面结构

时间：2024-04-21 09:35:52

使用wepy开发微信小程序商城

第二篇：路由配置和页面结构

前言：

最近公司在做一个微信小程序的项目，用的是类似于vue的wepy框架。我也借此机会学习和实践一下。

小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/

wepy官方文档：https://tencent.github.io/wepy/document.html#/

wepy小程序项目初始化：wepy小程序入门之项目初始化

今天的目标是开发微信小程序的底部导航

效果图：

使用wepy开发微信小程序商城第二篇：路由配置和页面结构

1.打开编辑器（我用的是vscode），然后打开微信开发者工具，选择开发的项目

这里注意，记得要执行 npm run dev，否则微信开发者工具里看不到修改的效果。

2.在目录src/pages里面新建几个页面，如首页、分类、购物车、会员中心

wepy构建项目会自动生成的index.wpy，这个文件先保留，里面有一些组件示例可以参考。

复制index.wpy4次，保留代码结构，内容删掉。分别命名为home.wpy（首页）,category.wpy（分类），cart.wpy（购物车）, member.wpy（会员中心）

使用wepy开发微信小程序商城第二篇：路由配置和页面结构

3.打开app.wpy

export default class extends wepy.app {

     config = {

    }

}

（1）配置pages和window

pages用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置
数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
window 用于设置小程序的状态栏、导航条、标题、窗口背景色
config = {

  pages: [

    'pages/home', // 首页

    'pages/category', // 分类

    'pages/cart', // 购物车

    'pages/member' // 会员中心

  ],

  window: {

    backgroundTextStyle: 'light',

    navigationBarBackgroundColor: '#fff',

    navigationBarTitleText: 'WeChat',

    navigationBarTextStyle: 'black'

  },

}

（2）配置tabBar（重点！）

在config对象里面，window一项下面，接着写代码，如下：

"tabBar": {

  "color": "#999999",

  "selectedColor": "#ff6a3c",

  "backgroundColor": "#ffffff",

  "borderStyle": "black",

  "list": [{

    "pagePath": "pages/home",

    "text": "首页",

    "iconPath": "images/icon_home.png",

    "selectedIconPath": "images/icon_home_active.png"

  }, {

    "pagePath": "pages/category",

    "text": "分类",

    "iconPath": "images/icon_classify.png",

    "selectedIconPath": "images/icon_classify_active.png"

  }, {

    "pagePath": "pages/cart",

    "text": "购物车",

    "iconPath": "images/icon_shop_cart.png",

    "selectedIconPath": "images/icon_shop_cart_active.png"

  }, {

    "pagePath": "pages/member",

    "text": "会员中心",

    "iconPath": "images/icon_info.png",

    "selectedIconPath": "images/icon_info_active.png"

  }]

}

4.完成，效果如上图。

相关文章