微信小程序知识点总汇

微信小程序知识点总汇

文件结构：最上层app ->多个page ->多个组件（内置组件/自定义组件）
app:
app.js:创建app实例代码 【app:实例对象
app.json:程序的入口/全局配置【page:页面注册，按照创建的顺序注册】
app.wxss:全局样式
page:
page.js:创建page实例代码【pages：里面又data，用来存放自定义变量（属性)】
page.json:放业务逻辑代码
page.wxml:页面布局代码【写什么，呈现什么】
page.wxss:页面样式配置

小程序：从服务器请求的数据一般都是列表数据
一、数据绑定：
1.语法：Mustache语法 将数据抽取到逻辑层，还可以进行运算
{ {xxx}}
二、.列表展示：
2.1:显示某一个数据
xxx:[{…},{…},{…}]
{ {xxx[0].xx}}
2.2:循环输出列表数据 wx:for="{ {xxx}}"
item
注意:如果没有用mustache语法，会默认循环字符串
三、事件监听改变data bindtap绑定事件
当前计数：{ {count}}
+
业务逻辑层：
xxx(){
this.setData({
count:this.data.count +=1
})
}

小程序的MVVM架构 优势:将命令式变成变为了声明式编程
M:model 存储数据(写死的数据/从服务器传过来的数据)，通过bindtap绑定到view,view再直接显示出来
V:view 里面的数据大部分都是通过mustache绑定的
VM:view model
编程范式：
声明式编程：vue
命令式编程：原生操作DOM(一步一步给命令)

配置小程序:小程序把很多的开发需求规定在配置文件中，有利于开发效率，保证风格一致，常见的有app.json和pages.json
project.config.json:项目配置，关于项目设置的配置，一般我们在详情改变项目配置，不在这里改
1.1、全局配置app.json:当前项目的配置
1.1.1、pages:页面路径列表 所有的页面都必须在里面进行注册
1.1.2、window:全局默认的窗口表现 用户指定窗口如何展示，其中包含了许多属性
navigationBackgroundColor:导航栏窗口的颜色，仅支持十六进制
naviBarTextStyle:状态栏字体颜色，仅支持black和white两种颜色
navigationBarTitleText:导航栏中显示的字体
enablePullDownRefresh:下拉刷新（安卓）== backgroundcolor:下拉刷新时的颜色
1.1.3、tarbar:底部tab栏的表现
tarBar:{
list:[ 注意：list里有几个字典，就代表有几个小tarbar，至少有两个字典
{
pagePath:点击它跳到哪一个页面
text:显示的文字
iconPath:图标地址
selectIconPath:点击后图片的路径
}
]
}
2.2.1、页面配置pages.json:
navigationBarTitleText:改标题（不用写window)
navigationBarBackgrounfColor:设置背景颜色，十六进制
优先级:全局<局部

小程序的双线程模型：
宿主环境:微信客户端，为了执行小程序的wxml文件、wxss文件、ja文件，提供了小程序的双线程模型
渲染层:执行wxml文件和wxss文件，渲染层使用VebView线程渲染(一个页面使用一个WebVew)
先将wxml转为js对象，再渲染出真正的DOM树
数据发生变化时：
产生的js对象对应的节点就会发生变化，此时对比前后两个js对象得到变化的部分，然后把这个差异应用到原来的Dom树上，从而达到更新UI的目的，这就是”数据驱动”的原理，运用的时diff算法“
逻辑层:执行js文件，逻辑层使用JScore运行js脚本

小程序启动流程： 执行App生命周期 加载解析page.json
| |
下载小程序包 - 启动小程序 - 加载app.json - 注册APP() - 加载自定义组件代码/注册自定义组件 - 逻辑层注册page() - 执行page生命周期
|
渲染层加载渲染page.wxml
小程序生命周期=注册小程序示例:(生命周期函数后台可以存活两个小时)
3.1.1:onLaunch:小程序初始化完成时会执行，全局只触发一次(app.js)
定时器:setTimeout
获取用户信息：
方法一：异步调用
wx.getUserInfo({
数据拿到后，再进行回调
success:function(res){
console.log(“获取用户信息”:res)
}此方法已被弃用
})
方法二：
3.1.1.1:在xx.xml中放入获取用户信息
3.1.1.2:在xx.js文件中写入 HadelgetUserInfo(event){
console.log(event)
}
3.1.1.3:点击button按钮后就能显示出用户信息
方法三（在界面中显示用户的某一个信息):
3.1.2.1:在xx.xml中放入获取用户昵称
3.2.2:onShow:小程序界面显示出来之后会执行的生命周期函数，可以多次执行
3.3.3onHide:界面被隐藏时会被执行
3.4…4:onErroe:小程序发生错误的时候执行

注册APP的时候会做些什么：
4.1.1:判断小程序的进入场景
4.1.2:监听生命周期函数，在生命周期执行对应的业务逻辑
4.1.3:因为APP实例只有一个，平且是全局共享的，所以我们可以将一些数据放在这里
4.2.1:如何确定打开场景:
onShow的scene的值获取，1001是一个场景值ID

在xx.js中定义全局数据:globalData({
xxx:xxx
})
在其他页面中(xx.js)引用app,js中的产生的示例对象，可以使用const app=getApp()函数

调用page(xx.js)方法称为注册页面(绑定初始化数据、生命周期回调，事件处理函数):
注册页面(page)时会做些什么：
5.1.1:监听页面的生命周期函数