Notes

微信小程序

概述：微信小程序

[TOC]

1.全局配置app.json

帮助文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

（1）”pages”字段：表示页面路径

第一个页面路径则为小程序默认展示页面，可利用在其中新建一个页面路径，则会自动生成新的页面文件夹（包含js/json/wxml/wxss）

（2）”window”字段：全局的默认窗口表现

定义小程序所有页面的顶部背景颜色和文字颜色等

例如：

“enablePullDownRefresh”:true表示是否全局开启下拉刷新功能

“backgroundTextStyle”: “dark”表示下拉刷新为暗灰色样式

2.sitemap 配置

根目录下的sitemap.json用于配置小程序及其页面是否允许被微信索引，如果没有 sitemap.json ，则默认为所有页面都允许被索引

（未发布的小程序无效）

3.模板语法

类似于web中span标签（行内元素）——不换行

类似于web中div标签（块级元素）——换行

页面渲染不展示——占位符标签

表示复选框

表示已勾选复选框

表示已勾选复选框

帮助文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

1
2
3
4
5
6
页面.js中data内声明变量
Page({
  data: {
    message: 'Hello MINA!'
  }
})
1
2
页面.wxml中使用指定变量
<view> {{ message }} </view>

备注：data中声明变量可用于设置标签属性，不过花括号与变量名间不得有空格

（1）三元运算

1
<view hidden="{{flag ? true : false}}"> Hidden </view>

（2）列表循环

操作方式1

1
2
3
4
<view wx:for="{{mylist}}" wx:for-item="mylist" wx:for-index="index">
      索引：{{index}}
      元素：{{mylist.name}}//指的是wx:for-item的mylist
</view>

其中wx:for是指data中声明的数组/对象变量名；wx:for-item表示本次循环项的名称；wx:for-index表示本次循环的索引，在内部迭代时使用本次循环项的名称操作

操作方式2：wx:key绑定一个普通字符串，而且该字符串为数组中对象唯一属性，例如对象中id为唯一不重复，该目的是用于提升列表渲染性能

1
2
3
4
<view wx:for="{{mylist}}" wx:for-item="mylist" wx:for-index="index" wx:for="id" >
      索引：{{index}}
      元素：{{mylist.name}}//指的是wx:for-item的mylist
</view>

操作方式3：若针对传统普通的数组，例如foods=[‘milk’,’eggs’,’apple’]，在wx:for-key设置为*this

1
2
3
4
<view wx:for="{{foods}}" wx:for-item="mylist" wx:for-index="index" wx:for-key="*this">
      索引：{{index}}
      元素：{{mylist}}
</view>

备注：仅单层循环时wx:for-item=”item”和wx:for-index=”index”为默认，可省略

操作方式4：对象循环

1
2
3
4
<view wx:for="{{persons}}">
	属性：{{index}}
	值：{{item}}
</view>

建议改成key-value，且会提示未添加wx:key的警告，建议添加其中一个属性：

1
2
3
4
<view wx:for="{{persons}}" wx:for-item="value" wx:for-index="key" wx:for="id">
	属性：{{key}}
	值：{{value}}
</view>

（3）条件渲染

1.if、elif、else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<view>
	<view wx:if="{{true}}">显示</view>
	<view wx:if="{{false}}">显示</view>
</view>

<view>
	<view wx:if="{{false}}">1</view>
	<view wx:elif="{{true}}">2</view>
</view>

<view>
	<view wx:if="{{false}}">1</view>
	<view wx:elif="{{false}}">2</view>
	<view wx:else>3</view>
</view>

2.hidden

1
2
3
4
5
<view>
	<view hidden>隐藏内容不显示</view>
	<view hidden="{{true}}">隐藏内容不显示</view>
	<view hidden="{{false}}">隐藏内容显示</view>
</view>

对于以上两种用法，建议：

（1）标签不频繁切换优先使用wx:if

（2）标签频繁切换优先使用hidden

