【微信小程序】基本语法

一、导入小程序

在这里插入图片描述

  • 选择代码目录

  • 项目配置文件

    • appid 当前小程序的 AppID
    • projectname 当前小程序的项目名称

  • 变更AppID（视情况而定，如果没有开发权限时需要变更成个人的 AppID）

二、模板语法

在页面中渲染数据时所用到的一系列语法叫做模板语法，对应到 Vue 中就是指令的概念。

2.1 数据绑定

  • 插值 {{}}

    小程序中使用 {{}} 实现数据与模板的绑定，与 Vue 中不同的是无论是属性的绑定还是内容的绑定都必须要使用 {{}}。

    <!-- 此处的 false 是字符串的 'false'，因此布尔结果为 true -->
<switch checked="false" />
<!-- 如下才是正确表示布尔值 false 的方法 -->
<switch checked="{{false}}" />

  • 简易数据绑定

    小程序中提供了 model:value="{{数据名}}" 语法来实现双向的数据绑定，但是目前只能用在 input 和 textarea 组件中。

本节中用到的演示代码如下：

<!-- 数据绑定 -->
<view class="binding">
  <!-- 开关组件 -->
  <switch checked="{{ isOpen }}"/>
  <!-- 双向数据绑定 -->
  <input type="text" model:value="{{ message }}" />
  <view class="message">{{ message }}</view>
</view>

Page({
  data: {
    isOpen: true,
    message: 'hello world!'
  }
})
2.2 条件渲染
  • 控制属性：相当于 Vue 中指令的概念，在小程序中做控制属性
    • wx:if 根据表达式的值渲染内容，值为真时显示
    • wx:else 用在 wx:else 的后面，不可单独使用，wx:if 表达式值为假时显示
  • 组件属性：
    • hidden 根据表达式的值渲染内容，值为真时隐藏
    • 通过 [hidden] { display: none; } 来实现内容的隐藏

本节中用到的演示代码如下：

<!-- 条件渲染 wx:if 和 wx:else -->
<view class="welcome">
  <text wx:if="{{ isLogin }}">大师兄</text>
  <text wx:else>游客</text>你好:
</view>

<!-- 条件渲染 hidden -->
<view class="loading">
  <!-- 可以单独使用 -->
  <!-- <text wx:if="{{ !loaded }}">正在加载...</text> -->
  <text hidden="{{ loaded }}">正在加载...</text>
</view>

Page({
  data: {
    isOpen: true,
    message: 'hello world!',
    isLogin: true,
    loaded: false
  }
})
2.3 列表渲染
  • wx:for 根据数组重复渲染组件内容
    • index 默认值，访问数组的索引值
    • item 默认值，访问数组的单元值
  • wx:key 列表项的唯一标识符（不使用 {{}}）
    • 数组单元是对象时，只需要写属性名
    • 数组单元是简单类型时，推荐使用 *this
  • wx:for-index 自定义访问数组索引的变量名
  • wx:for-item 自定义访问数组单元的变量名

本节中用到的演示代码如下：

<!-- 列表渲染 -->
<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
    <text>级别</text>
  </view>
  <view class="item">
    <text>1</text>
    <text>贺洋</text>
    <text>20</text>
    <text>男</text>
    <text>菜鸟</text>
  </view>
</view>
<!-- 简单数组 -->
<view class="history">
  <text>小米</text>
</view>

Page({
  data: {
    isOpen: true,
    message: 'hello world!',
    isLogin: true,
    loaded: false,
    students: [
      {id: 1, name: '贺洋', age: 20, gender: '男', level: '菜鸟'},
      {id: 2, name: '唐刚', age: 18, gender: '女', level: '笨鸟'},
      {id: 3, name: '常超', age: 20, gender: '女', level: '老鸟'}
    ],
    history: ['苹果', '华为', 'OPPO', '三星']
  }
})

三、内置API

内置 API 实际上就是小程序提供的一系列的方法，这些方法都封装在了全局对象 wx 下，调用这些方法实现小程序提供的各种功能，如网络请求、本地存储、拍照、录音等。

3.1 网络请求

调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互，其语法格式如下：

wx.request({
  url: '这里是接口的地址',
  method: '这里是请求的方法',
  data: '请求时提交的数据',
  header: {/* 请求头信息 */},
  success: () => {/* 成功的回调 */},
  fail: () => {/* 失败的回调 */},
  complete: () => {/* 成功或失败的回调 */}
})

