微信小程序学习笔记

最新推荐文章于 2024-07-23 10:13:17 发布
最新推荐文章于 2024-07-23 10:13:17 发布
阅读量161 收藏 1
点赞数
文章标签： 微信小程序 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63033353/article/details/131983676
版权

文章目录

一. 注册及开发配置

1.1 注册

在微信公众平台进行注册：微信公众平台 ，注册后在 开发管理 – 开发设置 中复制AppID(小程序ID)；

1.2 开发工具

推荐使用官方 微信开发者工具

1.3 微信官方文档

微信开放文档

二. 新建第一个项目

2.1 新建项目

打开并登录微信开发者工具，新建一个小程序项目。appID填入你刚刚复制的id，后端服务可选择不使用云服务，模板可选择js基础模板。

image-20230420111813508

2.2 目录结构

image-20230420112130738

​ 主要包括pages目录、utils目录及一些全局文件。其中pages目录存放每一个页面，一个页面放在一个文件夹中，比如index就是一个页面；utils存放一些工具方法；一个页面主要由.js .json .wxml .wxss 文件组成，.js为JavaScript，.json为配置文件， .wxml为页面结构，相当于html， .wxss为页面样式，相当于css。除此之外在项目目录中还有一些全局样式和全局配置文件，如app.wxss app.json等，app.js为整个小程序的入口。

2.3 新建页面

在全局配置文件app.json中的"pages"存放了所有的页面路径，手动在pages下添加一个页面list，并将其移到第一位。

image-20230420113442461

ctrl+s 保存后可以在左边目录看到已经多了一个list页面。

三. 基本组件

3.1 view 组件

相当于html中的div组件，一个容器，可以存放内容，也可以存放其他组件。

在list页面中的wxml文件中输入 如：<view>view组件展示</view>

可以在左边的模拟器中看到效果。

image-20230420113926967

3.2 scroll-view 组件

scroll-view组件可以实现滑动效果。如外卖小程序点餐时左侧的滑动菜单。

image-20230420114521177

  • 使用：设置为上下滑动时，必须给定一个高度，设置为左右滑动时，必须给定一个宽带。

    wxml：

<!-- 滑动效果,scroll-y 表示上下滑动 -->
<scroll-view class="container1" scroll-y="true">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

​ wxss:

/* 滑动效果 */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1) {
  background-color: lightgreen;
}
.container1 view:nth-child(2) {
  background-color: lightblue;
}
.container1 view:nth-child(3) {
  background-color: lightpink;
}
.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

  • 效果：可以拖拽上下滑动

    动画

3.3 swiper 组件和 wiper-item 组件

swiper 和 wiper-item 组件可以实现轮播图效果。swiper为父容器，wiper-item为轮播的对象。

  • 使用

    swiper 组件的常用属性：

    swiper组件常用属性

    wxml:

<!-- 轮播图效果 -->
<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="gray" autoplay="true" interval="3000" circular="true">
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

​ wxss:

/* 轮播图 */
.swiper-container {
  height: 150px;
}
.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item {
  background-color: lightblue;
}
swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

  • 效果：

    动画 (1)

3.4 text 和 rich-text 组件

text为普通文本，rich-text为富文本格式，可以解释html语言。可添加属性 user-select=“true” 设置文本为可长按选中，默认为false；富文本内容写在nodes属性中。

wxml：

<!-- 文本组件 text和rich-text -->
<view>
  <!-- user-select="true" 设置为长按选中 -->
  <text user-select="true">text文本展示</text>
</view>

<!-- 富文本 -->
<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

效果：

image-20230420202000933

3.5 button 组件

button为按钮组件，微信官方提供多种类型的按钮，点击可以调用多种微信请求。

type属性可以指定类型。

wxml：

<!-- type属性指定类型 -->
<button>普通按钮</button>
<button type="primary" >主色调按钮</button>
<button type="warn">警告按钮</button>

<!-- size="mini" 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

<!-- plain 镂空按钮 -->
<button size="mini" plain="true">普通按钮</button>
<button type="primary" size="mini" plain="true">主色调按钮</button>
<button type="warn" size="mini" plain="true">警告按钮</button>

效果：

image-20230420202338263

3.6 image 组件

image为图片组件，可以展示图片。

