微信小程序Page与app关系、常用操作

一、概念：Page与App

每一个Page就代表一个页面，你创建了一个Page之后，软件会自动为你创建js, wxml, wxss。你可以在wxml中定义该页面的结构，在wxss中定义该页面的样式，在js中定义该页面会用到的操作、算法

App就是代表了整个项目程序，它站在最高层。在app.js中可以定义全局变量，这样整个项目下的所有页面都可以使用它，非常方便。

红色部分就是项目结构的Page，黄色部分就是项目结构的app数据。

二、如何在一个页面下获取app里的全局数据？

在该Page.js文件中的顶部加上：const app = getApp() 意为：获取该项目的app对象，这样后面我们就方便拿app里面的全局数据

【例子】： 比如我现在在app.js里面定义一个全局变量value：

globalData: {
          
   
    value: 123
  }

然后我要在另一个Page.js的OnLoad方法中使用到它，就可以这样操作:

const app = getApp()	//获取app对象

Page({
          
   

  /**
   * 页面的初始数据
   */
  data: {
          
   
    username: ,
    password: ,
  },
	/**
  * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
          
   
  //获取全局变量value的值，并保存在函数内的局部变量v中
    var v = app.globalData.value;
    //show
    console.log(v)
  },
}

最后在Page启动之后，我们就会在console中看到以下输出：

三、与Page相关的数据放哪里？如何在函数中获取和设置？

还是用刚刚的例子

const app = getApp()	//获取app对象

Page({
          
   

  /**
   * Page页面的初始数据存放
   */
  data: {
          
   
    username: ,
    password: ,
  },

   /**
   * 用户输入用户名
   */
  onInput1: function (e) {
          
   
    //这里获取外界传进来的数据
    var username = e.detail.value;
    //将username设置回Page的data里
    this.setData({
          
   
      username: username
    })
}

注意一点：刚开始很多人会犯一个错误，写成： this.username = e.detail.value; 看起来很合乎逻辑，将传入的数据直接设置在this.username下。

错误原因在于，这个地方的this时表示当前页面，当前页面直接找username，它是找不到的，所以会报错：username is not defined

我们要设置数据，必须得 this.setData({ username: e.detail.value }) 方可

使用

四、最后分享一个提交小函数：

//当前端按下confirm按钮之后，所执行的操作
onConfirm: function(){
          
   
    //this指的是这个页面下
    var username = this.data.username;
    var password = this.data.password;
    if(typeof username == "undefined" || username == null || username == ""){
          
   
      wx.showToast({
          
   
        title: 用户名不能为空！,
        icon: none,
        duration: 2000//持续的时间
      })
    }else if(typeof password == "undefined" || password == null || password == ""){
          
   
      wx.showToast({
          
   
        title: 密码不能为空！,
        icon: none,
        duration: 2000//持续的时间
      })
    }else{
          
   
      wx.request({
          
   
        url: http://localhost:8080/wechat/login, //仅为示例，并非真实的接口地址
        data: {
          
             //参数为json格式数据
          name: username ,
          password: password,
        },
        header: {
          
   
            //设置参数内容类型为json
            content-type: application/json
        },
        success: function(res) {
          
   
          if(res.data == null || res.data == "" || typeof res.data == "undefined"){
          
   
            wx.showToast({
          
   
              title: 用户不存在或密码错误！,
              icon: none,
              duration: 2000//持续的时间
            })
          }else{
          
   
            console.log(res.data)
            //设置全局变量，保存用户信息
            app.globalData.userinfo = res;
            wx.showToast({
          
   
              title: 登录成功！,
              icon: none,
              duration: 2000//持续的时间
            })
            //跳转
            wx.switchTab({
          
   
              url: ../main/main
            })
          }
        }
      })

    }