（4）事件绑定

1.wxml点击事件触发（按钮事件）

1
<view bindtap='choose'>//其中choose为函数名
1
2
3
4
5
6
7
choose:function(){
	var that = this
    var random = Math.floor(Math.random());
    this.setData({
    	num:random//修改Page.data的num值
	})
}

2.将wxml的变量值传入js（获取输入框的值）

使用Input传入时是“bindinput”关键字触发

1
<input type="text" bindinput="abc"></input>
1
2
3
abc:function(e){
    console.log(e.detail.value)
}

3.将不同参数传入同一函数（按钮事件+形参）

1
2
<button bindtap="handle" data-operation="{{1}}"> + </button>
<button bindtap="handle" data-operation="{{-1}}"> - </button>

读取data-operation:

1
2
3
4
5
6
handle:function(e){
    const operation = e.currentTarget.dataset.operation;//读取过程
    this.setData({
      num:this.data.num+operation
    })
  },

※ 可通过调试器中的AppData查看变量名及对应的值

（5）变量赋值

访问时需要前置this

1
2
3
4
5
6
7
8
9
10
11
Page({
	data:{
		num:0
	}
})

handle(){
	this.setData({
		num:this.data.num+1
	})
}

4.样式WXSS

（1）组件尺寸

（1）推荐rpx，可以根据使用设备

（2）其他尺寸单位：px和%等

（2）样式导入

wxss对于相同文件名自动导入，还可以使用less中的导入混合

使用@import语句导入外联样式表（仅支持相对路径）

1
2
3
4
路径如下：
	/demo/demo.wxss
	
	/styles/commons.wxss
1
2
在demo.wxss中
@import "../style/common.wxss";

（3）选择器

※ 解释选择器：CSS选择器用于选择指定元素样式的模式，个人解释对某组件选择时的样式变化（eg.选择未访问链接时颜色及下划线等，访问后的颜色变化等）。

小程序不支持通配符*，例如以下代码：

1
2
3
4
5
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

目前支持的选择器有：

选择器 样例 样例描述
.class .intro 选择所有拥有 class=”intro” 的组件
#id #firstname 选择拥有 id=”firstname” 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

（4）less

定义：less类似于编写css的框架，可以在其中定义相关变量以及嵌套编写代码，可自动转换为相应的css，同时less支持导入less功能（@import 语句）。

eg.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
demo.less:
@color:yellow;
text{
	color:@color;
}

view{
	.view1{
		text{
			color:red;
		}
	}
}

/* 导入 */
@import "../../style/reset.less"
'''
	@themeColor:green;
'''
view{
	color:@themeColor;
}

自动转换为对应的css：

1
2
3
4
5
6
7
text{
	color:yellow;
}

view .view1 text{
	color:red
}

远程小程序不支持less，其他基于小程序的框架基本支持，例如wepy、mpvue、taro等。

若仅使用less而采用框架是不可取的，可以使用以下方式：

（1）使用编辑器vscode

（2）安装插件easy less

（3）在vscode设置加入

1
2
3
"less.compile":{
	"outExt":	".wxss"
}

（4）在编写样式地方新建*.less文件，正常编辑即可。

5.常见组件

（1）view——视图容器

属性 类型 默认值 必填 说明 最低版本
hover-class string none 否 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 1.0.0
hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 50 否 按住后多久出现点击态，单位毫秒 1.0.0
hover-stay-time number 400 否 手指松开后点击态保留时间，单位毫秒 1.0.0

Tip：滚动式图——scroll-view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row\n横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column\n纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>
</view>

（2）text——文本标签

属性 类型 默认值 必填 说明 最低版本
selectable boolean false 否 文本是否可选 1.1.0
space string 否 显示连续空格 1.4.0
decode boolean false 否 是否解码 1.4.0 
1
<text selectable>The Text Area</text>

（3）image——图片标签

微信小程序对图片容量有限制，一般建议使用网络图片。

