接口文档地址：

轮播图--ShowDoc

视频地址：

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili

后面也许可以通过快速搭建mock来获取数据（这个工作肯定要会）

如果真的要用起来，肯定还是要搭建起自己的后台。

通过样式方式引入字体图标

参考：iconfont-阿里巴巴矢量图标库

微信小程序中不支持通配符“ * ”

页面初始化

主体颜色定义成变量

微信小程序单行注释没有用

单行注释没有用（//）

要用多行注释（/* */）

写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)

伪类选择器

包括选定指定的第几个元素或者某几个元素

如果要用的时候，可以查查有没有对应的伪类选择器。

CSS 伪类 | 菜鸟教程 (runoob.com)

vw

Promise

这部分其实之前看过，不过忘了里面几个默认的参数是什么意思

(66条消息) 超详细!Vue-coderwhy个人学习笔记(五)（Day8-Day9）_coderYYY的博客-CSDN博客_coderwhy笔记

就是如果函数执行成功，则执行resolve函数，括号里面的“hello world” 是参数，然后传到 .then中执行，参数data的值就是 “hello world”

同理，如果执行失败，就执行 reject函数。

navigator

这个元素是默认是块元素，可以设置宽高。

(66条消息) 关于微信小程序的navigator标签_笑到世界都狼狈的博客-CSDN博客_navigator标签

swiper组件的默认样式

默认宽度 100% ⾼度 150px

里面的swiper-item的默认样式是

默认宽度和⾼度都是100%

楼层部分图片样式设计有点意思

主要是用到了浮动。

像这样的

用浮动可以直接搞定了。

<!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>

效果图：

但是这里还得思考一个问题，flex和float有什么区别，比如这里我用flex 达到的效果就是这样的（设置了换行）

flex 和 float的区别

竟然没有查到一个好的解释。那就暂且先记住吧。还有就是 float经常用来实现文字环绕的效果。

数据整理

首页看页面中要达到这种效果需要怎样格式的数据，再看接口给我们提供的数据格式，然后再考虑在哪里把数据格式进行转换。

数据渲染不出来

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"><navigatorwx: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。

大致看了一下，稍微总结：最初始的发起网络请求的方式是通过 ajax，但是ajax 嵌套的方式容易引发回调地域，然后就有了 promise的解决方式。其实也就是把下一步的操作放在和 .then 中的回调函数。

然后还有最终的解决方案，也就是通过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的值

列表渲染 | 微信开放文档 (qq.com)

居中的实现方式再熟悉一下

关于水平居中和垂直居中我觉得这篇文章写得挺好

(66条消息) CSS水平居中+垂直居中+水平/垂直居中的方法总结_杜媛媛的博客-CSDN博客_居中

这里稍微提取一下比较常用的。

父子元素都可为块元素或者行内元素。但是父元素为行内元素比较少见，大多为块元素。所以当父元素是块元素时，子元素想在父元素中水平居中，可以直接给父元素设置 text-algin：center 或者通过设置定位或者通过弹性盒子。这三种都是子元素不定宽度的。如果子元素宽度定了，则还可以通过设置margin来实现居中效果。

垂直方向的也类似。不过会多两个东西，就是单行元素如果想垂直居中，可以通过设置行高（line-height，上面那个链接中的应该是有问题）来实现。除此之外，还有多行元素的居中，可以给父元素设置display:table-cell;和vertical-align: middle;属性即可；

子传父，自定义事件传参

如果传递的参数是对象形式：

如果不是：

这样看来，还是写成对象形式会更好一点。否则如果需要传递多个参数，则不好实现。

显示n行，剩下的小数点显示

这里是显示2行，超出的省略号显示

这个教程里写的略有不同。

(66条消息) CSS 设置文字只显示一行，多余显示省略号_清风细雨_林木木的博客-CSDN博客_css多余文字显示省略号

报错

1. 应该是用了展开运算符进行数组拼接，然后出现了报错。

展开运算符是es6中的东西，可能是因为这个原因吧。

用不了这个我们就换另一种方式进行数组的拼接。使用 concat()方法。

如果图片没显示出来就展示默认的图片

我记得图片的懒加载也是这样的作用。

上拉刷新

默认是已经开启了上拉刷新，如果需要设置触底距离则在json文件中添加即可。

子元素是一个行内元素和块元素，父元素是块元素，如何居中