src填入图片的url链接，可以在.wxss中设置宽高等属性，mode属性设置图片的展示方式，常用的mode属性：

image 组件的 mode 属性 
<!--image 图片组件 -->
<image src="/images/1.png" mode="heightFix"></image>

效果：

image-20230420202606400

3.7 input 组件

wxml:

<input value="这是输入框"/>

输入框默认样式为空白，可在wxss中修改样式

wxss:

input{
  border: 2px solid #eee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

效果：

image-20230421214712041

3.8 block 组件

block组件是一个无实际意义的包裹性容器，不会输出自身，只会输出block组件中的子组件。通常搭配wx:if、wx:for使用。

四. 基础语法

4.1 数值绑定

使用{{xxx}}进行数值绑定，xxx可以是data中的值，也可以是一个表达式。

使用：

wxml:

<!-- 数值绑定 -->
<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>
<view>随机数{{randomNum>=5 ? '大于等于5' : '小于5'}}</view>

js:

data: {
   info: 'hello world',
   imgSrc: 'https://tuuli-note-image.oss-cn-guangzhou.aliyuncs.com/img/202302222310438.jpg',
   randomNum: Math.random() * 10 //生成10以内的随机数
  },

效果：

image-20230421205127214

4.2 事件绑定

  1. 常用事件：
image-20230421205314364
  1. 事件参数对象的属性包括：
image-20230420213253909

  1. 在事件传参时，不能使用 bindtap="btnTap(par)" 的方式传参，应使用 bindtap="btnTap" data-info="{{par}}" 的方式传参。

  2. 在js中，修改某个值不能用 this.value=xxx ，要使用 this.setData({value: xxx}) ，修改时调用原值可以使用this.data.value，如this.setData({count: this.data.count + 1})

  3. 按钮事件：

    wxml:

    <!-- 事件绑定 -->
<button type="primary" bindtap="btnTagHandler">按钮</button>
<button type="primary" bindtap="countChange">{{count}} 点我+1</button>
<button type="primary" bindtap="btnTap2" data-info="{{2}}">{{count}} 点我+2</button>

    js:

    data: {
   count: 0
  },

//按钮事件绑定
btnTagHandler(e){
    console.log(e); //在控制台打印参数e，查看对象e的属性
  },
  countChange(){
    this.setData({
      count: this.data.count + 1 //修改值
    })
  },
  btnTap2(e){
    this.setData({
      count: this.data.count + e.target.dataset.info //接受参数,参数的值保存在e.target.dataset中
    })
  },

    效果：

    动画 (1)

  4. input输入框事件：

    wxml:

    <!-- input输入框 -->
<view>这是你输入的文字：{{msg}}</view>
<input value="{{msg}}" bindinput="inputHandler" />

    wxss:

    input{
  border: 2px solid #eee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

    js:

    data: {
   msg: '在此输入文字',
  },
      
// 输入事件绑定
inputHandler(e){
   this.setData({
     msg: e.detail.value //输入的值保存在e.detail.value中
   })
}

    效果：

    动画 (2)

4.3 条件渲染

可以使用wx:if=“{{flag}}” wx:elif=“{{flag}}” wx:else=“{{flag}}” 进行条件渲染，亦可使用wx:hidden=“{{flag}}” 进行条件渲染。

使用：

wxml：

<!-- 条件渲染,写在{{}}里面，也可使用hidden="{{flag}}" -->
<view wx:if="{{type===1}}">type=1</view>
<view wx:elif="{{type===2}}">type=2</view>
<view wx:else="">type!=1 && type!=2</view>
<block wx:if="{{true}}">
  <view>使用block组件包裹</view>
</block>

js：

data: {
   type: 1,
},

效果：

image-20230421214323527

4.4 列表渲染

  1. 使用wx:for="{{arr}}"渲染一个数组；

  2. wx:for-index="index" 指定索引名，默认为index， wx:for-item="item" 指定项名，默认为item， wx:key="index" 指定key值

使用：

wxml：

<view wx:for="{{arr1}}" wx:key="index">
  索引是：{{index}},item项是：{{item}}
</view>

js：

data: {
   arr1: ['arr1','arr2','arr3']
},

效果：

image-20230421214307234

五. 模板样式

5.1 wxss 和 css 的关系

WXSS 具有 CSS 大部分特性，同时 WXSS 还对 CSS 进行了扩充以及修改以适应微信小程序的开发 。与 CSS 相比，WXSS 扩展的特性有 ：

  • rpx 尺寸单位
  • @import 样式导入

5.2 rpx 单位

  1. 什么是rpx单位

    • rpx是微信小程序独有的、解决屏幕自适应的尺寸单位

    • 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx

    • 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

  2. rpx与px的换算

    在 iPhone6上，屏幕宽度为 375px，共有 750 个物理像素，等分为 750rpx。则 ：
    750rpx = 375px = 750 物理像素
    1rpx = 0.5px = 1 物理像素

    官方建议：开发微信小程序时，设计师可以以iPhone6 作为视觉稿的标准，如果要根据iPhone6的设计稿，绘制小程序的页面，可以直接把单位 px 替换成 rpx 。例如：假设iPhone6设计稿上，要绘制一个宽高为 200px 的盒子，换算为 rpx为200rpx。

5.3 使用@import 导入样式

例：

我们可以在与page同级的目录中新建文件夹common，在文件夹中新建样式文件common.wxss，在其中写入样式.username{color: red;}，然后在index页面中的wxss文件中使用@import "/common/common.wxss"; 导入样式，然后在index.wxml中使用该样式。

image-20230422160033126 image-20230422160041026 image-20230422160210866

5.4 全局样式和局部样式

在 app.wxss 中写的样式为全局样式，在所有页面中都可以使用；在 页面的.wxss 文件中写的样式为局部样式，只能在该页面中使用。

全局样式和局部样式冲突的处理：

  • 当局部样式和全局样式冲突时，根据就近原则事局部样式会覆盖全局样式；
  • 当局部样式的权重大于或等于全局样式的权重时才会覆盖全局的样式。

六. 全局配置

  • 小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

    • pages 记录当前小程序所有页面的存放路径

    • window 全局设置小程序窗口的外观

    • tabBar 设置小程序底部的 tabBar 效果

    • style 是否启用新版的组件样式

  • 小程序窗口的组成部分：

    小程序窗囗的组成部分

6.1 window节点常用配置项

全局配置为app.json中的配置项，全局生效。局部配置为写在每个页面的json文件中的配置项，与全局配置同理，但不用写在window节点中。

了解 window 节点常用的配置项

  1. 修改导航栏文字内容：在 app.json -> window -> navigationBarTitleText 中进行修改。

    例：将导航栏文字内容改为Tuuli

    (其他配置项未列出)
"window":{
    "navigationBarTitleText": "Tuuli"
},

  2. 修改导航栏文字颜色：在 app.json -> window -> navigationBarTextStyle 中进行修改，只能为white（白色）、black（黑色）。

    例：将导航栏颜色修改为白色

    (其他配置项未列出)
"window":{
    "navigationBarTextStyle":"white",
},

  3. 修改导航栏颜色：在 app.json -> window -> navigationBarBackgroundColor 中进行修改，颜色的值必须为16进制。

    例：将导航栏颜色改为红色

    (其他配置项未列出)
"window":{
    "navigationBarBackgroundColor": "#ff0000"
},

  4. 设置页面下拉刷新：在 app.json -> window -> enablePullDownRefresh 中进行修改，值为true则可以页面下拉刷新。（所有页面均生效）

    例：

    (其他配置项未列出)
"window":{
    "enablePullDownRefresh": true
},

  5. 修改窗口的背景色（下拉刷新时展示的背景色）：在 app.json -> window -> backgroundColor 中进行修改，颜色的值必须为16进制。

    例：

    (其他配置项未列出)
"window":{
    "backgroundColor": "#efefef"
},

  6. 修改下拉刷新时的loading样式：在 app.json -> window -> backgroundTextStyle，值只能为light、dark。该配置通常写在某个页面的局部配置中。

    例：

    (其他配置项未列出)
"window":{
    "backgroundTextStyle":"dark"
},

​ 效果：

动画 (1)

6.2 tabBar节点配置

1. 什么是tabBar

​ tabBar 是移动应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为 ：底部 tabBar、顶部 tabBar。

​ 注意 ：tabBar中只能配置最少 2 个 ，最多 5 个 tab 页签。当染顶部 tabBar 时，不显示 icon，只显示文本。

2. tabBar的6个组成部分

  • backgroundColor ： tabBar 的背景色
  • selectedlconpath ： 选中时的图片路径
  • borderStyle ： tabBar 上边框的颜色
  • iconPath ： 未选中时的图片路径
  • seIectedCoIor ： tab 上的文字选中时的顔色
  • color: tab 上文字的默认（未选中 ）颜色

3. tabBar节点的配置项

tabBar 节点的配置项

4. 每个tab项的配置选项

每个 ta b 项的配置选项

5. 测试

新建一个页面test，页面中无任何内容。然后在 app.json -> tabBar 中进行配置。

app.json:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTitleText": "Tuuli",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "index"
      },
      {
        "pagePath": "pages/test/test",
        "text": "test"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

效果：

动画 (2)

七. 网络数据请求

小程序中网络数据请求的限制：
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

  • 只能请求 HTTPS 类型的接口

  • 必须将接口的域名添加到信任列表中

7.1 配置request合法域名

配置方法：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名

image-20230423082051293

image-20230423082202713

配置成功后可以在微信开发者工具 -> 详情 -> 项目配置 -> 域名信息 中看到配置的域名。只有配置的合法域名才能发起请求。

注意事项 ：

  • 域名只支持 https 协议
  • 域名不能使用 IP 地址或 localhost
  • 域名必须经过ICP备案

7.2 发送GET/POST请求

可在js文件中使用wx.request发起请求，格式如下：

wx.request({
      url: 'url',
      method: "GET/POST",
      data: {
        name: "test",
        age: 20
      },
      //成功的回调函数
      success:(res)=>(
        console.log(res.data)
      )
})

测试：

在页面中新建一个按钮，并绑定一个点击事件，点击按钮时发起get网络请求（post请求同理）

wxml:

<button type="primary" bindtap="getInfo">发起GET请求</button>

js:

//发起get网络请求
getInfo() {
   wx.request({
     url: 'https://www.escook.cn/api/get',
     method: "GET",
     data: {
       name: "zs",
       age: 20
      },
     //成功的回调函数
     success:(res)=>(
      console.log(res.data)
      )
   })
},

点击按钮后可以在控制台中看到成功的结果：

image-20230423083816751

7.3 跳过request合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口，此时为了不耽误开发的进度，我们可以在微信开发者工具中 ， 临时开启 “开发环境不校验请求域名 、TLS 版本及 HTTPS 证书” 选项，跳过 request 合法域名的校验 。该设置仅限在开发与调试阶段使用。

7.4 关于跨域和 Ajax 的说明

  1. 跨域问题只存在于基于浏览器的 web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
  2. Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求“。

八. 页面导航和页面事件

小程序中实现页面导航的两种方式

  1. 声明式导航。在页面上声明一个<navigator>导航组件，通过点击 <navigator> 组件实现页面跳转。
  2. 编程式导航。调用小程序的导航 API，实现页面的跳转。

8.1 声明式导航

8.1.1 导航到tabBar页面

tabBar 页面指的是被配置为 tabBar 的页面。在使用 <navigator> 组件跳转到指定的 tabBar 页面时 ， 需要指定 url 属性和 open-type 属性，其中 ：

  • url 表示要跳转的页面的地址，必须以 / 开头
  • open-type 表示跳转的方式，必须为 switchTab

例：

wxml：

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

效果：点击后将会跳转到message页面。

动画 (1)
8.1.2 导航到非tabBar页面

与导航到 tabBar 页面，只需将open-type的值修改为navigate即可（该值为默认值，可以省略）。

例：

wxml：

<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

效果：点击后将会跳转到info页面。

动画 (1)
8.1.3 后退导航

如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中

  • open-type 的值必须是 navigateBack，表示要进行后退导航
  • delta 的值必须是数字，表示要后退的层级，默认值为1

例：

wxml:

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

效果：

动画 (1)

8.2 编程式导航

8.2.1 导航到tabBar页面

调用 wx.switchTab(0bject object) 方法，可以跳转到 tabBar 页面。其中 object 参数对象的属性列表如下：

image-20230423110022805

例：

wxml:

<button type="primary" bindtap="gotoMessage">跳转到首页</button>

js:

// 跳转页面
gotoMessage(){
   wx.switchTab({
     url: '/pages/home/home',
   })
},

效果：

动画 (1)
8.2.2 跳转到非tabBar页面

调用 wx.naviqateTo(0bject object)方法，可以跳转到非 tabBar 的页面。其中 0bject 参数对象的属性列表如下：

image-20230423110823689

例：

wxml:

<button type="primary" bindtap="gotoInfo">跳转到info页面</button>

js:

gotoInfo(){
   wx.navigateTo({
     url: '/pages/info/info',
   })
},

效果：

动画 (1)
8.2.3 后退导航

调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：

image-20230423111406176

例：

wxml:

<button type="primary" bindtap="gotoBack">后退</button>

js:

gotoBack(){
    wx.navigateBack()
},

效果：

动画 (1)

8.3 导航传参

8.3.1 声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

  • 参数与路径之间使用 ? 分隔
  • 参数键与参数值用 = 相连
  • 不同参数用 & 分隔

例：

wxml:

<navigator url="/pages/info/info?name=zs&age=20" open-type="navigate">跳转到info页面并传参</navigator>

效果：

动画 (1)
8.3.2 编程式导航传参

调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，与声明式导航传参类似。

例：

wxml:

<button bindtap="gotoInfo">跳转到info页面</button>

js:

gotoInfo(){
   wx.navigateTo({
     url: '/pages/info/info?name=1&gender=男',
   })
},

效果：

动画 (1)
8.3.3 获取参数

无论是声明式导航传参还是 编程式导航传参，都可以在新页面的onLoad函数中获取参数。

/**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
   console.log(options);
},

8.4 onLoad事件

当我们需要在刚加载页面时就调用某些函数，可以在 onLoad 里面调用这些函数。

例：

js：

 /**
  * 生命周期函数--监听页面加载
  */
onLoad(options) {
   this.getInfo() //getInfo为自己写的函数
},

这样在打开这个页面时会自动调用getInfo()函数。

8.5 下拉刷新事件

可以在页面的json文件中配置 "enablePullDownRefresh": true来开启该页面的下拉刷新功能。每个页面的js文件中都有onPullDownRefresh() 函数，该函数用来监听下拉刷新事件，每次下拉刷新都会调用该函数。

注意：下拉刷新时不会自动停止，会一直处于下拉刷新状态（模拟器中会自动停止，但真机不会，以真机为准），因此我们需要使用wx.stopPullDownRefresh()函数来结束下拉刷新。

例：

js:

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh() {
   console.log("111");//进行相关操作，如重新加载数据等
   wx.stopPullDownRefresh()//完成操作后调用该函数结束上拉刷新
},

8.6 上拉触底事件

上拉触底通常用来上拉距离底部一定距离时自动加载下一页数据，可以在json文件中配置onReachBottomDistance的值来修改这个距离，默认为50px。每个页面的js文件中都有onReachBottom()这个函数，该函数可以用来监听上拉触底事件，每次上拉触底时都会调用该函数。

九. 生命周期

9.1 应用生命周期函数

应用生命周期函数在app.js中声明，对整个小程序有效

// app.js
App({

  onLaunch: function () { }, //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
    
  onShow: function (options) { }, //当小程序启动，或从后台进入前台显示，会触发 onShow

  onHide: function () { }, //当小程序从前台进入后台，会触发 onHide

})

9.2 页面声明周期函数

小程序的页面生命周期函数需要在页面的 .js 文件中进行声明

Page({

  onLoad(options) { }, //生命周期函数--监听页面加载

  onReady() { }, //生命周期函数--监听页面初次渲染完成

  onShow() { }, //生命周期函数--监听页面显示

  onHide() { }, //生命周期函数--监听页面隐藏

  onUnload() { }, //生命周期函数--监听页面卸载
    
  onPullDownRefresh() { }, //页面相关事件处理函数--监听用户下拉动作
    
  onReachBottom() { }, //页面上拉触底事件的处理函数

})

拉刷新时不会自动停止，会一直处于下拉刷新状态（模拟器中会自动停止，但真机不会，以真机为准），因此我们需要使用wx.stopPullDownRefresh()函数来结束下拉刷新。

例：

js:

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh() {
   console.log("111");//进行相关操作，如重新加载数据等
   wx.stopPullDownRefresh()//完成操作后调用该函数结束上拉刷新
},

8.6 上拉触底事件

上拉触底通常用来上拉距离底部一定距离时自动加载下一页数据，可以在json文件中配置onReachBottomDistance的值来修改这个距离，默认为50px。每个页面的js文件中都有onReachBottom()这个函数，该函数可以用来监听上拉触底事件，每次上拉触底时都会调用该函数。

九. 生命周期

9.1 应用生命周期函数

应用生命周期函数在app.js中声明，对整个小程序有效

// app.js
App({

  onLaunch: function () { }, //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
    
  onShow: function (options) { }, //当小程序启动，或从后台进入前台显示，会触发 onShow

  onHide: function () { }, //当小程序从前台进入后台，会触发 onHide

})

9.2 页面声明周期函数

小程序的页面生命周期函数需要在页面的 .js 文件中进行声明

Page({

  onLoad(options) { }, //生命周期函数--监听页面加载

  onReady() { }, //生命周期函数--监听页面初次渲染完成

  onShow() { }, //生命周期函数--监听页面显示

  onHide() { }, //生命周期函数--监听页面隐藏

  onUnload() { }, //生命周期函数--监听页面卸载
    
  onPullDownRefresh() { }, //页面相关事件处理函数--监听用户下拉动作
    
  onReachBottom() { }, //页面上拉触底事件的处理函数

})
tuuli241
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序开发学习笔记①
tutgxu的博客
12-29 1047
微信小程序开发学习笔记
微信小程序学习笔记，知识点全面概括总结
m0_61663332的博客
12-30 2371
微信小程序安装使用学习笔记，知识点全面概括总结
微信小程序学习笔记（1）基础入门
游星的博客
08-25 731
微信小程序基础入门，包括小程序组成结构、发布上线。
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
01-03
本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理。分享给大家供大家参考，具体如下： 前面一篇结介绍了微信小程序函数定义、页面渲染。这里介绍form表单提交与后台php数据交互处理。 【form表单...
前端学习笔记-微信小程序学习笔记
01-09
前端学习笔记-微信小程序学习笔记 微信小程序是一种基于微信平台的轻量级应用程序，提供了前端开发的解决方案。本笔记总结了微信小程序的基本组成部分、JSON 配置文件的作用、WXML 模板语法、WXSS 样式语言、JS ...
学习笔记微信小程序学习笔记（附带视频和项目）
05-04
本资源是一套关于微信小程序的学习笔记，旨在帮助用户快速掌握微信小程序的开发流程和技术要点。学习笔记包括丰富的理论知识和实践经验，以及一些实用的开发技巧。适合初学者、有一定编程基础的开发者以及对微信小...
微信小程序学习笔记之本地数据缓存功能详解
10-17
主要介绍了微信小程序学习笔记之本地数据缓存功能,结合实例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage针对数据缓存的存取、删除等相关操作技巧,需要的朋友可以参考下
微信小程序学习笔记之获取位置信息操作图文详解
10-17
主要介绍了微信小程序学习笔记之获取位置信息操作,结合实例形式分析了微信小程序获取位置信息的原理、步骤及相关操作注意事项,并结合图文形式予以说明,需要的朋友可以参考下
前端笔记：微信小程序学习笔记
shiqing4387的博客
07-06 2376
2017 年度百度百科十大热词之一微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小,下载速度很快,用户感觉不到下载的过程小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。详细的使⽤，可以查看官⽹data-*
小程序自学笔记（零基础学小程序汇总）---史上最全的微信小程序学习笔记，笔记看我你也就学会小程序了
04-03 495
学习技术一定要制定一个明确的学习路线，这样才能高效的学习，不必要做无效功，既浪费时间又得不到什么效率，大家不妨按照我这份路线来学习。大家不妨直接在牛客和力扣上多刷题，同时，我也拿了一些面试题跟大家分享，也是从一些大佬那里获得的，大家不妨多刷刷题，为金九银十冲一波！学习技术一定要制定一个明确的学习路线，这样才能高效的学习，不必要做无效功，既浪费时间又得不到什么效率，大家不妨按照我这份路线来学习。[外链图片转存中…(img-sgXlDFd1-1712088932080)]
微信小程序安装vant组件库和使用
最新发布
qq_61132537的博客
07-23 618
van-button type="primary">主要按钮</van-button>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值