微信小程序知识点1

最新推荐文章于 2024-07-10 14:03:37 发布

等一场梦

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量865

点赞数 26

文章标签：前端

本文链接：https://blog.csdn.net/m0_74599628/article/details/139195835

版权

一. 页面样式和结构

1.1 小程序组件(html)

(1) 区域布局组件

view 定义块级区域，相当于网页中的 div 标签
text 定义行内区域，相当于网页中的 span标签

(2) 链接跳转组件

navigator 组件相当于网页中的 a 标签，用来实现页面之间的跳转。

url 属性支持相对和绝对路径，路径为空时会报错
hover-class 属性定义点击态的样式，none 值表示禁用点击效果
open-type 属性定义跳转方式，tabBar 类型的页面时值为 switchTab，默认值为 navigate

注意: 如果跳转的页面是在app.json的tabBar中注册过的, 必须要添加open-type="switchTab"才可以, 否则跳转不起作用

(3) 图片组件

image 组件用来在页面中显示图片相当于网页中的 img （注意单词不同）

image 默认具有宽高尺寸**（320 * 240px）** 占位容器
当占位容器与图片实际尺寸宽高比不一致时，图片无法正常显示
mode 属性控制图片的显示方式
- scaleToFill 图片提伸铺满占位容器
- aspectFit 图片同比例缩放显示，长边完整显示出来（占位容器可能会留白）
- aspectFill 图片同比例缩放显示，短边完整显示出来（图片可能被裁切）
- widthFix 宽度固定, 高度自适应
- heightFix 高度固定, 宽度自适应

(4) 滑动组件(轮播图)

swiper 组件在页面中创建可以滑动的区块，常常用来实现轮播图的交互效果。

组件的结构
- swiper 滑块容器，内部只能嵌套 swiper-item，默认高度为 150px
- swiper-item 滑块单元，内部嵌套任意内容，如 image 组件

<swiper>
  <swiper-item>1</swiper-item>
  <swiper-item>2</swiper-item>
  <swiper-item>3</swiper-item>
</swiper>

组件属性
- indicator-dots 是否显示小圆点
  
  小圆点的颜色可以改变
  
  indicator-color 未选中时的颜色设置
  
  indicator-active-color 选中时的颜色设置
- autoplay 是否自动播放
- interval 自动切换的时间间隔(单位: ms)
- circular 是否衔接滑动

(5) 表单组件

button组件

size 指定按钮的大小
- default 默认大小
- mini 小尺寸
type 颜色样式
- primary 绿色
- default 白色
- warn 红色
plain 按钮是否镂空，背景色透明
用户头像
- button 组件的 open-type 属性设置为 chooseAvatar
- 监听 button 组件的 chooseavatar 事件（没有大写字母）
- 事件回调中通过事件对象 ev.detail.avatarUrl

input输入框组件与网页中 input 标签的作用一致

type属性指定表单的类型
- text 文本输入键盘
- number 数字输入键盘
- idcard 身份证输入键盘
- digit 带小数点的数字输入键盘
- nickname 昵称输入键盘
value 输入框的初始内容
placeholder 属性指定输入框为空时的占位文字
password 是否是密码类型
focus 是否获取焦点

radio-group 和 radio 单选框组件, 相当于网页中的 <input type="radio" />

value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
checked 定义选中的状态, 可用来设置默认选中
disabled 是否禁用
color checkbox 的颜色

checkbox-group 和 check 复选框组件, 相当于网页中的 <input type="checkbox" />

value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
checked 定义选中的状态, 可用来设置默认选中
disabled 是否禁用
color checkbox 的颜色

picker 选择框组件相当于网页中的 select 标签

mode 属性定义选择框的类型
- selector 普通选择器
- multiSelector 所列选择器
- time 时间选择器
- date 日期选择器
- region 省市区选择器

switch 开关选择器

checked 选中状态
type 样式有效值：switch(默认) checkbox

(6) 区域滚动组件

scroll-view 在页面中指定一个可以滚动的区域，并且这个可滚动的区域能够实现一些高级的交互，比如下拉刷新等。

scroll-view 中嵌套任意需要滚动的内容，要求必须有溢出，垂直滚动时 scroll-view 必须要指定高度。

scroll-x 属性是否允许水平方面滚动
scroll-y 属性是否允许垂直方向滚动
refresher-enable 属性是否开启下拉刷新的交互
refresher-triggered 设置下拉刷新状态，true 下拉刷新已经被触发，false 表示下拉刷新未被触发

(7) rich-text

微信小程序中不支持网页的标签结构, 只有用rich-text 转化, 才能是使网页标签起作用

nodes HTML 字符串或数组
user-select 文本是否可选，该属性会使节点显示为 block

1.2 小程序样式(css)