通过弹性盒子就可以实现。

不过记得更改一下排列顺序。

路由传递的参数可以在onLoad中通过options来获取，也可以在onShow中来获取。

通过onShow来获取

什么时候才需要给wx:for起别名

循环套循环的时候貌似是要起别名的，不然会出现问题。（看到有的地方是这样写的，不过自己没有做实验。）

几个定位再熟悉一下

轮播图放大预览

wx.previewImage(Object object) | 微信开放文档 (qq.com)

缓存

微信小程序中存在缓存中的数据和存在vue缓存中的数据有不同。存在vue中需要格式转换，但是在微信小程序中，你存进去的是什么类型，取出来就是什么类型。

Array.some()方法

JavaScript Array some() 方法 | 菜鸟教程 (runoob.com)

遍历数组的每一个元素，如果每一个元素都符合条件，则返回true，否则返回false

Array.splice()方法

JavaScript Array splice() 方法 (w3school.com.cn)

可用于删除或增加元素。

Array.findIndex()方法

JavaScript findIndex() 方法 | 菜鸟教程 (runoob.com)

js中===和==的区别

这个是比较运算符的范畴

JavaScript 比较 (w3school.com.cn)

收藏功能和加入购物车功能

发送请求是从远程服务器拿到页面的数据，是否收藏也是页面的数据，但是存在缓存中，所以也得一起拿到。

button分享和打开客服功能

button | 微信开放文档 (qq.com)

block标签

block 多用来配合逻辑运算符使用

微信小程序 block的使用场景 - 简书 (jianshu.com)

复选框标签

checkbox 和 checkbox-group 这两个组件经常是放在一起用的，checkbox是实际上的复选框，而 checkbox-group 则是用来监听 checkbox的值。

比如这个例子

(66条消息) 微信小程序:CheckBox与CheckBox-Group_心情懒扒的博客-CSDN博客_微信小程序checkbox-group

checkbox-group 包裹了多个 checkbox，当部分checkbox 被选中时，可以通过 checkbox-group的事件绑定函数，直接可以获取到已选中的值。

那么问题来了，能不能不用checkbox-group也实现相同的效果呢？

当然是可以的。

checkbox能否不跟checkbox-group一起用，如何监听？ | 微信开放社区 (qq.com)

text-align: right;

text-align 默认是向左对齐，所以自然也就有可能向右对齐。

我们最常用来的是居中对齐。

CSS text-align 属性 (w3school.com.cn)

border-top: 1rpx solid currentColor;

currentColor 是css3的新属性，简单来说就是如果当前元素设置了 color，那么currentColor就是 color。如果当前元素没有设置color，默认是从父元素继承color。则 currentColor 就和父元素的color 是一样的。

CSS currentColor 变量的使用 - 刘哇勇 - 博客园 (cnblogs.com)

flex布局会继承吗

比如这个

价格和右边的数量的外面的盒子用了弹性盒子模型，那右边数量的子盒子还具有弹性盒子的属性吗，比如脱离文档了？

试验了一下，不是，子元素不具有弹性盒子的特点了。

<!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_b"><div class="a"></div><div class="b"><div class="b1"></div><div class="b1"></div><div class="b1"></div></div></div>
</body>
</html><style>.a_b{display: flex;}.a{width: 100px;height: 100px;border: 5px red solid;}.b{width: 100px;height: 200px;border: 5px yellow solid;}.b1{width: 20px;height: 20px;border: 4px solid blue;}</style>

调用微信的收货地址

wx.chooseAddress(Object object) | 微信开放文档 (qq.com)

使用这个接口可以直接获取到收获地址，不过需要开通接口权限。

flex布局中父元素和子元素的宽高

子元素（弹性元素）的宽高默认由内容撑开。父元素（弹性盒子）的默认宽度为父元素的100%，默认高度由子元素撑开。

但是值得注意的是，兄弟元素的高度是会互相影响的。

<!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_b"><div class="a">fdsjfljljsdl</div><div class="b"><div>sfdjk</div><div>sfdjk</div><div>sfdjk</div><div>sfdjk</div><div>sfdjk</div><div>sfdjk</div><div>sfdjk</div></div></div>
</body>
</html><style>.a_b{display: flex;border: 2px black solid;}.a{/* width: 100px;height: 100px; */border: 5px red solid;}.b{/* width: 100px;height: 200px;  */border: 5px yellow solid;}</style>

