微信小程序开发学习笔记[1]

微信小程序开发学习笔记[1]

---

目录

微信小程序开发学习笔记[1]

一、小程序App生命周期函数简介

1.1、新建页面

         1.2、app.js分析

1.3、取值介绍

二、小程序选项卡页面制作

三、小程序页面的生命周期函数

四、小程序页面的事件处理

4.1、onPullDownRefresh 下拉刷新

4.2、onReachBottom 上拉触底

4.3、onPageScroll 

4.4、onShareAppMessage

---

一、小程序App生命周期函数简介

1.1、新建页面

 

1.2、app.js分析

app.js里有一个App()函数，函数接收参数为json对象类型，App({})。App()函数用来注册一个小程序，接收的json对象，指定小程序的生命周期函数。

小程序的生命周期函数及其触发时机

onLaunch	当小程序初始化完成时onLaunch函数被触发且全局只触发一次
onShow	当小程序启动或从后台进入前台显示时触发onShow函数
onHide	当小程序从前台进入后台时触发onHide函数
onError	当小程序发生错误时，或API调用失败时会触发onError

App({

//json对象格式   键:值
//当小程序初次进入时被调用
  onLaunch: function () {
   console.log("onLaunch is called...");
  },
//当小程序初次进入时被调用
  onShow: function () {
   console.log("onShow is called...");
  }
})

1.3、取值介绍

每个页面都会是4个同名的文件例如firstpage[*.js;*.wxml;*.wxss;*.json]，在*.js文件中会自动生成页面的初始数据区域。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    "userName":"annjeff"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }
})

在*.wxml页面可以使用 {{username}}来取同一页面下js文件中定义的数值。

如何取得全局的变量的值呢？

//获取小程序App实例
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    "userName":app.g_userName
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }
})

二、小程序选项卡页面制作

微信底部通常会有2-3个选项，可以来回切换，此即是选项卡页面。

如何制作选项卡页面呢？

1. 在app.json中添加tabBar按下Tab键会自动补全。
2. 选项卡页面至少需要两个选项，因此可以先填写一个tabBar再进行复制，修改部分参数即可

{
  "pages": [
    "pages/firstpage/firstpage",
    "pages/secondpage/secondpage"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
    {
      "pagePath": "pages/firstpage/firstpage",
      "text": "paryt",
      "iconPath": "images/party.png",
      "selectedIconPath": "images/party_NS.png"
    },
    {
      "pagePath": "pages/secondpage/secondpage",
      "text": "partyInf",
      "iconPath": "images/partyInf.png",
      "selectedIconPath": "images/partyInf_NS.png"
    }
    ]  
  }
}

三、小程序页面的生命周期函数

与程序的声明周期函数类似，页面也有自己的声明周期函数。

页面的生命周期函数

onLoad	监听页面加载
onReady	监听页面初次渲染完成
onShow	监听页面显示
onHide	监听页面隐藏
onUnload	监听页面卸载[redirectTo;navigateBack时调用]

两种类型的页面调转

点我调转

点我跳转2

四、小程序页面的事件处理

4.1、onPullDownRefresh 下拉刷新

监听用户下拉刷新事件，需要在app.json的window选项中或页面配置中开启enablePullDownRefresh

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

当需要给用户提示正在加载中时，可以使用wx.showLoading({title:'loading'})，此时再进行下拉时，会出现提示正在加载中。当数据加载完成或者定时到时间可以停止正在加载图标，如下面代码所示。

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black",

    "enablePullDownRefresh": true
  },


//firstpage.js
 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

//微信提供的函数，在下拉时会显示正在加载
    wx.showLoading({
      title: 'loading',
    })

 //1s后关闭正在加载图表
    setTimeout(function(){
      wx.hideLoading();
    },1000)
  },

 

4.2、onReachBottom 上拉触底

监听用户上拉触底事件，可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance默认50.在触发距离内滑动相间本事件只会被触发一次。

4.3、onPageScroll 

页面滚动时会触发本函数

4.4、onShareAppMessage

用户转发只有定义了此事件处理函数，右上角菜单才会显示“转发"按钮，用户点击转发按钮的时候会调用
此事件需要 return一个 Object（应包含两个参数，一个是title,一个是path），用于自定义转发内容。

onShareAppMessage: function () {
    return {
      'title':"转发会带来好运",
      'path':"pages/log/log"
    }
  }