微信小程序项目（南师中北生活圈）（一）搭建步骤

小程序的第三方框架

例如常见的：腾讯 wepy类似vue，美团 mpvue类似vue，京东 taro，滴滴 chameleon，uni—app类似vue。

此项目使用的原生框架MINA

1、搭建项目目录结构

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

如下图所示：

2、搭建项目的页面

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

如下图所示（在page文件中会显示如下文件）：

3、引入字体图标

阿里巴巴字体图标库 iconfont，链接: https://www.iconfont.cn/.

1、搜索购物车，选择我们想要的图标
2、点击购物车，点击添加至项目
3、测试项目如下显示

可以新增一个文件夹，选择我们要使用的如下图所示的这些图标，点击font class，可根据直接喜好选择，这边附上我的选择引入到我们的项目当中链接: //at.alicdn.com/t/font_2100755_gguxbeegnvg.css.

点击链接，复制其中的代码至styles中，新建文件iconfont.wxss，这样我们使用的外网上的，不使用本地的了。

综上导入完成，测试下是否能够使用

1、打开page下文件，在app.wxss进行导入
2、在index文件测试是否能够使用（这边测试的是支付图标，代码在iconfont.wxss中可以查看到对应的图标名称）

//1、导入
@import "./styles/iconfont.wxss";

//2、测试
<view>首页：
<text class="iconfont iconzhifu:before"></text>
</view>

如图所示：

4、搭建页面下端的tabar结构

新增文件夹icon，放入我们要使用的图片
链接: 底部图片的链接.提取码：uicj

如图所示：

在page下app.json文件中添加tabar，下图中列举了两个，首页和分类，如果List中只写一个的话是会报错的。

如下图所示会显示对应的图标：

写完剩下的两个，一共是4个，包括首页、分类、购物车和我的，List中的代码如下：

"list": [
      {
        "pagePath": "pages/index/index",		//对应的页面
        "text": "首页",
        "iconPath": "icon/home.png",		//点击之前样式
        "selectedIconPath": "icon/home-o.png"		//点击之后样式
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icon/category.png",
        "selectedIconPath": "icon/category-o.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icon/cart.png",
        "selectedIconPath": "icon/cart-o.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icon/my.png",
        "selectedIconPath": "icon/my-o.png"
      }
    ]

再细致修改下，tabar中的未选中以及选中和背景的颜色，代码如下所示：

"tabBar": {
    "color": "#999",		//未选中时的颜色
    "selectedColor": "#ff2d4a",		//选中时候的颜色
    "backgroundColor": "#fafafa",		//背景色
    "position": "bottom",
    "borderStyle": "black",

效果图，如下所示：

5、初始化页面样式

顶部的导航栏颜色，以及字体颜色，在全局配置文件app.json中编写代码

对样式进行初始化，打开全部文件，app.wxss中添加如下代码

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

/*在微信小程序中不支持通配符  例如 ‘*’   */

page,view,text,swiper,swiper-item,image{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/*主题颜色  通过变量来实现
1 less 中 存在  变量这个知识
2 原生的css和wxss也是支持 变量

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

仅供学习参考使用！！！

不足之处，请指出，蟹蟹！！！