微信小程序-2

关注

原创最新推荐文章于 2026-02-27 10:25:29 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

微信小程序 + Antv F2 微信小程序 + Antv F2一、项目搭建二、相关问题三、总结一、项目搭建 1、创建微信小程序项目（下载微信小程序IDE，详细创建微信小程序流程见：小程序文档:） 2、在项目根目录下，初始化创建package.json文件，打开cdm 执行： npm init 3、安装npm install --production; 4、安装微信小程序 F2 图表组件: npm i ... 阅读详情

数据绑定

index.js

Page({
  data: {
    info: 'hello world',
    randomNumber: Math.random() * 10,
    imgSrc:'http://www.itheima.com/images/logo.png'
  }
})

index.wxml

<view>{{ info }}</view>

<view>{{ randomNumber >= 5 ? '随机数大于等于5' : '随机数小于5' }}</view>

<image src="{{ imgSrc }}" mode="widthFix"/>

事件绑定

常用的事件

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

事件对象的属性

event.target 可简写为 e.target

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

bindtap

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为

无参：

index.wxml

<button type="primary" bindtap="btnTapHandler">按钮</button>

index.js

Page({
  // 定义按钮的事件处理函数
  btnTapHandler(e) {  // 按钮的 tap 事件处理函数
    console.log(e);   // 事件参数对象 e
  }
})

含参：

index.wxml

<view>{{ count }}</view>
<button type="primary" bindtap="CountChange" data-info="{{ addNum }}">+10</button>

index.js

Page({

  // 点击按钮后事件处理函数
  CountChange(e) {     // 事件参数对象 e
    this.setData({
      count: this.data.count + e.target.dataset.myinfo
    });
  },

  // 页面的初始数据
  data: {
    count: 0,
    addNum: 10
  }
})

bindinput

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

index.wxml

<input type="text" value="{{ content }}" bindinput="inputHandler" />
<view>您输入的内容是：{{ content }}</view>

index.js

Page({
  data:{
    content: ''
  },

  inputHandler(e) {
    // e.detail.value 是变化过后，文本框最新的值
    this.setData({
      content: e.detail.value
    }) 
  }
})

条件渲染

普通渲染

index.js

Page({
  data:{
    type: 1
  }
})

index.wxml

<view wx:if="{{ type === 1 }}">男</view>
<view wx:elif="{{ type === 0 }}">女</view>
<view wx:else> 未填写 </view>

批量渲染

如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用 wx:if 控制属性，如下所示：（注意：并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染）

写如下代码：

<block wx:if="{{ true }}">
  <view>one</view>
  <view>two</view>
</block>

最终展示的结果是：

  <view>one</view>
  <view>two</view>

hidden

index.js

Page({
  data:{
    flag: true
  }
})

index.wxml

<view hidden="{{ flag }}">条件为true的时候，隐藏元素，否则显示</view>

循环渲染

默认情况：

index.js

Page({
  data:{
    arr: ['华为', '小米', '苹果', 'OPPO']
  }
})

index.wxml

<view wx:for="{{ arr }}">
  索引：{{ index }}，每一项：{{ item }}
</view>

手动指定索引和当前项的变量名：

<view wx:for="{{ arr }}" wx:for-index="idx" wx:for-item="itemName">
  索引：{{ idx }}，每一项：{{ itemName }}
</view>

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

index.js

Page({
  data:{
    userList: [
      {id: 1 ,name: '小明'},
      {id: 2 ,name: '小化'},
      {id: 3 ,name: '小工'}
      ]
  },
})

index.wxml

<view wx:for="{{ userList }}" wx:key="id">
  {{ item.name }}
</view>

WXSS

屏幕适配

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

样式导入

@import “/xxx.wxss”

window 配置

小程序窗口的组成部分

在这里插入图片描述

window 节点配置项

在这里插入图片描述

设置导航栏的标题：

app.json -> window -> navigationBarTitleText

设置导航栏的背景色

app.json -> window -> navigationBarBackgroundColor

注意：颜色值只能接受6位16进制数，例如：#5a6b7c

设置导航栏的标题颜色

app.json -> window -> navigationBarTextStyle

下拉刷新

app.json -> window -> enablePullDownRefresh

注意：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面

下拉刷新时的窗口背景色

app.json -> window -> backgroundColor

注意：指定16进制的颜色值 #efefef

下拉刷新时的loading样式

app.json -> window -> backgroundTestStyle

设置上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

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

app.json -> window -> onReachBottomDistance

tabBar 配置

基本介绍

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。

小程序中通常将其分为：

底部 tabBar
顶部 tabBar

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

组成部分

在这里插入图片描述

tabBar 节点的配置项

在这里插入图片描述

app.json

{
  "pages": [
    "pages/index/index",
    "pages/me/me"
  ],
  
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeChat",
    "navigationBarBackgroundColor": "#ffffff"
  },
  
  "tabBar": {
  	"list": [
  		{...},
        {...},
    ],
    "position": "top"
  }
  
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

list 中 tab 项

在这里插入图片描述

app.json

{
  "pages": [
    "pages/index/index",
    "pages/me/me"
  ],
  
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeChat",
    "navigationBarBackgroundColor": "#ffffff"
  },
  
  "tabBar": {
  	"list": [
  		{
  			"pagePath": "pages/index/index",
  			"text": "首页"
  		},
        {
  			"pagePath": "pages/me/me",
  			"text": "我的"
  		}
    ],
    "position": "top"
  }
  
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

页面配置

在这里插入图片描述

index.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#00b261",
  "backgroundTextStyle": "light"
  ...
}

网络数据请求

请求限制

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

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

在这里插入图片描述

配置请求合法域名

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

注意事项：

域名只支持 https 协议
域名不能使用 IP 地址或 localhost
域名必须经过 ICP 备案
服务器域名一个月内最多可申请 5 次修改

跳过限制

跳过 request 合法域名校验，如果后端程序员仅仅提供了 http 协议的接口，暂时没有提供 https 协议的接口，此时为了不耽误开发的进度，我们可以在微信开发者工具中（详情 => 本地设置），临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，从而跳过 request 合法域名的校验。

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

发起数据请求

调用微信小程序提供的 wx.request() 方法，可以发起数据请求，如下所示：

index.wxml

<button bindtap="getInfo">发起GET请求</button>
<button bindtap="postInfo">发起POST请求</button>

index.js

Page({
  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',   // 请求的接口地址，必须基于 https 协议
      method: 'GET',      // 请求的方式
      data:{              // 发送到服务器的数据
        name: 'zs',
        age: 20
      },
      success: (res) => {   // 请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },
  // 发起POST请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  },
})

页面刚加载时请求数据

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

Page({

  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',   // 请求的接口地址，必须基于 https 协议
      method: 'GET',      // 请求的方式
      data:{              // 发送到服务器的数据
        name: 'zs',
        age: 20
      },
      success: (res) => {   // 请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },
  
  // 发起POST请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  },
  
  // 声明周期函数——监听页面加载
  onload: function (options) {
    this.getInfo()
    this.postInfo()
  },
})