本地图片->网络图片：https://images.ac.cn/（帮助工具——图床）

相关属性：

string src：图片的 URL。v2.11.0 起支持传递 base64 Data URI

number width：图片的真实宽度

number height：图片的真实高度

function onload：图片加载完成后触发的回调函数

function onerror：图片加载发生错误后触发的回调函数

（4）swiper——滑块视图容器

※ 使用轮播（Swiper）时注意要将app.wxss需要设置（不然图片无法显示）：

1
/* align-items: center; */

（1）轮播图外层容器：swiper

（2）每一个轮播项：swiper-item

1
2
3
4
5
<swiper>
	<swiper-item><img src="a.jpg"/></swiper-item>
	<swiper-item><img src="b.jpg"/></swiper-item>
	<swiper-item><img src="c.jpg"/></swiper-item>
</swiper>

※ swiper宽度默认100%；高度默认150px；图片默认尺度：320×240。

调整图片时可以考虑查看图片宽高后调整swiper宽高：

例如原图1125×353px，swiper宽度/swiper高度=原图宽度/原图高度

swiper高度=swiper宽度×原图高度/原图宽度

其中宽度为100%或750rpx或100vw

height = 100vw*352/1125

在*.wxss中设置swiper样式

※ 在wxss中不能实现数学运算，可以通过源生的calc函数完成

1
2
3
4
swiper{
	width:100%;
	height:calc(100vw*352/1125);
}

主要属性：

（1）自动轮播：autoplay

（2）轮播时间：interval（单位毫秒）

（3）衔接模式：circular

属性 类型 默认值 必填 说明 最低版本
indicator-dots boolean false 否 是否显示面板指示点 1.0.0
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0
indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0
autoplay boolean false 否 是否自动切换 1.0.0
current number 0 否 当前所在滑块的 index 1.0.0
interval number 5000 否 自动切换时间间隔 1.0.0
duration number 500 否 滑动动画时长 1.0.0
circular boolean false 否 是否采用衔接滑动 1.0.0
vertical boolean false 否 滑动方向是否为纵向 1.0.0
previous-margin string “0px” 否 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 1.9.0
next-margin string “0px” 否 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0
display-multiple-items number 1 否 同时显示的滑块数量 1.9.0
skip-hidden-item-layout boolean false 否 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 1.9.0
easing-function string “default” 否 指定 swiper 切换缓动动画类型 2.6.5
bindchange eventhandle 否 current 改变时会触发 change 事件，event.detail = {current, source} 1.0.0
bindtransition eventhandle 否 swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} 2.4.3
bindanimationfinish eventhandle 否 动画结束时会触发 animationfinish 事件，event.detail 同上 1.9.0

（5）navigator——导航组件

类似于超链接标签

（1）跳转页面：url（绝对路径/相对路径）

1
<navigator url="/pages/demo/demo">轮播图</navigator>

※ 设置tabBar的页面需要额外添加属性：

1
<navigator url="/pages/demo/demo" open-type="switchTab">轮播图</navigator>

（2）跳转当前小程序/其他小程序：target

self：默认值：个人小程序

miniProgram：其他小程序

（3）跳转方式：open-type

navigate：默认值——保留当前页面（有返回按钮），跳转至另一页面（未设置tabBar的页面）

redirect：关闭当前页面，跳转至另一页面（无返回按钮）（未设置tabBar的页面）

switchTab：跳转至tabBar页面，并关闭其他非tabBar页面。

属性 类型 默认值 必填 说明
ext-class string 否 添加在组件内部结构的class，可用于修改组件内部的样式
title string 否 导航标题，如果不提供，则名为center的slot有效
back boolean true 否 是否显示返回按钮，默认点击按钮会执行navigateBack，如果为false，则名为left的slot有效
delta number 1 否 当back为true的时候有效，表示navigateBack的delta参数
background string #f8f8f8 否 导航背景色
color string 否 导航颜色
loading boolean 否 是否显示标题左侧的loading
show boolean 否 显示隐藏导航，隐藏的时候navigation的高度占位还在
animated boolean 否 显示隐藏导航的时候是有opacity过渡动画
bindback eventhandler 否 在back为true时，点击back按钮触发此事件，detail包含delta

