1122 lines
34 KiB
Markdown
1122 lines
34 KiB
Markdown
---
|
||
title: 微信小程序
|
||
date: 2022-02-28 00:16:12.356
|
||
updated: 2022-09-05 20:04:43.201
|
||
url: https://hhdxw.top/archives/73
|
||
categories:
|
||
tags:
|
||
- 小程序
|
||
---
|
||
|
||
基本内容
|
||
|
||
#### 1. 视图组件
|
||
|
||
```
|
||
view
|
||
类似于html中div，是一个块级元素
|
||
常用于用于实现页面的布局效果
|
||
```
|
||
|
||
```
|
||
scroll-view
|
||
可滚动视图区域
|
||
常用于实现滚动列表效果
|
||
```
|
||
|
||
```
|
||
swiper swiper-item
|
||
轮播图容器组件和轮播图item组件
|
||
```
|
||
|
||
###### 基本使用
|
||
|
||
swiper属性
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
| :--------------------: | :-----: | :-------------: | :----------------: |
|
||
| indicator-dots | boolean | false | 是否显示面板指示灯 |
|
||
| indicator-color | color | rgba(0,0,0,0.3) | 指示点颜色 |
|
||
| indicator-active-color | color | #000000 | 当前选中指示点颜色 |
|
||
| autoplay | boolean | false | 是否自动切换 |
|
||
| interval | number | 5000 | 自动切换时间间隔 |
|
||
| circular | boolean | false | 是否采用衔接滑动 |
|
||
|
||
|
||
|
||
#### 2. 基础内容
|
||
|
||
```
|
||
text
|
||
文本组件
|
||
类似于HTML中的span标签，是一个行内元素
|
||
|
||
属性：user-select="true"实现长按选中文本
|
||
```
|
||
|
||
```
|
||
rich-text
|
||
富文本组件
|
||
支持把HTML字符串渲染为WXML结构
|
||
|
||
组件node：<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
|
||
```
|
||
|
||
其他组件：
|
||
|
||
```
|
||
button
|
||
按钮组件
|
||
功能比HTNL多
|
||
通过open-type属性可以调用微信提供给的各种功能（客服，转发，获取用户信息，获取用户授权）
|
||
```
|
||
|
||
```
|
||
image
|
||
照片组件
|
||
默认宽300px 高240px
|
||
```
|
||
|
||
| mode | 说明 |
|
||
| :---------: | :----------------------------------------------------------: |
|
||
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
|
||
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
|
||
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
|
||
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
|
||
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
|
||
|
||
```
|
||
navigator
|
||
页面导航组件
|
||
类似于HTML中的a链接
|
||
```
|
||
|
||
|
||
|
||
#### 3. 表单组件
|
||
|
||
#### 4. 导航组件
|
||
|
||
### 小程序宿主环境——API
|
||
|
||
#### 1.事件监听API
|
||
|
||
特点：以 on 开头，用来监听某些事件的触发
|
||
|
||
举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
|
||
|
||
#### 2.同步 APl
|
||
|
||
特点1：以 Sync 结尾的 API都是同步 API
|
||
|
||
特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
|
||
|
||
举例： wx.setStorageSync ('key','value'）向本地存储中写入内容
|
||
|
||
#### 3.异步API
|
||
|
||
特点：类似于 jQuery 中的$.ajax (options）函数，需要通过 success、fail、complete 接收调用的结果
|
||
|
||
举例： wx.request (）发起网络数据请求，通过success回调函数接收数据
|
||
|
||
### 协同工作和发布—协同工作
|
||
|
||
#### 1.了解不同权限管理需求
|
||
|
||
对不同员工权限进行边界划分
|
||
|
||
#### 2.项目成员组成结构
|
||
|
||
https://www.zhixi.com/view/3be5222c
|
||
|
||
|
||
|
||
#### 3.小程序开发流程
|
||
|
||
|
||
|
||
|
||
|
||
### 协同工作和发布—小程序的版本
|
||
|
||
### 协同工作和发布—发布上线
|
||
|
||
WXML模板语法—数据绑定
|
||
|
||
#### 1.数据绑定的基本原则
|
||
|
||
- 在data中定义数据
|
||
|
||
- 在WXML中使用数据
|
||
|
||
#### 2.在data中定义页面数据
|
||
|
||
再页面对应的 .js 文件中，把数据定义到data对象中即可：
|
||
|
||
#### 3.Mustache 语法的格式
|
||
|
||
把data数据绑定到页面中渲染，使用 Mustache 语法（双大括号 {{变量}} ）将变包起来即可：
|
||
|
||
```
|
||
js文件
|
||
data: {
|
||
info: 'hello world',
|
||
}
|
||
|
||
wxml文件
|
||
<view>{{info}}</view>
|
||
```
|
||
|
||
#### 4.Mustache 语法的应用场景
|
||
|
||
- 绑定内容
|
||
- 绑定属性
|
||
- 运算（三元运算、算术运算等）
|
||
|
||
#### 5.动态绑定内容
|
||
|
||
```
|
||
页面数据
|
||
Page({
|
||
data: {
|
||
info: 'hello world',
|
||
}
|
||
})
|
||
|
||
页面结构
|
||
<view>{{info}}</view>
|
||
```
|
||
|
||
#### 6.动态绑定属性
|
||
|
||
```
|
||
页面数据
|
||
Page({
|
||
data: {
|
||
imgSrc: 'https://tenfei02.cfp.cn/creative/vcg/800/new/VCG41N1210205351.jpg',
|
||
}
|
||
})
|
||
|
||
页面结构
|
||
<image src="{{imgSrc}}" mode="widthFix"></image>
|
||
```
|
||
|
||
#### 7.三元运算
|
||
|
||
```
|
||
页面数据
|
||
Page({
|
||
data: {
|
||
randomNume1:Math.random() * 10
|
||
}
|
||
})
|
||
|
||
页面结构
|
||
<view>{{randomNume1 >=5 ? '数字大于五或等于五' : '数字小于五'}}</view>
|
||
```
|
||
|
||
#### 8.算数运算
|
||
|
||
```
|
||
页面数据
|
||
Page({
|
||
data: {
|
||
// 随机生成两位小数
|
||
randomNume2:Math.random().toFixed(2)
|
||
}
|
||
})
|
||
|
||
页面结构
|
||
<view>{{randomNume2 * 100}}</view>
|
||
```
|
||
|
||
### WXML模板语法—事件绑定
|
||
|
||
#### 1.什么是事件
|
||
|
||
事件是渲染层到逻辑层的通讯方式。
|
||
|
||
#### 2.小程序中常用事件
|
||
|
||
| 类型 | 绑定方式 | 事件描述 |
|
||
| :----: | :-----------------------: | :-----------------------------------------: |
|
||
| tap | bindtap 或 bind:tap | 手指触摸后马上离开，类似于HTML中的click事件 |
|
||
| input | bindinput 或 bind:input | 文本框的输入事件 |
|
||
| change | bindchange 或 bind:change | 状态改变时触发 |
|
||
|
||
#### 3.事件对象的属性列表
|
||
|
||
当时间回调触发的时候，会收到一个事件对象event，它的详细属性如下便：
|
||
|
||
| 属性 | 类型 | 说明 |
|
||
| :------------: | :-----: | :----------------------------------------: |
|
||
| type | String | 事件类型 |
|
||
| timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
|
||
| （）target | Object | 触发事件的组件的一些属性值集合 |
|
||
| currentTarget | Object | 当前组件的一些属性值集合 |
|
||
| （）detail | Object | 额外的信息 |
|
||
| touches | Array | 触摸事件，当前停留在屏幕的触摸点信息的数组 |
|
||
| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 |
|
||
|
||
#### 4.target 和 currentTarget 的区别
|
||
|
||
target时触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例如下：
|
||
|
||
|
||
|
||
点击内部的按钮时，点击时间以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。
|
||
|
||
此时，对于外层的view来说：
|
||
|
||
- e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
|
||
|
||
- e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的view组件
|
||
|
||
#### 5.bindtap的语法格式
|
||
|
||
在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
|
||
|
||
1.通过 bindtap ，可以为组件绑定 tap 触摸事件，语法如下：
|
||
|
||
```
|
||
<button type="primary" bindtap="btnTapHandler">按钮</button>
|
||
```
|
||
|
||
2.在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event （一般简写成 e ）来接受：
|
||
|
||
```
|
||
Page({
|
||
btnTapHandler(e){
|
||
console.log(e)
|
||
},
|
||
})
|
||
```
|
||
|
||
#### 6.在事件处理函数中为data中的数据赋值
|
||
|
||
通过调用 this.setData( dataObject )方法，可以给页面 data 中的数据重新赋值，示例如下：
|
||
|
||
```
|
||
//页面 .js文件
|
||
Page({
|
||
data:{
|
||
count:0
|
||
},
|
||
//修改 count 的值
|
||
changeCount(){
|
||
this.setData({
|
||
count: this.data.count + 1
|
||
})
|
||
}
|
||
})
|
||
```
|
||
|
||
#### 7.事件传参
|
||
|
||
#### 8.bindinput的语法格式
|
||
|
||
在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：
|
||
|
||
1.通过 bindinput ，可以为文本框绑定输入事件：
|
||
|
||
```
|
||
<input bindinput="inputHander" />
|
||
```
|
||
|
||
2.在页面的 .js 文件中定义事件处理函数：
|
||
|
||
```
|
||
inputHander(e){
|
||
// e.detail.value 是变化后，文本框的最新值
|
||
console.log(e.detail.value)
|
||
})
|
||
},
|
||
```
|
||
|
||
#### 9.实现文本框和data之间的数据同步
|
||
|
||
渲染结构：
|
||
|
||
```
|
||
<input value="{{msg}}" bindinput="inputHanderler" />
|
||
```
|
||
|
||
定义数据：
|
||
|
||
```
|
||
Page({
|
||
data:{
|
||
msg:'你好，'
|
||
}
|
||
})
|
||
```
|
||
|
||
绑定 input 事件处理函数：
|
||
|
||
```
|
||
inputHander(e){
|
||
|
||
this.setData({
|
||
//通过 e.detail.value 获取到文本框最新的值
|
||
msg: e.detail.value
|
||
})
|
||
},
|
||
```
|
||
|
||
### WXML模板语法—条件渲染
|
||
|
||
#### 1.wx:if
|
||
|
||
在小程序中，使用wx:if="{{condition(条件)}}"来判断是否需要渲染该代码块：
|
||
|
||
```
|
||
<view wx:if="{{condition}}">Ture</view>
|
||
```
|
||
|
||
也可以用wx:elif和wx:else来添加else判断：
|
||
|
||
```
|
||
<view wx:if="{{ type=== 1}}">男</view>
|
||
<view wx:elif="{{ type=== 2}}">女</view>
|
||
<view wx:else>保密</view>
|
||
```
|
||
|
||
#### 2.结合<block>使用wx:if
|
||
|
||
如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包裹起来，并在<block>标签上使用wx:if控制属性，示例如下：
|
||
|
||
```
|
||
<block wx:if="{{true}}">
|
||
<view> view1 </view>
|
||
<view> view2 </view>
|
||
</block>
|
||
```
|
||
|
||
注意：<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
|
||
|
||
#### 3.hidden
|
||
|
||
在小程序中，直接使用hidde="{{ condition }}"也能控制元素的显示与隐藏
|
||
|
||
```html
|
||
<view hidden="{{ condition }}">条件为true时隐藏元素，否则显示</view>
|
||
```
|
||
|
||
#### 4.wx:if与hidden的对比
|
||
|
||
1.运行方式不同
|
||
|
||
- wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
|
||
- hidden 以切换样式的方式（ display: none/block; ），控制元素的显示与隐藏
|
||
|
||
2.使用建议
|
||
|
||
- 频繁切换时，建议使用hidden
|
||
- 控制条件复杂时，加你一使用 wx:if 搭配 wx:elif 、wx:else 进行展示与隐藏的切换
|
||
|
||
### WXML模板语法—列表渲染
|
||
|
||
#### 1.wx:for
|
||
|
||
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
|
||
|
||
```
|
||
<view wx:for="{{arr1}}">
|
||
索引时{{index}},item项时：{{item}}
|
||
</view>
|
||
```
|
||
|
||
默认情况下，当前循环项的索引用index表示；当前循环项item表示。
|
||
|
||
#### 2.手动置顶索引和当前项变量名*
|
||
|
||
- 使用 wx:for-index 可以指定当前循环项的索引的变量名
|
||
- 使用 wx:for-item 可以指定当前项的变量名
|
||
|
||
示例代码如下：
|
||
|
||
```
|
||
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
|
||
索引时{{idx}},item项时：{{itemName}}
|
||
</view>
|
||
```
|
||
|
||
#### 3.wx:key 的使用
|
||
|
||
类似于Vue列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表指定唯一的 key 值，
|
||
|
||
从而提高渲染效率，示例代码如下：
|
||
|
||
```
|
||
// data 数据
|
||
data: {
|
||
userList:[
|
||
{ id: 1,name: '小红' },
|
||
{ id: 2,name: '小黄' },
|
||
{ id: 3,name: '小白' },
|
||
]
|
||
},
|
||
|
||
// wxml 结构
|
||
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
|
||
```
|
||
|
||
## wxss 模板样式
|
||
|
||
#### 1.什么是wxss
|
||
|
||
WXSS（ WeiXin Style Sheets ）是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的CSS。
|
||
|
||
#### 2.WXSS 和 CSS的关系
|
||
|
||
WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。与CSS相比，WXSS 扩展的特性有：
|
||
|
||
- rpx 尺寸单位
|
||
|
||
- @import 样式导入
|
||
|
||
|
||
|
||
### WXSS 模板样式—rpx
|
||
|
||
#### 1.什么是 rpx 尺寸单位
|
||
|
||
rpx（ responsive pixel ）是微信小程序独有的，用来解决屏幕适配的尺寸单位。
|
||
|
||
#### 2.rpx 的实现原理
|
||
|
||
rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配， rpx 把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx)。
|
||
|
||
- 在较小的设备上，1rpx所代表的宽度较小
|
||
- 在较大的设备上，1rpx所代表的宽度较大
|
||
|
||
小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
|
||
|
||
#### 3.rpx 与 px 之间的单位换算
|
||
|
||
在iphone6上，屏幕宽度为 375px，共有750个物理像素，等分为750px。则：
|
||
|
||
750rpx = 375px = 750物理像素
|
||
|
||
1rpx = 0.5px = 1物理像素
|
||
|
||
| 设备 | rpx换算px（屏幕宽度/750） | px换算rpx（750/屏幕宽度） |
|
||
| :----------: | :-----------------------: | :-----------------------: |
|
||
| iphone5 | 1 rpx = 0.42 px | 1 px = 2.34 rpx |
|
||
| iphone6 | 1 rpx = 0.5 px | 1 px = 2 rpx |
|
||
| iphone6 Plus | 1 rpx = 0.552 px | 1 px = 1.81 rpx |
|
||
|
||
官方建议：开发微信小程序时，设计师可以用 iphone6 作为视觉稿的标准
|
||
|
||
开发举例：在 iphone6 上如果要绘制宽 100px ，高 20px 的盒子 ，换算成rpx单位，宽高分别为 200 rpx 和 40 rpx。
|
||
|
||
### WXSS 模板样式—样式导入
|
||
|
||
#### 1.什么是样式导入
|
||
|
||
使用 WXSS 提供的 @import 语法，可以导入外联的样式表。
|
||
|
||
#### 2.@import的语法格式
|
||
|
||
@import 后跟需要导入的外联样式表的相对路径，用 ；表示语句结束。示例如下：
|
||
|
||
```
|
||
/* common.wxss */
|
||
.username{
|
||
color: red;
|
||
}
|
||
```
|
||
|
||
```
|
||
/* index.wxss */
|
||
@import"/common/common.wxss";
|
||
```
|
||
|
||
### WXSS 模板样式—全局样式和局部样式
|
||
|
||
#### 1.全局样式
|
||
|
||
定义在 app.wxss 中的样式为全局样式，作用与每一个页面。
|
||
|
||
#### 2.局部样式
|
||
|
||
再页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
|
||
|
||
注意：
|
||
|
||
1.当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
|
||
|
||
2.当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
|
||
|
||
### 全局配置
|
||
|
||
#### 1.全局配置文件及常用的配置项
|
||
|
||
小程序根目录下的 app.json 文件时小程序的全局配置文件。常用的配置项如下：
|
||
|
||
1.pages
|
||
|
||
- 记录当前小程序所有页面的存放路径
|
||
|
||
2.window
|
||
|
||
- 全局设置小程序窗口的外观
|
||
|
||
3.tabBar
|
||
|
||
- 设置小程序底部的tabBar效果
|
||
|
||
4.style
|
||
|
||
- 是否用新版的组件样式
|
||
|
||
### 全局配置—window
|
||
|
||
#### 1.小程序窗口的组成部分
|
||
|
||
|
||
|
||
#### 2.了解window节点常用的配置项
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| :--------------------------: | :------: | :-----: | :---------------------------------------------: |
|
||
| navgationBarTitleTest | String | 字符串 | 导航栏标题文字内容 |
|
||
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景色，如#000000 |
|
||
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black / white |
|
||
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
|
||
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅 dark /light |
|
||
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
|
||
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为 px |
|
||
|
||
（navgationBar开头）navgationBarTitleTest、navigationBarBackgroundColor、navigationBarTextStyle 导航栏相关样式效果
|
||
|
||
（background 开头）backgroundColor、background 窗口背景
|
||
|
||
enablePullDownRefresh、onReachBottomDistance 页面效果
|
||
|
||
#### 3.设置导航栏标题
|
||
|
||
设置步骤：app.json -> window -> navgationBarTitleTest
|
||
|
||
需求：把导航栏上的标题，从默认的 “Wechat” 修改为 “黑马程序员”
|
||
|
||
#### 4.设置导航栏的背景色
|
||
|
||
设置步骤：app.json -> window -> navigationBarBackgroundColor
|
||
|
||
需求：把导航栏标题的背景色，从默认的#fff修改为#2b4b6b ，不支持文本颜色，只支持#16进制。
|
||
|
||
#### 5.设置导航栏标题颜色
|
||
|
||
设置步骤：app.json -> window -> navigationBarTextStyle
|
||
|
||
需求：把导航栏上的标题，从默认的black修改为white（只有black和white）
|
||
|
||
#### 6.全局开启下拉刷新功能
|
||
|
||
概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下来滑动操作，从而重新加载页面数据的行为。
|
||
|
||
设置步骤：app.json -> window -> 把enablePullDownRefresh的值设置为 true。
|
||
|
||
注意：会作用于每一个小程序页面。
|
||
|
||
#### 7.设置下拉刷新时窗口的背景色
|
||
|
||
当全局开启下拉刷新功能之后，默认窗口背景为白色。如果自定义下来刷新窗口背景色，设置步骤为：
|
||
|
||
app.json -> window -> 为 backgroundColor 设置背景色值#efefef。
|
||
|
||
#### 8.设置下拉刷新时 loading 的样式
|
||
|
||
当开启下拉刷新功能之后，默认窗口 loading样式为白色，如果要更改 loading 样式效果，设置步骤为：
|
||
|
||
app.json -> window -> 为 backgroundTextStyle 指定 dark 值。（只有 dark 和 light ）
|
||
|
||
#### 9.设置上拉触底的距离
|
||
|
||
概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
|
||
|
||
操作步骤：app.json -> window -> onReachBottomDistance 设置新的数值
|
||
|
||
注意默认距离为50px，如果没有特殊需求，建议使用默认值即可。
|
||
|
||
### 全局配置—tabBar
|
||
|
||
#### 1.什么是tabBar
|
||
|
||
tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
|
||
|
||
- 底部 tabBar
|
||
- 顶部 tabBar
|
||
|
||
注意：
|
||
|
||
- tabBar中只能配置最少2个、最多5个tab页签
|
||
- 当渲染顶部tabBar时，不显示icon，只显示文本
|
||
|
||
#### 2.tabBar 的6个组成部分
|
||
|
||
1. backgroundColor：tabBar 的背景颜色
|
||
2. selectedlconPath：选中时的照片路径
|
||
3. borderStyle：tabBar上边框的颜色
|
||
4. iconPath：未选中时的照片路径
|
||
5. selectedColor：tab上的文字选中时的颜色
|
||
6. color：tab上文字的默认（未选中）颜色
|
||
|
||
|
||
|
||
#### 3.tabBar 节点的配置项
|
||
|
||
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|
||
| :-------------: | :------: | :--: | :----: | :---------------------------------------: |
|
||
| position | String | 否 | bottom | tabBar 的位置，仅支持 bottom / top |
|
||
| borderStyle | String | 否 | black | tabBar 上边框的颜色，仅支持 black / white |
|
||
| color | HexColor | 否 | | tab 上文字的默认（未选中）颜色 |
|
||
| selectedColor | HexColor | 否 | | tab 上的文字选中时的颜色 |
|
||
| backgroundColor | HexColor | 否 | | tabBar 的背景色 |
|
||
| list | Array | 是 | | tab 页签的列表，最少两个，最多五个tab |
|
||
|
||
#### 4.每个 tab 项的配置选项
|
||
|
||
| 属性 | 类型 | 必填 | 描述 |
|
||
| :--------------: | :----: | :--: | :---------------------------------------------------: |
|
||
| pagePath | String | 是 | 页面路径，页面必须在 pages 中预先定义 |
|
||
| text | String | 是 | tab 上显示的文字 |
|
||
| ionPath | String | 否 | 未选中时的图标路径；当 postion 为 top 时，不显示 icon |
|
||
| selectedlconPath | String | 否 | 选中时的图标路径；当 postion 为 top 时，不显示 icon |
|
||
|
||
### 全局配置—案例：配置 tabBar
|
||
|
||
#### 1.需求描述
|
||
|
||
根据资料中提供的小图标、在小程序中配置如图所示的tabBari效果：
|
||
|
||
|
||
|
||
#### 2.实现步骤
|
||
|
||
1.拷贝图标资源
|
||
|
||
2.新建三个对应的 tab 页面
|
||
|
||
3.配置 tabBar 选项
|
||
|
||
#### 3.步骤1—拷贝图标资源
|
||
|
||
1.把资料目录中的images文件夹，拷贝到小程序项目根目录中
|
||
|
||
2.将需要用到的小图标分为3组，每组两个，其中：
|
||
|
||
- 图片名称中包含-active的是选中之后的图标
|
||
- 图片名称中不包含-active的是默认图标
|
||
|
||
截图如下：
|
||
|
||
|
||
|
||
#### 3.步骤2—新建3个对应的tab页面
|
||
|
||
通过 app.json 文件的 pages 节点，快速新建3个对应的 tab 页面，示例代码如下：
|
||
|
||
```
|
||
{
|
||
"pages":[
|
||
"pages/home/home",
|
||
"pages/message/message",
|
||
"pages/contact/contact"
|
||
]
|
||
}
|
||
```
|
||
|
||
其中， home 是首页， message 是消息页面， contact 是联系我们页面。
|
||
|
||
#### 3.步骤3-配置tabBar选项
|
||
|
||
1.打开app.json配置文件，和pages、window平级，新增tabBar节点
|
||
|
||
2.tabBar节点中，新增list数组，这个数组中存放的，是每个tab项的配置对象
|
||
|
||
3.在list数组中，新增每一个tab项的配置对象。对象中包含的属性如下：
|
||
|
||
- pagePath指定当前tab对应的页面路径【必填】
|
||
- text 指定当前tab上按钮的文字【必填】
|
||
- iconPath指定当前tab未选中时候的图片路径【可选】
|
||
- selectedlconPath 指定当前tab被选中后高亮的图片路径【可选】
|
||
|
||
### 页面配置
|
||
|
||
#### 1.页面配置文件的作用
|
||
|
||
小程序中，每个页面都有自己的json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
|
||
|
||
#### 2.页面配置和全局配置的关系
|
||
|
||
小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
|
||
|
||
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求。
|
||
|
||
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
|
||
|
||
#### 3.页面配置中常用的配置项
|
||
|
||
| 属性 | 类型 | 默认值 | 描述 |
|
||
| :--------------------------: | :------: | :------: | :--------------------------------------------: |
|
||
| navigationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色，如#000000 |
|
||
| navigationBarTextStyle | String | white | 当前页面导航栏标题颜色，仅支持black /white |
|
||
| navigationBarTitleText | String | | 当前页面导航栏标题文字内容 |
|
||
| backgroundColor | HexColor | \#ffffff | 当前页面窗口的背景色 |
|
||
| backgroundTextStyle | String | dark | 当前页面下拉loading的样式，仅支持dark /light |
|
||
| enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新的效果 |
|
||
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |
|
||
|
||
### 网络数据请求
|
||
|
||
#### 1.小程序中网络数据请求的限制
|
||
|
||
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：
|
||
|
||
1.只能请求HTTPS类型的接口
|
||
|
||
2.必须将接口的域名添加到信任列表中
|
||
|
||
|
||
|
||
#### 2.配置 request 合法域名
|
||
|
||
需求描述：假设在自己的微信小程序中，希望请求https://www.escook.cn/域名下的接口配置步骤：登录微信小程
|
||
|
||
序管理后台->开发 -> 开发设置 -> 服务器域名-> 修改 request 合法域名
|
||
|
||
注意事项：
|
||
|
||
1.域名只支持https协议
|
||
|
||
2.域名不能使用IP地址或 localhost
|
||
|
||
3.域名必须经过ICP备案
|
||
|
||
4.服务器域名一个月内最多可申请5次修改
|
||
|
||
#### 3.发起 GET 请求
|
||
|
||
调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：
|
||
|
||
```js
|
||
getInfo() {
|
||
wx.request({
|
||
url: 'https://www.escook.cn/api/get', //接口申请地址，必须基于https协议
|
||
method: "GET", //请求方式
|
||
data: { //发送到服务器的数据
|
||
name:'zs',
|
||
age: 20
|
||
},
|
||
success: (res) =>{//请求成为之后的回调生活
|
||
console.log(res)
|
||
}
|
||
})
|
||
},
|
||
```
|
||
|
||
#### 4.发起 POST 请求
|
||
|
||
调用微信小程序提供的wx.request()方法，可以发起POST数据请求，示例代码如下：
|
||
|
||
```js
|
||
postInfo() {
|
||
wx.request({
|
||
url: 'https://www.escook.cn/api/post',
|
||
method: "POST",
|
||
data: {
|
||
name: 'ls',
|
||
age: 33
|
||
},
|
||
success: (res) => {
|
||
console.log(res.data)
|
||
}
|
||
})
|
||
},
|
||
```
|
||
|
||
#### 5.在页面刚加载时请求数据
|
||
|
||
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调
|
||
|
||
用获取数据的函数，示例代码如下：
|
||
|
||
|
||
|
||
#### 5.跳过 request 合法域名校验
|
||
|
||
如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。此时为了不耽误开发的进度，我们
|
||
|
||
可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS版本及HTTPS证书」选项，跳过request 合
|
||
|
||
法域名的校验。
|
||
|
||
|
||
|
||
注意：
|
||
|
||
跳过request合法域名校验的选项，仅限在开发与调试阶段使用！
|
||
|
||
#### 6.关于跨域和Ajax的说明
|
||
|
||
跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序
|
||
|
||
中不存在跨域的问题。
|
||
|
||
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程
|
||
|
||
序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。
|
||
|
||
### 案例—本地生活
|
||
|
||
#### 1.首页效果以及实现步骤
|
||
|
||
1.新建项目并梳理项目结构
|
||
2.配置导航栏效果
|
||
3.配置tabBar效果
|
||
4.实现轮播图效果
|
||
5.实现九宫格效果
|
||
6.实现图片布局
|
||
|
||
|
||
|
||
#### 2.接口地址
|
||
|
||
1.获取轮播图数据列表的接口
|
||
|
||
- 【GET】https://www.escook.cn/slide
|
||
|
||
2.获取九宫格数据列表的接口
|
||
|
||
- 【GET】https://www.escook.cn/categories
|
||
|
||
### 总结
|
||
|
||
1.能够使用 WXML模板语法渲染页面结构
|
||
|
||
wx:if、wx:elif、wx:else、hidden、wx:for、wx:key
|
||
|
||
2.能够使用 WXSS 样式美化页面结构
|
||
|
||
rpx尺寸单位、@import样式导入、全局样式和局部样式
|
||
|
||
3.能够使用 app.json 对小程序进行全局性配置
|
||
|
||
pages、window、tabBar、style
|
||
|
||
4.能够使用page.json对小程序页面进行个性化配置
|
||
|
||
对单个页面进行个性化配置、就近原则
|
||
|
||
5.能够知道如何发起网络数据请求
|
||
|
||
wx.request()方法、onLoad()事件
|
||
|
||
## 小程序—视图与逻辑
|
||
|
||
### 目标
|
||
|
||
能够知道如何实现页面之间的导航跳转
|
||
|
||
能够知道如何实现下拉刷新效果
|
||
|
||
能够知道如何实现上拉加载更多效果
|
||
|
||
能够知道小程序中常用的生命周期函数
|
||
|
||
### 目录
|
||
|
||
页面导航
|
||
|
||
页面事件
|
||
|
||
生命周期
|
||
|
||
WXS 脚本
|
||
|
||
案例-本地生活(列表页面)
|
||
|
||
### 页面导航
|
||
|
||
#### 1.什么是页面导航
|
||
|
||
页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：
|
||
|
||
- <a>链接
|
||
- location.href
|
||
|
||
#### 2.小程序实现页面导航的两种方式
|
||
|
||
1.声明式导航
|
||
|
||
在页面上声明一个<navigator>导航组件通过点击<navigator> 组件实现页面跳转
|
||
|
||
2.编程式导航
|
||
|
||
调用小程序的导航API，实现页面的跳转
|
||
|
||
### 页面导航—声明式导航
|
||
|
||
#### 1.导航到tabBar页面
|
||
|
||
tabBar页面指的是被配置为tabBar的页面。
|
||
|
||
在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url 属性和open-type属性，其中：
|
||
|
||
- url表示要跳转的页面的地址，必须以/开头
|
||
- open-type 表示跳转的方式，必须为switchTab
|
||
|
||
示例代码如下：
|
||
|
||
```
|
||
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
|
||
```
|
||
|
||
#### 2.导航到非 tabBar 页面
|
||
|
||
非 tabBar 页面指的是没有被配置为 tabBar 的页面
|
||
|
||
在使用<navigator>组件跳转到普通的非tabBar页面时，则需要指定url属性和open-type属性，其中：
|
||
|
||
- url表示要跳转的页面的地址，必须以/开头
|
||
- open-type 表示跳转的方式，必须为navigate
|
||
|
||
示例代码如下：
|
||
|
||
```
|
||
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
|
||
```
|
||
|
||
注意：为了简便，在导航到非tabBar页面时，open-type="navigate”属性可以省略。
|
||
|
||
#### 3.后退导航
|
||
|
||
如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性，其中：
|
||
|
||
- open-type 的值必须是navigateBack，表示要进行后退导航
|
||
- delta 的值必须是数字，表示要后退的层级
|
||
|
||
示例代码如下：
|
||
|
||
```
|
||
<navigator open-type="navigateBack" delta="1">后退</navigator>
|
||
```
|
||
|
||
注意：为了简便，如果只是后退到上一个页面，则可以省略 delta 属性，因为其默认值就是 1。
|
||
|
||
### 页面导航—编程式导航
|
||
|
||
#### 1.导航到 tabBar 页面
|
||
|
||
调用 wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：
|
||
|
||
| 属性 | 类型 | 是否必选 | 说明 |
|
||
| :------: | :------: | :------: | :--------------------------------------------: |
|
||
| url | string | 是 | 需要跳转的tabBar页面的路径，路径后不能带参数 |
|
||
| success | function | 否 | 接口调用成功的回调函数 |
|
||
| fail | function | 否 | 接口调用失败的回调函数 |
|
||
| complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
|
||
|
||
示例代码如下：
|
||
|
||
```html
|
||
// 页面结构
|
||
<button bindtap="gotoMessage">跳转到message页面</button>
|
||
|
||
// 通过编程式导航，跳转到 message 页面
|
||
gotoMessage(){
|
||
wx.switchTab({
|
||
url: '/pages/message/message',
|
||
})
|
||
},
|
||
```
|
||
|
||
2.导航到非 tabBar 页面
|
||
|
||
调用 wx.navigateTo(Object object)方法，可以跳转到非tabBar页面。其中Object参数对象的属性列表如下：
|
||
|
||
| 属性 | 类型 | 是否必选 | 说明 |
|
||
| :------: | :------: | :------: | :--------------------------------------------: |
|
||
| url | string | 是 | 需要跳转的tabBar页面的路径，路径后不能带参数 |
|
||
| success | function | 否 | 接口调用成功的回调函数 |
|
||
| fail | function | 否 | 接口调用失败的回调函数 |
|
||
| complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
|
||
|
||
示例代码如下：
|
||
|
||
```
|
||
// 页面结构
|
||
<button bindtap="gotoInfo">跳转到info页面</button>
|
||
|
||
// 通过编程式导航，跳转到 info 页面
|
||
gotoInfo(){
|
||
wx.navigateTo({
|
||
url: '/pages/info/info',
|
||
})
|
||
},
|
||
```
|
||
|
||
#### 3.后退导航
|
||
|
||
调用 wx.navigateBack(Object object)方法，可以返回上一页或多级页面。其中Object参数对象的属性列表如下：
|
||
|
||
| 属性 | 类型 | 是否必选 | 说明 | 默认值 |
|
||
| :------: | :------: | :------: | :-------------------------------------------------: | :----: |
|
||
| delta | number | 否 | 返回的页面数，如果 delta 大现有页面数，则返回到首页 | 1 |
|
||
| success | function | 否 | 接口调用成功的回调函数 | |
|
||
| fail | function | 否 | 接口调用失败的回调函数 | |
|
||
| complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) | |
|
||
|
||
示例代码如下：
|
||
|
||
```
|
||
// 页面结构
|
||
<button bindtap="goBack">后退</button>
|
||
|
||
// 通过编程式导航，后退到上一个页面
|
||
goBack(){
|
||
wx.navigateBack()
|
||
},
|
||
```
|
||
|
||
### 页面导航—导航传参
|
||
|
||
#### 1.声明式导航传参
|
||
|
||
navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
|
||
|
||
- 参数与路径之间使用？分隔
|
||
- 参数键与参数值用=相连
|
||
- 不同参数用&分隔
|
||
|
||
代码示例如下：
|
||
|
||
```
|
||
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
|
||
```
|
||
|
||
#### 2.编程式导航传参
|
||
|
||
调用 wx.navigateTo(Object object)方法跳转页面时，也可以携带参数，代码示例如下：
|
||
|
||
```
|
||
// 页面结构
|
||
<button bindtap="gotoInfo2">跳转到info页面</button>
|
||
|
||
// 通过编程式导航，跳转到 info 页面，并携带参数
|
||
gotoInfo2(){
|
||
wx.navigateTo({
|
||
url: '/pages/info/info?name=zs&age=20',
|
||
})
|
||
},
|
||
```
|
||
|
||
#### 3.在 onload 中接收导航参数
|
||
|
||
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad 事件中直接获取到，示例代码如下：
|
||
|
||
```
|
||
|
||
``` |