微信小程序
home.wxml
<!--pages/home/home.wxml-->
<text>我是首页</text>
<!-- bindtap点击事件====click -->
<button bindtap="fn">请求</button>
<!-- open-type="switchTab":跳转到其他Tab页面 -->
<!-- open-type="navigate":跳转到非tab页面-->
<navigator url="/pages/message/message?uname=ls&age=20" open-type="navigate">消息页面</navigator>
<navigator url="/pages/connact/connact" open-type="switchTab">联系页面</navigator>
<button bindtap="fun">跳转到tab页面</button>
<button bindtap="fu">跳转到非tab页面</button>
<text>{{sum}}</text>
<button bindtap="addSum">+1</button>
home.js
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
sum:0
},
fn(){
// 发起网络数据请求
wx.request({
// 请求的路径
url: 'https://www.escook.cn/api/get',
method:"get",
data:{
name:'李四',
age:20
},
success:(res)=>{
// 获取到name，和age值（就是上面的data）
console.log(res.data.data);
}
})
},
fun(){
wx.switchTab({
url: '/pages/connact/connact',
})
},
fu(){
wx.navigateTo({
url: '/pages/message/message',
})
},
// 声明周期函数是会自动加载的
/**
* 生命周期函数--监听页面加载
*/
// onl oad: function (options) {},
onLoad(){
this.fn()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
// 下拉刷新之后，sum的值变成0
onPullDownRefresh: function () {
this.setData({
sum:0
})
},
addSum(){
this.setData({
sum:this.data.sum+1
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
下拉案例（颜色随机）
.js文件
// pages/bTot/bTot.js
Page({
/**
* 页面的初始数据
*/
data: {
// 1.随机颜色的列表
colorList: [],
// 节流阀
// true表示当前没有进行任何数据请求
// false表示当前正在进行数据请求
isLoading:false
},
// 1.获取随机颜色的方法
getColors() {
this.data.isLoading=true
// 5.Loading加载效果
wx.showLoading({
title: '数据加载中...',
})
// 1.发起请求，获取随机颜色值的数值
wx.request({
url: 'https://www.escook.cn/api/color',
method: 'GET',
success: ({ data: res }) => {
this.setData({
colorList: [...this.data.colorList, ...res.data]
})
},
// 5.方法加完时
complete:()=>{
this.data.isLoading=false
// 5.隐藏加载效果Loading
wx.hideLoading()
}
})
},
/**
* 生命周期函数--监听页面加载
*/
// 相当于vue的mounted（挂载期）
onl oad: function (options) {
// 2.在生命周期加载时期调用获取随机颜色的方法
this.getColors()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if(!this.data.isLoading){
// 4.调用获取随机颜色的方法
this.getColors()
}else{
return false
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
.js文件
<!--pages/bTot/bTot.wxml-->
<text>我是作业</text>
<!-- 3.渲染UI结构 -->
<view wx:for="{{colorList}}" wx:key='index' class="num-item" style="background-color:rgba({{item}})">
{{item}}
</view>
.wxss文件
/* pages/bTot/bTot.wxss */
/* 3.美化页面效果 */
.num-item{
border: 1rpx solid #efefef;
border-radius: 8rpx;
line-height: 200rpx;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 1rpx 6rpx #aaa;
}
返回上一个页面
wx.navigateBack()
tab栏
app.json
{
"pages":[
"pages/bTot/bTot",
"pages/home/home",
"pages/message/message",
"pages/connact/connact"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
},
//tabBar栏
"tabBar": {
"position": "bottom",
"color": "8e96fd",
"borderStyle": "black",
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "./assets/images/home.png",
"selectedIconPath": "./assets/images/home-active.png"
},
{
"pagePath": "pages/connact/connact",
"text": "联系",
"iconPath": "./assets/images/contact.png",
"selectedIconPath": "./assets/images/contact-active.png"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}