Slot

名称 描述
left 左侧slot，在back按钮位置显示，当back为false的时候有效
center 标题slot，在标题位置显示，当title为空的时候有效
right 在导航的右侧显示

（6）rich-text——富文本标签

将字符串解析成对应标签，类似于vue中v-html功能。

1
2
<rich-text nodes="{{html}}"></rich-text>
/*其中html为某段html的字符串格式或者对象数组格式 ==> html页面*/

对象数组格式举例（demo.js）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html:[
	{
		name:"div",	//标签div
		attrs:{
			class:"mydiv",
			style:"color:red;"
		},
		children:[
			{
				name:"p",
				attrs:{},
				children:[
					{
						type:"text",
						text:"hello"
					}
				]
			}
		]
	}
]
属性 类型 默认值 必填 说明 最低版本
nodes array/string [] 否 节点列表/HTML String 1.4.0
space string 否 显示连续空格 2.4.1

（7）button——按钮

size：大小

default：默认大小

min：小尺寸

type：类型

default：灰色

primary：绿色

warm：红色

状态

plain：按钮镂空

loading：读取

1
<button size="mini">mini按钮</button>
属性 类型 默认值 必填 说明 最低版本
size string default 否 按钮的大小 1.0.0
type string default 否 按钮的样式类型 1.0.0
plain boolean false 否 按钮是否镂空，背景色透明 1.0.0
disabled boolean false 否 是否禁用 1.0.0
loading boolean false 否 名称前是否带 loading 图标 1.0.0
form-type string 否 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 1.0.0
open-type string 否 微信开放能力 1.1.0
hover-class string button-hover 否 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 1.0.0
hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 20 否 按住后多久出现点击态，单位毫秒 1.0.0
hover-stay-time number 70 否 手指松开后点击态保留时间，单位毫秒 1.0.0
lang string en 否 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 1.3.0
session-from string 否 会话来源，open-type=”contact”时有效 1.4.0
send-message-title string 当前标题 否 会话内消息卡片标题，open-type=”contact”时有效 1.5.0
send-message-path string 当前分享路径 否 会话内消息卡片点击跳转小程序路径，open-type=”contact”时有效 1.5.0
send-message-img string 截图 否 会话内消息卡片图片，open-type=”contact”时有效 1.5.0
app-parameter string 否 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 1.9.5
show-message-card boolean false 否 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示”可能要发送的小程序”提示，用户点击后可以快速发送小程序消息，open-type=”contact”时有效 1.5.0
bindgetuserinfo eventhandle 否 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type=”getUserInfo”时有效 1.3.0
bindcontact eventhandle 否 客服消息回调，open-type=”contact”时有效 1.5.0
bindgetphonenumber eventhandle 否 获取用户手机号回调，open-type=getPhoneNumber时有效 1.2.0
binderror eventhandle 否 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 1.9.5
bindopensetting eventhandle 否 在打开授权设置页后回调，open-type=openSetting时有效 2.0.7
bindlaunchapp eventhandle 否 打开 APP 成功的回调，open-type=launchApp时有效 2.4.4 
1
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getinfo</button>
1
2
3
getUserInfo(e){
    console.log(e)
},

open-type 的合法值

值 说明 最低版本
contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 1.1.0
share 触发用户转发，使用前建议先阅读使用指引 1.2.0
getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 1.2.0
getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 1.3.0
launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 1.9.5
openSetting 打开授权设置页 2.0.7
feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 2.1.0

完成客服功能：

（1）在管理后台>开发>开发设置，替换小程序编译器内的appID

（2）在管理后台添加客服微信号

（3）绑定后的客服帐号，可以登录网页端客服 或 移动端小程序客服（扫码） 进行客服沟通。