本节中用到的演示代码如下：

<button class="button" size="mini" type="primary">查询书单</button>
<view class="books">
  <view class="item">
    <text>序号</text>
    <text>名称</text>
    <text>作者</text>
    <text>出版社</text>
    <text>操作</text>
  </view>
  <view class="item">
    <text>1</text>
    <text>西游记</text>
    <text>吴承恩</text>
    <text>人民文学出版社</text>
    <text>删除</text>
  </view>
</view>

Page({
  data: {
    books: []
  },
  // 调用数据接口的方法
  getBooks() {
    // 调用小程序的 API 发起请求
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      method: 'GET',
      data: {
        creator: 'zhangsan'
      },
      success: (result) => {
        // 更新数据，渲染页面
        this.setData({ books: result.data.data })
      }
    })
  }
})
3.2 界面交互

  • wx.showLoading 显示 loading 提示框

    • title 文字提示内容

    • mask 是否显示透明蒙层，防止触摸穿透

  • wx.hideLoading 隐藏 loading 提示框

  • wx.showToast 消息提示框（轻提示）

    • mask 是否显示透明蒙层，防止触摸穿透
    • duration 延迟时间（提示框显示多久）
    • icon 指定图标，none 不使用图标
3.3 本地存储
  • wx.setStorageSync 存入一个数据，复杂类型数据不需要 JSON.stringify 处理
  • wx.getStorageSync 读取一个数据，复杂类型数据不需要 JSON.parse 处理
  • wx.removeStorageSync 删除一个数据
  • wx.clearStorageSync 清空全部数据

本节中用到的演示代码如下：

<!-- 本地存储 -->
<view class="storage">
  <button size="mini" type="primary">存数据</button>
  <button size="mini" type="primary">读数据</button>
  <button size="mini" type="primary">删数据</button>
  <button size="mini" type="primary">清数据</button>
</view>
3.4 API 特征

小程序中提供的 API 数量相当的庞大，很难也没有必要将所有的 API 全部掌握，但是这些 API 具有一些共有的特征：

  • 异步 API：绝大部分的 API 都是异步方式，通过回调函数获取 API 执行的结果
    • success API 调用成功时执行的回调
    • fail API 调用失败时执行的回调
    • complete API 调用结束时执行的回调（无论成功或失败）
  • 同步 API：部分 API 支持以同步方式获取结果，这些 API 的名称都以 Sync 结尾，如 wx.getStorageSync 等
  • Promise：部分异步的 API 也支持以 Promise 方式返回结果，此时可以配合 asyc/await 来使用
3.5 相册/拍照

wx.chooseMedia 调起摄像头拍照或读取相册内容，该 API 既支持回调方式获取结果，也支持 Promise 方式返回结果：

<view class="preview" bind:tap="onChoose">
  <image src="{{ avatar }}" mode="aspectFill" />
</view>

Page({
  // 用于页面渲染的数据
  data: {
    avatar: ''
  },
  // 选择图片
  async onChoose() {
    // 推荐使用 async await 的写法，减少不必要的回调地狱
    const res = await wx.chooseMedia({
      mediaType: ['image'],
      count: 1
    })
    this.setData({
      avatar: res.tempFiles[0].tempFilePath
    })
  }
})
3.6 小练习

本节搜索历史练习用到的演示代码如下：

<!-- 搜索历史 -->
<view class="history">
  <view class="search-bar">
    <input type="text" />
    <text class="label">搜索</text>
  </view>
  <view class="title">
    历史搜索 <text class="icon-delete">x</text>
  </view>
  <view class="keywords">
    <navigator url="/pages/test/index">小米</navigator>
    <navigator url="/pages/test/index">苹果</navigator>
    <navigator url="/pages/test/index">华为</navigator>
  </view>
</view>

四、事件处理

4.1 事件对象

前面已经介绍过小程序事件监听的语法：bind:事件类型=事件回调，但是小程序的事件回调不支持传参数，因此要将模板中的数据传递到事件回调中就必须要通过事件对象来实现。

小程序事件回调函数的第1个参数即为事件对象，事件对象中包括了一些有用的信息：

Page({
  eventHandler(ev) {
    // 查看事件对象
    console.log(ev)
  }
})

本节练习用到的演示代码如下：

<!-- 搜索框 -->
<view class="search-bar">
  <input type="text" placeholder="输入搜索关键字" />
