1. 技术选型

1.1 小程序的第三方框架

1. 腾讯的 wepy 类似 vue。

2. 美团 mpvue 类似 vue 。

3. 京东 taro 类似 react。

4. uni-app 类似 vue。

5. 滴滴 chameleon。

6. 原生框架 MINA。

1.2 项目的技术

1. 使用原生的框架 MINA。

1.3 后端接口文档

1. 接口文档。

2. 修改appid

修改appid

3. 清除文件中不需要的内容

1. 删除logs 和 utils 文件夹。

2. 清空全局wxss文件。

3. 清空全局app.js文件，使用 wx-app快捷方式创建新的生命周期方法并删除globalData :

//app.js
App({
    //onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
    onLaunch: function(options) {

    },
    onShow: function(options) {

    },
    onHide: function() {

    },
    onError: function(msg) {

    },
    //options(path,query,isEntryPage)
    onPageNotFound: function(options) {

    }
});

4. 在index.json中配置页面标题头:

"navigationBarTitleText": "优购首页"

4. 创建新的目录结构

4.1 创建新功能的文件夹

⽬录名	作⽤
styles	存放公共样式
components	存放组件
lib	存放第三⽅库
utils	⾃⼰的帮助库
request	⾃⼰的接⼝帮助库

4.2 创建页面文件夹

⻚⾯名称	名称
⾸⻚	index
分类⻚⾯	category
商品列表⻚⾯	goods_list
商品详情⻚⾯	goods_detail
购物⻋⻚⾯	cart
收藏⻚⾯	collect
订单⻚⾯	order
搜索⻚⾯	search
个⼈中⼼⻚⾯	user
意⻅反馈⻚⾯	feedback
登录⻚⾯	login
授权⻚⾯	auth
结算⻚⾯	pay

    "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/index/index"
    ]

目录结构

5. 引入字体图标

1. 这里使用的阿里的图标库 iconfont。

2. 官网链接: iconfont字体图标库。

3. 搜索相关的图标并加入到购物车。

4. 添加完成之后点击购物车图标:

点击购物车图标

5. 在展开的侧边栏中新建一个项目用于管理当前图标：

将图标添加到新的项目中

6. 选中font class 之后选择查看在线连链接:

查看图标在线链接

7. 复制该链接打开，复制打开链接中的内容；

样式文件

8. 在styles文件夹下创建一个iconfont.wxss的文件夹，将刚才的样式代码粘贴到里面。

9. 在全局样式文件 app.wxss中引入刚才的样式文件。

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

10. 在独立的任意页面中使用刚才的图标:

success!

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

6. 搭建 tabbar页面

1. 在根目录下新建 icons 目录并导入tabbar需要使用的图标。

2. 在 app.json 中配置 tabbar: 使用快捷方式 输入tab，根据提示编写出结构

"tabBar": {
        "color": "#999",
        "selectedColor": "#FF2D4A",
        "backgroundColor": "#FAFAFA",
        "position": "bottom",
        "borderStyle": "black",
        "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"
            }
        ]
    }

7. 初始化页面样式

1. 在app.wxss全局样式文件中初始化页面样式:在小程序中假如存在一张设计稿的宽度为 375px，小程序中 1px = 2rpx 。

@import "./styles/iconfont.wxss";
page,
view,
text,
swiper,
swiper-item,
image,
navigator {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/*
    主题颜色
    1. 在less中存在变量的知识
    2. 原生的css和wxss也是支持变量的
*/

page {
    /* 定义主题颜色 */
    --themeColor: #eb4450;
    /* 定义统一的字体大小 
    1. 存在一张设计稿大小 是 375px 
        在小程序中 1px = 2rpx
        14px = 28rpx
    */
    font-size: 28rpx;
}

2. 在单独的页面中使用全局样式文件中定义的主题颜色 : --themeColor

view {
    /*  使用主题颜色  */
    color: var(--themeColor);
}

3. 完成头部 navigator的配置 :

完成头部navigator的配置