小程序中的样式和网页中的样式基本一致 , 其中, 写在页面的 wxss 中的样式是局部样式 , 只对当前的页面起作用 , 写在app.wxss中的样式为全局样式 , 对所有的页面都起作用

局部样式的优先级 > 全局样式的优先级

注：page 在每个页面中都有，它是由小程序自动添加上的，相当于网页中的 body 标签。

(1) 样式导入

通过导入样式, 可以复用其他页面中的样式

语法: @import '样式文件地址'

(2) 资源使用

小程序中 .wxss 文件中不支持使用本地路径的资源，比如背景图片是不允许使用本地国片路径的，必须使用网络路径（https:// 或 http:// 开头）或者转换成 base64 编码。

(3) 字体图标

小程序中字体图片的使用与网页中基本上是一致的，唯一的区别是小程序的 .wxss 文件中不支持使用本地字体文件，我们使用 iconfont 平台提供的服务生成字体文件后，直接使用其线上的字体文件地址。

@font-face {
  font-family: "iconfont"; /* Project id 3632516 */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATYAAsAAAAACVwAAASMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDIgqFfIUjATYCJAMUCwwABCAFhGcHRxs0CFGU7k2N7Mdg204e4YSRdMLR9eNemN8PCiyrdGcE0VpZPQtPxIpIv8IQqHchGxsFLsrGxhhAx0bc/7WZn5C0kYUVY0mFNZOTCiVD4qRkau43dTv25XLOxDa2INyuQk54Qj83jTax/7Y8D8SS8H/u9+pPS9C6v8Itu+yBfdEPtOgA2YB35nOfim6k2DXM5CkCtZYVUBxV1DUCfc1jB7CUtOUgbI9rs5EHteyQl7SHaqGse2QO8QZUpFeKq8Br9+fjv5RQg6TIQDvP6eNyA5x8P+b9Q3K8m4PsG3tJwNYJBTLMz8wV98sDN5F+YR6pNk9SaRko5frUa8ztxsXcVzBTOWd/LsM/L0rQDPXA7+nz3VKafIJf9xV5xgewyWB8iKKE82mlFnUXxXkCGmHcHZJMLg35UwFUjBflFd1vxEL6xJ9OSP90CjR+KLzpuzGbFThHUktQW+ZlIdsrWv7QI/S8whctg46TLcOWVYTXrKYrK1xsOrytY0NuNKqWpbXYGi9ajMIGr0se0MwjabII6NAkMH6x5AUWJYTNdDSzTAk4/vv/2azv84s17vqzNoNPi6QR56SANi9l7TMve37qijdO4vQth3ab81kSDQaB8UvYqAktbBAFb6/n6YnltktVYnQe8t51ouQN5okt2t28tNJCpcl06pIWPh9i8XZo9iNTz2bOXC/FsWPr4keXGVJbkhoak5tTLjWnOuzJjSktl1KarY1J0TMbSj/siz52bPqA4Wbtm5eNlTHlUVHl0ZXbDSlJA29l9HaSp1AxuJjvFgPu5wzQM/qh9n5U1PSp7DSousf+up18OnRA8gDCL7Fpwo64weSRwr4xu5mm2otUCDWO9tF70+OoYHB8JIjpXxExR31Y/bT6iFpn6p6Gd51DTPsKfOAc4baukuywEr2PvjgsOrRa8/l/6RdCKw6/BcQLZ3A/ImRBUHnQgnJhnbjz6p1qSb1Lvc7USeH7wMZbCx2iD6EphvXewFQwG7xZJoL7J3EMHcKG0EyAW40AumKtmPC2nhmaYP2MOUuc9/ChN0aXxUTWxJ32CGaDqdM72UY+LxeGA1TOk4fJUJH6glxPcvT35AqSDa0ig76uv7H57l9qj2feP3WdEuDnrSsk4pXzSmjvUn2hA8G3ZOysiZgzGRnzvFnTJzCn80iNhFo9TQW0SKvn/ZjaaucI1TGlBEmVPshUG0Xn+Fko1FmFUrVtqDWn/Pg6bZxIkWuASZM4CM12QNLoPWSaXUDn+AdQ6PQBSs3+Q62zoM5WZzKEUhnxGBm4QSM4syA5RMOM3VXrkXGIjZezss1IdpmR5pITkpLlSuRAchf7uIYaUzAWOVGW7FyFeD1ks0mcU5YsSMAJJoydOYmJYt6nJAiSHUrJEB6GGHAGGYFjJpA4iDYyjv++eojREDY8uSa62Sdz8XJanZMsQVINdKXBUWvuTNZ3GcooBYaJ/HYimcSOU8F8iE0vSDjO/M0sEAGWwNQi55QjkZDEuoaE8U32C6z8kRdqZy9CQZCEklARfaB8gnhZMCmRwYxV7kZIsKpcJl5GAA==') format('woff2'),
       url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.woff?t=1672223363723') format('woff'),
       url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.ttf?t=1672223363723') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
  content: "\e67d";
}
.icon-edit:before {
  content: "\e6d8";
}
.icon-check:before {
  content: "\e6d7";
}
.icon-share:before {
  content: "\e6d6";
}

