微信小程序(三)第一个小程序页面

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


效果:


2.新建一个页面

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


效果:


分别有4个文件:

<!--pages/welcome/welcome.wxml-->
<text>pages/welcome/welcome.wxml</text>
// 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





猜你喜欢

转载自blog.csdn.net/qq_38191191/article/details/80904454