微信小程序基础知识点
1、小程序的项目结构
- pages文件夹 - - - 存放页面的文件夹
- utils - - - 工具文件夹 （可删除）
- eslintrc.js - - - 格式化代码 （不需要管）
- app.js - - - 小程序的逻辑，必不可少
- app.json - - - 全局的配置文件，必不可少
- app.wxss - - - 全局的样式文件；小程序 样式中 不可以使用 *{}
- project.congfig.js - - - 项目配置文件
- sitemap.json - - - 站点地图
- - SEO（用于检索网站）TDK：T（title:标题）D（description:描述）K（keywords:关键字）搜索引擎会派出爬虫出询问站点。
2、小程序页面
小程序页面由四个文件组成。
小程序的文件结构：
- wxml - - - 页面结构
- wxss - - - 页面样式
- js - - - 逻辑处理
- json - - - 配置文件
html中的文件结构：
- html - - - 页面结构
- css - - - 页面样式
- js - - - 逻辑
vue中的文件结构：
- template - - - 页面结构
- script - - - 逻辑
- style - - - 样式
3、button用法
在小程序中button不可以用别的组件替换，因为button有一个open-type属性，代表你是否有微信开放能力，所以说在微信小程序开发的过程中，不允许用任何组件代替button的点击事件。
4、使用小程序组件需要注意的一点
小程序里面可以使用html5标签，只是小程序不会按html5原来地特点去渲染，就是说，原来html5里面的div是一个块级元素，但是在小程序里面他只是一个行内元素，所以说，写微信小程序时，不建议使用html5的标签，还是用微信小程序提供的组件更为合适。
5、wxss（页面样式）用于描述wxml（页面结构）
在HTML5中的类，id，属性选择器，等等都可以使用，写样式的时候不可以是sass的格式
6、小程序的布局像素单位
rpx：微信小程序像素单位，它是响应式像素，随着页面的宽度自适应。
7、平常常用的几种布局方式
- 流式布局
- 弹性盒布局
- 百分比布局
- rem布局
- 定位
- 浮动
8、布局像素单位
- px：绝对单位
- em：相对于父级元素
- rem：相对于根元素的字体大小进行自适应
9、rem是移动端的自适应单位
自适应：rem，媒体查询
10、小程序单位换算
- 350px = 750rpx
- 0.5px = 1rpx
- 它是等比例缩放的，按照不同型号的手机尺寸，比例也会所之变大或变小。
11、小程序设置全宽的三种方式（但不是自适应的,还是需要自己去换算，才可以实现自适应）
- width: 100%;
- width: 100vw;
- width: 750rpx;
12、手机宽度为 ：a px，求出1rpx等于多少px？
1rpx = a / 750rpx;
13、全局样式引入外联样式方法？
@import "所在路径"; 注意点：（必须加分号）
14、小程序的全局配置文件
app.json中的pages：pages是个数组---小程序页面的路径表；相当于vue中的路由；
pages中的注意点：
pages数组中的第一个路径尤为重要，小程序第一个进来的就是数组的第一个路径（第一个很重要，多是小程序的加载页面），其它的页面不重要。
15、全局配置中window中的属性？
"window" : {
"backgroundTextStyle" : "dark", // (下拉刷新的文字颜色)，dark/light二选一
"backgroundColor" : "#000", // (下拉刷新的背景颜色)，必须为十六进制颜色值
"navigationBarTitleText" : "拳王争霸赛", // (导航栏的文本标题)
"navigationBarTextStyle" : "white", // (导航栏的文本颜色),white/block二选一
"navigationBarBackgroundColor" : "#f00" // (导航栏的背景颜色)
"enablePullDownRefresh" : true, // 开启下拉刷新页面 ，false为关闭
"onReachBottomDistance" : 50, //上翻到底距离五十时，刷新页面 (默认50，可自行设置值)
"navigationStyle" : "default" // 自定义导航栏,默认值default,可以custom自定义导航栏
}16、小程序的页面配置
17、tabBar如何配置？
tabBar与window同级，在window的下面进行配置
"tabBar": {
"selectedColor": "#f00", // 选中文本的颜色
"color": "#f0s", // 默认颜色
"backgroundColor": "white", // 背景颜色
"borderStyle": "black", // 边框颜色 black/white二选一
"position": "bottom", // tabBar位置 默认bottom，贴于最下方，top最上方，不显示图标
"list": [{ // 一个list数组（自带）
"text": "首页", // 导航的文本
"pagePath": "pages/index/index", // 导航的路径
"iconPath": "./tab-icon/home.png", // 为选中图标的路径
"selectedIconPath": "./tab-icon/home.png" // 被选中的图标的路径
},{
"text": "aaa",
"pagePath": "pages/aaa/aaa",
"iconPath": "./tab-icon/home.png",
"selectedIconPath": "./tab-icon/home.png"
}]
},18、页面全局配置与局部配置的关系？
局部配置的优先级远远大于全局配置的优先级，另外局部页面不可以配置tabBar
19、vue的生命周期 （官方11个）
创建前后 - - - 挂在前后 - - - 更新前后 - - - 销毁前后 - - - activted :激活/停用 - - - error捕获错误
创建阶段四个：
创建前后：
- beforeCreate：实例创建之前
- created：实例创建之后
挂载前后：
- beforeMount ：组件挂载之前。
- mounted：组件挂载之后。
运行阶段的两个：
更新前后：
- beforeUpdate：数据改变，试图更新之前。
- updated：试图更新之后。
销毁前后：
- beforeDestroy：实例销毁之前。
- destroyed：实例销毁之后 。
其他三个：
- actived被keep-alive缓存的组件激活时调用。
- deactived被keep-alive缓存的组件停用时调用。
- errorCaptured 2.5.0+ 新增当捕获一个来自子孙组件的错误时被调用。
20、小程序的生命周期
小程序的生命周期包括：
- 应用的生命周期
- 页面的生命周期
- 组件的生命周期
21、小程序的应用生命周期（在全局的配置文件里面 - - - app.js）
- onLaunch(){} 应用初始化的时候调用，一般用于授权登录
- onHide(){} 应用切换到后台/隐藏时调用
- onShow(){} 应用切换到前台/显示时调用
- onError(){} 应用检测到错误时调用
22、小程序的页面生命周期（在单个页面的配置文件里面 - - - index.js） 共7个
- onLoad(){} 页面加载时调用
- onShow(){} 页面显示/切入前台时调用
- onReady(){} 页面初次渲染完成时调用
- onHide(){} 页面隐藏/切入后台时调用
- onUnload(){} 页面卸载时触发
- onPullDownRefresh(){} 页面下拉刷新时调用
- onReachBottom(){} 页面上翻到底时调用