一. 小程序特征（需要背下来的东西）
1.1 小程序没有DOM对象，一切基于组件化
什么是组件？首先我们先接触的是Js模块化(为了代码复用)-->组件化-->工程化
什么叫模块
将一个大的Js文件，按照一定规则分成小的Js文件，每个Js文件数据是私有的，相对安全，Js模块互相不干扰，如果一个项目用多模块开发，那么就是模块化开发。什么是组件（即有html+css也有js）
具有特定功能效果代码的组合，如果一个项目用多组件开发，那么就是组件化开发。
1.2 小程序的四个重要的文件
a. *.js
b. *.wxml ---> view结构 ----> 相当于html
c. *.wxss ---> view样式 -----> 相当于css
d. *. json ----> view 数据 -----> json文件
1.3 储备知识
a. 理解事件机制
b. 理解组件化
c. 理解数据绑定
d. Flex布局
e. 移动端适配方案
贴心小建议
学习vue后开发小程序的感觉会爽到飞起！
二. Flex布局简介
2.1 什么是flex布局？
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
display: ‘flex’
2.2 flex属性
1. flex-direction:
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex属性学习地址
三. 移动端适配
3.1 物理像素
屏幕的分辨率
能说明清新度，物理像素相当于屏幕的分辨率设备能控制显示的最小单元，可以把物理像素看成是对应的像素点
3.2. 设备独立像素 & css像素
都是虚拟像素
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。
3.3 dpr比 & DPI & PPI
dpr: 设备像素比，物理像素/设备独立像素 = dpr，（ 一般以Iphon6的dpr为准 dpr = 2，记死）
PPI: 一英寸显示屏上的像素点个数
750²=562500 记住！ppI值越大，像素越高DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰
四. 小程序适配方案
常用的适配 rem(根元素字体的大小) viewport（布局视口）
视觉视口：看到视口大小
布局视口：真正投放的页面，通常比视觉视口要大
布局视口 = 视觉视口，好处页面完整
Iphon6： 1rpx（小程序计算单位） = 1物理像素 = 0.5px dpr = 物理像素/设备对立像素
小程序已经給我们做了适配。面试的时候如果让你去说小程序适配方案，怎么样去说：
首先小程序底层已经做了Viewport适配，有个meta标签，下面有个width =d 能让布局视口=视觉视口，一定要说上面有个计算方式，1rpx = 1 物理像素 = 0.5px微信官方提供的换算方式：
以iPhone6的物理像素个数为标准: 750;
1rpx = 目标设备宽度 / 750 * px;
注意此时底层已经做了viewport适配的处理，即实现了理想视口
五. 扩展内容
- 视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，由苹果公司在2010年在iPhone 4发布会上首次推出营销术语。
*Iphone的dpr = 2; dpr=2是人类肉眼分辨的极限
- 问题： Iphone6的dpr为多少？Iphone6Plus比Iphone6显示图像清晰吗？
Iphone6Plus的dpr = 3, Iphone6Plus比Iphone6是一样的，因为肉眼有个极限，dpr再高，dpr = 3 和 dpr = 2是一样的
六. 登录页小试牛刀
6.1 效果演示
6.2 注册程序，创建文件
6.3 应用主文件(入口文件)
A. App.wxml
B. App.wxss
C. App.js
D. App.json
6.4 主页结构： index.wxml
{{msg}}
欢迎开启小程序之旅
6.5 主页样式： index.wxss
/* pages/index/index.wxss */
page {
height: 100%;
background-color: pink;
}
.indexContainer {
display: flex;
flex-direction: column;
align-items: center;
}
.avatar {
width: 200rpx;
height: 200rpx;
border-radius: 100px;
margin: 100px 0;
}
.userName {
font-size: 32rpx;
font-weight: 900;/*400 相当于原来的大小*/
margin: 100rpx 0;
}
.goStudy {
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
border:1rpx solid #999;
border-radius: 10rpx;
text-align: center;
}
6.6 入口文件： app.json配置
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#FF00FF",
"navigationBarTitleText": "欢迎光临",
"navigationBarTextStyle": "black"
}
}
七 数据绑定 & 事件
7.1 数据绑定
思想： 同Vue一样数据可以初始化在当前页面的管理内存的data中，页面中使用数据会自动去data里找
初始化数据： 当前页面的js文件
- 页面的初始数据
Page({
/**
* 页面的初始数据
*/
data: {
msg: "小帅的驿栈"
}
})
- 修改数据
this.setData({
msg: '我是修改之后的数据'
})
7.2 声明生命周期钩子的函数
Page({
/**
* 页面的初始数据
*/
data: {
msg: "小帅的驿栈"
},
handleParent(){
console.log("父元素");
},
handleChild() {
console.log("子元素");
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
7.3 获取登录用户的数据
文档查看位置: API---> 开放接口
代码示例：
// 获取登录用户的数据
wx.getUserInfo({
//withCredentials: true,
success: (res) => {
console.log(res);
let user = res.userInfo;
this.setData({
user
})
}
})
7.4 自定义事件
- 冒泡事件
事件三个阶段： 捕获 处理 冒泡
事件委托：将子元素的委托给父元素，好处：防止重复定义事件，利用了冒泡机制
a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
冒泡事件列表
- 非冒泡事件
a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。
b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件
非冒泡事件
7.5 绑定事件
bind绑定：事件绑定不会阻止冒泡事件向上冒泡
catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡
进程代表程序一次完成的过程，通常打开一个程序就是一个进程，
线程是程序执行的最小单元
谷歌浏览器 多进程多线程
7.6 跳转页面
- wx.navigateTo(OBJECT)：跳转有记录，可通过回退键进行回退9
// 跳转到list页面
wx.navigateTo({
url: '/pages/list/list',
success(){
console.log('跳转成功');
}
})
- wx.redirectTo(OBJECT)： 没有记录，不能进行回退
// 跳转到list页面
wx.redirectTo({
url: '/pages/list/list',
success(){
console.log('跳转成功');
}
})
八. 列表页：list
8.1 效果演示
[图片上传失败...(image-914c8c-1596612795519)]
[图片上传失败...(image-5d0912-1596612795519)]
8.2 注册页面
list.wxml
list.wxss
list.js
list.json
4.9组件 & 模板使用
9.1 组件
9.2 模板
- 定义模板： name=‘模板名字’
tempalte content
- 使用模板
<**import** **src=****"/detail_template/detail_item_template.wxml"** />
- 使用模板样式
@import '../templates/list-template.wxss';
4.10 数据存储
- 存数据：setStorage， 同步： setStorageSync
// 数据存储
wx.setStorage({
key: 'isCollected',
data: oldCollectFlag
})
- 获取数据：getStorage 同步: getStorageSync
let oldCollectFlag = wx.getStorageSync('isCollected');
十 音乐播放控制
10.1 音乐播放
API: wx.playBackgroundAudio
示例：
wx.playBackgroundAudio({
dataUrl: detailObj.music.dataUrl,
title: detailObj.music.title,
success() {
console.log('音乐播放成功');
}
});
10.2 音乐暂停
API: wx.pauseBackgroundAudio
示例：
wx.pauseBackgroundAudio
10.3 监听音乐播放暂停
监听播放API: wx.onBackgroundAudioPlay
监听暂停API: wx.onBackgroundAudioPause
示例：
wx.onBackgroundAudioPlay(() => {
console.log('音乐播放'); // 注意真机上音乐播放监听只能执行一次。
this.setData({
isMusicPlay: true
})
// 修改app数据记录是否播放和播放页面的下标
appDatas.appData.isPlay = true;
appDatas.appData.playPageIndex = this.data.index;
})
// 监听音乐是否暂停
wx.onBackgroundAudioPause(() => {
console.log('音乐暂停');
this.setData({
isMusicPlay: false
})
appDatas.appData.isPlay = false;
appDatas.appData.playPageIndex = this.data.index;
})
10.4 app应用存储公共数据
- 存取数据
App({ **data**: { **isPlay**: **false**, **playPageIndex**: **null**, **movies**: {} } })
- 读取数据
**let** ***app*** = getApp();
app.data.isPlay = false;
备注：app方法配置对象中的属性和方法均为app应用实例的属性和方法
十一 事件委托 & 事件数据传递
11.1 轮播图片点击跳转
- 事件委托给父元素：swiper
11.2 传递事件数据
- data-’传递数据key’ = value
11.3 currentTarget 和target的区别
target指向的是触发事件的元素
currentTarget指向的是捕获事件的元素
十二. 数据交互
12.1 发送请求
wx.request({ // 发送请求 **url**: ***API_URL***, // 请求的url **header**: { // 设置请求头 **'Content-type'**: **'json'**, }, success: (res) => { // 请求成功的回调函数 *//* *隐藏提示加载信息*wx.hideToast(); **console**.log(res); // 请求的成功的数据对象，注意是封装后的对象 **this**.setData({**movies**: res.**data**.subjects}) } })
12.2 小程序设置
备注：
-
- 小程序出于安全考虑所有的协议都是https协议，且如果没有在开发设置中配置请求的连接是无法访问指定的链接的。
-
- 一个微信小程序的并发网络请求数量被限制在最多5个
[图片上传失败...(image-e34a4b-1596612795518)]
[图片上传失败...(image-9157ed-1596612795518)]
12.3 不同页面之间通信
- 1.a页面
**let** ***appData*** = getApp(); // 获取app中的数据对象
onLoad (options) { *//* *加载到数据之前给用户显示**‘**正在加载的提示信息**’*wx.showToast({ **title**: **"****加载中****..."**, **icon**: **"loading"**, **duration**: 3000 }); wx.request({ **url**: ***API_URL***, **header**: { **'Content-type'**: **'json'**, }, success: (res) => { *//* *隐藏提示加载信息*wx.hideToast(); **console**.log(res); **this**.setData({**movies**: res.**data**.subjects}) ***appData***.**appData**.**movies** = res.**data**.subjects; // 将数据更新至公共的app数据对象中 } }) },
-
- b页面
**let** ***appData*** = getApp();
onLoad: **function** (options) { **console**.log(options.**id**); **console**.log(***appData***.**appData**.**movies**); **this**.setData({**movie**: ***appData***.**appData**.**movies**[options.**id**]}) },