微信公众号开发

微信小程序-小案例、节流阀

本文主要是介绍微信小程序-小案例、节流阀，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序

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"
}
这篇关于微信小程序-小案例、节流阀的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航