小程序API

3大类

  1. 事件监听类
  • on开头，监听事件触发
  • 如：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
  1. 同步API
  • 以Sync结尾
  • 执行结果可通过函数直接获取，执行出错会抛出异常
  • 如：wx.setStorageSync(‘key’,’value’)向本地存储中写入内容
  1. 异步API
  • 类似jQuery中的$.ajax(option)函数，需要通过success、fail、complete接受调用的结果
  • 如：wx.request()发起网络数据请求，通过success回调函数接收数据

协同工作

组织结构

image-20221108075843949

开发流程

image-20221108075917730

成员管理

image-20221108080150790

权限划分

发布权限，开发者权限、测试权限等

添加项目成员和体验成员

在小程序网页管理栏中点击“成员管理”

image-20221108080652058

小程序版本

image-20221108080810324

小程序发布

版本管理->提交开发版本审核->审核通过->发布审核通过版本

小程序宣传

二维码和小程序码的生成

小程序数据统计

后台或小程序数据助手

常见交互式反馈

hover-class

loading图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- wxml -->
<text>loading属性</text>
<button loading="{{loading}}" type="primary" bindtap="loadingStart">确认</button>
<!-- .js -->
pages({
  data: {
    loading: false
  },
  loadingStart(){
  	this.setData({
  		loading:true
  	})
  }
  )}

Toast和模态对话框

Toast

显示/隐藏Toast

1
2
3
4
5
6
wx.showToast({ //显示Toast
      title: '这是Toast的标题',
      icon: 'success', //详细参数见社区
      duration: 1500 //时长单位毫秒
    })
wx.hideToast() //隐藏Toast

WXML模板语法

数据绑定

动态绑定内容

在页面的.js的data中定义数据，在wxml文件中使用Mustache语法或叫插值表达式（双大括号+变量名）引用数据

动态绑定属性

同上，但数据为属性值。

三元运算

在控制台AppData处可以查看数据值

运算可以在data定义时，也可以是在Mustache语法中。

事件绑定

事件绑定的写法和组件属性一致，以key=”value”的形式，其中：

  1. key以bind或者catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。同时bind和catch前还可以加上capture-来表示捕获阶段。
  2. value是一个字符串，需要在对应的页面Page构造器中定义同名的函数，否则触发事件时在控制台会有报错信息。
    bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段。

事件是渲染层到逻辑层的通讯方式，将渲染层产生的行为，反馈到逻辑层进行业务处理。

image-20221108082709284

常用事件

image-20221108082801196

事件属性

当事件回调触发时，会收到一个事件event，它的属性如下：

image-20221108082943182

target和currentTarget的区别

image-20221108083318316

bindtap使用

在button标签添加bindtap属性，属性值为函数名。

函数在.js文件中定义与data平级。

为data中的数据重新赋值

调用this.setData(dataObject)方法

1
2
3
this.setData({
	count:this.data.count+1
})

注：this.data.count获取的为旧值

传递参数

小程序中不能直接在bindtap属性值中使用函数名(参数)的形式传参，只能通过data-*的方式

  • *表示参数名。如data-info，其中info是参数名
  • 建议使用Mustache语法传递数字，如果直接传递则会是字符型的数据。如：data-info=”2”

获取参数的方法是使用event.target.dataset.*

bindinput使用

监听输入事件，可以获取在input框中输入的值

使用console.log(event.detail.value)输出获得的值到控制台日志

我们可以结合bindinput、event.detail.value和this.setData()实现data数据的同步。

条件渲染

符合条件的代码块将被渲染

1
2
3
<view wx:if=”{{condition}}”></view>
<view wx:elif=”{{condition}}”></view>
<view wx:else></view>

结合block标签和wx:if实现多个组件的显示与隐藏

block标签只起到包裹的作用，在block中使用wx:if可以实现多个组件的控制

使用hidden显示与隐藏标签

值为布尔型

wx:if和hidden的区别

  • wx:if是动态创建标签来控制组件的显示与隐藏
  • hidden是通过添加样式来控制显示与隐藏
    • display样式，属性值none/block

列表渲染

wx:for

用于循环遍历数组，循环渲染重复的组件结构，当前循环项的索引用index表示，当前循环项用item表示。（Mustache语法）

数组的创建

1
array:["item1","item2",...]

手动指定index和item名

用的不多

wx:key的使用

类似Vue列表渲染中的:key，用以提高渲染的效率

1
2
3
4
5
6
7
8
//js.data
usrlist:[
    {id:1,name:'xh'},
    {id:2,name:'xm'},
    {id:3,name:'xb'}
]
//wxml
<view wx:for="{{usrlist}}" wx:key="id"></view>

注：数组中没有使用id，可以使用index代替key值

WXSS模板样式

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

  • 尺寸单位rpx
  • 样式导入@import

rpx

见官网

@import

导入外来样式表

1
@import "相对路径"

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

全局配置

window、tabBar为重点

window

设置导航栏标题

1
"navigationBarTitleText":"我是标题"

设置导航栏背景色

1
"navigationBarBackgroundColor":"只支持#的16进制颜色"

设置导航栏标题颜色

1
"navigationBarTextStyle":"black" //仅支持黑色、白色

全局开启下拉刷新

1
"enablePullDownRefresh": true

设置背景颜色

1
"backgroundColor": "#efefef"

设置下拉时Loading效果（小圆点）

1
"backgroundTextStyle":"light" //仅支持dark、light

设置上拉触底的距离，触底后会加载新的数据

1
"onReachBottomDistance": 50 //默认50像素，省去了px单位

tarBar

属性 类型 必填 默认值 描述 最低版本
color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色
borderStyle string 否 black tabbar 上边框的颜色， 仅支持 black / white
list Array 是 tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position string 否 bottom tabBar 的位置，仅支持 bottom / top
custom boolean 否 false 自定义 tabBar，见详情 2.5.0

list属性说明

  • 只能配置最少 2 个、最多 5 个 tab
属性 类型 必填 说明
pagePath string 是 页面路径，必须在 pages 中先定义
text string 是 tab 上按钮文字
iconPath string 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath string 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

image-20221108205427128

页面配置

微信小程序遵从就近原则，若页面配置与全局配置发生冲突，则使用页面配置。

网络数据请求

出于安全的考虑，小程序官方对数据接口的请求做出了如下俩个限制：

  1. 只能请求HTTPS类型的接口
  2. 必须将接口的域名添加到信任列表中

配置服务器

发起GET请求

1
2
3
4
5
6
7
8
9
10
wx.request({
	url: 'https://...',
    method:'GET',
    data:{
    	id: '1'
    },
    success:(res)=>{
    	...
    }
})

发起POST请求

在页面刚加载时请求数据

在页面.js中的onLoad方法中调用请求方法

关于跨域和Ajax的说明

image-20221108222358110

案例-本地生活（首页）

梳理项目结构

  • 多少个页面？