微信小程序入门级知识

189 阅读5分钟

微信小程序的组件

view

普通视图区域

类似于html的div,是个块级元素

常用来实现页面的布局效果

scroll-view

可滚动的试图区域

常用来实现滚动列表效果

swiper swiper-item

轮播图容器组件和轮播图item组件

屏幕截图 2023-07-01 143017.png

text

文本组件

类似于html中的span标签,是一个行内元素

通过text组件的selectable属性,实现长按选中文本内容的效果

rich-text

富文本组件

通过nodes属性节点,把html字符串渲染为wxml结构

button

按钮组件

通过open-type属性可以调用微信提供的各种功能

image

图片组件

默认宽度300px,高度240px

navigator

页面导航组件

类似与html的a链接

mode属性用来指定图片的裁剪和缩放模式,常用mode属性值如下:

屏幕截图 2023-07-01 144738.png

API接口

事件监听API

以on开头,用来监听某些事件的触发

eg:wx.onWindowResize(function callback)监听窗口尺寸变化的事件

同步API

以Sync结尾的API都是同步API

同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常

eg:wx.setStorageSync('key','value')向本地存储中写入内容

异步API

类似于jQuery中的$.ajax(options)函数,需要通过success,fail,complete接收调用的结果

eg:wx.request()发起网络数据请求,通过success回调函数接收数据

数据绑定

在data中定义页面的数据

将data中数据绑定到页面中渲染,使用Mustache语法将变量包起来即可

事件绑定

事件是渲染层到逻辑层的通讯方式

常用的事件

屏幕截图 2023-07-08 203727.png

事件对象的属性列表

屏幕截图 2023-07-08 204315.png

target是触发该事件的源头组件,实际被点击的那个

currentTarget是当前事件所绑定的组件,绑定事件的那个

在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法,可以给页面中的数据重新赋值

事件传参

不能在绑定事件的同时为事件处理函数传递参数

bindtap

可以为组件提供data-自定义属性传参,其中代表的是参数的名字

info会被解析为参数的名字

数值会被解析为参数的值

在事件处理函数中,通过event.target.dataset.参数名可获取到具体参数的值

bindinput

通过input事件来响应文本框的输入事件

e.detail.value是变化过后文本框最新的值

条件渲染

wx:if

使用wx:if="{{condition}}"来判断是否需要渲染该代码块

也可以用wx:elf和wx:else来添加else判断

结合使用wx:if

一次性控制多个组件的展示和隐藏可以使用一个标签将多个组件包装起来,并在标签上使用wx:if控制属性

并不是一个组件,他只是一个包裹性质的容器,不会再页面中做任何渲染

hidden

直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

两种方式的不同

wx:if以动态创建和移除元素的方式,控制元素的展示与隐藏

hidden以切换样式的方式控制元素的显示与隐藏

频繁切换时,使用hidden

控制条件复杂,使用wx:if

列表渲染

wx:for

通过wx:for可以根据指定的数组,循环渲染重复的组件结构,当前循环项的索引用index,当前循环项用item表示

手动指定索引和当前项的变量名

使用wx:for-index可以指定当前循环项的索引的变量名

使用wx:for-item可以指定当前项的变量名

wx:for

指定唯一key值 提高渲染效率

模板样式

rpx

rpx是小程序独有的用来解决屏适配的尺寸单位,分成750份

样式导入

@import后需要导入的外联样式表的相对路径

全局配置

设置导航栏的标题

app.json ->window->navigationBarTitleText

设置导航栏的背景色

app.json->window->navigationBarBackgroundColor

设置导航栏的标题颜色

app.json->window->navigationBarTextStyle

可选值为black和white

下拉刷新功能

app.json->window->将enablePullDownReflesh的值设置为true

下拉刷新时窗口的背景色

app.json->window->backgroundColor

刷新时loading的样式

app.json->window->backgroundTextStyle

可选值为light和dark

设置上拉触底的距离

app.json->window->onReachBottomDistance

网络数据请求

1.只能请求HTTP类型的接口

2.必须将接口的域名添加到信任列表中

页面导航

1.声明式导航

在页面上声明一个<navigation>导航组件

通过点击<navigation>组件实现页面跳转

navigator组件的url属性用来指定将要跳转到的页面的路径 参数与路径之间使用?分割 参数键与参数值用=相连 不同参数用&分隔

2.编程式导航

调用小程序的导航API,实现页面的跳转

导航到tabBar页面

调用wx.switchTab方法,可以跳转到tabBar页面

导航到非tabBar页面

调用wx.navigateTo方法,可以跳转到非tabBar的页面

后退导航

调用wx.navigationBack方法,可以返回上衣页面或多级页面

导航传参

调用wx.navigateTo方法跳转页面

下拉刷新事件

处理函数为onPullDownRefresh

停止下拉刷新的效果

处理完下拉刷新后,下拉刷新的loading效果会一直显示,不会主动消失。调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新