0
0

小程序期末复习

文章目录

考试平台：学习通
考试题型：单选、判断、多选、填空、简答、完善程序

微信小程序基础知识

小程序的特点

(1)无需下载
(2)无需升级
(3)开发周期短
(4)开发成本低
(5)体积小
(6)跨平台

微信小程序的基本结构

在这里插入图片描述

全局app.json和页面json的常见设置及全局配置和页面配置时的优先级

一个小程序应用程序会包含最基本的两种配置文件。一种是全局的 app.json 和页面自己的 xxx.json
注意 ：配置文件中不能出现注释
全局 ：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
页面 :
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

掌握在app.json中设置tabBar页面的使用

  1. "tabBar":{"list":[{"pagePath":"",// 页面跳转路径"text":"",// 标题"iconPath":"",// 未选中图标的图片"selectedIconPath":""//已选中的图标的图片}],"color":"#0094ff",//配置未选中文字颜色"selectedColor":"#ff9400"// 被选中文字的颜色}

tabBar 的更多页面配置，参考文档 ：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

常见生命周期函数的执行时机

应用生命周期 ：

(1) onLaunch 监听小程序初始化
(2) onShow 监听小程序启动或切换前台
(3) onHide 监听小程序切换后台

页面生命周期

(1)onLoad页面加载时触发
(2)onReady页面初次渲染完成时触发
(3)onShow页面显示时触发
(4)onHide页面隐藏时触发
(5)onUnload页面卸载时触发

掌握常见的事件的写法及事件对象

譬如：bindtap、bindsubmit等
事件对象是以事件处理函数的形参形式出现的，常用e表示，特别要注意的是在为表单或表单元素添加事件时，要处理的逻辑中经常用到事件对象e，譬如为form添加了submit事件，在e.detail.value中存放的是提交的数据，要注意此时提交按钮button的form-type属性要设置为submit

bindinput

wxml文件

  1. <input type="text" bindinput="handleInput"/>
  2. <view>
  3.     {{num}}
  4. </view>

js 文件

  1. Page({/**
  2.    * 页面的初始数据
  3.    */
  4.   data:{
  5.     num:123},// 输入框的 input 事件的执行逻辑handleInput(e){// console.log(e.detail.value)this.setData({
  6.       num:e.detail.value
  7.     })}})

在这里插入图片描述

bindtap

计算器为例 ：
wxml 文件

  1. <!--
  2.     绑定点击事件 ：bindtap
  3.     无法在小程序中的事件中直接传参，如 ：handletap(1)
  4.     通过自定义属性的方式来传递参数 如 ： data-operation="{{-1}}"
  5.     事件源中
  6. -->
  8. <button bindtap="handletap" data-operation="{{1}}">+</button>
  9. <button bindtap="handletap" data-operation="{{-1}}">-</button>
  10. <view>
  11.     {{num}}
  12. </view>

js 文件

  1. Page({/**
  2.    * 页面的初始数据
  3.    */
  4.   data:{
  5.     num:0},handletap(e){//获取自定义属性 operation//const声明一个只读的常量。一旦声明，常量的值就不能改变。const operation = e.currentTarget.dataset.operation;this.setData({
  6.       num:this.data.num+operation
  7.     })}})

在这里插入图片描述

bindsubmit

数字比大小案例
wxml 文件

  1. <!-- 比较大小 ：通过表单实现 -->
  2. <form bindsubmit="compare">
  3.   请输入第一个数字 ：
  4.   <input type="text" name="num1"/>
  5.   请输入第二个数字 ：
  6.   <input type="text" name="num2"/>
  7.   <view style="display:flex">
  8.     <button form-type="submit">比较</button>
  9.     <button form-type="reset">重置</button>
  10.   </view>
  11.   <view>比较结果 ：{{result}}</view>
  12. </form>

js 文件

  1. Page({/**
  2.    * 页面的初始数据
  3.    */
  4.   data:{
  5.     result :""},compare(e){// console.log(e)var str =""var num1 =Number(e.detail.value.num1)var num2 =Number(e.detail.value.num2)if(num1>num2){
  6.       str ="第一个数字大"}elseif(num1<num2){
  7.       str ="第二个数字大"}else{
  8.       str ="两个数字相同"}this.setData({result:str})}})

在这里插入图片描述

掌握常用的组件及组件的属性

基础组件

text

在这里插入图片描述

icon

在这里插入图片描述

progress

在这里插入图片描述
在这里插入图片描述

导航组件：

navigator

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

媒体组件：

image

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

audio

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

video

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
其他属性见 ：
https://developers.weixin.qq.com/miniprogram/dev/component/video.html

地图组件：

map

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

画布组件：

canvas

在这里插入图片描述
在这里插入图片描述

轮播图组件：

swiper

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

swiper-item

在这里插入图片描述

与表单有关的组件（特别关注）：

譬如form、input、radio、checkbox、picker、slider、textarea、button、 label等
文档地址 ：
https://developers.weixin.qq.com/miniprogram/dev/component/form.html

数据绑定：{{}}

绑定的是页面js文件中data里定义的属性或变量

基本绑定

xxx.wxml文件

  1. <!--
  2.  1、 text 相当于以前 web 中的 span 标签，行内元素 不会换行
  3.  2、 view 相当于以前 web 中的 div 标签，块元素 会换行
  4. -->
  5. <view>{{msg}}</view>
  6. <view>{{person.name}}</view>
  7. <view>{{person.age}}</view>
  8. <view>{{person.sex}}</view>

xxx.js 文件

  1. Page({/**
  2.    * 页面的初始数据
  3.    */
  4.   data:{
  5.     msg :"hello World",
  6.     person:{
  7.       name:"TOM",
  8.       age:21,
  9.       sex:"男"}}})

