微信小程序知识点总汇
文件结构：最上层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:监听页面的生命周期函数，平且在生命周期函数中发送网络请求，从服务器中获取数据；
onload:functiony:（1）页面被加载出来就执行
向服务器请求数据(网络请求数据)：
wx.request({
url:“http://123.xxx.xxx.xxx”
success:function(res){
console.log(res)
const data=res.data.data.list;
this.setData({
list:data
})
}
})
注意:如果报找不到setData函数，只需要在外部定义一个var xx=this; 因为this在函数内代表的是一个方法，不是pages对象
onReady:function:（3）初次渲染完成时才会执行
onShow:function:（2）页面展示时执行
onHide:function:当页面隐藏时才会执行
onUnload:function:页面跳转时才会执行
5.1.2:初始化数据，以方便被wxml引用展示
5.1.3:监听wxml中的事件，绑定对应的函数
5.1.4:监听其他事件(页面滚动、上拉刷新、下拉刷新)
监听页面滚动：onPageScroll(obj){
console.log(obj)
}
监听页面滚动到底部:onReachBottom(){
console.log(“页面滚动到底部”)
}
监听下拉刷新:onPullDownRefresh(){
console.log(“监听下拉刷新”)
}注意:必须把xx.json中的enablePullDownFresh的值改为true
常见的组件：
Text组件:用于显示文本，类似于span标签，是行内元素
6.1.1.1:基本使用
6.1.1.2:常见的属性：
6.1.1.2.1:selectable:长按是否可以选中，默认是不能选中的，selectable="{{true}}",要用mustauch语法 or 直接写selectable
6.1.1.2.2:space:决定空格的大小
nbsp:默认，根据字体设置的大小
ensp:半个中文字符大小
emsp:一个中文字字符大小
6.1.1.3:decode:是否解码文本 > = >
6.1.1.4:button组件:
61.1.4.1:size:mini
6.1.1.4.2:type:primary(主要的，绿色)/warn(警告，红色)/default(默认)
6.1.1.4.3：plain:镂空效果 true/flase
6.1.1.4.4:disabled:不可用的(变成灰色)
6.1.1.4.5:loading:有一个小圆圈在转
6.1.1.4.6:hover class:点击时的样式
6.1.1.4.7:open-type:获取某些权限
61.1.5:view组件:视图组件。块级元素，容器，会独占一行
6.1.1.5.1:hover-class:当用户按下去后显示的状态
6.1.1.5.2:hover-stay-time:按下松开后样式保留时间
6.1.1.5.3:hover-start-time:按下后多少秒后执行样式
6.1.1.5.4:hover-stop-propagation:阻止分类的点击态
6.1.1.6:image组件:显示图片320*240,行内块元素
6.1.1.6.1:src:本地地址/远程地址
想显示相册里的图片
选中图片
hadlechooseAlbum(){
//系统API ,让用户在相册中选择(或拍照)
wx.chhoseImage({
success:function(res){
const path=res.tempFilePaths[0]
this.setData({
imagepath:path
})
}
})
}
6.1.1.6.2:lazy-load:图片懒加载(默认都不是懒加载) bindload="aa"监听图片什么时候加载完
aa(){
console.log(“加载完成”)
}
6.1.1.6.3:shoe-menu-by-longpress:长按识别小程序码
6.1.1.6.4:mode:图片显示的模式
input表单组件：
1.value:初始值，默认值
2.type:决定键盘类型（text文本输入家农安/number数字键盘/idcard身份证键盘/digit带小数点的数字键盘）
3.password:暗文(不显示输入的内容)
4.placeholder:占位文字，默认文字，输入内容时会自动消失
5.confirm-type:设置键盘右下角按钮的文字
6.input绑定事件(bindput):
bindfocus:获取焦点
bindblur:失去焦点
scroll-view组件:可以实现局部滚动
1.水平滚动(scroll-x)
{{item}}
.one{
white-space:nowrar:不留空白
}
two{
diaplay:inline-block:将块级元素改为行内元素
}
2.垂直滚动:
<view wx:for="{{10}}"" class=“four”>{{item}}
.three{
height:600rpx
}
.four{
height:200rpx;
}
3.其他补充:
监听滚动到哪儿了:bindscroll
共同属性：
id:唯一标识
class:绑定相关样式
style:组件内联样式
hidden:组件是否显示
wxss页面样式:
写法一:行内样式/内联样式
style=“键:值; xx:vv ;”
写法二:页内样式 绑定class
class=“xxx”
写法三:全局样式,绑定class
class=“xx”
在app.wxss中设置xx的样式
优先级:行内>页内>全局
Mustach语法：
1.拼接字符串
{{xx}} {{cc}}=={{xx+" "+cc}}
2.三目运算
{{xx > cc ? aa:bb}}
3.显示当前的时间:
data{
nowtime:now Date().toLOcaleString()
}
onload(){
setInterval(()=>{
this.setData({
nowtime:now Date().toLOcaleString()
})
},1000)
}
逻辑判断 wx:if - wx:elif -wx:else 某个组件是否会被渲染，决定组件是否被创建出来
1.<view wx:if="{{isshow？‘aa’:’ ‘}}>
2.<view wx:if="{{dd>90?‘aa’:’ ‘}}>
<view wx:elif="{{dd>80？‘aa’:’ ‘}}>
<view wx:else="{{dd>60？‘aa’:’ '}}>
hidden属性:决定某个组件是否隐藏，这个组件是存在的
切换频率高就是用hidden,提升性能
切换频率非常低，就是用wx:if
列表渲染:wx:for
1.
遍历数组
{{item}} {{index}}item的索引值
遍历字符串
{{item}} {{index}}
遍历数字
{{item}}
2.block标签:不会被渲染出来,用来包裹一组标签，优化性能，他仅仅只是一个包裹元素
3.item和index起名字(多层遍历)，不能有-,但是可以有_
{{shuzi}}
{{biao}}
4.key的作用wx:key="{{index}}"
单独使用wx:for的时候会报一个警告，使用wx:key="",可以添加一个key来提高性能
key可以给每个value绑定一个id,没有改变时直接互用，改变了的直接插入到正确的位置(diff算法)
高效的更新虚拟DOM树
模板语法：wxml的复用机制，template,自定义组件出现后模板用的比较少
…
注意:模板必须使用name属性,通过name找模板
模板包裹的内容，在没有使用前是不会被渲染的
如何使用模板:
2.wxml引入
import不能对template进行递归导入
可以进行循环的导入,只能导入除了template的内容，抽取组件导入
wxs:脚本语言，和js不同，但基本一致
1.在wxml中不能直接去调用page和Component中定义的函数，只能使用wxss来调用
…js代码
模块化导出
module.export={
xxx:xxx,
xxxxx:xxxx
}
事件处理:
1.监听事件:bindtap=bind:tap=catchtap=catch:tap
2.手指触摸动作开始:touchstart
手指出动后移动:touchmove
手指触摸动作结束:touchend
长按事件:longpress
在特定的场景才会触发(比如来电打断):touchcancle
tap事件和longpress通常只能触发一个
3.事件对象(event)
常见的属性:
3.1:type:当前事件类型
3.2:timeStamp:页面打开到触发事件经过的毫秒数(时间戳)
3.3:target(产生的事件)=currentTarget(触发事件的):当前组件的属性
3.4:detail:鼠标点击的位置(额外信息)
3.5:touches:用来记录有几个手指来小程序中触摸以及对应的触摸点的信息
3.6:changedTouches:记录变化的,触摸事件改便的触摸点集合
事件的传递参数:
flex布局:
轴向:
修改主轴:flex-driection -> 1.row:
2.row-reverse:
3.column:
4.column-reverse:
修改交叉轴方向:flex-warp: -> 1.warp
2.warp-reverse
对齐:
(主轴)justify-content -> 1.flex-start:左对齐
2.flex-end: 右对齐
3.center: 中对齐
4.space-between:两端对齐
5.space-around: 分散对齐
6.space-evenly: 间距相等
(交叉轴)align-items(单行)&align-conten(多行): center:中对齐
弹性：
宽度:flex-basis:auto
伸缩:
1.flex-grow:0~1(扩展):0(必选)
2.flex-shrink:0~1(收缩):1
{{item}}
dianji(event){
const dataset=event.target.dataset;
const index=dataset.index;
const item=dataset.item;
}
事件冒泡和事件捕获:当界面产生一个事件的时，事件分为了捕获阶段和冒泡阶段。
监听事件捕获:capture-bind:tap(catchtap阻止事件的进一步传递)
监听事件冒泡：bindtap(一层层传递)
组件化开发:Component
1.封装->在xxx.json的usingComponent{}里进行注册(“xx”:“src”)->在wxml文件中写入
注意:分割用-or_or数字 json文件不能注释
想页面影响组件:option{
styleIsolation:“apply-shard”
}
想组件样式影响页面:option{
stylelsolation:“shard”
}
2.页面通信(页面传给组件)：
数据:propertis:{
xx:{
type:类型；
value:‘默认值’；
observer:function(newVal,oldVal){
//监听值的改变
}
}
}
外部传入样式:extarnalClass:[‘类名’]
组件向外传递事件(自定义事件):this.triggerEvent(‘事件名xx’,{数据},{})
xxx.js:
aaa(event){
console.log("------------")
}
直接选中我们的组件修改数据/调用方法:
修改组件内的数据
<xxx id/class="xx’/>
js:
hadel(){
const xxx=this.selectComponent(’.xx/#xx’)(通过class/id来获取组件对象）
(不推荐使用)xxx.setData({
xxxx:xxxx
})
}
(推荐使用)xxx.方法名()
标签(插槽):solt
1.单插入:
2.多个插槽的使用:
注意: 1.给每一个插槽取一个名字==需要一个name属性
2.必须在Component对象中添加一个选项:options:{multipleSlots:true}
组件Component构造器:Component({
1.properties:{
//让使用者给组件传入数据
}，
data:{
//定义组件初始化数据
}，
methods:{
//用于定义组件的函数
},
options:{
//多插曹使用时需要定义multipleSlorts:true
//styleIsolation:设置样式的隔离方式
},
externalClasses:[‘类名’]//外界给组件传入额外样式，
observres:{
//监听properties/data的改变
xxxx:function(newVal){
console.log(“改变的数据，拿不到oldVal”)
}
}
})
2.组件中监听生命周期函数
2.1:监听所在页面的生命周期
pageLifetimes:{
show(){
//监听组件所在页面显示出来时
}，
hide(){
//监听组件所在页面隐藏起来时
}，
resize(){
//监听页面尺寸的改变(用得很少)
},
}
2.2:监听组件本身的生命周期
lifetimes:{
created(){
//组件被创建出来时
}，
attached(){
//组件被添加到页面中
}，
ready(){
//组件被渲染出来
},
moved(){
//组件移动到另一个位置
},
datached(){
//组件被移除
}
小程序系统API:
网络请求:在onload中请求网络数据(不需要上架时可以不用配置服务器域名)
发送网络请求:wx.request({默认都是get请求方式
url:‘请求的网址’,
data:{
type:shell,
page:1
//参数
}
success:function(res){
consol.log(res)
}
})
wx.request({
url:‘请求网址/post’,
methods:post,
data{
xxx:‘xx’,
ccc:‘xxx’
},
success:function(res){
console.log(res)
}
fail:function(rerr){}//失败时的回调
})
网络请求:请求封装:
优点: 1.降低网络请求和wx.request的耦合度
2.使用promise的方法获取回调结果,防止出现回调地狱
xx.js:
1.export default function request(options){
return new Promise (resolve,reject) =>{
wx.request({
url:options.url,
method:options.method || ‘get’,
data:options.data || {},
success:function(res){
resolve(res)
}，
fail:function(err){
reject(err)
}
})
}
}
2.export default function request(options){
return new Promise (resolve,reject) =>{
wx.request({
url:options.url,
method:options.method || ‘get’,
data:options.data || {},
success:resolve,
fail:reject
})
}
}
xx.js:import request from ‘相对路径’
oload:function(options){
request({
url:“网址”
}).then(res=>({
console.log(res)
}).cath(err=>{
console.log(err)
})
}
展示弹窗:
xx.wxml:
<button size="mini" bindtap="shoeToast">展示弹窗</button>
xx.js:
shoeToast(){
wx.showToast({
title:"aaa",
success(){
console.log("成功")
},
fail(){
console.log("失败")
},、
complete(){
console.log("结束时触发")
}
})
}
xxx.wxml:
<button size="mini" bindtap="ShowModal">展示弹窗</button>
xxx.js:
ShowModal(){
wx.showModal({
title:"我是标题"，
content:"我是内容"，
showXancel:true//取消按钮是否存在
cancelText:'退出'，//取消按钮的文本内容
cancelColor:red,//取消按钮的文本内容
success:function(res){
console.log(res);
if(res.cancel){
console.log("用户点击了取消按钮");
}
if(res.confirm){
console.log("用户点击了确定按钮")
}
},
})
}
xxxx.wxml:
<button size="mini" bindtap="ShowLoading">展示弹窗</button>
xxxx.js:
ShowLoading(){
wx.showLoading({
title:"加载中ing",
mask:true//蒙版
})
setTimeout(()=>{
//必须手动hideloding才会让loading消失
wx.hideLoading()
},1000)
}
xxxxx.wxml://底部弹窗
<button size="mini" bindtap="showaction">展示弹窗</button>
xxxxx.js:
showaction(){
wx.showActionSheet({
itemList:['拍照','相册'],
itemColor:"red",//字体颜色
success:function(res){
console.log(res)
},
conplete:function(){
console.log("结束")
}
})
}
在小程序中使用分享:
一:用户点击小程序右上角的菜单按钮进行分享onShareAppMessage:function(option){
return{
title:"aaaa",
path:"转发的路径"，
imageURL:"本地图片/网络图片"
}
}(xx.js)
二:分享按钮
<buttob size="mini" open-type='share'>分享按钮</button>
小程序的登录流程:
1.调用wx.login获取code(code只有五分钟的有效时间)
2.调用wx.request发送code到我们自己的服务器(服务器会返回一个登录态的标识，比如token)
3.将登录态的标识token进行存储，以便下次使用
4.请求需要登录态标识的接口时，携带token
app.js:
const TOKEN=‘token’
App({
globalData:{
token:""
},
onLaunch: function () {
//1.先从缓存中取出token
const token = wx.getStorageSync(TOKEN)
//判断token是否有值
if(token && token.length !==0){
//已经有token,只需验证token是否过期
this.check_token(token)
}else{
//没有token,进行登录操作
this.login()
}
},
check_token(token){
console.log(“执行了验证操作”)
wx.request({
url: ‘http://123.207.32.32:3000/auth’,
method:“post”,
header:{
token
},
success:(res)=>{
if(!res.data.errCode){
console.log(“token有效”)
this.globalData.token=token;
}else{
console.log(“token无效”)
this.login()
}
},
fail:function(err){
console.log(err)
}
})
},
login(){
console.log(“执行了登陆操作”)
wx.login({
//code只有五分钟的有效时间
success: (res) => {
//1.获取code
const code = res.code;
//2.将code发送给我们的服务器
wx.request({
url: ‘http://123.207.32.32:3000/login’,
data: {
code
},
method: ‘post’,
success: (res) => {
//1.取出token
const token = res.data.token;
//2.将token保存在globalData中
this.globalData.token = token;
//3.进行本地存储(Sync表示同步存储)
wx.setStorageSync(TOKEN, token)
}
})
}
})
}
})
页面跳转:
界面跳转的方式有两种:navigator组件和wx的API跳转
navigator组件:
xx.wxml:
跳转页面
注意: 1.navigator的open-type属性
1.redirect:关闭当前页面，跳转到应用内的某一个页面。但是不允许跳转到tabbar页面，并且不能返回。(不是一个压栈,没有返回按钮)
2.swithTab:跳转到tabbar页面，关闭其他所有非tabbar页面。(需要有在tabbar中定义页面)
3.relaunch:关闭所有页面，打开应用中某个页面。(直接展示某个页面，并且可以跳转到tabbar页面)
4.navigateBack:返回按钮
4.1.delta:数字(一次性返回多少层级)界面跳转过程中数据的传递:(以键值对的形式传递)
1.跳转页面(数据已经传到跳转页面的js文件里onLoad:function(options){ console.log(options)})
2.onUnload(){//页面退出时触发
//获取首页的页面对象
const pages=getCurrentpages();
//获取首页对象
const home=pages[pages.length -2]
homesetData({
title:“哈哈哈”
})
}
代码实现页面跳转流程:
1.监听点击
2.wx.navigator/1.redirect:/swithTab/relaunch/navigateBack({ url:“xxxxxxxxxx” })
1891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
