一、微信小程序简介
1、微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用触手可及"的梦想,用户扫一扫或搜一下即可打开应用。
2、微信小程序,之前叫应用号,2017年正式上线
3、学习微信小程序之前,强烈建议先学习vue.js,学了之后再学超级快
4、微信小程序优点:
- 微信有海量用户,且粘性很高,在微信里开发产品更容易触达用户
- 推广app或公众号的成本太高
- 开发适配成本低
- 容易小规模试错,然后快速迭代
- 跨平台
二、微信小程序环境准备
2.1 申请帐号
- 进入小程序注册页根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号
- 你也可以管理你的小程序的权限,查看数据报表,发布小程序等操作。通过登录小程序后台,可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 (记得保密)
2.2 安装开发工具
前往 小程序开发工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装
2.3 编译预览
这里推荐用vs code编辑,小程序开发工具预览
vscode 小程序开发插件
(一)minapp。支持微信小程序标签、属性的智能补全,并且提示中包含文档内容(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)。
(二)wechat-snippet。这个插件主要的功能就是代码辅助,代码片段自动完成,可以作为上个插件的补充。
(三)wxml。这款插件用于将wxml代码进行高亮显示,并且提供代码格式化的功能,可将代码格式化为较易阅读的样式。
(四)vscode weapp api 。js中的api提示
三、小程序代码构成
通过开发者工具快速创建了一个 QuickStart 项目,里面有以下不同类型文件:
- .json 后缀的 JSON 配置文件
- .wxml 后缀的 WXML 模板文件
- .wxss 后缀的 WXSS 样式文件
- .js 后缀的 JS 脚本逻辑文件
四、JSON配置
配置相关的为.json文件,需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错
4.1 小程序配置 app.json
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:
{
"pages":[//页面路由,在这里添加路由可以自动生成对应文件
"pages/index/index",
"pages/logs/logs",
"pages/demo01/demo01"
],
"window":{//定义小程序所有页面的顶部背景颜色,文字颜色定义等
//下拉 loading 的样式,仅支持 dark / light
"backgroundTextStyle":"light",
//导航栏的样式
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
1234567891011121314151617
4.2工具配置 project.config.json
个性化配置,例如界面颜色、编译配置等等,避免了当你换另外一台电脑重新安装工具的时候再重新配置。
4.3 页面配置 page.json
表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置,可对每个页面进行单独配置
4.4 sitemap 配置-了解即可
⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引
五、模板WXML
- 标签名字有点不一样
HTML标签 | div, p, span等 |
---|---|
小程序WXML | view, button, text等 |
- 多了一些 wx:if 这样的属性(界面及状态的控制)以及 {{ }} 这样的表达式(数据绑定)
- MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离
WXML是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构建出⻚⾯的结构
5.1 数据绑定
(一)普通写法
index.wxml
<view> {{ message }} </view>
1
index.js
Page({
data: {
message: 'Hello MINA!'
}
})
12345
(二)组件属性
index.wxml
<view id="item-{{id}}"> </view>
1
index.js
Page({
data: {
id: 0
}
})
12345
(三)bool类型
不要直接写 checked=“false”,其计算结果是⼀个字符串
<checkbox checked="{{false}}"> </checkbox>
1
5.2 运算
(一)三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
1
(二)if 逻辑判断
<view wx:if="{{length > 5}}"> </view>
1
注意:花括号和引号之间如果有空格,将最终被解析成为字符串,切记不要留有空格
5.3 列表渲染
(一)wx:for
- 项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名
- 下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名
- wx:key ⽤来提⾼数组渲染的性能
- wx:key 绑定的值 有如下选择:
-
- string 类型,表⽰循环项中的唯⼀属性 如
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"
123
-
- 保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
123
代码:
<view wx:for="{{array}}" wx:key="id">
{{index}}: {{item.message}}
</view>
123
Page({
data: {
array: [{
id:0,
message: 'foo',
}, {
id:1,
message: 'bar'
}]
}
})
1234567891011
(二)block
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
1234
5.4 条件渲染
(一)wx:if
在框架中,使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
123
(二)hidden(类似 wx:if)
<view hidden="{{condition}}"> True </view>
1
频繁切换 ⽤ hidden
不常使⽤ ⽤ wx:if
5.5 事件绑定
⼩程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange 等
代码:
<!-- 1.需要给input标签绑定 input事件
绑定关键字 bindinput
2.如何获取输入框的值
通过事件源对象获取e.detail.value
3.把输入框的值赋值到data中
错误:this.data.num = e.detail.value
正确:
this.setData({
num: e.detail.value
})
4.需要加入一个点击事件
bindtab
无法在小程序中的事件直接传参
通过自定义属性的方式传递参数
事件源中获取自定义属性 -->
<input type="text" bindinput="handleInput"/>
<button bindtab="handleTab" data-operation="{{1}}">+</button>
<button bindtab="handleTab" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
1234567891011121314151617181920
Page({
data: {
num: '0'
},
handleInput(e) {
// 绑定的事件
console.log(e)
console.log(e.detail.value);
this.setData({
num: e.detail.value
})
},
// 加减按钮事件
handleTab(e) {
console.log(e);
// 获取自定义属性operation
const operation = e.currentTarget.dataset.operation
this.setData({
num: this.data.num + operation
})
}
})
12345678910111213141516171819202122
六、样式 WXSS
WXSS( WeiXin Style Sheets )是⼀套样式语⾔,⽤于描述 WXML 的组件样式。
与 CSS 相⽐,WXSS 扩展的特性有:
- 响应式⻓度单位 rpx
- 样式导⼊
6.1 尺寸单位
(1)rpx (responsive pixel): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上,屏幕宽度为 375px ,共有750个物理像素,则 750rpx = 375px = 750物理像
素 , 1rpx = 0.5px = 1物理像素
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
(2)建议: 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准
(3)使⽤步骤:
- 确定设计稿宽度 pageWidth
- 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
- 在less⽂件中,只要把设计稿中的 px => 750/pageWidth rpx 即可。
- 代码写法
/* width: 200rpx; */
width: calc(700rpx*100/375);
12
6.2 样式导⼊
- wxss中直接就⽀持,样式导⼊功能。
- 也可以和 less中的导⼊混⽤。
- 使⽤ @import 语句可以导⼊外联样式表,只⽀持相对路径。
示例代码:
/** common.wxss **/
.small-p {
padding:5px;
color:red;
}
12345
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
color:blue;
}
123456
6.3 选择器
特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效!
*{
margin:0;
padding:0;
box-sizing:border-box;
}
12345
⽬前⽀持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro"的组件 |
#id | #firstname | 选择拥有 id="firstname"的组件 |
element | view | 选择所有 view 组件 |
element,element | view,checkbox | 选择所有⽂档的 view 组件和所有的 checkbox 组件 |
nth-child(n) | view:nth-child(n) | 选择某个索引的标签 |
::after | view::after | 在 view 组件后边插⼊内容 |
::before | view::before | 在 view 组件前边插⼊内容 |
6.4 ⼩程序中使⽤less
(1)原⽣⼩程序不⽀持 less ,其他基于⼩程序的框架⼤体都⽀持,如 wepy , mpvue , taro 等。
(2)但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现
- 编辑器是 vscode
- 安装插件 easy less
- 在vs code的设置中加⼊如下配置:
"less.compile": {
"outExt": ".wxss"
}
123
- 在要编写样式的地⽅,新建 less ⽂件,如 index.less ,然后正常编辑即可。 会自动转换为 wxss代码的文件
七、 常见组件
重点讲解⼩程序中常⽤的布局组件
view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox 等
7.1 view
代替 原来的 div 标签
<view hover-class="h-class">
点击我试试
</view>
123
7.2 text
- ⽂本标签
- 只能嵌套text
- ⻓按⽂字可以复制(只有该标签有这个功能)
- 可以对空格 回⻋ 进⾏编码
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
selectable | Boolean | false | ⽂本是否可选 |
decode | Boolean | false | 是否解码 |
代码:
<text selectable="{{false}}" decode="{{false}}">
普 通<
</text>
123
7.3 image
- 图⽚标签,image组件默认宽度320px、⾼度240px
- ⽀持懒加载
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | 图⽚资源地址 | |
mode | String | “scaleToFill” | 图⽚裁剪、缩放的模式 |
lazy-load | Boolean | false | 图⽚懒加载 |
mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
模式 | 值 | 说明 |
---|---|---|
缩放 | scaleToFill | 不保持纵横⽐缩放图⽚,使图⽚的宽⾼完全拉伸⾄填满 image 元素 |
缩放 | aspectFit | 保持纵横⽐缩放图⽚,使图⽚的⻓边能完全显⽰出来。 |
缩放 | aspectFill | 保持纵横⽐缩放图⽚,只保证图⽚的短边能完全显⽰出来 |
缩放 | widthFix | 宽度不变,⾼度⾃动变化,保持原图宽⾼⽐不变 |
裁剪 | top | 不缩放图⽚,只显⽰图⽚的顶部区域 |
裁剪 | bottom | 不缩放图⽚,只显⽰图⽚的底部区域 |
裁剪 | center | 不缩放图⽚,只显⽰图⽚的中间区域 |
裁剪 | left | 不缩放图⽚,只显⽰图⽚的左边区域 |
裁剪 | right | 不缩放图⽚,只显⽰图⽚的右边区域 |
裁剪 | top left | 不缩放图⽚,只显⽰图⽚的左上边区域 |
裁剪 | top right | 不缩放图⽚,只显⽰图⽚的右上边区域 |
裁剪 | bottom left | 不缩放图⽚,只显⽰图⽚的左下边区域 |
裁剪 | bottom right | 不缩放图⽚,只显⽰图⽚的右下边区域 |
7.4 Swiper轮播图
swiper标签:滑块视图容器
swiper-item标签:滑块,默认宽度和⾼度都是100%
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | Boolean | false | 是否显⽰⾯板指⽰点 |
indicator-color | Color | rgba(0, 0, 0, .3) | 指⽰点颜⾊ |
indicator-active-color | Color | #000000 | 当前选中的指⽰点颜⾊ |
autoplay | Boolean | false | 是否⾃动切换 |
interval | Number | 5000 | ⾃动切换时间间隔 |
circular | Boolean | false | s是否循环轮播 |
示例代码:
<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" indicator-color="#0094ff" indicator-active-color="##ff0094">
<swiper-item>
<image src="//gw.alicdn.com/imgextra/i3/121/O1CN01d4N6Pw1ClSXpSiESc_!!121-0-lubanu.jpg"/>
</swiper-item>
<swiper-item>
<image src="//gw.alicdn.com/imgextra/i1/198/O1CN01snMZj51DKj2eIkiDC_!!198-0-lubanu.jpg"/>
</swiper-item>
<swiper-item>
<image src="https://img.alicdn.com/tps/i4/https://img.alicdn.com/tps/i4//TB1cZkvTeH2gK0jSZJnSuuT1FXa.jpg"/>
</swiper-item>
</swiper>
1234567891011
swiper {
width: 100%;
height: calc(100vw*352/1125);
/* height: 31.28vw; */
}
image {
width: 100%;
}
12345678
7.5 navigator导航栏
- 导航组件,类似超链接标签
- 块级元素,默认会换行,可直接加宽度和高度
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
target | String | self | 在哪个⽬标上发⽣跳转,默认当前⼩程序,可选值self/miniProgram |
url | String | 当前⼩程序内的跳转链接 | |
open-type | String | navigate | 跳转⽅式 |
open-type属性有效值:
值 | 说明 |
---|---|
navigate | 保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯ |
redirect | 关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到 tabbar ⻚⾯ |
switchTab | 跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯ |
reLaunch | 关闭所有⻚⾯,打开到应⽤内的某个⻚⾯ |
navigateBack | 关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈,决定需要返回⼏层 |
exit | 退出⼩程序,target='miniProgram’时⽣效 |
代码示例:
<text>pages/search/search.wxml</text>
<navigator url="/pages/logs/logs">日志页面</navigator>
<navigator url="/pages/index/index">跳转tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/logs/logs">日志页面 redirect</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab 跳转到tabbar页面</navigator>
<navigator open-type="reLaunch" url="/pages/img/img">reLaunch 可以随便跳</navigator>
123456
7.6 rich-text
富文本标签:可以将字符串解析成对应标签,类似 vue中 v-html
功能
代码示例:
<!-- 显示斜体hello world -->
<rich-text nodes="<i> hello world </i>"></rich-text>
12
nodes属性
nodes 属性⽀持 字符串 和 标签节点数组
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | string | 是 | ⽀持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | ⽀持部分受信任的属性,遵循 Pascal 命名法 |
children | ⼦节点列表 | array | 否 | 结构和 nodes ⼀致 |
⽂本节点:type = text
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
text | ⽂本 | string | 是 | ⽀持entities |
- nodes 不推荐使⽤ String 类型,性能会有所下降。
- rich-text 组件内屏蔽所有节点的事件。
- attrs 属性不⽀持 id ,⽀持 class 。
- name 属性⼤⼩写不敏感。
- 如果使⽤了不受信任的 HTML 节点,该节点及其所有⼦节点将会被移除。
- img 标签仅⽀持⽹络图⽚
7.7 button
属性 | 类型 | 值 | 必填 | 说明 |
---|---|---|---|---|
size | string | 默认值default,mini小尺寸 | 否 | 按钮的⼤⼩ |
type | string | default白色,primary绿色 ,warn红色 | 否 | 按钮的样式类型 |
plain | boolean | false | 否 | 按钮是否镂空,背景⾊透明 |
disabled | boolean | false | 否 | 是否禁⽤ |
loading | boolean | false | 否 | 名称前是否带 loading 图标 |
form-type | string | submit提交表单,reset重置表单 | 否 | ⽤于 组件,点击分别会触发 组件的submit/reset 事件 |
open-type | string | 否 | 微信开放能⼒ |
open-type 的合法值
值 | 说明 |
---|---|
contact | 打开客服会话,如果⽤⼾在会话中点击消息卡⽚后返回⼩程序,可以从bindcontact 回调中获得具体信息,具体说明 |
share | 触发⽤⼾转发,不能转发到朋友圈,具体说明 |
getPhoneNumber | 获取⽤⼾⼿机号,可以从bindgetphonenumber回调中获取到⽤⼾信息,但加密过,需要在后台服务器进行解析,具体说明 |
getUserInfo | 获取⽤⼾信息,可以从bindgetuserinfo回调中获取到⽤⼾信息,直接获取,不存在加密字段 |
launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明 |
openSetting | 打开授权设置⻚ |
feedback | 打开“意⻅反馈”⻚⾯,⽤⼾可提交反馈内容并上传⽇志,开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈,只能通过真机调试打开 |
open-type 的 contact的实现流程
- 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid
- 登录微信⼩程序官⽹,添加
客服 - 微信 - 为了⽅便演⽰,⽼师⾃⼰准备了两个账号(一)普通⽤⼾ A(二)客服-微信 B
代码示例:
<!-- search.wxml -->
<button type="warn" size="mini" loading="true" plain="true">
default
</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>
12345
// pages/search/search.js
Page({
getPhoneNumber(e) {
console.log(e);
}
})
123456
7.8 icon
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
type | string | 是 | icon的类型,有效值:success, success_no_circle,info, warn, waiting, cancel, download, search,clear | |
size | number/string | 23 | 否 | icon的⼤⼩ |
color | string | 否 | icon的颜⾊,同css的color |
代码示例:
<!-- search.wxml -->
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
123456789101112131415161718
// pages/search/search.js
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
}
})
12345678910111213
7.9 radio
- 可以通过 color属性来修改颜色
- 需要搭配 radio-group ⼀起使⽤
代码示例:
<radio-group bindchange="handleChange">
<radio color="red" value="male">男</radio>
<radio color="red" value="female">女</radio>
</radio-group>
<view>单选框选中的是{{gender}}</view>
12345
Page({
data() {
gender: ''
},
handleChange(e) {
console.log(e);
let gender = e.detail.value
this.setData({
// gender:gender
gender
})
}
})
12345678910111213
7.10 checkbox
- 可以通过 color属性来修改颜色
- 需要搭配 checkbox-group ⼀起使⽤
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>选中的水果有{{checkedList}}</view>
1234
Page({
data: {
list:[
{id:0,name:"苹果",value:"apple"},
{id:1,name:"葡萄",value:"grape"},
{id:2,name:"香蕉",value:"banana"},
],
checkedList: ''
},
handleItemChange(e) {
console.log(e);
const checkedList = e.detail.value
this.setData({
checkedList
})
}
})
1234567891011121314151617
八、自定义组件
类似vue或者react中的自定义组件
8.1 创建自定义组件
创建文件夹components文件夹之后,在创建一个组件的文件夹,然后右击tabs文件夹创建components组件就会生成如下代码结构:
例如要引用到某个页面中,代码如下:
{
"usingComponents": {
"tabs": "../../components/tabs/Tabs"
}
}
12345
<tabs></tabs>
1
8.2 组件构造器(Tabs.js)
Component 构造器可⽤于定义组件,调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。
定义段 | 类型 | 是否必填 | 描述 |
---|---|---|---|
properties | Object、Map | 否 | 组件的对外属性,是属性名到属性设置的映射表,参⻅下⽂ |
data | Object | 否 | 组件的内部数据,和 properties ⼀同⽤于组件的模板渲染 |
observers | Object | 否 | 组件数据字段监听器,⽤于监听 properties 和 data 的变化,参⻅ 数据监听器 |
methods | Object | 否 | 组件的⽅法,包括事件响应函数和任意的⾃定义⽅法,关于事件响应函数的使⽤,参⻅ 组件事件 |
created | Function | 否 | 组件⽣命周期函数,在组件实例刚刚被创建时执⾏,注意此时不能调⽤ setData ,参⻅ 组件⽣命周期 |
attached | Function | 否 | 组件⽣命周期函数,在组件实例进⼊⻚⾯节点树时执⾏,参⻅ 组件⽣命周期 |
ready | Function | 否 | 组件⽣命周期函数,在组件布局完成后执⾏,参⻅ 组件⽣命周期 |
moved | Function | 否 | 组件⽣命周期函数,在组件实例被移动到节点树另⼀个位置时执⾏,参⻅ 组件⽣命周期 |
detached | Function | 否 | 组件⽣命周期函数,在组件实例被从⻚⾯节点树移除时执⾏,参⻅ 组件⽣命周期 |
8.3 组件、自定义组件传参
子组件
<!--components/Tabs/Tabs.wxml-->
<text>components/Tabs/Tabs.wxml</text>
<view class="tabs">
<view class="tabs_title">
<view class="title_item {{item.isActive ? 'active':''}}" wx:for="{{tabs}}" wx:key="id"
bindtap="handleItemTab" data-index="{{index}}">
{{item.name}}
</view>
</view>
<view class="tabs_content">
<slot></slot>
</view>
</view>
123456789101112131415
// components/Tabs/Tabs.js
Component({
properties: {
tabs: {
type: Array,
value: []
}
},
// 1页面.js文件中存放事件回调函数的时候存放在data同层级下!
// 2组件.js文件中存放事件回调函数的时候必须要存在在methods中!
methods:{
handleItemTab(e) {
// 1绑定点击事件 需要在methods中绑定
// 2获取被点击的索引,通过事件传参
// 3获取原数组
// 4对数组循环
// 1给每一个循环性选中属性改为false
// 2给当前的索引的项添加激活选中效果就可以了
// console.log(e);
const {index} = e.currentTarget.dataset //es6 语法解构赋值,严谨写法,先复制一份数据,保持原有数据不变
// 5触发父组件的自定义事件,同时将子组件数据传递给父组件
this.triggerEvent('itemChange',{index})
}
}
})
1234567891011121314151617181920212223242526
/* components/Tabs/Tabs.wxss */
.tabs {
}
.tabs_title{
display: flex;
padding: 10rpx 0;
}
.title_item{
flex: 1;
/* justify-content: center; */
/* display: flex; */
/* align-items: center; */
text-align: center;
}
.active{
color: red;
border-bottom: 5rpx solid currentColor;
}
.tabs_content{
margin-top: 100rpx;
}
12345678910111213141516171819202122
父组件
<!-- 这里子向父传递数据,通过事件方式,在子组件的标签加bind+事件名称="",别忘了加bind -->
<tabs tabs="{{tabs}}" binditemChange="handleItemChange1">
<block wx:if="{{tabs[0].isActive}}">首页</block>
<block wx:elif="{{tabs[1].isActive}}">原创</block>
<block wx:elif="{{tabs[2].isActive}}">分类</block>
<block wx:else>关于</block>
</tabs>
1234567
// pages/mine/mine.js
Page({
data: {
tabs: [
{id:0, name:"首页", isActive:true},
{id:1, name:"原创", isActive:false},
{id:2, name:"分类", isActive:false},
{id:3, name:"关于", isActive:false},
]
},
handleItemChange1(e) {
// console.log(e);
const {index} = e.detail
let {tabs} =this.data
// [].forEach遍历数组遍历数组的时候修改了v,也会导致源数组被修改
tabs.forEach((v,i) => i===index?v.isActive=true:v.isActive=false);
this.setData({
tabs
})
}
})
12345678910111213141516171819202122
实现的需求:
九、小程序生命周期
9.1 应用生命周期
//app.js
App({
// 1 应用第一次启动的就会触发的事件
onLaunch() {
// 在应用第一次启动的时候获取用户的个人信息
console.log("onLaunch")
// js的方式来跳转
// wx.navigateTo({
// url: '/11/22/33'
// })
},
// 2 应用被用户看到
onShow(){
//对应用的数据或者页面效果重置
console.log ("onShow")
},
// 3 应用被隐藏了
onHide(){
//暂停或者清除定时器
console.log("Hide");
},
// 4 应用的代码发生了报错的时候就会触发
onError(err){
//在应用发生代码报错的时候,收集用户的错误信息,通过异步请求将错误的信息发送后台去
console.log("onError")
console.log (err)
},
// 5 页面找不到就会触发
// 应用第一 次启动的时候,如果找不到第一个入口页面 才会触发
onPageNotFound(){
//如果页面不存在了通过js的方式来重新跳转页面重新跳到第二个首页
//不能跳到tabbar页面导航组件类似
wx.navigateTo({
url: '/pages/logs/logs'
});
console.log('onPageNotFound');
},
})
1234567891011121314151617181920212223242526272829303132333435363738
9.2 页面生命周期
// pages/search/search.js
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// onLoad发送异步请求来初始化页面数据
console.log("onLoad");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('onReady');
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onShow');
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('onHide');
},
/**
* 生命周期函数--监听页面卸载,也可以通过点击超链接来演示
*/
onUnload: function () {
console.log('onUnload');
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("onPullDownRefresh");
// 页面的数据或者效果重新刷新
},
/**
* 页面上拉触底事件的处理函数,需要让页面出现上下滚动才行
*/
onReachBottom: function () {
// 上拉加载下一页数据
console.log('onReachBottom');
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.log('onShareAppMessage');
},
/**
* 页面滚动就可以触发
*/
onPageScroll(){
console.log('onPageScroll');
},
/**
* 页面的尺寸发生改变的时候触发
* 小程序发生了横屏竖屏切换的时候触发,需要在search.json界面添加如下代码
* {
"pageOrientation": "auto"
}
*/
onResize() {
console.log('onResize');
},
/**
* 1 必须要求当前页面也是tabbar页面
* 2 点击的自己的tab item的时候才触发
*/
onTabItemTap() {
console.log('onTabItemTap');
}
})
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980