小程序 – 原生小程序快查
页面配置
全局页面配置page
局部页面配置
数据传递
在说明使用数据传递之前,我们需要知道,小程序的数据存储基本方式:
1.在每个页面的page({})函数中定义data属性,作为数据存储的地方。
Page({
data: {
name: "TZMing",
age: 18
}
})
设置数据
微信提供了一种set方法对数据进行设置
// 设置data中的数据
this.setData({
name: "unsoft"
});
获取数据
小程序中获取数据,不需要直接使用get方法(也没有这个方法)而是直接使用 this.data 来获取数据
// 获取data中的数据
const name = this.data.name;
const age = this.data.age;
console.log("name:" + name + ", age: " + age);
方法传递数据
在小程序按钮调用方法时,需要把一些数据传到方法中去时,使用 data-xx 和 event 来接收数据,而不是使用 method(xx) 来传数据
如以下的安钮,声明了点击方法:
<view>
<!-- 声明事件可以使用 bind:tap 也可以使用 bindTap -->
<button bind:tap="tap" data-name="TZMing">button</button>
</view>
但当我们需要把数据“TZMing” 传递到方法中时,需要使用 data-xxx 来定义形参名
可以在 event 的 target.dataset 中找到传过来的数据参数名
tap(event){
// 需要通过 event 事件对象获取到传进来的数据
const name = event.target.dataset.name;
this.setData({
name: name
})
},
条件渲染
wx:if
对页面中的元素进行判断渲染,为true 时渲染,为false时不渲染
<view wx:if="{{ true }}"> 我是会显示的元素 View </view>
<view wx:elif="{{ true }}"> 当上一级元素为false时,再判断 </view>
<view wx:if="{{ false }}"> 我是不会显示的元素 View </view>
<view wx:else > 当上一级元素为false时,再判断 </view>
hidden
当 hidden 为 true 时,则对元素进行隐藏不可以见,当为 false时,则显示元素
<view hidden="{{true}}" > 这个元素不会被显示 </view>
<view hidden="{{false}}" > 这个元素会被显示 </view>
与 wx:if 的区别:
hidden 只是使元素进行 display:none 样式设置,但元素本身还是存在的
而wx:if 则是直接在wxml中删除元素
wx:for
作为数据循环渲染的方法,带有变量 item 和 index
item 变量则是对这个数组循环时的单个成员数据
index 变量则是表示当前的循环索引
<view wx:for="{{list}}">
<block>{{item.name}}</block>
<block>{{index}}</block>
</view>
注意:block 是一个不会被渲染的元素标签,和Vue中的<template> 标签类似
数据请求
wx.request
小程序提供了请求Api方法,在小程序中不能使用第三方的请求插件,如Axios这些是使用XHR实现的,而小程序没有XHR概念。
wx.request 的详细参考可以在以下网址:
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
主要使用的参数如下:
wx.request({
url: 'url',
method: "GET",
data: {},
header: {},
seccess: res => {},
fail: err => {},
complete: () => {}
})
url : 要请求的URL全地址
method: 请求的方式
data: 使用POST请求时要传递的数据
header: 请求头数据
seccess: 当请求成功时,调用的函数方法,提供res参数为响应数据
fail: 当请求失败时,调用的函数方法,提供了err参数为错误信息
complete: 不管成功与否,都会执行的函数方法
Promise 化
wx.request 的 Promise 化
小程序的 wx.request 接口是没有做Promise化的,这对于开发中而言,若需要请求多个接口时,可能会出现回调地狱的情况
我们可以使用Promise对wx.request进行异步处理化,这样可以方便地在开发中实现异步请求。
req() {
return new Promise((reslove, rejeck) => {
wx.request({
url: 'url',
method: "GET",
data: {},
header: {},
seccess: res => {
reslove(res);
},
fail: err => {
rejeck(err);
},
complete: () => {
// 自定义处理完成请求后的清理工作
}
})
});
},
生命周期
onLoad
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const prop = options.prop;
},
onReady
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
onShow
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
onHide
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
onUnload
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
onPullDownRefresh
"window":{
"enablePullDownRefresh": true
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
onReachBottom
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
可以对上拉触底的阈值进行设置,默认距离为50px,滑动到距离底部50px时就会被触发
"window":{
"onReachBottomDistance": 50
},
组件生命周期
组件与页面最大的区别在于,组件的方法触发应放在 methods 选项属性中,而页面只需把方法直接定义在Page({}) 中即可。
Component({
/**
* 组件的方法列表
*/
methods: {
}
})
而组件的生命周期将定义存放在 lifetimes 选项属性中。
Component({
/**
* 组件的生命周期
*/
lifetimes: {
created(){},
attached(){},
ready(){},
moved(){},
detached(){},
error(err){}
}
})
注意:
1.created() 时期为页面开始创建时期,不能使用 setData 方法对数据进行操作
2.attached() 时期为页面已完成创建并在节点树中,可以在这个生命周期中进行setData操作。
下拉刷新与上拉加载
下拉刷新
下拉刷新需要页面开启下拉刷新功能
"window":{
"enablePullDownRefresh": true,
},
详细的下拉刷新操作可以查看以下网址:
可以通过调用 wx.startPullDownRefresh 方法使页面进行下拉刷新动作,与用户手动下拉是一样效果
可以通过调用 wx.stopPullDownRefresh 方法关闭下拉刷新动作,这个需要开发者请求完数据后代码关闭。否则下拉加载中的样式会一直显示。
上拉加载
上拉加载使用的是 生命周期方法 onReachBottom 进行控制,当触发上拉加载时,我们可以请求新的数据到页面中:
举例
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom(option) {
// 增加页数
this.setData({
page: this.data.page + 1
})
// 向服务器请求新的数据
wx.request({
url: 'url',
method: "POST",
data: {
page: this.data.page
},
success: (res) => {
// 合并新旧数据
this.setData({
list: [...this.data.list, ...res.data.data]
})
}
})
},
页面路由跳转
声明式导航
跳转到Tabbar页
我们可以在wxml中声明元素中带有跳转意图的标签,使得点击该标签时,跳转到Tabbar页
<view>
<navigator open-type="switchTab" url="/pages/index/index"></navigator>
</view>
注意:
1.如果跳转的是Tabbar页面时,我们需要在navigator标签中加入 open-type 属性值为 switchTab 才可以,否则默认会以非 Tabbar 页的方式进行导行跳转。
2.url 中的地址一定要以 "/" 开头
跳转到非Tabbar页
对于跳转到非Tabbar页时,会进行Push页面,这时可以使用以下方式:
<view>
<navigator open-type="navigate" url="/pages/index/index"></navigator>
</view>
注意:
1.open-type 默认就是 navigate 所以可以不写。
2.url 中的地址一定要以 "/" 开头
返回上一级
针对非Tabbar页面的返回上一页功能,可以使用以下方式进行跳转
<view>
<navigator open-type="navigateBack"></navigator>
</view>
编程式导航
跳转到Tabbar页
要在代码中控制页面进行跳转,我们可以使用API wx.switchTab 进行实现
wx.switchTab({
url: '/pages/index/index',
success:()=>{},
fail:()=>{},
complete:()=>{}
})
跳转到非Tabbar页
要在代码中控制页面进行跳转非Tabbar页,我们可以使用API wx.navigateTo 进行实现
wx.navigateTo({
url: '/pages/index/index',
success:()=>{},
fail:()=>{},
complete:()=>{}
})
返回上一级
要在代码中控制页面进行返回上一页,我们可以使用API wx.navigateBack 进行实现
wx.navigateBack({
delta: 1,
success:()=>{},
fail:()=>{},
complete:()=>{}
})
delta 可以指定返回多少级的页面,默认为返回一页
导航传参
在页面与页面之间的跳转时,我们有时候需要对页面跳转时把某些数据传给下一个页面中,这时我们就可以使用页面传参的方式进行
具体格式如下:
- 以
?
分割url
和参数 - 以
=
连接参数的key
和value
- 以
&
来拼接参数
声明式导航传参
举例子:
<view>
<navigator open-type="navigate" url="/pages/index/index?name={{name}}&age={{age}}"></navigator>
</view>
编程式导航传参
举例子:
wx.navigateTo({
url: `/pages/detail/detail?index=${index}&title=${title}`,
})
数据监听器
当组件或页面中的数据发生变化时,我们要如何对这些数据的变化进行监听呢,就需要使用监听器了。
小程序提供一种数据监听器,可以对指定数据进行监听
Component({
/**
* 组件的初始数据
*/
data: {
prop: 1
},
/**
* 数据监听器
*/
observers: {
prop: function(val){
// key 为要监听的 data 中的变量名
// value 则是当这个变量值发生变化时的调用方法
}
}
})
组件间通讯
父子关系
父向子传参
父向子传参相对比较简单,小程序中,子组件提供了一个可以用来接收参数的选项属性 properties
Component({
/**
* 组件的属性列表
*/
properties: {
prop: String
},
})
在父组件中要向子组件传递参数只需要在标签上加上传递的值即可。
<child prop= "{{ data }}"></child>
子向父传参
子向父传参使用的是事件方法传递,类似Vue的 Emit 方法传递,其语法如下:
子组件中定义方法传递:通过 triggerEvent 方法发送一个通知,通知父组件接收数据
methods: {
met(){
this.triggerEvent("change",{
parentProp: this.data.prop
})
}
},
而在父组件中,则定义 bind:xxx 进行事件的接收操作
<child bind:change="onChange"></child>
父组件中接收的 bind:xx 中的名字需要和子组件中定义的名字change一致。
onChange 方法中则可以接收到来自子组件往change中传递的数据
兄弟关系
在小程序中,兄弟关系=没有关系,因为兄弟元素之间并不会有直接的联系,
如果要让这些兄弟元素之间进行通讯,则需要创建一个共同的父元素,通过父元素中间中转数据
即:兄弟A->父元素->兄弟B
组件插槽
单个插槽
单个插槽又叫默认插槽,若我们的组件中只需要放置一个插槽时,我们可以使用默认插槽,
小程序中默认提供单个插槽的功能,插槽的占位符使用如下表示:
<slot></slot>
多个插槽
多个插槽又叫具名插槽,当组件中需要使用的插槽个数大于1时,如时使用默认插槽的话,我们无法区分多个插槽中什么插槽数据放在什么占位地方,因此我们可以为插槽定义名称,我们可以通过名称来定义占位的插槽位置。
注意:小程序中默认关闭了多个插槽的功能,若要使用多个插槽,我们需要在小程序中声明开启多个插槽的功能,具体开启功能如下:
Page({
/**
* 页面的配置项
*/
options: {
multipleSlots: true // 开启多个插槽功能
},
})
在组件中定义不同的插槽名称
<view>
<slot name="header"></slot>
组件内容
<slot name="footer"></slot>
</view>
而在父组件中,使用多个插槽中时,只需要加入slot属性即可。
<view slot="header">
这是头部插槽数据
</view>
<view slot="footer">
这是尾部插槽数据
</view>
共有 0 条评论