接口文档地址：
视频地址：
黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili
后面也许可以通过快速搭建mock来获取数据（这个工作肯定要会）
如果真的要用起来，肯定还是要搭建起自己的后台。
通过样式方式引入字体图标
微信小程序中不支持通配符“ * ”
页面初始化
?主体颜色定义成变量
?
?微信小程序单行注释没有用
单行注释没有用（//）
要 用多行注释（/*? */）
写less文件，变成wxss文件？
要在vscode 中下载一个插件，然后就可以了写less文件了。
发送请求 ，要么记得把勾去掉，要么去开启请求合法域名
引入的路径要写全，包括后缀名
这个东西不是绝对的，但是有的时候可能会出错
flex布局中，flex：1是什么意思
Flex 布局语法教程 | 菜鸟教程 (runoob.com)
如果a的flex=1，而b=2，则b的宽度应该是a的两倍。
除了这个，父元素经常设置这些属性，来实现各种效果。?
display：flex；
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
html中img默认的宽高
img好像没有默认的宽高，这里只说了不给图片设置宽高容易出错。
HTML <img> 标签的 height 和 width 属性 (w3school.com.cn)
伪类选择器
包括选定指定的第几个元素或者某几个元素
如果要用的时候，可以查查有没有对应的伪类选择器。
?vw
Promise
这部分 其实之前看过，不过忘了里面几个默认的参数是什么意思
(66条消息) 超详细!Vue-coderwhy个人学习笔记(五)（Day8-Day9）_coderYYY的博客-CSDN博客_coderwhy笔记
就是如果函数执行成功，则执行resolve函数，括号里面的“hello world” 是参数，然后传到 .then中执行，参数data的值就是??“hello world”
同理，如果执行失败，就执行 reject函数。
navigator
这个元素是默认是块元素，可以设置宽高。
(66条消息) 关于微信小程序的navigator标签_笑到世界都狼狈的博客-CSDN博客_navigator标签
swiper组件的默认样式
楼层部分图片样式设计有点意思
主要是用到了浮动。
像这样的
用浮动可以直接搞定了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="a"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</body>
</html>
<style>
.a{
width: 33.33%;
height: 200px;
background-color: red;
float: left;
}
.b1,.b2,.b3,.b4{
width: 33.33%;
height: 100px;
border: 5px solid black;
float: left;
box-sizing: border-box;
}
</style>?效果图：
数据整理
首页看页面中要达到这种效果需要怎样格式的数据，再看接口给我们提供的数据格式，然后再考虑 在哪里把数据格式进行转换。
数据渲染不出来
index.wxml
<view class="item_content"
wx:for-item="item2"
wx:for-index="index2"
wx:for="{{new_FloorList}}"
wx:key="index2"
>
<view class="content_left">
<navigator url="{{item2.a[0].navigator_url}}">
<image mode="widthFix" src="{{item2.a[0].image_src}}"></image>
</navigator>
</view>
<!-- <view class="content_right">
<navigator
wx:for="{{item2.b}}"
wx:for-item="item3"
wx:for-index="index3"
url="{{item3.navigator_url}}"
wx:key="index3"
>
<image mode="widthFix" src="{{item3.image_src}}"></image>
</navigator>
</view> -->
</view>js文件中的代码是
import { request } from "../../request/index.js";
Page({
/**
* 页面的初始数据
*/
data: {
swiperList:[],
cateList:[],
floorList:[],
new_FloorList:[],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 函数调用要写括号啊，这也不报错，天哪
this.getSwiperList();
this.getCateList();
this.getFloorList();
},
getSwiperList(){
request({url:"/home/swiperdata"})
.then(res=>{
this.setData({
swiperList:res.data.message
})
})
},
getCateList(){
request({url:"/home/catitems"})
.then(res=>{
this.setData({
cateList:res.data.message
})
})
},
getFloorList(){
request({url:"/home/floordata"})
.then(res=>{
this.setData({
floorList:res.data.message
})
// console.log(this.data);
this.fenleiFloorList(this.data.floorList);
// console.log(this.data.floorList.product_list);
console.log("zhengliwanbi");
})
},
fenleiFloorList(arr){
let i=-1;
let j=-1;
let temp={a:[],b:[]};
arr.forEach(v => {
// console.log(this);
i++;
j=-1;
v.product_list.forEach(w=>{
j++;
if(j===0){
temp.a.push(w)
}
else{
temp.b.push(w)
}
})
this.data.new_FloorList.push(temp);
temp={a:[],b:[]};
});
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
})在appdata中已经检测到拿到数据了。但是 当要把数据放到页面中时，竟然压根就没渲染出来，连标签都看不到。
实现图片之间的空隙
比如图片之间的这个空白间隙。
这里是通过伪元素设置
vscode的一些快捷键
?less写calc的注意点
less中用这个，这个前面要加一个波浪线。?
然后在css中用就不需要
然后减号旁边要有空格，不然会出问题。?
async和await
微信小程序有的不支持async 和 await。
map函数和forEach函数
map函数，其实就像是做一个映射
let array = [1, 2, 3, 4, 5];
let newArray = array.map((item) => {
return item * item;
})
console.log(newArray) // [1, 4, 9, 16, 25]JS中map()函数的使用 - 简书 (jianshu.com)
forEach函数
JS中forEach()方法的使用 - 简书 (jianshu.com)
这样看来，map函数和forEach函数都能遍历数组，但是map有返回值
微信小程序中的数据写在data中和不写在data中的区别
微信小程序中的data中的数据是页面渲染所需要的数据。
如果页面需要显示动态数据必须要把数据更新到data中对应的变量中。
如果 想要改变data中的数据，则必须通过
that.setData({
message: '新消息'
})当然数据也可以不写在data里面。
参考：Page(Object object) | 微信开放文档 (qq.com)?
(66条消息) 微信小程序--data的赋值与取值_程诺的博客-CSDN博客_小程序获取data数据
深拷贝和浅拷贝
看这个图就明白了。有些面试题可能会要求你手动实现深拷贝和浅拷贝。
深拷贝和浅拷贝的区别 - 割肉机 - 博客园 (cnblogs.com)
为什么接受不到值
// pages/category/index.js
import { request } from "../../request/index.js";
Page({
/**
* 页面的初始数据
*/
data: {
leftMenu:[],
rightMenu:[]
},
// 存放接口返回的数据
cates:[],
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getCates()
},
getCates(){
request({url:"/categories"})
.then(res=>{
this.cates = res.data.message;
//这个地方打印是有值的，但是下面打印就没有值
// console.log(this.cates);
})
// 构造展示需要的数据
let leftMenu=this.cates.map(v => {return v.cat_name})
let rightMenu=this.cates.map(v => {return v.children})
//这里打印没有值
console.log("111",this.cates);
console.log(leftMenu);
this.setData({
// leftMenu:this.cates.map(v=>v.cat_name),
// rightMenu:this.cates.map(v=>v.children)
leftMenu,
rightMenu
})
}
})反正挺奇怪的，这里应该不会涉及到什么闭包的问题吧。
数组遍历时key的值
?
居中的实现方式再熟悉一下
关于水平居中和垂直居中 我觉得这篇文章写得挺好
(66条消息) CSS水平居中+垂直居中+水平/垂直居中的方法总结_杜媛媛的博客-CSDN博客_居中
这里稍微提取一下比较常用的。
父子元素都可为块元素或者行内元素。但是父元素为行内元素比较少见，大多为块元素。所以当父元素是块元素时，子元素想在父元素中水平居中，可以直接给父元素设置 text-algin：center 或者 通过设置定位 或者通过弹性盒子。这三种都是子元素不定宽度的。如果子元素宽度定了，则还可以通过设置margin来实现居中效果。
垂直方向的也类似。不过会多两个东西，就是单行元素如果想垂直居中，可以通过设置行高（line-height，上面那个链接中的应该是有问题）来实现。除此之外，还有多行元素的居中，可以 给父元素设置display:table-cell;和vertical-align: middle;属性即可；
子传父，自定义事件传参
?
如果传递的参数是对象形式：
?如果不是：
?这样看来，还是写成对象形式会更好一点。否则如果需要传递多个参数，则不好实现。