如果不想子元素的高度由最高的那个元素的高度决定，那么可以为子元素设置 align-items 属性，比如 align-items: flex-start;

比如 align-items: flex-end;

比如 align-items: center;

对象空对象 bool类型也是true

事件传参为数字

为什么有的数据获取要带一个或

async await还得复习一下、

单行多余省略号

手动实现防抖

/*
1 输入框绑定 值改变事件 input事件1 获取到输入框的值2 合法性判断 3 检验通过 把输入框的值 发送到后台4 返回的数据打印到页面上
2 防抖 （防止抖动） 定时器  节流 0 防抖 一般 输入框中 防止重复输入 重复发送请求1 节流 一般是用在页面下拉和上拉 1 定义全局的定时器id*/
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({data: {goods:[],// 取消 按钮 是否显示isFocus:false,// 输入框的值inpValue:""},TimeId:-1,// 输入框的值改变 就会触发的事件handleInput(e){// 1 获取输入框的值const {value}=e.detail;// 2 检测合法性if(!value.trim()){this.setData({goods:[],isFocus:false})// 值不合法return;}// 3 准备发送请求获取数据this.setData({isFocus:true})clearTimeout(this.TimeId);this.TimeId=setTimeout(() => {this.qsearch(value);}, 1000);},// 发送请求获取搜索建议 数据async qsearch(query){const res=await request({url:"/goods/qsearch",data:{query}});console.log(res);this.setData({goods:res})},// 点击 取消按钮handleCancel(){this.setData({inpValue:"",isFocus:false,goods:[]})}
})

关于定位

开启相对定位的元素，不会脱离文档流，也就是下面的元素不会上来，同时元素的性质不会改变，也就是说块元素还是块元素，行内元素还是行内元素。

开启了绝对定位的元素，会脱离文档流，也就是下面的元素会上来，元素的性质会改变，块元素不会独占一行，行内元素刻意设置宽高。

还有值得注意的是：相对定位的元素层级比绝对定位的层级更高。

开启定位元素的子元素没有什么特殊的影响。

开启flex后其他什么会失效

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

transform: translate(-50%,-50%);

这个属性即使设置了，在开发者工具中仍然看不到变化。

translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动。

原生微信小程序开发-黑马优购（一）相关推荐

微信小程序（黑马优购项目）
项目效果项目技术栈 vue2+uni-app 新建项目填写自己的微信小程序的 AppID: 运行一下配置.gitignore 忽略文件 # 忽略 node_modules 目录 /node_mo ...
微信小程序之黑马优购
写项目过程存在的问题以及解决办法在vscode中,一开始.wxml文件和.wxss文件内容标签展示的是文本,不显示高亮颜色解决办法:将右下角的语言改为HTML/CSS显示即可: 在获取轮播图数据时 ...
【微信小程序】黑马优购--05商品详情
7.商品详情页面接口文档 7.1效果 7.2获取分类id 在商品列表页面wxml中加个超链接把id传过去 <view class="first_tab"><na ...
小程序项目——黑马优购
小程序项目--黑马优购 1. 起步 2. tabBar页面 3. 首页 3.1 创建home分支 3.2 配置网络请求 3.3 轮播图区域 3.3.1 获取轮播图的数据 3.3.2 渲染轮播图的UI结 ...
从零开始 | 原生微信小程序开发（二）
!打好最基础的部分,为后期的项目做好准备 ** 学习注册App函数和Page函数 ** 认识一些常见组件,其余组件使用时查找文档 ** 对于wxss和css,两种区分好 App函数.Page函数 1. ...
从零开始 | 原生微信小程序开发（一）
! 一步一步从最基础的开始搭建项目 ** 粗略地认识底层原理 ** 学会全局配置以及页面局部配置 ** 要学会独自查阅文档下载步骤注册 AppID 微信小程序里面有开发文档,用来指引学习完成账 ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
基于原生微信小程序的时间组件
作者的絮叨在开发原生微信小程序的时候,发现很少有基于原生微信小程序开发的相关插件或组件,不知道是不是我的孤陋寡闻,还是真的很少,暂且不管~下面我介绍一下我当时开发的一个时间组件,比较简陋,希望可以给 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...

原生微信小程序开发-黑马优购（一）