学习小程序记录:
小程序全局配置:
app.json中配置相关信息:
1.pages:配置页面路径表
2.window:配置全局的窗口属性
3.tabBar:配置底部导航栏
页面配置和全局配置基本差不多,页面配置会覆盖全局配置中的属性。
页面生命钩子函数:
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
setData:小程序中通过this.setData({键:值})来修改data中数据并执行视图层渲染
标签:
view:相当于html的div标签使用
swiper:轮播图标签可配置轮播属性
icon:字体图标标签
text:文本标签
navigator:导航标签,配置open-type属性有不同的效果
自定义组件:
component文件夹中创建一个组件,创建的组件类似于页面,自定义组件拥有自己的 wxml 模板和 wxss 样式,在组件模板中可以提供一个 用来创建添加内容,
组件的js文件中Component构造器可用于定义组件,在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。
组件中修改数据也是通过this.setData来修改数据并执行视图层渲染
使用已注册自定义组件要在父页面的 json 文件中进行引用声明。需要提供每个自定义组件的标签名和对应的自定义组件文件路径:
页面使用组件:
父组件传值给子组件:
通过子组件中Component构造器中properties对象创建数据进行传值
也可在js文件中创建变量来使用: