目录
1.小程序当前页面A方法如何传递信息到B方法
例：在data初始化当前页面的全局变量str（可以是任意变量）
可以在当前方法或其他方法直接通过this直接获取或赋值当前变量（不推荐）
例:this.str = num;
建议将this封装赋值一下
例：var that = this；
为什么要封装this：
this对象在程序调用时，如点击事件中会随时改变，而var that=this之后，that没重新赋值之前仍然是指向当时的this，这样就不会出现找不到原来的对象而导致报错
原因简述：当this指向已经发生改变，将不存在data属性，而var that=this之后可以避免这个问题
Page({
/**
* 页面的初始数据
*/
data: {
str:null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var that = this;
var num = 1;
that.str = num;
},
})通过在另一个方法重新var that=this可以将上一个方法的值获取下来
通过console.log将对象进行打印
代码：
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
var that = this;
console.log(that.str) //打印
}, 结果：
2.小程序如何从其他页面获取参数
A页面：
小程序通过wx.navigateTo方法跳转页面时，可以通过url携带参数传递数据到对应的页面
代码：
wx.navigateTo({
url: '../SaleSelect/SaleSelect?number=' + number + '&phone=' + that.phone + '&user' + that.user
})B页面：
可以通过 onLoad: function (options)，通过options对象获取到上一个页面的数据
代码：
onLoad: function (options) {
var that = this;
var number = options.number;
that.numbers = number;
console.log(options.number)
}打印结果：
3.小程序如何快速新增页面
（1）点击pages文件，右键新增文件夹
例：
（2）点击新增的文件夹，右键新增page
例：
（3）就会产生四个可编辑页面啦
4.如何查看和调整小程序显示页面的先后顺序
（1）可以在app.json查看页面显示的先后顺序
注:可通过调整页面的先后顺序，修改页面的显示层级，排名优先显示越优先，末尾不需要加逗号
例：我将UserCTB排至第一位，显示的就是UserCTB页面
我将login页面排至第一位，显示的就是login页面（简陋的画了一下页面，勿喷）
5.小程序如何设置全局变量
在app.js页面通过调用onLaunch方法对变量进行初始化赋值，在其他页面就可以通过调用app.js.对象名对变量进行赋值和全局调用
onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
（1）页面如何调用
想要调用app.js页面的变量，必须在对应的JS页面对app进行调用
代码：
var app = getApp()（2）页面如何赋值与使用
A页面：
通过后台在A页面对app.user和app.phone进行赋值打印
打印：
B页面：
注：B页面头部也需要对app.js进行初始化，才能在当前页面进行全局变量的接收与赋值
var app = getApp()
在B页面接收赋值打印全局变量
打印：
6.小程序生命周期方法简介
（1）生命周期函数
onLoad：监听页面加载，参数为上个页面传递的数据，参数类型为 Object，通过参数名.对象获取上一个页面传递的数据
onReady：监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onShow：监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onHide：监听页面隐藏,通过tabbar标签切换页面，同样是隐藏并不是卸载
onUnload：监听页面卸载，页面返回或跳转都会触发当前事件
onPullDownRefresh:监听用户下拉动作,用户下拉刷新的时候会触发事件
onReachBottom：监听页面触底，页面上拉触底事件的处理函数
onShareAppMessage：监听用户右上角分享，用户点击右上角分享的处理函数
代码：
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
7.小程序列表单选与全选功能实现
（1）图片效果演示
全选：
多选:
打印效果显示:
（2）示例代码
js页面
Page({
/**
* 页面的初始数据
*/
data: {
headerArray: [{
text: '单据编号',
}, {
text: '单据类型'
}, {
text: '查看用户'
}, {
text: '联系方式'
}],
SalaWxCtlist: [], //后台数组名称
number:null, //单个编码
select_all: false, //是否全选
},
onLoad(options) {
var that = this
wx.request({
//后台数据获取
url: 'https:xxxxxxxxxxxxxxx',
data: {},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
that.setData({
SalaWxCtlist: res.data.SalaWxCtlist,
})
},
})
},
//全选与反全选
selectall: function (e) {
var arr = []; //存放选中编码的数组
for (let i = 0; i < this.data.SalaWxCtlist.length; i++) {
this.data.SalaWxCtlist[i].checked = (!this.data.select_all)
if (this.data.SalaWxCtlist[i].checked == true) {
// 全选获取选中的值
//用分隔符将每个编号分开
arr = arr.concat(this.data.SalaWxCtlist[i].FBillNo.split(','));
}
}
this.setData({
SalaWxCtlist: this.data.SalaWxCtlist,
select_all: (!this.data.select_all),
choseNames: arr //choseNames 选中的编码
})
},
// 单选
checkboxChange: function (e) {
var that = this;
console.log(e.detail.value)
that.number = e.detail.value;
this.setData({
choseNames: e.detail.value, //单个选中的值
})
if (this.data.choseNames.length == this.data.SalaWxCtlist.length) {
this.setData({
select_all: true
})
} else {
this.setData({
select_all: false
})
}
},
})xwml页面
<view class="page">
<form bindsubmit="formSubmit">
<view class="content">
<view class="top-title">
<button class="title-item" type="primary" form-type="submit" bindtap="submitbtn">清除</button>
</view>
<swiper-item>
<view>
<scroll-view scroll-x="true" class="scrollClass">
<view class="table">
<view class="table_header">
<view class="th">
<checkbox checkeds="{
{elect_all}}" bindtap="selectall" />
</view>
<block wx:for="{
{headerArray}}" wx:key="{
{text}}">
<view class="th">
<view class="centerclass cell_label">{
{item.text}}</view>
</view>
</block>
</view>
<checkbox-group bindchange="checkboxChange">
<block wx:for="{
{SalaWxCtlist}}" wx:key="number" wx:for-item="mate" class="rowblock">
<view class="data">
<view class="th">
<checkbox value="{
{mate.FBillNo}}" checked="{
{mate.checked}}" />
</view>
<view class="th">
<view bindtap="editMateral" class="centerclass cell_label" data-number='{
{mate.FBillNo}}'>{
{mate.FBillNo}}</view>
</view>
<view class="th">
<view class="centerclass cell_label">{
{mate.bill}}</view>
</view>
<view class="th">
<view class="centerclass cell_label">{
{mate.client}}</view>
</view>
<view class="th">
<view class="centerclass cell_label">{
{mate.phone}}</view>
</view>
</view>
</block>
</checkbox-group>
</view>
</scroll-view>
</view>
</swiper-item>
</view>
</form>
</view>wxss页面
page {
background: #f5f5f5;
}
.tabs {
display: flex;
flex-direction: row;
width: 100%;
z-index: 99;
}
.select {
font-size: 15px;
color: red;
width: 50%;
text-align: center;
height: 45px;
line-height: 45px;
border-bottom: 5rpx solid red;
}
.default {
font-size: 15px;
margin: 0 auto;
padding: 15px;
}
.hr {
border: 1px solid #cccccc;
opacity: 0.2;
}
.head {
padding-top: 15px;
text-align: center;
font-weight: bold;
font-size: 25x;
}
.table {
display: inline-flex;
flex-direction: column;
border: 1px solid rgba(218, 217, 217, 1);
border-bottom: 0;
}
.scrollClass {
display: flex;
width: 100%;
white-space: nowrap;
margin-top: 23px;
height: 100%;
background-color: #fff;
}
.table_header {
display: inline-flex;
}
.cell_label {
font-size: 26rpx;
font-weight: bold;
color: rgba(74, 74, 74, 1);
}
.data {
display: flex;
flex-direction: row;
}
.th {
display: flex;
width: 200rpx;
height: 90rpx;
border-right: 1rpx solid rgba(218, 217, 217, 1);
border-bottom: 1rpx solid rgba(218, 217, 217, 1);
justify-content: center;
align-items: center;
overflow-x: auto;
}
button[type=primary] {
background-color: #070ac1; /*按钮颜色*/
}
.top-title {
display: flex;
justify-content: center;
font-size: 12px
}
.title-item {
width: 120rpx;
line-height: 40rpx;
border-radius: 10rpx;
margin: 20rpx 0;
}
.paging .page_btn{
width: 96rpx;
height: 32rpx;
font-size: 32rpx;
font-family: "PingFangSC";
color: #c79b4a;
line-height: 36rpx;
float: left;
margin: auto 23rpx;
}
.page_num{
font-size: 24rpx;
font-family: "PingFangSC";
color: #c79b4a;
line-height: 36rpx;
float: left;
margin: auto 10%;
}
.paging{
width: 100%;
height: 108rpx;
font-size: 32rpx;
font-family: "PingFangSC";
color: #c79b4a;
line-height: 36rpx;
text-align: center;
}
.paging .up_page{
width: 96rpx;
height: 32rpx;
float: left;
margin-left: 72rpx;
}
.paging .down_page{
width: 96rpx;
height: 32rpx;
float: right;
margin-right: 72rpx;
}
.con .prizelist .page_num{
width: 500rpx;
font-size: 24rpx;
font-family: "PingFangSC";
color: #c79b4a;
line-height: 36rpx;
margin: auto;
}持续更新中.......