</view>
<!-- 页面主体 -->
<view class="page-body">
  <scroll-view scroll-y class="aside">
    <view wx:for="{{6}}" wx:key="*this" class="item"></view>
  </scroll-view>
  <scroll-view scroll-y refresher-enabled class="content">
    <view wx:for="{{6}}" wx:key="*this" class="item"></view>
  </scroll-view>
</view>
4.2 组件事件

前面介绍的 tap 事件可以在绝大部分组件是监听，我们可以将其理解为通用事件类型，然而也有事件类型只属于某个组件，我们将其称为组件事件。

scroll-view 组件中的事件：

  • bind:scrolltolower 当滚动内容到达底部或最右侧时触发
  • bind:refresherrefresh 执行下拉操作时触发
  • refresher-enable 启用自定义下拉刷新

本节练习用到的演示代码如下：

Page({
  data: {
    isPulling: false
  },
  onScrollPulling() {
    // 请求最新的数据
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      data: {creator: 'zhangsan'},
      success: (result) => {},
      complete: () => {
        // 停止下拉刷新
        this.setData({isPulling: false})
      }
    })
  }
})

表单组件中的事件：

  • change 表单数据发生改变时触发（input 不支持）
  • submit 表单提交时触发，button 按钮必须指定 form-type 属性

本节练习用到的演示代码如下：

<!-- 用户信息 -->
<view class="register">
  <form>
    <view class="form-field">
      <label for="">姓名:</label>
      <view class="field">
        <input type="text" placeholder="请输入您的姓名" />
      </view>
    </view>
    <view class="form-field">
      <label for="">性别:</label>
      <view class="field">
        <radio-group>
          <radio value="男" checked />男
          <radio value="女" />女
        </radio-group>
      </view>
    </view>
    <view class="form-field">
      <label for="">爱好:</label>
      <view class="field">
        <checkbox-group>
          <checkbox value="写代码" checked />写代码
          <checkbox value="睡大觉" />睡大觉
        </checkbox-group>
      </view>
    </view>
    <view class="form-field">
      <label for="">籍贯:</label>
      <view class="field">
        <picker mode="region">请选择籍贯</picker>
      </view>
    </view>
    <button size="mini" type="primary">保存</button>
  </form>
</view>

五、生命周期

生命周期是一些名称固定自动执行的函数。

5.1 页面生命周期
  • onLoad 在页面加载完成时执行，只会执行 1 次，常用于获取地址参数和网络请求
  • onShow 在页面处于可见状态时执行，常用于动态更新数据或状态
  • onReady 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景
  • onHide 在页面处于不见状态时执行，常用于销毁长时间运行的任务，如定时器

本节练习用到的演示代码如下：

<view class="history">
  <view class="title">历史搜索</view>
  <view class="keywords">
    <navigator
      wx:for="{{history}}"
      wx:key="*this"
      url="/pages/test/index">
      {{item}}
    </navigator>
  </view>
</view>

<view class="form-field">
  <input type="text" placeholder="请输入手机号" />
  <text
    wx:if="{{time === 0}}"
    bind:tap="getSMSCode"
    class="label"
  >获取短信验证码</text>
  <text wx:else class="label">{{time}}后重新获取</text>
</view>

// 定时器ID
let timer = null
Page({
  data: {
    history: [],
    time: 0
  },
  getSMSCode() {
    let time = 60 // 初始数据
    // 倒计时
    timer = setInterval(() => {
      // 停止定时器
      if(--time < 0) return clearInterval(timer)
      this.setData({time}) // 渲染结果
    }, 1000)
  },
})
5.2 应用生命周期
  • onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）
  • onShow 小程序前台运行时执行，常用于更新数据或状态
  • onHide 小程序后台运行时执地，常用于销毁长时间运行的任务，如定时器

本节练习用到的演示代码如下：

