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