【随手记】微信小程序入坑指南

// pages/profile/profile.js
Page({
  data: {
    avatarURL: "",
    listCount: 30
  },

  // 这里针对的是展示数据较多的页面，初始刷新，下拉onPullDownRefresh返回30条数据
  // 当用户浏览至底部后，触发onReachBottom返回额外的30条数据
  
  // 监听下拉刷新
  onPullDownRefresh() {
    console.log("用户进行下拉刷新~");

    // 模拟网络请求: 定时器
    setTimeout(() => {
      this.setData({ listCount: 30 })

      // API: 停止下拉刷新
      wx.stopPullDownRefresh({
        success: (res) => {
          console.log("成功停止了下拉刷新", res);
        },
        fail: (err) => {
          console.log("失败停止了下拉刷新", err);
        }
      })
    }, 1000)
  },

  // 监听页面滚动到底部
  onReachBottom() {
    console.log("onReachBottom");
    this.setData({
      listCount: this.data.listCount + 30
    })
  }
})

<view class="list">
  <block wx:for="{{listCount}}" wx:key="*this">
    <view>列表数据:{{ item }}</view>
  </block>
</view>

// pages/order/order.js
Page({
  data: {
    userInfo: {}
  },

  onLoad() {
    // 获取共享的数据: App实例中数据
    // 1.获取app实例对象
    const app = getApp()

    // 2.从app实例对象获取数据
    const token = app.globalData.token
    const userInfo = app.globalData.userInfo
    console.log(token, userInfo);

    // 3.拿到token目的发送网络请求
    
    // 4.将数据展示到界面上面
    // this.data.userInfo = userInfo
    this.setData({ userInfo })
    console.log(this.data.userInfo);
  }
})

App({
  globalData: {
    token: "",
    userInfo: {}
  },
  onLaunch (options) {
    // Do something initial when launch.
    
    // 0.从本地获取token/userInfo
    const token = wx.getStorageSync("token")
    const userInfo = wx.getStorageSync("userInfo")

    // 1.进行登录操作(判断逻辑)
    if (!token || !userInfo) {
      // 将登录成功的数据, 保存到storage
      console.log("登录操作");
      wx.setStorageSync("token", "kobetoken")
      wx.setStorageSync("userInfo", { nickname: "kobe", level: 100 })
    }

    // 2.将获取到数据保存到globalData中
    this.globalData.token = token
    this.globalData.userInfo = userInfo

    // 3.发送网络请求, 优先请求一些必要的数据
    // wx.request({ url: 'url'})
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  }
})

<!-- home首页 -->
<view class="pages">
  <block wx:for="{{pages}}" wx:key="name">
    <!-- item是index.js中已定义的值，data-item是个人自定义的名字，data-name、data-id都可以 -->
    <button
      type="primary" 
      bindtap="onBtnClick"
      data-item="{{item}}"
    >
      {{ item.name }}
    </button>
  </block>
</view>

// index.js
Page({
  data: {
    // path中的 02 是一条错误示范
    pages: [
      { name: "01_初体验", path: "/pages/01test/index" },
      { name: "02_页面配置", path: "pages/02_页面配置/index" }
    ]
  },
  onBtnClick(event) {
    // 1.获取item
    const item = event.target.dataset.item

    // 2.跳转路径
    wx.navigateTo({
      url: item.path,
    })
  }
})

Page({
  data: {
    banners: [],
    recommends: [],

    // 2.作用二: 定义本地固定的数据
    counter: 100,

    btns: ["red", "blue", "green", "orange"]
  },
  // 1.作用一: 发送网络请求, 请求数据
  onLoad() {
    console.log("onLoad");

    // 发送网络请求
    wx.request({
      url: "",
      success: (res) => {
        const data = res.data.data
        const banners = data.banner.list
        const recommends = data.recommend.list
        this.setData({ banners, recommends })
      }
    })
  },
  ...
  
})

<view class="banner">
  <swiper circular autoplay indicator-dots="{{true}}">
    <block wx:for="{{banners}}" wx:key="acm">
      <swiper-item>
        <!-- image组件默认宽度和高度: 320x240 -->
        <image mode="widthFix" src="{{item.image}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>