微信小程序学习笔记-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

持续更新中，GitHub：https://github.com/TuuliC/applet-of-WeChat-note.git

一. 注册及开发配置
- 1.1 注册
- 1.2 开发工具
- 1.3 微信官方文档
二. 新建第一个项目
- 2.1 新建项目
- 2.2 目录结构
- 2.3 新建页面
三. 基本组件
- 3.1 view 组件
- 3.2 scroll-view 组件
- 3.3 swiper 组件和 wiper-item 组件
- 3.4 text 和 rich-text 组件
- 3.5 button 组件
- 3.6 image 组件
- 3.7 input 组件
- 3.8 block 组件
四. 基础语法
- 4.1 数值绑定
- 4.2 事件绑定
- 4.3 条件渲染
- 4.4 列表渲染
五. 模板样式
- 5.1 wxss 和 css 的关系
- 5.2 rpx 单位
- 5.3 使用@import 导入样式
- 5.4 全局样式和局部样式
六. 全局配置
- 6.1 window节点常用配置项
- 6.2 tabBar节点配置
七. 网络数据请求
- 7.1 配置request合法域名
- 7.2 发送GET/POST请求
- 7.3 跳过request合法域名校验
- 7.4 关于跨域和 Ajax 的说明
八. 页面导航和页面事件
- 8.1 声明式导航
  - 8.1.1 导航到tabBar页面
  - 8.1.2 导航到非tabBar页面
  - 8.1.3 后退导航
- 8.2 编程式导航
  - 8.2.1 导航到tabBar页面
  - 8.2.2 跳转到非tabBar页面
  - 8.2.3 后退导航
- 8.3 导航传参
  - 8.3.1 声明式导航传参
  - 8.3.2 编程式导航传参
  - 8.3.3 获取参数
- 8.4 onLoad事件
- 8.5 下拉刷新事件
- 8.6 上拉触底事件
九. 生命周期
- 9.1 应用生命周期函数
- 9.2 页面声明周期函数

一. 注册及开发配置

1.1 注册

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

1.2 开发工具

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

1.3 微信官方文档

微信开放文档

二. 新建第一个项目

2.1 新建项目

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

2.2 目录结构

主要包括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，并将其移到第一位。

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

三. 基本组件

3.1 view 组件

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

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

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

3.2 scroll-view 组件

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

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

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 组件的常用属性：

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;
}

效果：

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>

效果：

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>

效果：

3.6 image 组件

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

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

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

效果：

3.7 input 组件

wxml:

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

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

wxss:

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

效果：

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以内的随机数
  },

效果：

4.2 事件绑定

常用事件：

事件参数对象的属性包括：

在事件传参时，不能使用 bindtap="btnTap(par)" 的方式传参，应使用 bindtap="btnTap" data-info="{{par}}" 的方式传参。
在js中，修改某个值不能用 this.value=xxx ，要使用 this.setData({value: xxx}) ，修改时调用原值可以使用this.data.value，如this.setData({count: this.data.count + 1})

按钮事件：

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中
    })
  },

效果：

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中
   })
}

效果：

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,
},

效果：

4.4 列表渲染

使用wx:for="{{arr}}"渲染一个数组；
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']
},

效果：

五. 模板样式

5.1 wxss 和 css 的关系

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

rpx 尺寸单位
@import 样式导入

5.2 rpx 单位

什么是rpx单位
- rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
- 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx
- 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配
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中使用该样式。

5.4 全局样式和局部样式

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

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

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

六. 全局配置

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：
- pages 记录当前小程序所有页面的存放路径
- window 全局设置小程序窗口的外观
- tabBar 设置小程序底部的 tabBar 效果
- style 是否启用新版的组件样式
小程序窗口的组成部分：

6.1 window节点常用配置项

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

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

例：将导航栏文字内容改为Tuuli
```
(其他配置项未列出)
"window":{
    "navigationBarTitleText": "Tuuli"
},
```
修改导航栏文字颜色：在 app.json -> window -> navigationBarTextStyle 中进行修改，只能为white（白色）、black（黑色）。

