微信小程序总结小记（一）

微信小程序四种文件

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

app.json是对小程序的全局配置：

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

WXML 充当的就是类似 HTML

HTML--div, p, span

WXML--view,button,text

 

wxml多一些wx:if这样的属性以及{{}}这样的表达式，

MVVM 的开发模式(例如 React,Vue)，提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

wx: 开头的属性来表达for，if/else 等…

WXSS 具有 CSS 大部分的特性

1. 新增了尺寸单位。。WXSS 在底层支持新的尺寸单位 rpx ，1:2,1:3等。
2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3. 此外 WXSS 仅支持部分 CSS 选择器

js脚本来处理用户交互

通过 app.json 的 pages字段就可以知道你当前小程序的所有页面路径:

通过 app.json 的 pages字段就可以知道你当前小程序的所有页面路径:

{

"pages":[

"pages/index/index",		//第一个页面的目录
"pages/logs/logs"		//第二个页面的目录

 ]

 }

小程序的主体部分:app.js,app.json,app.wxss;

小程序页面的四个文件(为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。）：JS            可无，Wxml      必有 ，Wxss       可无，Json     可无。

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab 等。

tabBar

Tip：

1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序

onlauch（）全局触发一次，进行一次深拷贝，需考虑数据大小对页面加载的开销，是否进行慢加载

• App() 必须在 app.js 中注册，且不能注册多个。
• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
• 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数

App() 函数用来注册一个小程序。接受一个 object参数，其指定小程序的生命周期函数等

初始化数据将作为页面的第一次渲染。data 将会以 JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。

渲染在我理解为从逻辑层传json数据至视图层，完成视图层的创建。

渲染层可以通过 WXML 对数据进行绑定。

• onLoad: 页面加载
• 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数，深拷贝，是否使用慢加载。
• onShow: 页面显示
• 每次打开页面都会调用一次。
• onReady: 页面初次渲染完成
• 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
• onHide: 页面隐藏
• 当navigateTo或底部tab切换时调用。
• onUnload: 页面卸载
• 当redirectTo或navigateBack的时候调用。

 

This.data相当于 getdata（）

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

 

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

路由：由计算机网络引来的名词用于页面的跳转，以栈的形式进行路由切换，即页面的切换。

通过页面入栈出栈完成页面的操作。

路由方式注意路由前页面，路由后页面的操作

tab切换对应生命周期：注意子页跳转另一母页需unlode本来母页，母页跳转另一母页需unlode掉母页，从子页跳转至另一子页，需要将母页和子页都unlode