微信小程序 基础 知识点汇总 总结

## 第一个小程序

准备工作：

​ 注册小程序账号 获取 appid

​ 小程序开发文档：mp.weixin.qq.com

​ 微信开发者工具：[下载链接](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

新建小程序：

新建 -> 项目名 -> 存放目录 -> appid -> 不使用云开发 -> 基础模板  ->  javascript基础模板

项目目录：

pages：页面

--index  index页面

----index.js    index页面逻辑

----index.json   index页面配置

----index.wxml  index页面结构（html）

----index.wxss   index样式 （css）

utils：工具类

app.js  全局逻辑

app.json 全局配置

app.wxss 全局样式

## 小程序语法

wxml中新引入了  view标签 和 text 标签  分别替换div  和 文本标签（p、span）   其余html标签基本全部兼容

​   view标签是块级元素   text是行内元素

wxss中新引入了 rpx相对单位    750rpx 相当于屏幕宽度的 100%   其余css样式规则基本兼容

### 条件渲染

使用 wx:if  wx:elif  wx:else 进行条件渲染

```

已登录

未登录

 

优秀

良好

一般

及格

不及格

```

### 列表渲染

使用wx:for进行列表渲染  使用 wx:for-item  wx:for-index 自定义index和item的变量名

```

  {{index}}、{{item}}

  {{ite}}

```

### 模板和引入

使用template定义一个模板

```html

```

使用include和import引入其他文件  使用src属性定义文件路径

import 只能引入template  引入后需要调用模板

include 引入除template以外的其他东西  引入后立即渲染

### 组件

button  按钮组件

image  图片组件   使用mode=“widthFix” 使高度随宽度自适应

swiper  轮播图组件

rich-text 富文本组件  使用nodes属性渲染html内容

scroll-view  滚动条组件  使用  scroll-x scroll-y 定义横向滚动/纵向滚动  纵向滚动需定义高度

input  文本框组件

### 事件绑定

bindtap  单击事件

bindlongpress  长按事件

bindinput  input框的value改变事件

bindchange  input框value改变  失去焦点后触发

bindconfirm  确认事件 （点击输入法中的确认/回车等触发事件）

### 事件绑定参数

使用自定义属性定义参数

使用事件默认形参  中的currentTarget.dataset.自定属性名   获取参数

```javascript

  hdTap(e){

    console.log(e)

    console.log(e.currentTarget.dataset.msg)

  }

```