例：将导航栏颜色修改为白色
```
(其他配置项未列出)
"window":{
    "navigationBarTextStyle":"white",
},
```
修改导航栏颜色：在 app.json -> window -> navigationBarBackgroundColor 中进行修改，颜色的值必须为16进制。

例：将导航栏颜色改为红色
```
(其他配置项未列出)
"window":{
    "navigationBarBackgroundColor": "#ff0000"
},
```
设置页面下拉刷新：在 app.json -> window -> enablePullDownRefresh 中进行修改，值为true则可以页面下拉刷新。（所有页面均生效）

例：
```
(其他配置项未列出)
"window":{
    "enablePullDownRefresh": true
},
```
修改窗口的背景色（下拉刷新时展示的背景色）：在 app.json -> window -> backgroundColor 中进行修改，颜色的值必须为16进制。

例：
```
(其他配置项未列出)
"window":{
    "backgroundColor": "#efefef"
},
```
修改下拉刷新时的loading样式：在 app.json -> window -> backgroundTextStyle，值只能为light、dark。该配置通常写在某个页面的局部配置中。

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

效果：

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节点的配置项

4. 每个tab项的配置选项

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"
}

效果：

七. 网络数据请求

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

只能请求 HTTPS 类型的接口
必须将接口的域名添加到信任列表中

7.1 配置request合法域名

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

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

注意事项：

域名只支持 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)
      )
   })
},

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

7.3 跳过request合法域名校验

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

7.4 关于跨域和 Ajax 的说明

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

八. 页面导航和页面事件

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

声明式导航。在页面上声明一个<navigator>导航组件，通过点击 <navigator> 组件实现页面跳转。
编程式导航。调用小程序的导航 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页面。

8.1.2 导航到非tabBar页面

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

例：

wxml：

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

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

8.1.3 后退导航

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

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

例：

wxml:

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

效果：

8.2 编程式导航

8.2.1 导航到tabBar页面

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

例：

wxml:

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

js:

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

效果：

8.2.2 跳转到非tabBar页面

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

例：

wxml:

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

js:

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

效果：

8.2.3 后退导航

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

例：

wxml:

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

js:

gotoBack(){
    wx.navigateBack()
},

效果：

8.3 导航传参

8.3.1 声明式导航传参

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

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

例：

wxml:

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

效果：

8.3.2 编程式导航传参

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

例：

wxml:

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

js:

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

效果：

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() { }, //页面上拉触底事件的处理函数

})

未完待续...文章来源地址https://www.toymoban.com/news/detail-419657.html

到了这里，关于微信小程序学习笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

微信小程序学习笔记

一. 注册及开发配置

1.1 注册

1.2 开发工具

1.3 微信官方文档

二. 新建第一个项目

2.1 新建项目

2.2 目录结构

2.3 新建页面

三. 基本组件

3.1 view 组件

3.2 scroll-view 组件

3.3 swiper 组件和 wiper-item 组件

3.4 text 和 rich-text 组件

3.5 button 组件

3.6 image 组件

3.7 input 组件

3.8 block 组件

四. 基础语法

4.1 数值绑定

4.2 事件绑定

4.3 条件渲染

4.4 列表渲染

五. 模板样式

5.1 wxss 和 css 的关系

5.2 rpx 单位

5.3 使用@import 导入样式

5.4 全局样式和局部样式

六. 全局配置

6.1 window节点常用配置项

6.2 tabBar节点配置

七. 网络数据请求

7.1 配置request合法域名

7.2 发送GET/POST请求

7.3 跳过request合法域名校验

7.4 关于跨域和 Ajax 的说明

八. 页面导航和页面事件

8.1 声明式导航

8.1.1 导航到tabBar页面

8.1.2 导航到非tabBar页面

8.1.3 后退导航

8.2 编程式导航

8.2.1 导航到tabBar页面

8.2.2 跳转到非tabBar页面

8.2.3 后退导航

8.3 导航传参

8.3.1 声明式导航传参

8.3.2 编程式导航传参

8.3.3 获取参数

8.4 onLoad事件

8.5 下拉刷新事件

8.6 上拉触底事件

九. 生命周期

9.1 应用生命周期函数

9.2 页面声明周期函数

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2