微信小程序（三）第一个小程序页面

1.新建一个项目，选择无AppID ，保存 

效果：

2.新建一个页面

在根目录下添加如下语句保存：

效果：

分别有4个文件：

pages/welcome/welcome.wxml

// pages/welcome/welcome.js
        Page({
// 页面的初始数据
            data: {},
// 生命周期函数--监听页面加载
            onLoad: function (options) {
            },
// 生命周期函数--监听页面初次渲染完成
            onReady: function () {
            },
// 生命周期函数--监听页面显示
            onShow: function () {
            },
// 生命周期函数--监听页面隐藏
            onHide: function () {
            },
// 生命周期函数--监听页面卸载
            onUnload: function () {
            },
// 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh: function () {
            },
// 页面上拉触底事件的处理函数
            onReachBottom: function () {
            },
// 用户点击右上角分享
            onShareAppMessage: function () {
            }
        })

一般页面启动，会首先调用这三个函数：

onLoad(页面加载，一个页面只会调用一次)----->onShow(页面显示，页面每次打开都会调用)----->onReady(页面完成初次渲染)

page()函数中的data:{ }属性，通常是保存页面需要绑定的数据，一般在里面设置一个变量，用来接收从服务器加载来的JSON数据，然后在通过数据绑定的方式绑定到页面上面。

     Page({
// 页面的初始数据
            data: {},
        })

app.js的生命周期

app.js 是关于整个小程序项目的方法和属性，类似页面 Page({...}) 函数，也需要一个外层函数包裹 App({ ...})

App({
    //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
    onLaunch: function () {
    },
    // 当小程序启动，或从后台进入前台显示，会触发 onShow
    onShow: function (options) {
    },
    //当小程序从前台进入后台，会触发 onHide
    onHide: function () {
    },
    // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
    onError: function (msg) {
    }
})
// 应用程序的全局变量

globalData: {
    defaultCity: '',
        defaultCounty: '',
        weatherData: '',
        air: '',
        day: '',
        g_isPlayingMusic: false,
        g_currentMusicPostId: null,
        doubanBase: "https://api.douban.com",
        heWeatherBase: "https://free-api.heweather.com",
        juhetoutiaoBase:"https://v.juhe.cn/toutiao/index",
        tencentMapKey: "4HYBZ-EB23D-SLC42-HQ5R3-LP3LQ-OZFU5",
        heWeatherKey: "4a817b4338e04cc59bdb92da77714100",
        juhetoutiaoKey:"a9f703a0200d68926f707f3f136290000",
        curBook: ""
}

}

然后在其他页面对应的 js 文件中通过下面的方式来获取到里面定义的全局变量。

var app = getApp();
var globalData = app.globalData