【微信小程序】基本语法

一、导入小程序

在这里插入图片描述

  • 选择代码目录

  • 项目配置文件

    • appid 当前小程序的 AppID
    • projectname 当前小程序的项目名称
  • 变更AppID(视情况而定,如果没有开发权限时需要变更成个人的 AppID)

二、模板语法

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

2.1 数据绑定
  • 插值 {{}}

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

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

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

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

<!-- 数据绑定 -->
<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"><navigatorwx:for="{{history}}"wx:key="*this"url="/pages/test/index">{{item}}</navigator></view>
</view><view class="form-field"><input type="text" placeholder="请输入手机号" /><textwx: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'}}
})

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构:顺序表

顺序表 顺序表的概念与结构静态顺序表动态顺序表 动态顺序表的实现SeqList.h的创建初始化动态顺序表&#xff08;LS_Init&#xff09;动态顺序表的销毁&#xff08;LS_Destry&#xff09;检查动态内存空间是否已满&#xff08;SL_CheckCapacity&#xff09;动态顺序表打印有效数…

MySQL_数据类型建表

复习&#xff1a; 我们昨天学习的知识都忘了嘛&#xff1f;如果忘了也不要担心&#xff0c;我来带大家来复习一遍吧&#xff01;&#xff01;&#xff01; 1.查看所有数据库 show databases;2.创建属于自己的数据库 create database 数据库名; 检查自己创建的数据库是…

PHP不良事件上报系统源码,医院安全不良事件管理系统,基于 vue2+element+ laravel框架开发

不良事件上报系统通过 “事前的人员知识培训管理和制度落地促进”、“事中的事件上报和跟进处理”、 以及 “事后的原因分析和工作持续优化”&#xff0c;结合预存上百套已正在使用的模板&#xff0c;帮助医院从对护理事件、药品事件、医疗器械事件、医院感染事件、输血事件、意…

在 Android 手机上从SD 卡恢复数据的 6 个有效应用程序

如果您有 Android 设备&#xff0c;您可能会将个人和专业的重要文件保存在设备的 SD 卡上。这些文件包括照片、视频、文档和各种其他类型的文件。您绝对不想丢失这些文件&#xff0c;但当您的 SD 卡损坏时&#xff0c;数据丢失是不可避免的。 幸运的是&#xff0c;您不需要这样…

实战:看懂并分析执行计划——Nested Loops (Inner Join)

这是执行计划中 Nested Loops 的详情信息,下面将逐行解释每个字段的含义,并提供优化思路。 Nested Loops 分析 Physical Operation: Nested Loops (Inner Join) 物理操作,表示这是一个嵌套循环连接(Nested Loops),用于执行 INNER JOIN。嵌套循环通常用于小数据集的连接…

Meta Llama3用于药物发现的微调、RAG 和提示工程-LLM保姆级资料

Meta Llama3用于药物发现的微调、RAG 和提示工程的使用指南&#xff1a;LLM微调的基本概念&#xff0c;每种微调方式的深入解读&#xff0c;2种生物医药领域的Llama3的微调应用。 LLM 如何微调LLMs&#xff1f;3种微调方式&#xff0c;什么时候&#xff1f;什么情况下该使用何…

如何通过 PXE 使用 UEFI 启动 Tiny Core Linux

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

根据关键字搜索商品API返回值解析:深入解析与代码实践

在电子商务和数据集成领域&#xff0c;API&#xff08;应用程序编程接口&#xff09;扮演着至关重要的角色。通过API&#xff0c;开发者可以访问和利用平台的数据资源&#xff0c;实现自动化和智能化的数据交互。本文将探讨如何根据关键字搜索商品API的返回值进行解析&#xff…

Python http打印(http打印body)flask demo(http调试demo、http demo、http printer)

文章目录 代码解释 代码 # flask_http_printer.pyfrom flask import Flask, request, jsonify import jsonapp Flask(__name__)app.route(/printinfo, methods[POST]) def print_info():# 分隔符separator "-" * 60# 获取请求头headers request.headers# 获取 JS…

「C/C++」C/C++ STL 之 迭代器

✨博客主页何曾参静谧的博客📌文章专栏「C/C++」C/C++程序设计📚全部专栏「VS」Visual Studio「C/C++」C/C++程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid函数说明「…

大模型微调,使用QLoRA和自定义数据集微调大模型(下)

4.8 数据预处理 在微调模型之前&#xff0c;我们不能直接使用原始数据集&#xff0c;需要将数据集中的提示转换成模型能够理解的格式。 为了使数据集适配微调流程&#xff0c;这里编写辅助函数来格式化输入数据集。具体来说&#xff0c;就是将对话摘要&#xff08;即提示-响应…

【NOIP普及组】质因数分解

【NOIP普及组】质因数分解 C语言代码C代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 已知正整数 n 是两个不同的质数的乘积&#xff0c;试求出较大的那个质数。 输入 输入只有一行&#xff0c;包含一个正整数…

js--高阶函数之参数归一化

一、前言 参数归一化&#xff1a;是我们软件开发里一个非常重要且实用的技巧&#xff0c;用的好极大简化代码同时提升代码的可阅读性和可维护性。以下我用日期格式化为例&#xff0c;演示一下参数归一化的技巧。 二、日期格式化实例 /*** 辅助格式化函数* param {string|functi…

均值、期望、方差、标准差与协方差:基础概念解析

均值、期望、方差、标准差与协方差&#xff1a;基础概念解析 在统计学和数据分析中&#xff0c;均值、期望、方差、标准差和协方差是描述数据分布和关系的基本工具。理解这些概念有助于我们更好地分析和处理数据。本文将详细讲解这些概念的定义、计算方法及其在实际应用中的意…

shell基础

一、理解bash基础 默认的Linux shell——Bash&#xff08;Bourne Again SHell&#xff09;可以通过命令控制系统&#xff0c;执行文件操作&#xff0c;或者启动应用程序。它可以在命令行上交互式使用&#xff0c;或者你可以创建一个包含多个shell命令的文件&#xff0c;并像启…

js树状结构,自叶到根统计各级数量

$($(".tree-item").get().reverse()).each(function () {let self $(this).find("span").text()let prev $(this).parent(".two").prevAll(".tree-item").find("span").text()self self ? self : 0prev prev ? prev :…

学习threejs,使用JSON格式保存和加载整个场景

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE toJSON()方法 二、&a…

论文1—《基于卷积神经网络的手术机器人控制系统设计》文献阅读分析报告

论文报告&#xff1a;基于卷积神经网络的手术机器人控制系统设计 摘要 本研究针对传统手术机器人控制系统精准度不足的问题&#xff0c;提出了一种基于卷积神经网络的手术机器人控制系统设计。研究设计了控制系统的总体结构&#xff0c;并选用PCI插槽上直接内插CAN适配卡作为上…

SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder“

SLF4J常见问题 导入依赖&#xff1a; <dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.17</version> </dependency> <dependency><groupId>org.slf4j</groupId><arti…

资产管理系统:SpringBoot技术驱动

4系统概要设计 4.1概述 系统设计原则 以技术先进、系统实用、结构合理、产品主流、低成本、低维护量作为基本建设原则&#xff0c;规划系统的整体构架. 先进性&#xff1a; 在产品设计上&#xff0c;整个系统软硬件设备的设计符合高新技术的潮流&#xff0c;媒体数字化、压缩、…