使用阿里字体图标库使用阿里字体图标库在阿里图标官网，将要使用的图标，加入购物车将图标，加入项目小程序 pyg --

使用阿里字体图标库

在阿里图标官网，将要使用的图标，加入购物车
将图标，加入项目
小程序 pyg ---》 Font class（通过类的方式来使用图标） ---》查看在线链接
在项目的styles文件夹中，创建iconfont.wxss文件
打开链接，将链接中的内容复制到iconfont.wxss文件中

使用字体图标库中的字体

在全局wxss文件中，引入wxss文件

@import "./styles/iconfont.wxss"
复制代码

使用

<text class="iconfont icon-shoucang"></text>
复制代码

tabBar

在app.json中配置

tbaBar: {
    "color": "",	//未选中的字体的颜色
    "selectedColor": "",	//选中后的字体的颜色
    "backgroundColor": "",  // 背景色
    "position": "",	//定位
    "borderStyle": "",   //边框样式 
    "list": [
        {
            "pagePath": "",   // 页面的路径
            "text": "",   // 标题的名称
            "iconPath": "",   // 未选中的图标路径
            "selectedIconPath": ""   // 选中后的图标的路径
        }
    ]
}
复制代码

页面样式的初始化

注意：在小程序中是不支持通配符（*）的

在app.wxss文件中

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


/*
	主题颜色
	1. less 中是存在  变量  的
	2. 原生的css和wxss 也是支持 css的
*/
page {
	--themeColor: #eb4500;
	// 设计稿大小为 375px 时,1px = 2rpx,14px = 28rpx
	font-size: 28rpx;
}
复制代码

使用主题颜色:

view {
	color: var(--themeColor);
}
复制代码

头部

设置主题色:

"window": {
    "backgroundTextStyle": "light",   // 字体颜色
    "navigatorBarBackgroundColor": "#2b4500",  // 背景色
    "navigatorBarText": "唯品会",  // 字体提示
    "navigatorBarTextStyle": "white",  // 字体样式    
}
复制代码

使用接口数据

Page({
    data: {
        swiperList: []
    },
    // 页面加载事件
    onLoad: function() {
        /*
        	1. 发送异步请求 获取使用的数据
        */
        wx.request({
        	url: '',  // 接口地址
        	success: (result) => {
        		// 请求成功 给swiperList数组赋值
        		this.setData({
        			swiperList: result.data.message
        		})
        	}
        	
        });
        /*
        	wx.request异步请求太多了就会产生   回调地狱   的问题
        	
        	解决方法:  es6中的promise
        */
    }
})
复制代码

请求报错(两种解决方法):

在小程序 详情 界面勾选上 不校验合法域名,web-view(业务域名),TLS版本以及HTTPS证书
配置请求接口见 8.7.将小程序请求的域名添加到后台

解决回调地狱的问题(es6的promise)

在项目的request文件夹中创建index.js文件

通过封装方法,然后调用函数传递参数的方式来使用

// 同时发送异步代码的次数
let ajaxTime=0;
export const request=(params) => {
    ajaxTime++;
    // 数据加载效果
    wx.showLoding({
       title: "加载中",
        mask: true
    });
    return new Promise((resolve, reject) => {
        wx.request({
            // 解构传递的参数
            ...params,
            success: (result) => {
                resolve(result);
            },
            faile: (err) => {
            	reject(err);
        	},
            // 不管是成功还是失败都会调用这个函数
            complete: () => {
                ajaxTime--;
                if(ajaxTime === 0) {
                   // 关闭正在等待的图标
                	wx.hideLoading();
                }                
            }
        });
    });
}
复制代码

使用封装好的请求方法:

//  引入封装文件 (注意: 一定要把路径补全)
import { request } from '../../request/index.js';  // 这里引入的是封装的request函数

Page({
    data: {
        swiperList: []
    },
    // 页面加载事件
    onLoad: function() {
        /*
        	1. 发送异步请求 获取使用的数据
        */
        /*
            wx.request({
                url: '',  // 接口地址
                success: (result) => {
                    // 请求成功 给swiperList数组赋值
                    this.setData({
                        swiperList: result.data.message
                    })
                }

            });
        */
        /*
        	wx.request异步请求太多了就会产生   回调地狱   的问题
        	
        	解决方法:  es6中的promise
        */
        
        // 调用方法
        this.getSwiperList();
        
    },
    // 调用封装好的方法
    getSwiperList() {
        //  这里填充的数据会替换掉request方法中的...params,
        request({ url: 'htltps://api/zbtbs/home/swiperList'}); 
        //  数据获取成功
        .then (result => {
            this.setData({
                swiperList: result.data.message
            })
        });
    }
})