（8）icon——图标

组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性 类型 默认值 必填 说明 最低版本
type string 是 icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear 1.0.0
size number/string 23 否 icon的大小 1.0.0
color string 否 icon的颜色，同css的color 1.0.0 
1
<icon type="success" size="60" color="#0094ff"></icon>

图标类型及大小举例：

1
2
3
4
5
6
7
8
9
10
11
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

（9）radio——单选框

外嵌radio-group

1
2
3
4
5
<radio-group bindchange="handleChange">
	<radio value="male">man</radio>
	<radio value="female">woman</radio>
</radio-group>
{{tips}}

js处理逻辑

1
2
3
4
5
6
handleChange:function(e){
    var gender = e.detail.value;
    this.setData({
      tips:gender  
    })
  }

（10）checkbox——复选框

外嵌checkbox-group

1
2
3
4
5
<checkbox-group>
  <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
    {{item.name}}
  </checkbox>
</checkbox-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
list:[
      {
        id:0,
        name:"苹果",
        value:"apple"
      },
      {
        id:1,
        name:"香蕉",
        value:"banana"
      },
      {
        id:2,
        name:"橙子",
        value:"orange"
      }
    ]

（11）自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。

新建文件夹->新建Component

编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

1
2
3
{
  "component": true
}

例如在pages同级上新建一个components folder后新建Tabs folder内新建Components，如下：

1
2
3
4
5
6
7
8
/components
	/Tabs
		/Tabs.js
		/Tabs.json
		/Tabs.wxss
		/Tabs.wxml
/pages
	/...

其他页面（demo）导入自定义组件，在其demo.json文件内：

1
2
3
4
5
{
	"usingComponents":{
		"Tabs":"../../components/Tabs/Tabs"
	}
}

在demo.wxml中可直接使用组件

Tab数据、样式举例说明

（1）数据Tabs.js：

数据存放于自定义组件js的data中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

（2）Tab.wxml

1
2
3
4
5
6
7
8
9
10
11
<view class="tabs">
  <view class="tabs_title">
    <view
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}">
    {{item.name}}
    </view>
  </view>
  <view class="tabs_content">内容</view>
</view>

（3）Tab.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* components/Tabs/Tabs.wxss */
.tabs{

}

.tabs_title{
  display: flex;
  padding:10rpx;
}
.title_item{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color:red;
  border-bottom: 10rpx solid currentColor;
}

相关方法：

1.页面.js：存放事件回调函数，存放在data同层级下；

2.组件.js：存放事件回调函数，存放在methods中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
methods: {
    handleItemTap(e){
      const {index} = e.currentTarget.dataset;//{}表示取里面的元素值，对复杂类型内的变量引用
      var {tabs} = this.data;
       //上述代码等价
       //var tabs = thid.data.tabs;
       //最严谨的做法：拷贝数组并处理（json序列化/反序列化）
       //var tabs = JSON.parse(JSON.stringify(this.data.tabs));
      console.log(this.data)
      tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);
      this.setData({
        tabs:tabs
      })
    }
  }

数据传递过程（变量）：

1
2
父组件.xwml(Tab.wxml)
<view class="tabs_content">内容:{{aaa}}</view>
1
2
3
4
5
6
7
父组件.js(Tab.js)
properties: {
    aaa:{
      type:String,
      value:""//默认值
    }
  }
1
2
3
子组件.wxml(demo.wxml)
<Tabs aaa="属性设置页面内容"></Tabs>
// 在子组件中添加属性值，可以修改其父组件的内容

数据传递过程（数组）：

1
2
父组件.xwml(Tab.wxml)
同上不变
1
2
3
4
5
6
7
8
9
10
11
父组件.js(Tab.js)
properties: {
    // aaa:{
    //   type:String,
    //   value:""
    // },
    tabs:{
      type:Array,
      value:[]
    }
  }
