微信小程序

原创已于 2022-11-22 09:48:39 修改 · 89 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信开放平台

于 2022-04-01 14:51:01 首次发布

1 组件

1.1 常见组件分类

1）视图容器
2）基础内容
3）表单组件
4）导航组件

1.2 视图容器组件

视图容器

1.3 组件的基本使用

1.3.1 flex横向布局

text-align：center 文本行横项居中
.container view:nth-child(具体第几个) 来选中是哪几个数据块
display：flex 横向
justify-content：space-around 分散居中

1.3.2 实现纵向滚动效果

在这里插入图片描述

width 为红框的宽度

1.3.3 实现轮播图

swiper常用属性
在这里插入图片描述

1.3.4 常用基础组件

1）text
2）rich-text

在这里插入图片描述

1）button
2）image
3）navigator

在这里插入图片描述

1.3.5 小程序API

在这里插入图片描述

2 WXML模板语法

2.1 数据绑定

在data中定义数据、在WXML中使用数据
通过.js中定义数据，如果是字符or字符串，需要用“ ”or ‘’
在WXML中用{{ 要绑定的数据名称 }}来使用——Mustache语法

在这里插入图片描述

2.2 事件绑定

在这里插入图片描述

bindtap使用方法

在这里插入图片描述

e.target.dataset 来获得绑定事件传递过去的参数值

在这里插入图片描述

bindinput使用方法

在这里插入图片描述

2.3 条件渲染

1） wx：if
2） <block>
3） hidden

在这里插入图片描述

<block>只起到包装作用

在这里插入图片描述

2.4 列表渲染

1） wx：for
2） wx：for-index/item
3） wx：key

在这里插入图片描述

2.5 样式导入

在这里插入图片描述

2.6 全局配置

在这里插入图片描述

tabBar 所调用的界面必须放在app.json->pages的最前面，否则用不了
在这里插入图片描述

2.7 网络数据请求

在这里插入图片描述

GET 和 POST 请求不同的地方是 method的内容

在这里插入图片描述

onLoad 当界面加载的时候，自动执行一些方法，这个方法是自己定义在onLoad里面的

在这里插入图片描述

3 页面导航

3.1 申明式导航

在这里插入图片描述

3.2 编程式导航

在这里插入图片描述

3.3 导航传参

在这里插入图片描述

4 页面事件

4.1 下拉刷新

在这里插入图片描述

4.2 上拉触底

在这里插入图片描述

展示效果如下

在这里插入图片描述

节流处理

这里的getColors()方法是自己定义的事件，放在onLoad里面自动加载处理的
节流处理的主要目的是，在正在请求下一页时，不会因为多次请求而造成下面页面多次出现
简单的说就是，在一次上拉请求的过程中，不论上拉多少次只会显示出下一个页面
例：一次可以查看10条内容，在进行上拉刷新的过程中还进行了多次刷新，但是最后只会显示出下面10条信息；如果没有 节流处理 那么下面应该显示出n个10条信息

在这里插入图片描述

4.3 生命周期

在这里插入图片描述

5 WXS脚本

在这里插入图片描述

6 自定义组件

6.1 组件的创建与引用

在这里插入图片描述

6.2 组件的样式

在这里插入图片描述

6.3 数据、方法和属性

在这里插入图片描述

6.4 数据监听器

在这里插入图片描述

6.5 纯数组字段

在这里插入图片描述

6.6 组件的生命周期

在这里插入图片描述

6.6 组件插槽

在这里插入图片描述

6.7 父子组件之间的通信

在这里插入图片描述

sync为自己定义的，可以是其他的变量
在这里插入图片描述

6.8 behaviors

在这里插入图片描述

7 Vant组件库

在这里插入图片描述

初始化包，并导入

在这里插入图片描述

‘--’后面需要查看Vant官方文档

在这里插入图片描述

7.1 API的Promise化

在这里插入图片描述

7.2 全局数据共享

在这里插入图片描述

7.3 分包

在这里插入图片描述