【微信小程序开发】模板与配置

骑猪看日落 2024-04-20 12:04 55阅读 0赞

![在这里插入图片描述][507ff98b191a499da2dadda90d8a7919.png]

#### 文章目录 ####

*  前言
 *  1. WXML 模板语法
 *   *  1.1 数据绑定
     *  1.2 事件绑定
     *   *  1.2.1 bindtap 事件
         *  1.2.2 bindinput 事件
     *  1.3 条件渲染
     *  1.4 列表渲染
 *  2. WXSS 模板样式
 *   *  2.1 什么是 rpx 尺寸单位
     *  2.2 什么是样式导入
     *  2.3 全局样式和局部样式
     *   *  2.3.1 全局配置
         *   *  2.3.1.1 window 节点常用的配置项：
             *  2.3.1.2 tabBar
 *  3. 网络数据请求

## 前言 ##

前面我们学习了微信小程序的环境介绍和一些基本的使用，而今天这篇文章我将为大家介绍微信小程序开发的详细使用，今天介绍的是微信小程序开发的模板与配置。

## 1. WXML 模板语法 ##

### 1.1 数据绑定 ###

数据绑定用于将逻辑层的数据呈现到界面上，在微信小程序中，页面分别由四个文件组成，其中之一就是逻辑处理文件（.js文件），负责页面逻辑内容的处理。数据绑定将逻辑层的数据与视觉层进行通信，实现数据的动态更新和双向传递。

数据绑定是单向的，从逻辑层到视觉层。在微信小程序中，数据必须要放在一个固定的地方，即该页面的逻辑层的data属性中。页面的逻辑层就是该页面的 .js 文件中的data对象，该对象中的所有属性都可以在界面中访问到。

在微信小程序中实现数据绑定，首先需要在 .js 文件的 data 中定义数据，然后在 WXML 中通过 Mustache 语法获取到 .js 中的数据。

在 .js 文件的 data 中定义数据：

Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        info: "数据绑定"
      }
    |

在 .WXML 文件中使用 Mustache语法： \{ \{变量名\}\} 来获取到指定数据：

![在这里插入图片描述][a71b67385a324e2693be9abd7c473d06.png]  
Mustache 语法主要运用于下面的场景：

*  绑定内容
 *  绑定属性
 *  运算（三元运算、算术运算等）

