小程序

小程序生命周期函数

监听页面加载
onLoad: function (options) {}

监听页面初次渲染完成
onReady: function () {}

监听页面显示
onShow: function () {}

监听页面隐藏
onHide: function () {}

监听页面卸载
onUnload: function () {}

监听用户下拉动作
onPullDownRefresh: function () {}

页面上拉触底事件的处理函数
onReachBottom: function () {}

用户点击右上角分享
onShareAppMessage: function () {}

跳转方式

 - 不能跳到tabbar页面,小程序中页面栈最多十层
wx.navigateTo({
 url:"....."
})

 - 只能跳tabbar页面
wx.switchTab({
  url: '../cart/cart',
})

 - 用navigator包裹  (open-type)跳转方式.默认值navigate 
<navigator url="../citys/citys">
 <button>选择城市</button>
</navigator>

小程序组件

使用场景

• 多个页面用到同样的东西
• 页面功能很多,很复杂,使用组件来拆分组件

自定义组件的组成

1. json文件 : 用于放置一些最基本的组件配置
2. wxml文件 : 组件模板
3. wxss文件 : 组件的样式 (无法直接使用全局样式, 需要通过@import导入)
4. js文件 : 组件的js代码, 承载组件的主要逻辑

使用组件

• (1)新建自定义组件文件
• 在根目录新建components文件夹，然后右键新建自定义组件目录，最后右键新建Component

• (2)在子组件json中配置

• (3)组件wxml编写

• （4）组件wxss文件，因为无法直接使用全局样式，需要导入

• （5）导入自定义组件

  • （5.1）在父组件json文件的usingComponents中导入组件

-（5.2）在父组件wxml文件中以组件名作为标签使用组件

父子组件通信

父传子

• (1)在父组件中的子组件标签添加属性, 给子组件传递数据

• (2)子组件在js中通过properties接收，可以指定接收数据类型

子传父

• （1）在父组件的子组件标签自定义事件，传给子组件

• （2）子组件用this.triggerEvent(‘父组件自定义事件’, ‘要传递的参数’)，触发父组件传过来的自定义事件

• （3）第二步执行后，父组件自定义事件绑定的函数就会执行，同时接受子组件传过来的数据

![