微信小程序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'
            })
          }
        }
      })

    }