(❁´◡\`❁)动态绑定数据

为什么需要数据绑定呢？因为有些时候的数据是动态的，不是规定死的，通过 Mustache 的数据绑定可以获取到动态变化的数据。

Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        // 根据需要更改需要的图片的位置
        imagePath: "/images/1.jpg"
      },
    },

![在这里插入图片描述][7fb9ade9932a4dceb61ca0ae1c4de7e7.png]  
(❁´◡\`❁)三目运算

Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        randomNum: Math.random() * 10 //生成10以内的随机数
      },
    },

<text>{
       {randNum > 5 ? '大于5的数字' : '小于5的数字'}}</text>

![在这里插入图片描述][af68cb9685024ca78c55d65e43d75fdd.png]

(❁´◡\`❁)算术运算

Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        info: Math.random().toFixed(2) //生成0-1之间的两位小数
      },
    },

<text>'生成的0-100之间的随机整数'{
       {info * 100}}</text>

![在这里插入图片描述][9cbb80e33f844f97ac9e69cdbb81e019.png]

### 1.2 事件绑定 ###

什么是事件？

> **事件是视图层到逻辑层的通讯方式。它可以将用户的行为反馈到逻辑层进行处理，同时绑定在组件上。当达到触发事件的条件时，就会执行逻辑层中对应的事件处理函数。事件可以携带额外信息，如id、dataset、touches等。事件还是连同WXML组件和JavaScript的桥梁。通过事件，开发者可以处理用户操作、小程序状态等场景。**

小程序中常见的事件类型有三种：

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>绑定方式</th> 
   <th>事件描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tap</td> 
   <td>bindtap 或 bind:tap</td> 
   <td>手指触摸后马上离开，类似于 HTML 中的 click 事件</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>bindinput 或 bind:input</td> 
   <td>文本框的输入事件</td> 
  </tr> 
  <tr> 
   <td>change</td> 
   <td>bindchange 或 bind:change</td> 
   <td>状态改变时触发</td> 
  </tr> 
 </tbody> 
</table>

事件对象的属性列表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>事件类型</td> 
  </tr> 
  <tr> 
   <td>timeStamp</td> 
   <td>Integer</td> 
   <td>页面打开到触发事件所经过的毫秒数</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>Object</td> 
   <td>触发事件的组件的一些属性值集合</td> 
  </tr> 
  <tr> 
   <td>currentTarget</td> 
   <td>Object</td> 
   <td>当前组件的一些属性值集合</td> 
  </tr> 
  <tr> 
   <td>detail</td> 
   <td>Object</td> 
   <td>额外的信息</td> 
  </tr> 
  <tr> 
   <td>touches</td> 
   <td>Array</td> 
   <td>触摸事件，当前停留在屏幕中的触摸点信息的数组</td> 
  </tr> 
  <tr> 
   <td>changedTouches</td> 
   <td>Array</td> 
   <td>触摸事件，当前变化的触摸点信息的数组</td> 
  </tr> 
 </tbody> 
</table>

上面属性中：target 和 detail 是使用很多的两个属性。

target 和 currentTarget 的区别：

1.  target：这个属性指的是触发事件的元素，也就是用户与界面上的某个元素发生的交互行为所对应的元素。例如，如果用户点击了一个按钮，那么这个按钮就是target。
2.  currentTarget：这个属性指的是当前正在触发事件的元素，也就是事件绑定所在的元素。例如，如果在一个按钮的点击事件中，点击了按钮的父元素，那么 currentTarget 就是按钮的父元素。

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。

target和currentTarget的区别在于，target是指向触发事件的元素，而currentTarget是指向当前正在触发事件的元素。

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。  
此时，对于外层的 view 来说：

*  e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
 *  e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

#### 1.2.1 bindtap 事件 ####

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为，通过 bind:tap 或者 bindtap，可以为组件绑定 tap 触摸事件，语法如下：

在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收：

和 .js 文件中 data 平级定义事件：

btnTapHandler(e) {
        
        console.log(e)
      },

当我们点击按钮的时候就会触发 btdTapHandler 事件：

![在这里插入图片描述][a232af6b1a7644a785ba27b103289ec7.png]

上面示例中的事件处理的是简单的事件，在事件处理函数中还可以为 data 中的数据赋值，在事件函数中国需要调用 this.setData(Object) 方法 来给页面的 data 数据赋值。

首先我们在 data 中定义数据 count，初始值为 0：

count: 0

然后在 bindtap 事件处理函数中，为 data 数据赋值：

// 当发生该事件的时候会将count+1
    btnTapHandler(e) {
        
        this.setData({
        
          count: this.data.count + 1
        })
      },

![在这里插入图片描述][89f4a5d7af6544508efe060eb19329ff.png]

当然这些值都是比较死的，我们也可以将渲染层传来的参数赋值给 data 中的数据中，而要想拿到渲染层传来的参数，需要通过 event.target.dataSet.参数名 来获取到渲染层传来的指定参数的值，并且在渲染层传递参数也有点区别，不能直接 函数名(参数) 来调用函数，如果这样来调用函数的话，函数名(参数名) 则会被认为是函数名，在微信小程序的渲染层传递参数需要通过 data-参数名=“” 来进行传参。

btnTapHandler(e) {
        
        this.setData({
        
          count: e.target.dataset.count
        })
      },

渲染层传参：

![在这里插入图片描述][f5470b5a39eb487d9d7d44935add0b3c.png]  
但是这里有个问题，就是我们查看 data 中的 count 的类型的时候，可以发现这个 count 是 string 类型的，为什么呢？

![在这里插入图片描述][15c8693fee26420d950a8f4833f8fc69.png]

因为我们 data-count=“3” “3” 是一个字符串，所以渲染层接收到的参数的类型就是 string 类的，那么如何传参才能使得渲染曾传递的参数的类型是 Integer 类型的呢？

需要借助 Mustache 语法来传递 Integer 类型的参数：

#### 1.2.2 bindinput 事件 ####

input {
        
      /* 设置输入框的边框宽度为1像素，样式为实线，颜色为浅灰色（#eee） */
      border: 1px solid #eee;
      /* 设置输入框的外边距（周围的空间）为5像素。这使得输入框与其周围的元素之间有5像素的间距 */
      margin: 5px;
      /* 设置输入框的内边距（框与内容之间的空间）为5像素。这确保了输入框的内容与其边框之间有5像素的距离 */
      padding: 5px;
      /* 设置边框的圆角为3像素。这使得输入框的四个角看起来是圆形的，而不是完全的直角 */
      border-radius: 3px;
    }

inputHandler(e) {
        
        console.log(e.detail.value)
      },

![在这里插入图片描述][40e798aa828640eab12200c5156a7ddc.png]  
每当输入框中的数据有更新，event.detail.value 中的值就会更新。

根据上面的事件传参，通过 input 事件也可以根据输入框中的值为 data 中的数据赋值：

先在 data 中定义 message 数据，并进行初始化。

message: '你好'

渲染层使用 Mustache 语法获取到 data 中的数据：

在 js 中将输入框中的数据赋值给 data 中的数据：

inputHandler(e) {
        
        this.setData({
        
          message: e.detail.value
        })
      },

启动之后，输入框会获取到 message 中的值：

![在这里插入图片描述][9f6183f37f8a40ca9d8433303ccf6334.png]

然后我们修改输入框的值看能否赋值给 data 中的 message 数据。

![在这里插入图片描述][1fd9489e5cfa4dcfa466927c43533f51.png]

change 事件后面再为大家介绍。

### 1.3 条件渲染 ###

在微信小程序中可以使用 wx:if / wx:elif / wx:else 来实现条件渲染。

condition: true

![在这里插入图片描述][dfeaecfcec244db98692e1f45c4a75e7.png]

condition: false

![在这里插入图片描述][587eee1589504f2398b8f8ae46b8f62d.png]

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在<block> 标签上使用 wx:if 控制属性：

![在这里插入图片描述][43fb024ae8e1450fb4f7207b6ffa26b8.png]  
![在这里插入图片描述][ebf67f8184de46e88af7d545736c746e.png]

注意： 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

![在这里插入图片描述][8514333d96d84522a8e855f612a11e1a.png]

在小程序中，直接使用 hidden=“\{ \{ condition \}\}” 也能控制元素的显示与隐藏：

<view hidden="{
         {condition}}">条件为true隐藏，条件为false显示</view>

![在这里插入图片描述][c5e19cc988d042ceb2b9910074711f4a.png]  
![c1a2a229f66c412392b5db1180ab8d46.png][]

wx:if 与 hidden 的对比:

1.  运行方式不同

*  wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
 *  hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

1.  使用建议

*  频繁切换时，建议使用 hidden
 *  控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

### 1.4 列表渲染 ###

在微信小程序中可以使用  wx;for 根据指定的数组，循环渲染重复的组件结构：

首先在 data 中定义一个数组：

array: [
          '小美',
          '小帅',
          '壮壮'
        ]

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。

<view wx:for="{
         {array}}">
      索引是：{
       {index}}，当前项是：{
       {item}}
    </view>

![在这里插入图片描述][8c255babcdcb468c87a15ca503fa0bb7.png]

index 和 item 是默认的索引和循环项，我们也可以自定义索引和循环项：

*  使用 wx:for-index 可以指定当前循环项的索引的变量名
 *  使用 wx:for-item 可以指定当前项的变量名

<view wx:for="{
         {array}}" wx:for-index="idx" wx:for-item="itemName">
      索引是：{
       {idx}}，当前项是：{
       {itemName}}
    </view>

![在这里插入图片描述][bdcce4729b9a4249940874da6648bf6e.png]

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率：

array: [
          {
        id: 1, name: '小美'},
          {
        id: 2, name: '小帅'},
          {
        id: 3, name: '壮壮'}
        ]

<view wx:for="{
         {array}}" wx:key="id">
      索引是：{
       {index}}，当前项是：{
       {item.name}}
    </view>

![在这里插入图片描述][a82d9b768bf84c3ebab49c76f669a7ec.png]

对于我们上面的示例，没有适合的可以指定的 key 值，所以可以将索引 index 作为 key 值。

## 2. WXSS 模板样式 ##

什么是 WXSS？

> **WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式。WXSS用于决定WXML的组件应该怎么显示，类似于网页开发中的CSS。为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时，为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS扩展的特性有尺寸单位和样式导入等。**

与 CSS 相比，WXSS 扩展的特性有：

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

### 2.1 什么是 rpx 尺寸单位 ###

rpx是微信小程序独有的、解决屏幕自适应的尺寸单位，可以根据屏幕宽度进行自适应，不论屏幕大小，规定屏幕宽为750rpx。通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配。

rpx与px之间的换算以iPhone6为例，iPhone6的屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，也就是1rpx=0.5px=1物理像素，因为设计师的图一般是二倍图，所以在iPhone6下直接使用测量出来的值来设置rpx就可以了。

正是因为这，官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。

### 2.2 什么是样式导入 ###

在微信小程序开发中，样式导入是一种使用WXSS提供的@import语法来导入外部样式表的方法。通过样式导入，可以将样式代码分离到单独的样式表中，以便更好地组织和管理代码。

使用@import语法，可以在WXSS文件中导入其他WXSS文件的样式。例如，可以在app.wxss文件中导入common.wxss文件中的样式，以便在整个小程序中共享和重用这些样式。

在样式导入时，需要指定需要导入的样式表的相对路径。例如，如果common.wxss文件位于与app.wxss文件同一目录下，可以使用@import "common.wxss"来导入该文件中的样式。

通过样式导入，可以提高代码的可维护性和可重用性，同时也有助于减少代码冗余和降低样式冲突的可能性。

### 2.3 全局样式和局部样式 ###

**全局样式**：微信小程序中的全局样式是指在app.wxss文件中定义的样式。这些样式对小程序中的每个页面都有效，可以用来设置全局的样式风格，例如字体、颜色、布局等。通过在app.wxss文件中定义样式，可以让整个小程序的样式风格保持一致，提高了用户体验。

**局部样式**：微信小程序中的局部样式是指在页面级别的WXSS文件中定义的样式。这些样式只作用于对应的页面，不会影响其他页面。通过在页面级别的WXSS文件中定义样式，可以实现页面的个性化定制，使每个页面的样式都符合特定的需求和设计风格。

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

我们将鼠标放在对应的 CSS 样式中就会显示出权重。

![在这里插入图片描述][ccfc74bdee7f453e9d5fba3d65b0df1f.png]

#### 2.3.1 全局配置 ####

全局配置文件的常用配置项：

1.  pages：记录当前小程序所有页面的存放路径
2.  window：全局设置小程序窗口的外观
3.  tabBar：设置小程序底部的 tabBar 效果
4.  style：是否启用新版的组件样式（v2表示启用）

小程序窗口组成部分：

![在这里插入图片描述][d95387f21d4547288d0c2a2bee1fea94.png]

##### 2.3.1.1 window 节点常用的配置项： #####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>String</td> 
   <td>字符串</td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#000000</td> 
   <td>导航栏背景颜色，如 #000000</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>String</td> 
   <td>white</td> 
   <td>导航栏标题颜色，仅支持 black / white</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>窗口的背景色</td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>String</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 dark / light</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否全局开启下拉刷新</td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位为px</td> 
  </tr> 
 </tbody> 
</table>

"window": {
        
      "navigationBarTitleText": "WeChat",
      "navigationBarBackgroundColor": "#FFFFFF",
      "navigationBarTextStyle": "black",
      "backgroundColor": "#efefef",
      "backgroundTextStyle":"dark",
      "enablePullDownRefresh":true,
      "onReachBottomDistance": 100
    }

![在这里插入图片描述][0dc0b8eb084a41888ca1d33d2ba22926.png]

注意：上拉触底默认距离为50px，如果没有特殊需求，建议使用默认值即可。

##### 2.3.1.2 tabBar #####

微信小程序中的tabBar是指位于小程序底部或者顶部的一组固定导航按钮，通常包含 2-5个按钮，用于快速切换小程序的不同页面。这些按钮是固定的，不会随着页面滚动而消失。通过点击不同的tabBar按钮，用户可以快速切换到对应的功能页面。

在微信小程序中，tabBar是全局配置，即每个页面都会显示这个tabBar。开发者可以在微信小程序的app.json文件中配置tabBar，包括设置tabBar的标题、图标、背景色等样式，以及指定每个tab页面的路径。

通过合理地使用tabBar，可以为用户提供更好的导航和切换体验，提升小程序的用户满意度。在设计tabBar时，需要注意颜色、大小、字体等因素的统一，以保持小程序的整体风格的一致性。同时，需要考虑用户的使用习惯和逻辑，使tabBar符合用户的心理预期和使用习惯。

注意：

*  tabBar中只能配置最少 2 个、最多 5 个 tab 页签
 *  当渲染顶部 tabBar 时，不显示 icon，只显示文本

![在这里插入图片描述][96751b6555b34480b9a11b8fc10cad69.png]  
![在这里插入图片描述][531f10e4553c4d48bf14258d1cd9b444.png]

tabBar 的组成部分：

![在这里插入图片描述][9957c498432b4d18b39d01a2221fffcf.png]

tabBar 节点的配置项：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td>tabBar 的位置，仅支持 bottom/top</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>String</td> 
   <td>否</td> 
   <td>black</td> 
   <td>tabBar 上边框的颜色，仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td></td> 
   <td>tab 上文字的默认（未选中）颜色</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td></td> 
   <td>tab 上的文字选中时的颜色</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td></td> 
   <td>tabBar 的背景色</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td></td> 
   <td>tab 页签的列表，最少 2 个、最多 5 个 tab</td> 
  </tr> 
 </tbody> 
</table>

每个 tab 项的配置选项：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pagePath</td> 
   <td>String</td> 
   <td>是</td> 
   <td>页面路径，页面必须在 pages 中预先定义</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>是</td> 
   <td>tab 上显示的文字</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>String</td> 
   <td>否</td> 
   <td>未选中时的图标路径；当 postion 为 top 时，不显示 icon</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>String</td> 
   <td>否</td> 
   <td>选中时的图标路径；当 postion 为 top 时，不显示 icon</td> 
  </tr> 
 </tbody> 
</table>

注意：如果存在 tabBar，那么在 app.json 的 pages 选项中，需要将 tab 页面放在前面，否则这些 tabBar 是无法渲染出来的。

## 3. 网络数据请求 ##

既然是小程序，肯定不可避免的需要向其他网站发送网络请求。但是处于安全考虑，小程序官方对数据接口的请求做出了限制：

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

![在这里插入图片描述][b53952dadd14432191643e286e203680.png]

配置域名在微信小程序管理后台中配置：

![在这里插入图片描述][a648623b796f45a1b5a1de71ea135fea.png]  
![在这里插入图片描述][e6c4c817af054f2d8a146af4d4c23d0d.png]  
微信小程序向网站发送请求，需要调用微信小程序提供的 wx.request() 方法，通过这个方法可以发送 GET 或者 POST等其他请求类型的请求。

GET 请求：

wx.request({
        
          url: 'https://www.baidu.com',
          method: "GET",
          success: (res) => {
        
            console.log(res)
          }
        })

POST 请求：

wx.request({
        
          url: 'https://www.baidu.com',
          method: "POST",
          data: {
        
            name: 'zhangsan',
            password: '123456'
          },
          success: (res) => {
        
            console.log(res)
          }
        })

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数：

![在这里插入图片描述][3144bfeba8a047a093bbb7cd53e0d827.png]  
如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口，此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验

![在这里插入图片描述][7236632a80264fe1b8681946c895c03f.png]

注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用.

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

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

[507ff98b191a499da2dadda90d8a7919.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/bfd0159ad72d460e97975b261578ff2e.png
[a71b67385a324e2693be9abd7c473d06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f6ac7e24fdc44c558ec0348f642e0324.png
[7fb9ade9932a4dceb61ca0ae1c4de7e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/efe64bcad5724f2b95938b39c7bb85f1.png
[af68cb9685024ca78c55d65e43d75fdd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/bee0f8a7bca2432e905bebd307ffdcb2.png
[9cbb80e33f844f97ac9e69cdbb81e019.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/dacf323291ba45719f6d9d3e806913a7.png
[a232af6b1a7644a785ba27b103289ec7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/18a38610c9f4407c90c6a199dc053abb.png
[89f4a5d7af6544508efe060eb19329ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5b552344d40943d8a944405f0d9513fe.png
[f5470b5a39eb487d9d7d44935add0b3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f6e77777102d4361bbcde4d8d2eb396b.png
[15c8693fee26420d950a8f4833f8fc69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/dc1f4e18cae64d6589285ed22b4f2738.png
[40e798aa828640eab12200c5156a7ddc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/50daa602e14244ab8f0f2266422b73f3.png
[9f6183f37f8a40ca9d8433303ccf6334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/389ca4381d664063b8ebfe484dd1a4ff.png
[1fd9489e5cfa4dcfa466927c43533f51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/c6d420cac72642129cadc08ab99ba7da.png
[dfeaecfcec244db98692e1f45c4a75e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/6d0e3b5cd6cc405d8d6189597b370ec3.png
[587eee1589504f2398b8f8ae46b8f62d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5c641230f2704d7b8fa61fb7348e1970.png
[43fb024ae8e1450fb4f7207b6ffa26b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/058b51aef8a5421ea4d1e8da6d22fa04.png
[ebf67f8184de46e88af7d545736c746e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/93fb25dcee4a4552bf24b3bc9c307561.png
[8514333d96d84522a8e855f612a11e1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/96bc905577c24f85893af2159a149d8f.png
[c5e19cc988d042ceb2b9910074711f4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/9a50a80369b8477284bc8994fe78024e.png
[c1a2a229f66c412392b5db1180ab8d46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/bea11ec356274d939ea5d51c98ffbdf4.png
[8c255babcdcb468c87a15ca503fa0bb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/4e712fdfb7be49b78a3545bd47a1e05d.png
[bdcce4729b9a4249940874da6648bf6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/fd04c85d24244d38b77ba1baf21b280a.png
[a82d9b768bf84c3ebab49c76f669a7ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/15d8700446d342eaa3a76122c12881ef.png
[ccfc74bdee7f453e9d5fba3d65b0df1f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/95c2f2b1c4b54e7eb1b5c34a2efa6109.png
[d95387f21d4547288d0c2a2bee1fea94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b9ee62c3b6de4d6aa65ee3ff98786feb.png
[0dc0b8eb084a41888ca1d33d2ba22926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/c4dc2f7444404976ad9dfe30c8ba4492.png
[96751b6555b34480b9a11b8fc10cad69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/1e90c002b2904840a20f94ea00e09c88.png
[531f10e4553c4d48bf14258d1cd9b444.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b2fbb0c545224959b0b1b9af4fb01e9c.png
[9957c498432b4d18b39d01a2221fffcf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f5b5808868a74c95b189401400c7d5de.png
[b53952dadd14432191643e286e203680.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/574a4f7a1bcf4fd89570f4e61eb050f1.png
[a648623b796f45a1b5a1de71ea135fea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/abd931625ae64c1a8fb41ce0c5d15f7e.png
[e6c4c817af054f2d8a146af4d4c23d0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/17f9cce18b2a425a8875be0855545941.png
[3144bfeba8a047a093bbb7cd53e0d827.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/e7e3640e6e7645b5a7c86f24ae936cf4.png
[7236632a80264fe1b8681946c895c03f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/8f7b8b7e74b24d3db85eeaffc0e74675.png