1
2
子组件.wxml(demo.wxml)
<Tabs tabs="{{tabs}}"></Tabs>

触发事件：triggerEvent(“事件名称”,传递变量)

将对父组件的值传递给子组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
父组件.js(Tab.js)
  methods: {
    handleItemTap(e){
      const {index} = e.currentTarget.dataset;//{}表示取里面的元素值，对复杂类型内的变量引用
      //触发父组件的自定义事件，传递数据给子组件
      this.triggerEvent("itemChange",{index});
      var {tabs} = this.data;
      tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);
      this.setData({
        tabs:tabs
      })
    }
  }
1
2
3
4
子组件.wxml
//'bind'+触发事件名 = 属性名
// 子组件js中接收函数 = 值
<Tabs tabs="{{tabs}}" content="具体的文字信息" binditemChange="handleItemChange"></Tabs>
1
2
3
4
子组件.js
handleItemChange:function(e){
    console.log(e)
}
属性 类型 是否必填 说明
properties Object Map 否 组件的对外属性，属性名到属性设置的映射表
data Object 否 组件的内部数据，与properties一同用于组件的模板渲染
observers Object 否 组件数据字段监听器，用于监听properties和data变化
methods Object 否 组件的方法
created Function 否 组件的生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用setData
attached Function 否 组件的生命周期函数，在组件实例进入页面节点树时执行
ready Function 否 组件的生命周期函数，在组件布局完成后执行
moved Function 否 组件的生命周期函数，在组件实例被移动到节点树另一位置时执行
detached Function 否 组件的生命周期函数，在组件实例被页面节点树移除时执行

（12）slot——占位符

（13）scroll-view——可滚动视图区域

