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

  • Post author:
  • Post category:小程序




小程序的第三方框架

例如常见的:腾讯 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;
}




仅供学习参考使用!!!




不足之处,请指出,蟹蟹!!!



版权声明:本文为zjzounir原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。