小程序>微信小程序-注册app和page

app

判断进入的场景

javascript">App({
    //小程序初始化完成时触发，全局只触发一次
  onLaunch(options){
    console.log(options);
  },
    //小程序启动，或从后台进入前台显示时触发
  onShow(options){
    // 判断小程序的进入场景
    console.log('onshow',options);
  },
    //小程序从前台进入后台时触发  小程序隐藏时候触发
  onHide(options){
    console.log('onhide',options);
  }
 
})

定义全局app的数据-实现数据的共享

1,app.js里定义数据

javascript">App({
  // 数据不是响应式的，这里共享的数据都是一些固定的数据
  global:{
    userInfo:{
      name:"hahaha",
      age:"12"
    }
  },

2.要共享的目标文件

javascript">// pages/favor/favor.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   user:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // 获取共享中的数据：app实例中的数据
    // 1.获取app实例对象
    const app=getApp()
    // 从app实例对象获取数据
      const user= app.global.user
      console.log(user);
      // 2.拿到数据发送网络请求

      // 3.将数据展示到页面上
     // this.data.user=user   错误写法   小程序不是vue  只能直接操作data
     this.setData({
       user:user
     })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

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

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

3,页面展示

javascript"><!--pages/favor/favor.wxml-->
<view>
  <view>
    name:{{user.name}}
  </view>
</view>

onLaunch生命周期

javascript">//app.js  判断登 
// 数据不是响应式的，这里共享的数据都是一些固定的数据
  global:{
    token:"",
    user:{
  }
onLaunch(options){
    //console.log(options);
    // 本地获取token /user
    const token = wx.getStorageSync("token")
    const user = wx.getStorageSync("user")
    console.log('to',token);
    // 1.进行登陆操作
    //  2将登录成功的数据存入storage
    if(!token||!user){
      console.log("登录操作");
      wx.setStorageSync('token', "haha")
      wx.setStorageSync('user', {name:"kekeke",age:12})
    }
    // 将获取的数据保存到global中
    this.global.token=token
    this.global.user=user
  },

页面-page函数

小程序中的每个页面，都有一个对应的js文件其中page函数注册页面

在注册时候可以绑定初始化数据，生命周期回调 事件处理函数

案例

javascript"><view class="buttons">
    <button bindtap="onclick">按钮1</button>
    <block wx:for="{{btns}}" wx:key="*this">
      <button    
        class="btn"
        style="background: {{item}};"
        bindtap="onclick1"
        data-color="{{item}}"
      >
      {{item}}
      </button>
    </block>
  </view>
</view>
<view class="list">
  <block wx:for="{{30}}" wx:key="*this">
    <view>
      列表数据：{{item}}
    </view>
  </block>
</view>

javascript">// pages/01_register_page/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 定义本地固定数据
    counter:100,
    btns: ["red", "blue", "green", "orange"]
  },

 
  onclick(){
    console.log("11");
  },
  onclick1(event){
   //console.log('btn',event.target.dataset.color);
   console.log(event);
  },
  // 绑定下拉刷新 达到底部   、页面滚动
  onPullDownRefresh(){
    console.log("onPullDownRefresh");
  },
  onReachBottom(){
    console.log("onReachBottom");
  },
  onPageScroll(event){
    console.log("onPageScroll",event);
  },
  // 生命周期函数: 
  onShow() {
    console.log("onShow");
  },
  onReady() {
    console.log("onReady");
  },
  onHide() {
    console.log("onHide");
  },
  onUnload() {
    console.log("onUnload");
  }
})