微信小程序的项目结构搭建

1. 帮助⽂档

1.⼩程序开发⽂档
2.阿⾥巴巴字体iconfont

2.项⽬搭建

2.1.新建⼩程序项⽬

填入自己的appid

2.2.搭建⽬录结构

在项目中添加如下文件夹。

2.3.搭建项⽬的⻚⾯

在app.json 中设置添加项目的所有页面

  "pages": [
      "pages/index/index",
      "pages/category/index",
      "pages/goods_list/index",
      "pages/goods_detail/index",
      "pages/cart/index",
      "pages/collect/index",
      "pages/order/index",
      "pages/search/index",
      "pages/user/index",
      "pages/feedback/index",
      "pages/login/index",
      "pages/auth/index",
      "pages/pay/index"
  ],

项目代码的结构如下：

2.4.引⼊字体图标

1. 打开阿⾥巴巴字体图标⽹站
2. 选择的图标
3. 添加⾄项⽬
4. 下载到本地
5. 将样式⽂件由css修改为wxss
6. ⼩程序中引⼊

将需要的图标加入购物车，然后点击添加至项目按钮。

点击Font class，并点击查看在线链接，显示css文件的路径

复制链接，在浏览器中打开，复制代码。

在styles目录下新建 iconfont.wxss 文件，将复制的内容粘贴。

在app.wxss 中 导入 iconfont.wxss，如下：

@import "./styles/iconfont.wxss";

这样就可以在项目中使用使用该图标了。

<text class="iconfont icon-shouyemw"></text>

2.5. 搭建项⽬tabbar结构

新建icons目录，将tabbar需要的图标粘贴到该目录中。

如下8张图标：

在app.json中添加tabbar：

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/home.png",
      "selectedIconPath": "icons/home-o.png"
    },
    {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "icons/category.png",
      "selectedIconPath": "icons/category-o.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "icons/cart.png",
      "selectedIconPath": "icons/cart-o.png"
    },
    {
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "icons/my.png",
      "selectedIconPath": "icons/my-o.png"
    }]
  },

2.6 navigationBar

app.json中设置navigationBar的背景颜色和字体颜色

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "小鸣优购",
    "navigationBarTextStyle": "white"
  },

效果如下：