【小程序】微信小程序入门笔记

前端必备技能之一，重新捡起小程序，记录一下，有react和vue经验学起来会比较快，有较多相似的地方

标签

• view（块级元素，替换div）
• text（行内元素，替换span）
• image（图片组件，封装了很多实用属性，替换img）

image标签的属性

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

指令

• 循环
• 条件渲染

循环（wx:for）

小程序的列表循环和vue有点小区别，for后面直接跟需要渲染的列表，遍历后的每一项和下标值会分别放入到item和index中，不像vue一样要显性的指定。

示例

<view wx:for="{{循环的列表}}" wx:key="index">
	<view>{{item}}</view>
</view>

注意：列表循环中的index使用不需要加双大括号。（wx:key=“{{index}}” does not look like a valid key name (did you mean wx:key=“index” ?)）

比如

wx:key="index" // 正确
wx:key="{{index}}" // 错误

条件渲染（使用同Vue）

• wx:if
• wx:else-if
• wx:else

事件绑定

• 普通事件绑定：bindtap
• 表单事件绑定：bindinput、bindchange等
• 自定义事件绑定：bind + 自定义名称

普通事件绑定

<view bindtap="handleClick">点击我</view>
<input type="text" bindinput="mobileChange" placeholder="请输入手机号" data-field="mobile" />

handleClick(e) {
	console.log('点击事件触发了');
},
mobileChange(e) {
	const value = e.detail.value;
	console.log('input输入的值', value);
}

事件传递参数

小程序中给事件带参数不能像vue直接handleClick(‘参数1’, ‘参数2’)，而是需要借助属性data-xxx。

使用：data-名称=“参数” 或 data-名称=“{{参数}}”

示例：

<view bindtap="handleClick" data-id="参数">点击我</view>

handleClick(e) {
	// const id = e.target.dataset.id;
	const id = e.currentTarget.dataset.id;
	console.log('参数是', id);
}

e.target：taget，绑定的元素
e.currentTarget：currentTarget，绑定的组件

注意：参数放在了函数的e.target/currentTarget.dataset中，对应的key就是在data-xxx写的名称，value就是值。

父子通信，事件传值

父组件：

<view bindCustom="handleCustom">父组件</view>

子组件：

this.triggerEvent('Custom', '参数');

父组件在自定义事件中设置好一个接收函数，自定义事件为bind + 自定义名称，就如同这里示例中的Custom，然后子组件通过this.triggerEvent(‘自定义名称’, ‘参数’)进行触发。参数在参数的detail中

HTTP请求

• wx.request

wx.request的使用方法和jq或axios没太大差别，都可以通过配置项的方式操作，通过回调函数获得结果，也可以改成promise的方式。另外为了在开发环境中更好的对接口进行调试，可以提前在小程序右上角的 详情——本地设置——不校验合法域名…这一项关掉

组件

在小程序中创建组件可以通过右键——新建文件夹——新建Component——输入组件名称并回车快速创建一个组件。

JS配置项

组件创建好后，和正常页面一样会有js、json、wxss、wxml4个文件，主要介绍一下js文件，和普通页面有一些小区别。

创建好的JS文件中会默认带有以下属性

• properties：接收的参数
• data：组件的参数
• methods：组件的方法

properties

使用：

 list: {
	type: Array,
	value: [1,2,3]
}

list：接收的参数名
type：接收的参数类型
value：接收的参数默认值

data

组件的数据，使用上没有区别

method

组件的方法，事件定义都放在这里

JSON配置项

• usingComponents：要使用的组件

json

{
  "usingComponents": {
    "组件定义的名称": "引入的组件路径"
  }
}

wxml

<组件定义的名称></组件定义的名称>

插槽

使用上和vue差不多，分为具名插槽和默认插槽。要使用多个插槽前需要在组件的options配置中将multipleSlots设置为true

• 默认插槽：就一个坑，父组件放的什么内容都会填到默认组件的坑里
• 具名插槽：子组件挖好不同的坑，父组件可以根据name指定给对应的坑填内容

子组件

<slot name="left"></slot>
<slot></slot>
<slot name="right"></slot>

父组件

<子组件>
	<text slot="left">左</text>
	<text>中</text>
	<text slot="right">右</text>
</子组件>