微信小程序:JS 交互逻辑

爱⌒轻易说出口 提交于 2019-11-27 12:59:20

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。


逻辑层(App Service)=>test.js

Page({
  /**
   * 页面的初始数据,声明变量
   */
  data: {
    name: 'Hello MiNi~',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log('cart_print_log==========' + JSON.stringify(cartList));
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
     //设置页面标题
     wx.setNavigationBarTitle({
            title: "mytest"
        });
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
   /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
   /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },
   /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {//====>向上拉页面,翻页
    if (!this.data.last) {
      this.setData({
        page: this.data.page + 1
      });
      wx.showLoading({
        title: '正在加载中',
      });
      this.getGoodsList();//====>查询第2+页数据
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /**
  *自定义函数
  */
  changeName: function () {
    this.setData({
      name: 'Jack'
    })
  },
  });

视图层(View)=>test.wxml

<view>{{name}}</view><!-- 响应的数据绑定 -->
<button bindtap='changeName'>Click me!</button><!-- 触发自定义方法,事件处理函数bindtap -->
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!