二. 页面布局

一个完整的小程序页面需要包括 4 个类型的文件：

.wxml 定义页面的结构，类似于 .html
.wxss 定义页面的样式，类似于 .css
.js 定义页面的逻辑，监听事件、发起请求等
.json 定义页面的配置，如页面标题等

2.1 js页面的布局

每个js页面都必须要调用 Page 函数来注册页面 , 且要传入对象类型的参数：

data 初始化页面中的数据
- 访问的方式: this.data.数据名
setData 更新数据
- 修改data中的数据: this.setData({ data中的数据名: 值})

Page({
  data: { /*页面的初始数据*/},
 
  //事件函数, 和data平级
  函数名(){},
  
  //生命周期函数
  onLoad(options) { //页面一加载就调用},
  onShow() { // 页面显示就加载 },
  onHide() { // 页面隐藏就加载},
  onUnload() { //页面卸载},

})

2.2 长度单位

小程序将设备页面分为750份,每一份就是1rpx

主要作用: 解决移动适配

iphone 宽度 375px----->750rpx 1px ==== 2rpx

1倍图 ---- 量100px — 200rpx

设计图–2倍图量的100px— 100px/2*2 rpx

结论: 在二倍图上, 量多少px , 取多少rpx 两者比例为 1:1

注：上述的规则仅适用于设计稿宽度为 750px

三. 页面配置

小程序的配置可以配置页面路径、窗口表现、tabBar等，分为全局配置和页面配置，全局配置针对所有页面生效，页面配置只针对当前页生效。

3.1 全局配置 (app.json)

(1) 路径配置

pages 配置页面路径，未配置路径的页面无法被访问到

技巧 : 创建一个页面文件时, 在pages中添加一个配置项, 小程序开发工具自动把文件创建出来,不需要手动创建

//app.json 中
{
   "pages": [
    "pages/index/index",
    "pages/home/home",
    "pages/info/info",
  ],
}

(2) 起始页配置

entryPath 配置小程序默认的启动页面（首页）如果不填，将默认为 pages 列表的第一项

 {
   "entryPagePath": "pages/home/home",
 }

(3) window窗口配置

window 用于设置小程序的状态栏、导航条、标题、窗口背景色。

 "window": {
    "enablePullDownRefresh": true,
     
    //窗口配置
    "backgroundColor": "#eee",
    "backgroundTextStyle": "dark",
     
    //导航栏的配置  
    "navigationBarBackgroundColor": "#FFA500", 
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的小程序",
    "navigationStyle": "default"
  },

窗口的配置

backgroundColor 窗口的背景色

导航栏的配置

navigationBarBackgroundColor 导航栏背景颜色 (颜色是十六进制)
navigationBarTextStyle 导航栏标题颜色，仅支持 black / white
navigationBarTitleText 导航栏标题文字内容
navigationStyle 导航栏样式，仅支持以下值: default 默认样式 custom 自定义导航栏

下拉刷新的配置

backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh 是否开启全局的下拉刷新。

(4) tabBar 配置

tabBar 底部 Tab 栏（tabBar 中的页面必须配置在 pages 中）

 "tabBar": {
    "color": "#999",
    "selectedColor": "#5792AF",
    "backgroundColor": "#e0e0e0",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "/assets/icon/home.png",
        "selectedIconPath": "/assets/icon/home-active.png"
      },
    ]
  },

color 文字颜色，仅支持十六进制颜色
selectedColor 文字选中时的颜色，仅支持十六进制颜色
backgroundColor tab 的背景色，仅支持十六进制颜色
borderStyle tabbar上边框的颜色 , 仅支持 black / white
list tabBar 页面跳转的路径和图标配置
pagePath 跳转的页面路径
text tabBar 上按钮文字
iconPath 图片路径 icon 大小限制为 40kb，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath 选中时的图片路径
position tabBar 的位置，仅支持 bottom / top

3.2 页面配置

页面配置大部分与全局配置中的 window 是重叠的，页面配置的优先级大于全局配置的。

disableScroll 只能用在在页面配置中，禁用页面滚动
usingComponents 后续学到自定义组件时再介绍

四. 模板语法

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

4.1 数据绑定

插值 {{}}

小程序中无论是属性的绑定还是内容的绑定都必须要使用 {{}}。

--1. 属性绑定
<switch checked="{{false}}" />
--2. 类名绑定
<view class="{{isActive ? 'active' : ''}}" >首页</view>
--3. 内容绑定
<text>{{ msg }}</text>

简易数据绑定

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

4.2 条件渲染

控制属性：相当于 Vue 中指令的概念，在小程序中做控制属性
- wx:if 根据表达式的值渲染内容，值为真时显示
- wx:elif 条件语句
- wx:else 用在 wx:if 的后面，不可单独使用，wx:if 表达式值为假时显示
```

<view wx:if="{{result===1}}">剪刀</view>
<view wx:elif="{{result===2}}">石头</view>
<view wx:else>布</view>
```
组件属性：相当于vue 中的 v-show
- hidden 根据表达式的值渲染内容，值为真时隐藏
- 通过 [hidden] { display: none; } 来实现内容的隐藏
```

<view hidden="{{result===2}}">测试hidden</view>

```

4.3 循环渲染

wx:for 根据数组重复渲染组件内容
- index 默认值，访问数组的索引值
- item 默认值，访问数组的单元值
wx:key 列表项的唯一标识符（不使用 {{}}）
- 数组单元是对象时，只需要写属性名
- 数组单元是简单类型时，推荐使用 *this
wx:for-index 自定义访问数组索引的变量名
wx:for-item 自定义访问数组单元的变量名

<!-- 列表渲染 循环 对象-->
<!-- wx:for="{{数据}}"  默认的 item 项 index 索引 -->
<!-- 如果item index 和其他名称冲突, 
     可以用 wx:for-item 和 wx:for-index 
     对默认的item index的名称进行修改 -->
<!-- wx:key 直接就填 字段名就可以了 -->
<view wx:for="{{students}}" wx:key="id">
 索引:{{index}}  姓名: {{item.name}}---年龄:{{item.age}}
</view>
<!-- 数组 -->
<!-- 简单数据, wx:key 想要用自身的数据来显示 用 *this -->
<view wx:for="{{history}}" wx:key="*this">
 {{item}}
</view>

五. 事件处理

5.1 事件绑定

bind:事件类型=事件回调 / bind事件类型=事件回调

<!-- 按钮的点击事件的监听 
 bind(绑定,监听) tap(事件类型)  tap 轻击
 bing:tap / bingtap 
-->
<button type="primary" bindtap="onBtn" data-info="⭐"
 >click me</button>

小程序中使用 bind 进行事件的绑定 , 且在绑定的事件函数中, 是不可以传参的 , 所有只能使用其他的方式传参

事件传参

<!-- 小程序中的事件传参
 传参: data-*(自定义参数名)
       mark: * 
-->
<button bindtap="onBtn"  data-id="{{index}}" mark:f2="f2">事件传参</button>

data- 自定义参数名=“值”
mark : 自定义参数名=“值”

参数接收

小程序里面的参数是用事件对象完成接收的

data - * 传递的参数是在 e.target.dataset中

mark: * 传递的参数是在 e.mark 中

page({
  onBtn(e){
    // 参数接收 e.target.dataset.info
    console.log(e);
  },
})

5.2 常用的通用事件

bindtap 点击事件
bindlongpress 长按事件
bindinput 键盘输入事件
bindconfirm 回车事件
bindfocus 输入框聚焦事件
bindblur 输入框失焦事件
bindchange value 改变事件
bindsubmit 表单提交事件
bindreset 重置表单事件

5.3 组件事件

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

scroll-view 组件中的事件：

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

表单组件中的事件：

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

六. 生命周期

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

6.1 页面生命周期

onLoad 在页面加载时触发，一个页面只会执行 1 次，常用于获取地址参数和网络请求
- 参数 options 接收的是传递到当前页面路径中的参数
onShow 页面显示/切入前台时触发，常用于动态更新数据或状态
onReady 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景
onHide 在页面隐藏/切入后台时触发，常用于销毁长时间运行的任务，如定时器
onUnload 页面卸载时触发

6.2 组件生命周期

小程序自定义组件的生命周期需要定义在 lifetimes 中：

Component({
  //组件生命周期
  lifetimes: {}
})

created 在组件初步创建时执行，注意此时不能调用 setData
attached 在组件完成页面初始化的时候执行
ready 在组件布局完成后执行
detached 在组件被销毁的时候触发

6.3 小程序生命周期

小程序的生命周期定义在app.js里面

App({
  /*当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/
  onLaunch: function () {
    console.log('小程序启动了')
  },
  /* 当小程序启动，或从后台进入前台显示，会触发 onShow*/
  onShow: function (options) {
    console.log('小程序显示了',options)
  },
  /*当小程序从前台进入后台，会触发 onHide */
  onHide: function () {
    console.log('小程序隐藏了')
  },
  /* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/
  onError: function (msg) {}
})