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

早过忘川 提交于 2020-02-28 07:25:20

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"
  },

效果如下:
在这里插入图片描述

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!