小程序

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
        */
    }
})
复制代码

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

1. 在小程序 详情 界面 勾选上 不校验合法域名,web-view(业务域名),TLS版本以及HTTPS证书
2. 配置请求接口 见 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
            })
        });
    }
})
复制代码

将小程序请求的域名添加到后台

1. 进入 微信公众平台
2. 开发
3. 开发设置
4. 服务器域名
5. 添加request合法域名

获取本地存储的数据

web中的本地存储 和 小程序中的本地存储的区别：

1. 写代码的方式不一样

   1. web中：

      1. 存储方式：localStorage.setItem("key", "value");
      2. 获取方式： localStorage.getItem("key");

   2. 小程序中：

      1. 存储方式：wx.setStorageSync("key", "value");
      2. 获取方式：wx.getStorageSync("key", "value");

2. 存的时候 有没有做类型转换

   1. web：不管存的数据是什么类型的数据，最后都会通过toString（）方法转换为字符串类型的数据
   2. 小程序：不存在数据的类型转换

// 接口返回的数据
Cates: [],
onLoad: function(options) {
    // 获取本地存储中有没有旧数据
    const Cates = wx.getStorageSync("cate");

    // 判断本地是否存在
    if(!Case) {
        // 不存在  发送请求数据
        this.setCates();
    }else {
        // 有旧的数据
        // 定义数据过期的时间
        if(Date.now() - Cates.time > 1000 * 10) {
           // 重新发送请求
            this.getCates();
        } else {
            this.Cates = Cates.data;
            // 渲染数据
        }
    }
}

// 获取请求的数据
getCates() {
    // 把接口的数据存储到本地存储中
	wx.setStorageSync("cates", {time：Date.now(),data: this.Cates});
}
复制代码

定义公共的url

在request.js文件中，封装请求方法

export const request=(params) => {
    // 定义公共的url
    const baseUrl = "https://api.zbsb.cn/api/public"
    return new Promise((resolve, reject) => {
        wx.request({
            // 解构传递的参数
            ...params,
            url: baseUrl + params.url;
            success: (result) => {
                resolve(result);
            },
            faile: (err) => {
            	reject(err);
        	}
        });
    });
}
复制代码

小程序支持es7的async语法

1. 在微信开发者工具中勾选es6转es5语法

2. 在github里面下载regenerator库中的runtime.js

3. 在小程序目录文件下新建文件夹/lib/runtime/runtime.js，将代码拷贝进去

4. 在每一个需要使用async语法的页面js文件中，引入文件

   import regeneratorRuntime from '../lib/runtime/runtime';
   复制代码
   

   使用asyn语法：

   async getCates() {
       // 1 使用es7的async await来发送请求
       const res=await request({url:"/categories"});
   }
   复制代码
   

小程序url传参

// 传递参数
<navigator wx:for="Cates" wx:for-item="item" wx:for-index="index" wx:key="id" url="/pages/goods/index?cid={{item.cid}}"></navigator>

// 拿取参数
onLoad：function(options) {
	consol.log(options);  // 打印输出options的值
}
复制代码

封装tab切换组件

封装的Tab组件中：

properties: {
    tabs: Array,
    value: []
}

<style>
    .tabs-title {
     	display: flex;
        padding: 15rpx 0;
    }
	.title-item {
        display: flex;
        justify-content: center;
        align-item: center;
        flex: 1;
    }
	.active {
        color: red;
        border-bottom: 1rpx solid red;
    }
</style>

<view class="tabs">
    <view class="tabs-title">
    	<view wx:for="{{ tabs }}" wx:key="id" 
		class="title-item {{item.isActive?'active':''}}"
		bindtap="handleItemTap"  data-index="{{ index }}"
		>   
            {{ item.value }}
         </view>
    </view>
	// 切换内容
	<view class="tabs-content">
    	<slot></slot>
    </view>
</view>


methods: {
    // 点击事件
    handleItemTap(e) {
        // 获取点击的索引
        const {index} = e.currentTarget.dataset;
        // 触发父组件中的事件
        this.triggerEvent("tabsItemChange", {index});
    }
}

复制代码

使用封装的Tab组件：

//bindtabsItemChange 监听自定义事件
<Tab tabs="{{ tabs }}" bindtabsItemChange="handelTabsItemChange">
	<block wx:if="{{tabs[0].isActive}}">1</block>
    <block wx:if="{{tabs[1].isActive}}">2</block>
    <block wx:if="{{tabs[2].isActive}}">3</block>
</Tab>

// 标题的点击事件
bindtabsItemChange(e) {
  // 获取被点击的标题的索引
  const {index} = e.detail;
  // 修改原数组
  let {tabs} = this.data;
  tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
  // 赋值到data中
  this.setData({
    tabs
  });
}
复制代码

滚动条触底事件（页面上滑事件）

滚动条触底，加载下一页数据

总页数 = Math.ceil(总条数 / 每页显示的数据数)

// 获取商品数据列表
async getGoodsList() {
    const res=await request({url:"/goods/search",data:this.QueryParams});
    // 获取总条数
    const total = res.total;
    // 计算总页数
    this.totalPage = Math.ceil(total / this.QueryParams.pagesize);
    // 拼接数组
    this.setData({
        goodsList: [...this.data.goodsList,...res.goods]
    });
    // 关闭下拉刷新的窗口
    wx-stopDownRefresh();
}
// 滚动条触底事件
onReachBottom() {
    // 判断还有没有下一页数据
    if(this.QueryParams.pagenum >= this.totalPage) {
        // 当前页码 > 总页数    没有下一页
        
    }
    else {
        // 还有下一页  当前页码++ 重新发送请求  数据请求回来后要对data中的数组进行拼接
        this.QueryParams.pagenum++；
        this.getGoodsList();
    }
}