// pages/lifetimes/index.js
Page({
  
  // 小程序转发/分享
  onShareAppMessage() {
    return {
      title: '小程序学习',
      path: '/pages/index/index?test=测试数据',
      imageUrl: '/static/images/cover.png'
    }
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/912499.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

kafka中节点如何服役和退役

kafka中节点如何服役和退役

服役新节点 1&#xff09;新节点准备 &#xff08;1&#xff09;关闭 bigdata03&#xff0c;进行一个快照&#xff0c;并右键执行克隆操作。 &#xff08;2&#xff09;开启 bigdata04&#xff0c;并修改 IP 地址。 vi /etc/sysconfig/network-scripts/ifcfg-ens33修改完记…
阅读更多...
红黑树及MySQL 基础架构

红黑树及MySQL 基础架构

红黑树简介及左旋、右旋、变色 红黑树(Red Black Tree)是一种自平衡二叉搜索树(二叉查找树)&#xff0c;是一种特殊的二叉搜索树&#xff0c;在进行插入和删除时通过特定操作保持二叉树自身的平衡&#xff0c;从而获得较高的查找性能。 红黑树的平衡操作通过左旋、右旋和变色来…
阅读更多...
ElasticSearch向量检索技术方案介绍

ElasticSearch向量检索技术方案介绍

1、背景 在人工智能快速发展的今天&#xff0c;推荐技术、以文搜图、以文搜视频、以图搜图等技术已经得到了广泛的应用&#xff0c;在百度、小红书、抖音、快手等app上随便输入一段文本&#xff0c;搜索结果已不像早些年那么单一&#xff1a;只有一些文字信息&#xff0c;现在的…
阅读更多...
MySql中索引为什么用B+树，他有什么特点？时间复杂度是多少？能存多少数据？是不是只能三层？他与B-树有什么不同？还有其它的树你是是否知道？

MySql中索引为什么用B+树，他有什么特点？时间复杂度是多少？能存多少数据？是不是只能三层？他与B-树有什么不同？还有其它的树你是是否知道？

平衡二叉树 平衡二叉树又被称为AVL树平衡二叉树是一颗空树或者它的左右两个子树的高度差的绝对值不超过1&#xff0c;并且左右子树也是平衡树非叶子节点值大于左子节点值而小于右子节点值非叶子节点最多拥有两个子节点 平衡二叉树的不足之处及时间复杂度 如果每次插入的数据都…
阅读更多...
3DMAX城镇建筑区块生成插件TownBlocks使用方法详解

3DMAX城镇建筑区块生成插件TownBlocks使用方法详解

3DMAX城镇建筑区块生成插件TownBlocks使用教程 3DMAX城镇建筑区块生成插件TownBlocks&#xff0c;是一款专为城镇建筑区块生成设计的实用工具&#xff0c;它能够实现从2D轮廓到低多边形城镇建筑群的一键批量转换。该插件不仅操作简便&#xff0c;而且提供了丰富的参数设置选项&…
阅读更多...
手机内卷下一站，AI Agent

手机内卷下一站，AI Agent

作者 | 辰纹 来源 | 洞见新研社 2024年除夕夜&#xff0c;OPPO在央视春晚即将开始前举办了一场“史上最短发布会”&#xff0c;OPPO首席产品官刘作虎宣布&#xff0c;“OPPO正式进入AI手机时代”。 春节假期刚过&#xff0c;魅族又公开表示&#xff0c;将停止“传统智能手机…
阅读更多...
A021基于Spring Boot的自习室管理和预约系统设计与实现

A021基于Spring Boot的自习室管理和预约系统设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…
阅读更多...
浮点数二进制在线转换器

浮点数二进制在线转换器

具体请前往&#xff1a;浮点数在线转二进制工具--在线将10进制浮点数(float)转化为4字节32位的二进制序列
阅读更多...
探索 Python 的新边疆：sh 库的革命性功能

探索 Python 的新边疆：sh 库的革命性功能

文章目录 **探索 Python 的新边疆&#xff1a;sh 库的革命性功能**第一部分&#xff1a;背景介绍第二部分&#xff1a;sh 库是什么&#xff1f;第三部分&#xff1a;如何安装 sh 库&#xff1f;第四部分&#xff1a;简单库函数使用方法1. 执行 ls 命令2. 使用 grep 搜索文件内容…
阅读更多...
【GeoJSON在线编辑平台】（2）吸附+删除+挖孔+扩展

【GeoJSON在线编辑平台】（2）吸附+删除+挖孔+扩展

前言 在上一篇的基础上继续开发&#xff0c;补充上吸附功能、删除矢量、挖孔功能。 实现 1. 吸附 参考官方案例&#xff1a;Snap Interaction 2. 删除 通过 removeFeature 直接移除选中的要素。 3. 挖孔 首先是引入 Turf.js &#xff0c;然后通过 mask 方法来实现挖孔的…
阅读更多...
吾店云介绍 – 中国人的WordPress独立站和商城系统平台

吾店云介绍 – 中国人的WordPress独立站和商城系统平台

经过多年在WordPress建站领域的摸索和探索&#xff0c;能轻松创建和管理各种类型网站的平台 – 吾店云建站平台诞生了。 应该说这是一个艰苦卓绝的过程&#xff0c;在中国创建一个能轻松创建和使用WordPress网站的平台并不容易&#xff0c;最主要是网络环境和托管软件的限制。…
阅读更多...
【动手学电机驱动】STM32-FOC（6）基于 IHM03 的无感方波控制

【动手学电机驱动】STM32-FOC（6）基于 IHM03 的无感方波控制

STM32-FOC&#xff08;1&#xff09;STM32 电机控制的软件开发环境 STM32-FOC&#xff08;2&#xff09;STM32 导入和创建项目 STM32-FOC&#xff08;3&#xff09;STM32 三路互补 PWM 输出 STM32-FOC&#xff08;4&#xff09;IHM03 电机控制套件介绍 STM32-FOC&#xff08;5&…
阅读更多...
94.【C语言】数据结构之双向链表的初始化,尾插,打印和尾删

94.【C语言】数据结构之双向链表的初始化,尾插,打印和尾删

目录 1.双向链表 2.结构体的定义 3.示意图 3.代码示例 1.双向链表的尾插 示意图 代码 main.c List.h List.c 详细分析代码的执行过程 双向链表的初始化 2.双向链表的打印 代码 3.双向链表的尾删 1.双向链表 以一种典型的双向链表为例:带头双向循环链表(带头:带…
阅读更多...
「QT」几何数据类 之 QPoint 整型点类

「QT」几何数据类 之 QPoint 整型点类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…
阅读更多...
黑马点评1 session实现短信验证码登录

黑马点评1 session实现短信验证码登录

1 什么是session cookie的session的应用场景&#xff1a;cookie可以用来保存用户的登陆信息&#xff0c;如果删除cookie则下一次用户仍需要重新登录 session就类似于我们拿到钥匙去开锁&#xff0c;拿到的就是我们个人的信息&#xff0c;一般我们可以在session中存放个人的信息…
阅读更多...
[Docker#3] LXC | 详解安装docker | docker的架构与生态

[Docker#3] LXC | 详解安装docker | docker的架构与生态

目录 1.LXC容器操作 安装LXC LXC容器操作步骤 2.理论 LXC 是什么&#xff1f; Docker 是什么 Docker 和虚拟机的区别 Docker 和 JVM 虚拟化的区别 Docker 版本 ⭕Docker 官方网站&#xff08;建议收藏&#xff09; Docker 架构 生活案例 Docker 生态 Docker 解决…
阅读更多...
MySQL数据库专栏（五）连接MySQL数据库C API篇

MySQL数据库专栏（五）连接MySQL数据库C API篇

摘要 本篇文章主要介绍通过C语言API接口链接MySQL数据库&#xff0c;各接口功能及使用方式&#xff0c;辅助类的封装及调用实例&#xff0c;可以直接移植到项目里面使用。 目录 1、环境配置 1.1、添加头文件 1.2、添加库目录 2、接口介绍 2.1、MySql初始化及数据清理 2.1.…
阅读更多...
从0开始深度学习（27）——卷积神经网络（LeNet）

从0开始深度学习（27）——卷积神经网络（LeNet）

1 LeNet神经网络 LeNet是最早的卷积神经网络之一&#xff0c;由Yann LeCun等人在1990年代提出&#xff0c;并以其名字命名。最初&#xff0c;LeNet被设计用于手写数字识别&#xff0c;最著名的应用是在美国的邮政系统中识别手写邮政编码。LeNet架构的成功证明了卷积神经网络在…
阅读更多...
如何用C#和Aspose.PDF实现PDF转Word工具

如何用C#和Aspose.PDF实现PDF转Word工具

在本篇博文中&#xff0c;我将详细讲解如何用C#实现一个PDF转Word工具。这款工具基于Aspose.PDF库&#xff0c;实现PDF文件转为Word&#xff08;DOC/DOCX&#xff09;格式的功能&#xff0c;并通过用户友好的界面和状态提示提升用户体验。希望通过这篇文章帮助大家理解软件的实…
阅读更多...
运维技术之文件系统（File System for 0peration and Maintenance Technology）

运维技术之文件系统（File System for 0peration and Maintenance Technology）

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…
阅读更多...
最新文章

Copyright @ 2022~2023