【微信小程序】黑马优购--01项目搭建

小程序的第三方框架有

1.腾讯wepy 类似Vue

2.美团mpvue 类似Vue

3.京东taro 类似react

4.滴滴 chameleon

5.uni-app 类似Vue

6.原生框架 MIMA

本项目使用原生框架 

1.接口文档 

2.帮助文档

   1.小程序开发文档

   2.阿里巴巴字体 iconfont

3.项目搭建 

3.1新建小程序项目

填入自己的APPID

3.2搭建项目结构

 

3.3搭建项目的页面

3.4引入字体图标

1.打开阿里巴巴字体图标网站

 阿里巴巴字体 iconfont

2.选择图标

3.添加至项目

4.查看在线链接然后复制

在新的页面打开看到代码后全选复制，然后返回微信开发工具找到新建的style文件粘贴 

 

5.将样式文件由CSS修改为wxss

 

6.小程序中引入

 在app.wxss中

/**app.wxss**/
@import "./styles/iconfont.wxss"

 最后在那个页面要使用只需要输入,xxx是你要使用的图标名称

3.5搭建项目的tabbar结构

参照小程序基础篇中tabbar的知识点

 

"tabBar": {
    "color": "#2c2c2c",
    "selectedColor": "#d81e06",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./icons/home.png",
        "selectedIconPath": "./icons/home-o.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "./icons/category.png",
        "selectedIconPath": "./icons/category-o.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "./icons/cart.png",
        "selectedIconPath": "./icons/cart-o.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "./icons/my.png",
        "selectedIconPath": "./icons/my-o.png"
      }
    ]
  },
  

3.6初始化页面样式

在app.wxss中 

/**app.wxss**/
@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;
   /* 定义充一字体大小 假设设计稿大小是375px 
   1px=2rpx
   */
   font-size: 28rpx;
 }

 在那个页面要使用自定义主题颜色，就在那个页面的wxss中

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