属性 类型 默认值 必填 说明 最低版本
scroll-x boolean false 否 允许横向滚动 1.0.0
scroll-y boolean false 否 允许纵向滚动 1.0.0
upper-threshold number/string 50 否 距顶部/左边多远时，触发 scrolltoupper 事件 1.0.0
lower-threshold number/string 50 否 距底部/右边多远时，触发 scrolltolower 事件 1.0.0
scroll-top number/string 否 设置竖向滚动条位置 1.0.0
scroll-left number/string 否 设置横向滚动条位置 1.0.0
scroll-into-view string 否 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 1.0.0
scroll-with-animation boolean false 否 在设置滚动条位置时使用动画过渡 1.0.0
enable-back-to-top boolean false 否 iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 1.0.0
enable-flex boolean false 否 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 2.7.3
scroll-anchoring boolean false 否 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 2.8.2
refresher-enabled boolean false 否 开启自定义下拉刷新 2.10.1
refresher-threshold number 45 否 设置自定义下拉刷新阈值 2.10.1
refresher-default-style string “black” 否 设置自定义下拉刷新默认样式，支持设置 `black white
refresher-background string “#FFF” 否 设置自定义下拉刷新区域背景颜色 2.10.1
refresher-triggered boolean false 否 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 2.10.1
bindscrolltoupper eventhandle 否 滚动到顶部/左边时触发 1.0.0
bindscrolltolower eventhandle 否 滚动到底部/右边时触发 1.0.0
bindscroll eventhandle 否 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 1.0.0
bindrefresherpulling eventhandle 否 自定义下拉刷新控件被下拉 2.10.1
bindrefresherrefresh eventhandle 否 自定义下拉刷新被触发 2.10.1
bindrefresherrestore eventhandle 否 自定义下拉刷新被复位 2.10.1
bindrefresherabort eventhandle 否 自定义下拉刷新被中止 2.10.1

6.小程序生命周期

（1）应用生命周期

属性 类型 是否必填 说明
onLaunch Function 否 监听小程序初始化
onShow Function 否 启动/切前台
onHide Function 否 切后台
onError Function 否 错误监听函数
onPageNotFound Function 否 页面不存在监听函数 
1
2
3
4
5
6
7
8
9
10
11
12
13
app.js
App({
    onLaunch() {
        console.log("launched")
    },
    onShow() {
        console.log("showed")
    },
    onError(err){
    	console.log("errors!")
    	console.log(err)
    }
})

※ 其中onPageNotFound只有当第一个入口页面找不到时才触发

1
2
3
4
5
onPageNotFound(){
	wx.navigateTo({
		url:'/pages/demo2/demo2'
	});
}

（2）页面生命周期

属性 类型 说明
data Object 页面初始数据
onLoad Function 生命周期回调——监听页面加载
onShow Function 生命周期回调——监听页面显示
onReady Function 生命周期回调——监听页面初次渲染
onHide Function 生命周期回调——监听页面隐藏
onUnload Function 生命周期回调——监听页面卸载
onPullDownRefresh Function 监听用户下拉动作
onReachBottom Function 页面上拉触底事件
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面滚动触发事件
onResize Function 页面尺寸改变事件（横竖屏时，仅针对tab页面）
onTabItemTap Function 点击tab触发

页面生命周期图解

7.小程序第三方框架

（1）腾讯wepy（类似vue）

（2）美团mpvue（类似vue）

（3）京东taro（类似react）

（4）滴滴chameleon

（5）uni-app（类似vue）

8.推荐标准目录结构

目录名 功能
styles 存放公共样式
components 存放组件
lib 存放第三方库
utils 帮助库
request 接口帮助库

9.导入网络图标并设为字体

（1）阿里图标库：https://www.iconfont.cn/

（2）添加喜欢的图标至购物车

（3）图标管理 / 项目 / Font class —-> 查看在线链接，打开网址并复制css代码

（4）新建文件 styles/iconfont.wxss，复制上述css代码

（5）在app.wxss中导入

1
@import "./styles/iconfont.wxss";

（6）具体页面调用（注意两部分组成）

1
<text class="iconfont icon-dianyingpiao"></text>

10.*.wxss中使用app.wxss的全局样式

1
2
3
4
/*app.wxss*/
page{
	--themeColor:#eb4450;/*（全局）定义主题颜色*/
}
1
2
3
4
/*index.wxss*/
view{
	color:var(--themeColor);/*使用全局变量*/
}

11.发送异步请求的优化方法

通过es6的promise解决

（1）新建request文件夹并新建index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
index.js
export const request=(params)=>{
	// 定义公共url
	const baseUrl = "http://www.api.com/v1/"
	return new Promise((resolve,reject))=>{
		wx.request({
			...params,
			url:baseUrl+params.url
			success:(result)=>{
				resolve(result);
			},
			fail:(err)=>{
				reject(err);
			}
			});
	})
}

（2）具体js调用

1
2
3
4
5
6
7
8
9
10
import { request } from "../../request/index.js";
...
onLoad:function(options){
	request({url:"/home"})//仅需输入后半部部分url即可
	.then(result=>{
		this.setData({
			swiperList: result.data.message
		})
	})
}

小程序支持es7的async语法

es7是解决回调的最终方案

（1）在小程序的开发工具中，勾选es6转es5

（2）下载facebook的regenerator库的regenertaor/packages/regenerator-runtime/runtime.js

（3）在小程序目录下新建文件夹lib/runtime/runtime.js，拷贝代码

（4）在每一个需要使用async语法的js页面引入（不能全局引入）

1
import regeneratorRuntime form '../../lib/runtime/runtime'

12.获取本地存储数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 读取本地是否存储数据并请求数据
const Cates = wx.getStorageSync("cates");
if (!Cates){
	// 数据不存在
	this.getCates()
}else{
	// 定义过期时间（单位：毫秒）
	if (Date.now()-Cate.time>1000*10){
		//重新请求
		this.getCate();
	}else{
		//使用本地数据
		this.Cates = Cates.data;
		//...渲染数据
		this.setData({
			leftMenuList,
			rightMenuList
		})
	}
}
1
2
//存储至本地
wx.setStorageSync("cates",{time:Date.now(),data:this.Cates});

13.点击轮播图放大

1
2
3
4
5
6
7
8
9
10
11
//点击图片触发事件
swipclick: function (e) {
	// 接收url（通常在data中）和current（由前端传递）
	const url = this.pics.urls;
	const currents = e.currentTarget.dataset.url;
  // 点击轮播图放大预览（小程序api:previewImage）
  wx.previewImage({
    urls: ['../1.jpg','../2.jpg','../3.jpg'],
    current:urls[0]
  })
}

14.获取收货地址

1
2
3
4
5
6
7
8
9
handleChooseAddress(){
	wx.chooseAddress({
		success:(result)=>{
			
		};
		fail:()=>{},
		complete:()=>{}
	})
}

当用户点击取消时，再次点击可以重新唤起，解决方案：

（1）获取权限状态：

1
2
3
4
5
6
7
wx.getSetting({
	success:(result)=>{
		console.log(result);
	},
	fail:()=>{},
	complete:()=>{}
})

发现用户点击确认收货地址：scope为true

发现用户点击取消收货地址：scope为false

发现用户点击未点击收货地址：scope为undefined

（2）若首次取消，诱导用户自己打开授权页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
handleChooseAddress(){
	// 1.判断权限
	wx.getSetting({
		success:(result)=>{
			const scopeAddress = result.authSetting["scope.address"];
			// 2.如果开启或未使用=>选择地址
			if (scopeAddress==true||scopeAddress==undefined){
				wx.chooseAddress({
                    success:(result1)=>{
				  		console.log(result)
                    };
                    fail:()=>{},
                    complete:()=>{}
                })
                // 3.取消过授权=>打开设置
			}else{
				wx.openSetting({
					success:(result3)=>{
					// 4.授权成功后打开地址
						wx.chooseAddress({
                                success:(result1)=>{
                                	console.log(result)
                                };
                                fail:()=>{},
                                complete:()=>{}
                            })
					}
				})
			}
		}
	})
	
}

15.支付功能

微信支付接口：wx.requestPayment(Object object)

属性 类型 默认值 必填 说明
timeStamp string 是 时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
nonceStr string 是 随机字符串，长度为32个字符以下
package string 是 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
signType string MD5 否 签名算法
paySign string 是 签名，具体签名方案参见 小程序支付接口文档
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.signType 的合法值

值 说明 最低版本
MD5 MD5
HMAC-SHA256 HMAC-SHA256

示例代码

1
2
3
4
5
6
7
8
9
wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) { },
  fail (res) { }
})

16.获取用户token（令牌）

1
2
3
4
const token = wx.getStorageSync("token");
if (!token){
	...
}

获取用户信息（*.wxml）：

1
<button type="primary" open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">获取授权</button>

获取用户信息（*.js）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
handleGetUserInfo(e){
	try{
	// 1.获取用户信息
	const {encryptedData,rawData,iv,signature} = e.detail;
	// 2.获取用户登录成功后的code
	wx.login({
		timeout:10000,
		success:(result)=>{
			const {code} = result;
		}
	})
	const loginParams = {encryptedData,rawData,iv,signature}
	// 3.发送请求，获取用户的token
	const res = await request({url:"/users/wxlogin",data:loginParams,method:"post"})
	// 4.把token存储到缓存，并跳转至上一页面
	wx.setStorageSync("token",token);
	wx.navigateBack({
		delta:1//1表示上一层；2表示上两层
	});
	}catch(error){
		console.log(error);
	}
}

17.使用127.0.0.1:8000时需要设置不校验地址才可使用

其它问题

问题：使用van下拉菜单报错，提示信息

1
TypeError: wx.nextTick is not a function

解决：修改小程序代码project.config.json文件libVersion 为 2.2.3即可，如果小程序上线的话，还要在小程序后台-【设置】-【基础库最低版本设置】，里面修改版本 “libVersion”: “2.0.4”