微信小程序|微信小程序基础知识点微信小程序|vue.js

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捕获错误
创建阶段四个：
创建前后：