小程序页面开发及配置

一、注册App

每个小程序都需要在 app.js 中调用 App 函数 注册小程序实例

• 在注册时, 可以绑定对应的生命周期函数

• 在生命周期函数中, 执行对应的代码

• App({})

1.1 判断进入场景

• onLaunch：监听小程序初始化
• onShow：监听小程序启动或切前台
  • options
    • scene属性：判断小程序的进入场景
• onHide: 监听小程序切后台

1.2 全局共享数据

• globalData：数据不是响应式, 这里共享的数据通常是一些固定的数据

• 定义的数据可以在其他任何页面中访问

  const app = getApp()
  app.globalData.xxx
  

1.3 页面启动操作

• 登录操作

• 将数据保存Storage中

• 下次重启可以从Storage读取数据

• 保存到globalData中

  App({
    // 作用二: 共享数据
    // 数据不是响应式, 这里共享的数据通常是一些固定的数据
    globalData: {
      token: "",
      userInfo: {}
    },
    onLaunch(options) {
      // 0.从本地获取token/userInfo
      const token = wx.getStorageSync("token")
      const userInfo = wx.getStorageSync("userInfo")
  
      // 1.进行登录操作(判断逻辑)
      if (!token || !userInfo) {
        // 将登录成功的数据, 保存到storage
        console.log("登录操作");
        wx.setStorageSync("token", "fafiodafjoadsa")
        wx.setStorageSync("userInfo", { nickname: "lilei", level: 100 })
      }
  
      // 2.将获取到数据保存到globalData中
      this.globalData.token = token
      this.globalData.userInfo = userInfo
  
  
      // 3.发送网络请求, 优先请求一些必要的数据
      // wx.request({ url: 'url'})
    },
    onShow(options) {
      // 作用一: 判断小程序的进入场景
      console.log("onShow:", options);
    },
    onHide() {
      console.log("onHide");
    }
  })
  

二、注册Page

小程序中的每个页面, 都有一个对应的js文件, 其中调用Page函数注册页面实例

• 在注册时, 可以绑定初始化数据、生命周期回调、事件处理函数等。

• Page({})

2.1 网络请求

• 网络请求
• 获取数据 - 保存data
• 在wxml中使用swiper-swiper-item进行展示

2.2 在data中初始化数据

• 初始化一些数据，以方便被wxml引用展示

2.3 wxml事件绑定函数

<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>

<view class="counter">
  <view>当前计数: {{ counter }}</view>
</view>

<view class="buttons">
  <button bindtap="onBtn1Click">按钮1</button>

  <block wx:for="{{btns}}" wx:key="*this">
    <!-- 样式动态绑定{{}}语法 -->
    <button 
      class="btn" 
      style="background: {{item}};"
      bindtap="onBtnClick"
      data-color="{{item}}"
    >
      {{ item }}
    </button>
  </block>
</view>


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

2.4 绑定其他事件

• 下拉刷新

• 达到底部

• 页面滚动

  Page({
    data: {
      banners: [],
      recommends: [],
  
      // 2.定义本地固定的数据
      counter: 100,
  
      btns: ["red", "blue", "green", "orange"]
    },
    // 1.发送网络请求, 请求数据
    onLoad() {
      console.log("onLoad");
  
      // 发送网络请求
      wx.request({
        url: "http://123.207.32.32:8000/home/multidata",
        success: (res) => {
          const data = res.data.data
          const banners = data.banner.list
          const recommends = data.recommend.list
          this.setData({ banners, recommends })
        }
      })
    },
  
    // 3.绑定wxml中产生事件后的回调函数
    onBtn1Click() {
      console.log("onBtn1Click");
    },
    onBtnClick(event) {
      console.log("btn click:", event.target.dataset.color);
    },
  
    // 4.绑定下拉刷新/达到底部/页面滚动
    onPullDownRefresh() {
      console.log("onPullDownRefresh");
    },
    onReachBottom() {
      console.log("onReachBottom");
    },
    onPageScroll(event) {
      console.log("onPageScroll:", event); // {scrollTop: 300}
    },
  
    // 生命周期函数: 
    onShow() {
      console.log("onShow");
    },
    onReady() {
      console.log("onReady");
    },
    onHide() {
      console.log("onHide");
    },
    onUnload() {
      console.log("onUnload");
    }
  })
  

2.5 生命周期

• 官网介绍
• 注册页面