微信小程序—优购项目—项目搭建

微信小程序—优购项目—项目搭建

1.先填入自己的appid：

2.搭建目录结构：
a.先清除无关代码

1. 先删除全局page文件的日志页面
2. 删除全局page文件的wxss文件内容
3. 删除全局page文件的js文件内容，并增加wx-app内容
4. 删除index文件wxss文件内容和wxml文件内容
5. 删除index文件的js文件内容，并增加wx-page内容
6. 在index文件的json文件中新增全局json文件的navigationBarTitleText属性命名首页

b.在新建的项目自带的一些文件夹基础下新增如下目录

3.搭建项目页面：

4.引入iconfont图标：
链接：阿里巴巴iconfont
先在styles文件夹下新建iconfont.wxss文件

先点font class，本方法将以类的方式引用图标，再点击生成链接，最后复制代码至iconfont.wxss文件，接着在全局wxss文件中引入iconfont.wxss链接

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

接着我们需要在哪个页面使用图标就用text标签引用相关类名先放iconfont 再＋想要的图片类名

<view> <text class="iconfont icon-shoucang "></text></view>

5.搭建tabBar：
在全局json文件中加入tabBar对象

6.页面初始化：
因为小程序语法不支持通配符“*”，但支持less语法
故初始化页面应该用page

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

7.定义页面的主题颜色及字体大小：
在全局wxss文件中

page{  
--themeColor:#eb4450;  
font-size: 28rpx;
}

字体大小要能适应屏幕大小变化，font-size=750/设计稿屏幕*字体大小，假如本项目设计稿屏幕宽度375px字体大小为14px，则font-size=750/ 375 *14=28rpx

自定义主题颜色的使用：
在index的wxss文件中：

view{  
color: var(--themeColor);
}

color：var（自定义主题颜色）

效果：