在这里插入图片描述

属性绑定

xxx.wxml 文件

  1. <view data-num="{{num}}">自定义属性</view>

xxx.js 文件

  1. Page({/**
  2.    * 页面的初始数据
  3.    */
  4.   data:{
  5.     num :1000}})

效果 ：

在页面上看不到，在控制台可以看到
在这里插入图片描述

条件渲染：wx:if、wx:elif、wx:else

xxx.wxml

  1. <!-- 
  2.   条件渲染
  3.   1、wx:if="{{false/true}}"  为true时显示标签，为false时不显示标签
  4.   2、wx:if="{{false/true}}"
  5.     wx:elif="{{false/true}}"
  6.     wx:else="{{false/true}}"
  7.   3、hidden
  8.     1、在标签上直接加上该属性 hidden，此标签隐藏
  9.     2、hidden="{{false/true}}"
  10.   应用场景
  11.     1、当标签不是频繁的切换显示，优先使用 wx:if
  12.       直接把标签从页面结构中移除掉
  13.     2、当标签频繁的切换显示时，优先使用 hidden
  14.       通过添加样式（display = none）的方式来切换显示
  15.  -->
  16. <view>
  17.   <view>条件渲染</view>
  18.   <view wx:if="{{true}}">显示</view>
  19.   <view wx:if="{{false}}">隐藏</view>
  20.   
  21.   <view hidden>hidden</view>
  22. </view>

注意：使用wx:if和设置组件的hidden属性都能控制元素的隐藏与显示，二者使用时有什么区别？
1、当标签不是频繁的切换显示，优先使用 wx:if 直接把标签从页面结构中移除掉
2、当标签频繁的切换显示时，优先使用 hidden 通过添加样式（display = none）的方式来切换显示
在这里插入图片描述

列表渲染：wx:for、wx:key

将data中定义的数组数据进行遍历并渲染到页面的wxml文件中的组件中
xxx.wxml

  1. <!-- 
  2.   列表循环
  3.   1、wx:for="{{数组或对象}}"  wx:for-item="循环项的名称" wx:for-index="循环项的索引"
  4.   2、wx:key="唯一的值" 用来提高列表渲染的性能
  5.     1、wx:key 绑定一个普通字符串的时候 那么这个字符串的名称 肯定是循环数组中的对象的唯一属性.不写的话会有警告
  6.     2、wx:key="*this" 表示数组是一个普通的数组  *this 代表循环项  [1,2,3,4,5]
  7.     wx:key设置为”*this”的写法适合用于简单类型的数据
  8.   3、当出现 数组嵌套循环的时候 尤其要注意 一下绑定的名称，不要重名
  9.     wx:for-item="循环项的名称" wx:for-index="循环项的索引"
  10.   4、默认情况下，我们不写wx:for-item="item" wx:for-index="index"
  11.     小程序会默认把 循环项的名称和 循环项的索引的值设置为 item 和 index
  12.     只有一层循环的时候，wx:for-item="item" wx:for-index="index"可以省略
  13.  -->
  15. <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
  16.   {{index}}
  17.   --
  18.   {{item.name}}
  19. </view>

xxx.js

  1. Page({/**
  2.    * 页面的初始数据
  3.    */
  4.   data:{
  5.     list:[{
  6.       id:0,
  7.       name :"张三"},{
  8.       id:1,
  9.       name :"李四"},{
  10.       id:2,
  11.       name :"王五"}]}})

在这里插入图片描述

掌握自定义的选项卡与轮播图的联动效果的实现

（参考书上“音乐”小程序案例）
注意：
（1） 选项卡中每个view设置以data-开头的自定义属性，来区分点击的是哪一个选项卡项；
（2） swiper的current属性

考试例题：
小程序项目的的index页面运行后效果如下图所示，补充完整index.wxml和index.js中的代码，完成实现如下功能：
(1)单击页面上面标签上的文字，文字颜色变为黄色，线条变为红的，同时下面的显示相应的颜色块；
(2)在页面颜色块上滑动时，标签上相应文字变为黄色，线条变为红的
wxml文件

  1. <view class="tab">
  2.   <view class="tab-item {{item==0?'active':''}}" bindtap="changeItem" id="0">粉色</view>
  3.   <view class="tab-item {{item==1?'active':''}}" bindtap="changeItem" id="1">绿色</view>
  4.   <view class="tab-item {{item==2?'active':''}}" bindtap="changeItem" id="2">蓝色</view>
  5. </view>
  6. <swiper current="{{item}}"  bindchange="changeTab" circular="true">
  7.   <swiper-item>
  8.     <view style="background:pink;"></view>
  9.   </swiper-item>
  10.   <swiper-item>
  11.     <view style="background:green;"></view>
  12.   </swiper-item>
  13.   <swiper-item>
  14.     <view style="background:blue;"></view>
  15.   </swiper-item>
  16. </swiper>

wxss 文件

  1. .tab{display: flex;background-color: #000;color: #fff;}.tab-item{flex: 1;font-size: 10pt;text-align: center;line-height: 72rpx;border-bottom: 6rpx solid #eee;}.active{color: yellow;border-bottom-color: red;}swiper{height: 400rpx;}swiper view{height: 100%;}

js文件

  1. Page({
  2.   data:{
  3.       item:0},changeItem(e){this.setData({
  4.      item:e.currentTarget.id 
  5.     })},changeTab(e){this.setData({
  6.       item:e.detail.current 
  7.     })}})
标签： 小程序 微信小程序
本文转载自: https://blog.csdn.net/weixin_46047612/article/details/122143948
版权归原作者 念君@质点 所有， 如有侵权，请联系我们删除。
登录后发布评论

“小程序期末复习”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？