小程序期末复习

Posted 2022-01-13 念君@质点

文章目录

• 微信小程序基础知识
• • 小程序的特点
  • 微信小程序的基本结构
  • 全局app.json和页面json的常见设置及全局配置和页面配置时的优先级
  • 掌握在app.json中设置tabBar页面的使用
• 常见生命周期函数的执行时机
• • 应用生命周期 ：
  • 页面生命周期
• 掌握常见的事件的写法及事件对象
• • bindinput
  • bindtap
  • bindsubmit
• 掌握常用的组件及组件的属性
• • 基础组件
  • • text
    • icon
    • progress
  • 导航组件：
  • • navigator
  • 媒体组件：
  • • image
    • audio
    • video
  • 地图组件：
  • • map
  • 画布组件：
  • • canvas
  • 轮播图组件：
  • • swiper
    • swiper-item
  • 与表单有关的组件（特别关注）：
• 数据绑定：
• • 基本绑定
  • 属性绑定
  • 条件渲染：wx:if、wx:elif、wx:else
  • 列表渲染：wx:for、wx:key
• 掌握自定义的选项卡与轮播图的联动效果的实现

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

微信小程序基础知识

小程序的特点

(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页面的使用

"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文件

<input type="text" bindinput="handleInput"/>
<view>
    num
</view>

js 文件

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

bindtap

计算器为例 ：
wxml 文件

<!--
    绑定点击事件 ：bindtap
    无法在小程序中的事件中直接传参，如 ：handletap(1)
    通过自定义属性的方式来传递参数 如 ： data-operation="-1"
    事件源中
-->

<button bindtap="handletap" data-operation="1">+</button>
<button bindtap="handletap" data-operation="-1">-</button>
<view>
    num
</view>

js 文件

Page(

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

bindsubmit

数字比大小案例
wxml 文件

<!-- 比较大小 ：通过表单实现 -->
<form bindsubmit="compare">
  请输入第一个数字 ：
  <input type="text" name="num1"/>
  请输入第二个数字 ：
  <input type="text" name="num2"/>
  <view style="display:flex">
    <button form-type="submit">比较</button>
    <button form-type="reset">重置</button>
  </view>
  <view>比较结果 ：result</view>
</form>

js 文件

Page(
  /**
   * 页面的初始数据
   */
  data: 
    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)
      str = "第一个数字大"
    else if (num1<num2)
      str = "第二个数字大"
    else
      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、 text 相当于以前 web 中的 span 标签，行内元素 不会换行
 2、 view 相当于以前 web 中的 div 标签，块元素 会换行
-->
<view>msg</view>
<view>person.name</view>
<view>person.age</view>
<view>person.sex</view>

xxx.js 文件

Page(
  /**
   * 页面的初始数据
   */
  data: 
    msg : "hello World",
    person:
      name:"TOM",
      age:21,
      sex:"男"
    
  
)

属性绑定

xxx.wxml 文件

<view data-num="num">自定义属性</view>

xxx.js 文件

Page(
  /**
   * 页面的初始数据
   */
  data: 
    num : 1000
  
)

效果 ：

在页面上看不到，在控制台可以看到

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

xxx.wxml

<!-- 
  条件渲染
  1、wx:if="false/true"  为true时显示标签，为false时不显示标签
  2、wx:if="false/true"
    wx:elif="false/true"
    wx:else="false/true"
  3、hidden
    1、在标签上直接加上该属性 hidden，此标签隐藏
    2、hidden="false/true"
  应用场景
    1、当标签不是频繁的切换显示，优先使用 wx:if
      直接把标签从页面结构中移除掉
    2、当标签频繁的切换显示时，优先使用 hidden
      通过添加样式（display = none）的方式来切换显示
 -->
<view>
  <view>条件渲染</view>
  <view wx:if="true">显示</view>
  <view wx:if="false">隐藏</view>
  
  <view hidden>hidden</view>
</view>

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

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

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

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

<view wx:for="list" wx:for-item="item" wx:for-index="index">
  index
  --
  item.name
</view>

xxx.js

Page(
  /**
   * 页面的初始数据
   */
  data: 
    list:[
      id:0,
      name : "张三"
    ,
      id:1,
      name : "李四"
    ,
      id:2,
      name : "王五"
    ]
  
)

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

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

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

<view class="tab">
  <view class="tab-item item==0?'active':''" bindtap="changeItem" id="0">粉色</view>
  <view class="tab-item item==1?'active':''" bindtap="changeItem" id="1">绿色</view>
  <view class="tab-item item==2?'active':''" bindtap="changeItem" id="2">蓝色</view>
</view>
<swiper current="item"  bindchange="changeTab" circular="true">
  <swiper-item>
    <view style="background:pink;"></view>
  </swiper-item>
  <swiper-item>
    <view style="background:green;"></view>
  </swiper-item>
  <swiper-item>
    <view style="background:blue;"></view>
  </swiper-item>
</swiper>

wxss 文件

.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文件

Page(
  data:
      item:0
  ,
  changeItem(e)
    this.setData(
     item:e.currentTarget.id 
    )
  ,
  changeTab(e)
    this.setData(
      item:e.detail.current 
    )
  
)