本篇博客将实时更新我学习使用微信小程序搭建范例黑马优购的过程。

教程地址:https://www.bilibili.com/video/BV1nE41117BQ?p=47

参考文档:https://www.showdoc.cc/128719739414963

一、 新建小程序项目

打开微信开发者工具,新建小程序项目,然后执行如下操作:

  1. app.json中删除”pages/logs/logs”

  2. app.json中的window字段改动如下:"navigationBarTitleText": "黑马优购"

  3. pages中logs’文件夹删除

  4. app.wxss中删除全部内容

  5. app.js中删除全部代码,并在vscode中输入wx-app,即可自动补全所需必要代码,再删除globleData

  6. pages中index.wxml, index.wxss删除全部语句, index.js中保留必要语句,同上在vscode中输入wx-page

  7. pages/index/index.json中,新增如下:"navigationBarTitleText": "优购首页"

  8. unils文件夹删除

    至此,目录结构已无冗余,接下来我们新增项目必要的文件夹和文件

## 二、 搭建目录结构

把目录结构改为如下图所示:

image-20200625205252095

各个目录的作用如下:

  1. style: 存放公共样式
  2. components: 存放组件
  3. lib: 存放第三方库
  4. untils: 自己的帮助库
  5. request: 自己的借口帮助库

三、 搭建项目的页面

image-20200625210001721

在app.json中,修改pages字段,如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"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"

],

四、 引入字体图标

  1. 打开阿里巴巴字体图标库,地址https://www.iconfont.cn/,选择图标后加入购物车。![image-20200625212648119](https://i.loli.net/2020/06/28/WEayt6IYfjlrzQD.png)

  2. 复制下图中链接在浏览器中打开,页面打开后复制页面内所有的内容。

  3. 在style中新建iconfont.wxss,粘贴刚才复制的全部内容。

  4. 在app.wxss中导入字体图标,app.wxss加入如下代码@import "./styles/iconfont.wxss";

  5. 用法测试:在pages/index/index.wxml中输入如下代码

    1
    2
    3
    <view>首页	
    <text class="iconfont incon-shoucang1"></text>
    </view>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39

    ## 五、 搭建项目tabber结构

    1. 在app.json的window字段同层级下新增如下代码:

    ```
    "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
    {
    "pagePath": "pages/index/index",
    "text": "首页",
    "iconPath": "icons/home.png",
    "selectedIconPath": "icons/home1.png"
    },
    {
    "pagePath": "pages/category/index",
    "text": "分类",
    "iconPath": "icons/cart.png",
    "selectedIconPath": "icons/cart1.png"
    },
    {
    "pagePath": "pages/cart/index",
    "text": "购物车",
    "iconPath": "icons/category.png",
    "selectedIconPath": "icons/category1.png"
    },
    {
    "pagePath": "pages/user/index",
    "text": "我的",
    "iconPath": "icons/me.png",
    "selectedIconPath": "icons/me1.png"
    }
    ]
    },
  6. 各字段说明详见开发者文档。

六、初始化页面样式

  1. 在app.wxss中加入如下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    page,view,text,swiper,swiper-item,image,navigator{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    }

    /*
    主题颜色
    支持变量
    */
    page{
    --themeColor:#eb4450;
    font-size: 28rpx;
    }
  2. 使用主题颜色

    在index.wxss中加入如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    /* pages/index/index.wxss */
    view{

    /* 使用主题颜色 */

    color:var(--themeColor);

    }