开发文档

小程序简介 | 微信开放文档

1.微信小程序的环境准备

1.1注册账号

1.2获取APPID

是开发者唯一的身份认证，应用要发布要上线必须提供APPID

1.3开发工具

由于微信小程序自带开发者工具的编码体验不好，因此建议使用VS code 加微信小程序开发工具来实现编码，VS code负责敲代码，微信开发工具负责

2.第一个微信小程序

3.微信开发者工具介绍

4.小程序结构目录

4.1小程序文件结构和传统web对比

4.2基本的项目目录

5.小程序配置文件

5.1全局配置 app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{"pages": ["pages/index/index","pages/logs/index"],"window": {"navigationBarTitleText": "Demo"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/logs/index","text": "日志"}]},"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": true
}

5.1.1tabbar

5.2页面配置page.json

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "微信接口功能演示","backgroundColor": "#eeeeee","backgroundTextStyle": "light"
}

5.3sltemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

例1：

{"rules":[{"action": "allow","page": "*"}]
}

所有页面都会被微信索引（默认情况）

例2：

{"rules":[{"action": "disallow","page": "path/to/page"}]
}

配置 path/to/page 页面不被索引，其余页面允许被索引

这里不一一举例，想看更详情的内容可以到官方文档查看 

6.模板语法

1 text 相当于以前web中的 span标签 行内元素 不换行

2 view 相当于以前web中的 div标签 块级元素 换行

3 checkbox 以前的复选框标签

6.1数据绑定

在js中

Page({/*** 页面的初始数据*/data: {msg: "hello mina",num:10000,isgirl:false,person:{age:74,height:145,weight:200,name:"富婆"},ischecked:false},})

在wxml中

<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型 -->
<view>是否伪娘：{{isgirl}}</view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>
<!-- 6 使用bool类型充当属性 checked字符串和花括号之间一定不要存在空格 否则会导致识别失败，以下写法是错误示范<checkbox checked=" {{ischecked}}"></checkbox>-->
<view>
<checkbox checked="{{ischecked}}"></checkbox>
</view>

6.2运算

<!-- 7 运算 => 表达式1.可以在花括号中加入表达式  表达式不等于语句2.表达式指的是一些简单运算 数字运算 字符串拼接 逻辑运算1 数字的加减2 字符串拼接3 三元表达式3.语句1.复杂的代码段if elseswitchdo whilefor--><view>{{1+1}}</view><view>{{'1'+'1'}}</view><view>{{10%2===0 ? '偶数' : '奇数'}}</view>

6.3列表渲染

在js中

Page({/*** 页面的初始数据*/data: {person:{age:74,height:145,weight:200,name:"富婆"},ischecked:false,list:[{id:0,name:"猪八戒"},{id:1,name:"天蓬元帅"},{id:2,name:"悟能"},]},})

在wxml中

<!-- 8 列表循环 1.wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"2.wx:key="唯一的值" 用来提高列表的渲染性能1 wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性2  wx:key="*this" 就是表示你的数组是一个普通数组，*this表示是循环项[1,2,3,44,5] ["1","22","desv"]3.当出现数组的嵌套循环的时候尤其要注意以下绑定的名称不要重名wx:for-item="item" wx:for-index="index"4.默认情况下我们不写 wx:for-item="item" wx:for-index="index"，小程序默认把循环项和索引的名称叫做item和index只有一层循环的话（wx:for-item="item" wx:for-index="index"）可以省略-->
<view><view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">索引:{{index}}--值:{{item.name}}</view>
</view>
<!-- 9 对象循环1.wx:for="{{数组或者对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"2.循环对象的时候最好把item和index的名称都修改一些wx:for-item="value" wx:for-index="key"-->
<view><view>对象循环</view><view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">属性：{{key}}--值：{{value}}</view>
</view><!-- 10 block 当循环某些数据或者渲染某些内容的时候，如果不想额外加一层外边的标签，可以用block标签占位1 占位符的标签2 写代码的时候可以看到这标签存在3 页面渲染小程序会把它移除掉-->
<view><block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list">索引:{{index}}--值:{{item.name}}</block>
</view>

6.4条件渲染

<!-- 11 条件渲染1 wx:if="{{true/false}}"if , else , if elsewx:if  为true直接显示1  false        falsewx:elif               为true显示2    falsewx:else                              显示32 hidden1.在标签上直接加入属性hidden  隐藏2.hidden="{{true}}"   true 隐藏 ，false 显示3 什么场景下用哪个1.当标签不是频繁的切换显示优先使用wx:if,切换显示方式：直接把标签从页面结构移除2.当标签频繁的切换显示优先使用hidden，切换显示方式：通过添加样式来实现hidden属性不要和样式display 一起使用隐藏失效--><view><view>条件渲染</view><view wx:if="{{true}}">显示</view><view wx:if="{{false}}">隐藏</view><view wx:if="{{false}}">1</view><view wx:elif="{{false}}">2</view><view wx:else>3</view><view hidden>hidden1</view><view hidden="{{false}}">hidden2</view><view>---------------</view><view wx:if="{{false}}">wx:if</view><view hidden style="display: flex;">hidden</view>
</view>

7.小程序事件的绑定

案例：事件1，在 输入框输入的内容实时映射到下面的标签中

事件2，点击按钮使内容加一或者减一

在wxml中

<!-- 1 需要给input标签绑定input事件，绑定关键字 bindinput2 如何获取输入框的值通过事件源对象来获取  e.detail.value3 把输入框的值赋值到data当中，不能直接this.data.num=e.detail.value或者this.num=e.detail.value，正确写法this.setData({num:e.detail.value })4 需要加入一个点击事件，关键字 bindtap1.无法在小程序当中的事件中直接传参2.通过自定义属性的方式来传递参数3.事件源中获取自定义属性  e.currentTarget.dataset.operation4.获取num值this.setData({num: this.data.num + operation})-->
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}
</view>

在js中

Page({/*** 页面的初始数据*/data: {num:0,},// 输入框的input事件的执行逻辑handleInput(e){// console.log(e);// console.log( e.detail.value);this.setData({num:e.detail.value})},// 加减按钮事件handletap(e){// console.log(e);// 获取自定义属性 operationconst operation=e.currentTarget.dataset.operation;this.setData({num: this.data.num + operation})},
})

8.样式wxss

8.1尺寸单位

rpx:可以根据屏幕宽度进行自适应。规定屏幕的宽为750rpx,与其他单位换算可以用calcs属性。

  • 如在 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

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

8.2样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {padding:15px;
}

8.3选择器

小程序不支持通配符 *

目前支持的选择器有：

选择器 样例 样例描述
.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 组件前边插入内容

8.4小程序中使用less

原生小程序不支持less，可以用一下方式来实现

1.编辑器是VS code

2.安装插件 easy less

3.在VS code的设置中加入如下配置

  "less.compile": {"outExt": ".wxss"}

4.在要编写样式的地方新建less文件，如index.less，然后正常编辑即可

9.常见组件

9.1view

代替原来的div标签

9.2text

1.文本标签  2.只能嵌套text   3.长按文字可以复制（只有这个标签有这个功能）

4.可以对空格回车编码

view和text组件更多详情可见官方文档

9.3image

1.图片标签，image组件默认宽度320px,高度240px  2.支持懒加载

<!-- image 图片标签1 src 指定要加载的图片的路径图片存在默认的宽度和高度 320*2402 mode 决定图片内容如何和图片标签宽高做适配1.scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素2.aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。常用 轮播图等3.aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 少用4.widthFix 宽度不变，高度自动变化，保持原图宽高比不变  常用3.小程序当中的图片支持懒加载 lazy-load  lazy-load会自己判断 当图片出现在视口上下三屏的高度之内的时候自己开始加载图片-->
<image mode="aspectFit" lazy-load="" src="https://c-ssl.duitang.com/uploads/item/202006/17/20200617172546_hcwce.thumb.1000_0.jpg"></image>

9.4swiper

<!-- 1 轮播图外层容器 swiper2 每一个轮播项swiper-item3 swiper标签存在默认样式1.width 100%2.height 150px  image默认宽度和高度320*2403.swiper 高度无法实现由内容撑开4 先找出来原图的宽高，等比例给swiper定宽度和高度  原图尺寸511*340swiper高度 =swiper宽度 * 原图高度 / 原图宽度heigth:100vw * 340 / 5115 autoplay 自动轮播6 interval 自动切换时间间隔  7 circular 衔接滑动8 indicator-dots 显示面板指示点9 indicator-color 指示点颜色10 indicator-active-color 当前选中的指示点颜色--><swiper autoplay interval="1000" circular   indicator-dots  indicator-color="#0094ff" indicator-active-color="#ff0094"><swiper-item><image mode="widthFix" src="https://inews.gtimg.com/newsapp_bt/0/13040495555/1000"></image></swiper-item><swiper-item><image mode="widthFix" src="https://inews.gtimg.com/newsapp_bt/0/13040495555/1000"></image></swiper-item><swiper-item><image mode="widthFix" src="https://inews.gtimg.com/newsapp_bt/0/13040495555/1000"></image></swiper-item></swiper>

9.5navigator

<!-- 导航组件 navigator1 是块级元素默认会换行，可以直接加宽度和高度2 url 要跳转的页面路径，可以绝对路径也可以相对路径3 target 要跳转到当前的小程序 还是其他的小程序页面1.self 默认值 当前小程序2.miniProgram 其他小程序4 open-type 跳转方式 1.navigate 默认值 保留当前页面，跳转到应用内某个页面，但不能跳到tabbar页面2.redirect 关闭当前页面，跳转到应用内某个页面，但不能跳到tabbar页面3.switchTab 跳转到tabbar页面，并关闭其他所有非tabbar页面4.reLaunch 关闭所有页面，打开到应用内的某个页面--><navigator url="../deom01/deom01">轮播图页面</navigator><navigator open-type="redirect" url="../deom01/deom01">轮播图页面</navigator><navigator open-type="switchTab" url="../mine/mine">tabbar页面</navigator><navigator open-type="reLaunch" url="../mine/mine">任意页面</navigator>

9.6rich-text

 <!-- rich-text 富文本标签1 nodes属性来实现1.接收标签字符串  最常用2.接收对象数组  --><rich-text nodes="{{html}}"></rich-text>
Page({/*** 页面的初始数据*/data: {// 1.标签字符串// html:'<span class="rax-text-v2 MainNav--mainNavTitle--1BwRCeZ" data-spm-anchor-id="875.7931836.0.i0.48ad4265OeuG4R">天猫会员</span>'// 2.对象数组html: [{// 1 div标签 name属性来指定name: "div",// 2 标签上有那些属性attrs: {// 标签上的属性 class styleclass: "my_div",style: "color:red;"},// 3 子节点 children要接收的数据类型和nodes第二种渲染方式的数据一致children: [{name: "p",attrs: {},// 放文本children:[{type:"text",text:"hello"}]}]}]}
})

9.7button

 <!-- button 开发能力open-type1 contact   打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*小程序插件中不能使用*） 需要在微信小程序的后台配置  只能通过真机调试打开2 share   触发用户转发，使用前建议先阅读使用指引   能把当前小程序转发到微信朋友中，不能分享到朋友圈3 getPhoneNumber    获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 （*小程序插件中不能使用*） 结合一个事件来使用，不是企业号没有权限来获取用户的手机号码1.绑定一个事件 bindgetphonenumber2.在事件的回调函数中通过参数来获取信息3.获取到的信息已经加密过了需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了4 getUserInfo   获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （*小程序插件中不能使用*） 1.使用方法和获取用户手机号码类似2.可以直接获取不存在加密字段5 launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明1.需要先在APP中通过APP的某个链接打开小程序2.在小程序中再通过这个功能重新打开APP    6 openSetting   打开授权设置页1.授权页面中只会出现用户曾经点击过的授权    7 feedback  打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容    1.只能通过真机调试打开8 chooseAvatar  获取用户头像，可以从bindchooseavatar回调中获取到头像信息-->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
<button open-type="chooseAvatar">chooseAvatar</button>
Page({/*** 页面的初始数据*/data: {// 获取用户的手机号码信息getPhoneNumber(e){console.log(e);},// 获取用户个人信息getUserInfo(e){console.log(e);},

9.8icon

图标。组件属性的长度单位默认为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

示例代码

<!-- icon 小程序中的图标1 type 图标的类型success, success_no_circle, info, warn, waiting, cancel, download, search, clear2 size 图标大小3 color 图标的颜色--><icon type="success" size="60" color="#0094ff"></icon>

9.9radio

单选项目。

属性 类型 默认值 必填 说明 最低版本
value string 否 radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value 1.0.0
checked boolean false 否 当前是否选中 1.0.0
disabled boolean false 否 是否禁用 1.0.0
color string #09BB07 否 radio的颜色，同css的color 1.0.0

示例代码

<!-- radio 单选框1 radio标签必须和父元素radio-group来使用2 value 选中的单选框的值3 需要给radio-group绑定change事件4 需要在页面中选中的值--><radio-group bindchange="handleChange">
<radio color="red" value="male">男</radio>
<radio color="red" value="female">女</radio></radio-group><view>您选择的是：{{gender}}</view>
Page({/*** 页面的初始数据*/data: {gender:"",},handleChange(e){// console.log(e);// 1 获取单选框中的值let gender=e.detail.value;// 2 把值赋值给data中的数据this.setData({gender})}
})

9.10CheckBox

多选项目。

属性 类型 默认值 必填 说明 最低版本
value string 否 checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value 1.0.0
disabled boolean false 否 是否禁用 1.0.0
checked boolean false 否 当前是否选中，可用来设置默认选中 1.0.0
color string #09BB07 否 checkbox的颜色，同css的color 1.0.0

示例代码

<!-- checkbox 复选框1 checkbox标签必须和父元素checkbox-group来使用2 value 选中的单选框的值3 需要给checkbox-group绑定change事件4 需要在页面中选中的值 -->
<view><checkbox-group bindchange="handleItemChange"><checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox></checkbox-group><view>选中的水果:{{ checkedList}}</view>
</view>
Page({/*** 页面的初始数据*/data: {list:[{id:0,name:"苹果",value:"apple"},{id:0,name:"草莓",value:"grape"},{id:0,name:"香蕉",value:"banana"},],checkedList:[]},// 复选框的选中事件handleItemChange(e){// console.log(e);// 1 获取被选中的复选框的值const  checkedList=e.detail.value;// 2 进行复制this.setData({checkedList})}
})

10.自定义组件

10.1创建自定义组件

10.1.1新增组件

首先在根目录下新建文件夹components，在components下新建Tabs文件夹，然后右击Tabs文件   夹选择【新建component】输入Tabs并回车,就创建了名为Tabs的组件

    

10.1.2声明组件

那个页面要使用自定义组件，就在那个页面的JSON文件中声明

{"usingComponents": {"Tabs":"../../components/Tabs/Tabs"}
}

10.1.3使用组件

在wxml中写下<Tabs></Tabs>即可

<Tabs></Tabs>

10.2 自定义组件--Tabs样式优化

<!--components/Tabs/Tabs.wxml-->
<view class="tabs"><view class="tabs_title"><!-- 不能写死了 --><!-- <view class="title_item active">首页</view><view class="title_item">原创</view><view class="title_item">分类</view><view class="title_item">关于</view> --><view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isactive?'active' : ''}}">{{item.name}}</view></view><view class="tabs_content">内容</view>
</view>
// 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},]},
})
/* components/Tabs/Tabs.wxss */
.tabs_title{display: flex;padding: 10rpx 0;
}
.title_item{flex: 1;display: flex;justify-content: center;align-items: center;
}
/* 激活选中效果 active */
.active{color: red;border-bottom: 5rpx solid currentcolor;
}

10.3 自定义组件--标题激活选中

// components/Tabs/Tabs.js
Component({/* 1 页面js文件中存放事件回调函数的时候，存放在data同层级下2 组件js文件中存放事件回调函数的时候，存放在methods中 *//*** 组件的方法列表*/methods: {handleItemtap(e){     /* 1 绑定点击事件，需要在methods中绑定2 获取被点击的索引3 获取原数组4 对数组循环1.给每一个循环项选中属性改为false2.给当前的索引的项添加激活选中效果*/// 2 获取索引// console.log(e);const {index}=e.currentTarget.dataset;// 3 获取data中的原数组//解构  对复杂类型进行解构的时候复制了一份变量的引用而已//最严谨的做法是重新拷贝一份，再对这个数组备份进行处理// let tabs=JSON.parse(JSON.stringify(this.data.tabs));  parse深拷贝//不要直接修改this.data.数据let {tabs}=this.data;// let {tabs}=this.data;相当于let tabs=this.data.tabs  tabs.forEach===this.data.tabs.forEach// 4 循环数组// [].forEach 遍历数组 遍历数组的时候修改了v(每一个循环项),也会导致原数组被修改了tabs.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false);this.setData({tabs})}}
})

10.4 自定义组件--父向子传递数据

在父页面wxml中：

<!--pages/deom03/deom03.wxml-->
<!-- 1 父组件（页面）向子组件传递数据 通过标签属性方式来传递1.在父组件定义属性2.在子组件上进行接收3.在子组件中把这个数据当成是data中的数据直接用即可-->
<!-- <Tabs aaa="a123a"></Tabs> -->
<Tabs tabs="{{tabs}}"></Tabs>

在父页面js中：

// pages/deom03/deom03.js
Page({/*** 页面的初始数据*/data: {tabs:[{id:0,name:"首页",isactive:true},{id:1,name:"原创",isactive:false},{id:2,name:"分类",isactive:false},{id:3,name:"关于",isactive:false},]},})

在子组件js中：

// components/Tabs/Tabs.js
Component({/*** 组件的属性列表* 里面存放的是要从父组件中接收的数据*/properties: {// // 要接收的数据的名称// aaa:{//   // type 要接收的数据的类型//   type:"String",//   // value 默认值//   value:""// }tabs:{type:Array,value:[]}},
})

10.5 自定义组件--子向父传递数据

在子组件js中：

methods: {handleItemtap(e){     /* 1 绑定点击事件，需要在methods中绑定2 获取被点击的索引3 获取原数组4 对数组循环1.给每一个循环项选中属性改为false2.给当前的索引的项添加激活选中效果5 点击事件触发的时候触发父组件中的自定义事件同时传递数据给父组件this.triggerEvent("父组件自定义事件的名称"，要传递的参数)*/// 2 获取索引// console.log(e);const {index}=e.currentTarget.dataset;// 5 触发父组件中的自定义事件同时传递数据给父组件this.triggerEvent("itemChange",{index});// // 3 获取data中的原数组// //解构  对复杂类型进行解构的时候复制了一份变量的引用而已// //最严谨的做法是重新拷贝一份，再对这个数组备份进行处理// // let tabs=JSON.parse(JSON.stringify(this.data.tabs));  parse深拷贝// //不要直接修改this.data.数据// let {tabs}=this.data;// // let {tabs}=this.data;相当于let tabs=this.data.tabs  tabs.forEach===this.data.tabs.forEach// // 4 循环数组// // [].forEach 遍历数组 遍历数组的时候修改了v(每一个循环项),也会导致原数组被修改了// tabs.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false);// this.setData({//   tabs// })}}
})

在父页面wxml中：

<!--pages/deom03/deom03.wxml-->
<!-- 1 父组件（页面）向子组件传递数据 通过标签属性方式来传递1.在父组件定义属性2.在子组件上进行接收3.在子组件中把这个数据当成是data中的数据直接用即可2 子向父传递数据 通过事件的方式传递1.在父组件的标签上加入一个自定义事件-->
<!-- <Tabs aaa="a123a"></Tabs> -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

在父页面js中：

// pages/deom03/deom03.js
Page({// 自定义事件，用来接收子组件传来的数据handleItemChange(e){// console.log(e);// 接收传递过来的参数const {index}=e.detail;console.log(index);// 3 获取data中的原数组let {tabs}=this.data;// 4 循环数组tabs.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false);this.setData({tabs})}})

10.6 自定义组件--slot

在子组件中：

  <view class="tabs_content"><!-- slot标签 其实就是一个占位符 插槽等到父组件调用的子组件的时候再传递标签过来，最终这些被传递的标签就会替换slot插槽的位置--><slot></slot></view>
</view>

在父组件中：

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"><block wx:if="{{tabs[0].isactive}}">0</block><block wx:elif="{{tabs[1].isactive}}">1</block><block wx:elif="{{tabs[2].isactive}}">2</block><block wx:else>3</block>
</Tabs>

10.7 组件的其他属性

定义段 类型 是否必填 描述 最低版本
properties Object Map 否 组件的对外属性，是属性名到属性设置的映射表
data Object 否 组件的内部数据，和 properties 一同用于组件的模板渲染
observers Object 否 组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器 2.6.1
methods Object 否 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件间通信与事件
behaviors String Array 否 类似于mixins和traits的组件间代码复用机制，参见 behaviors
created Function 否 组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData )
attached Function 否 组件生命周期函数-在组件实例进入页面节点树时执行)
ready Function 否 组件生命周期函数-在组件布局完成后执行)
moved Function 否 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)
detached Function 否 组件生命周期函数-在组件实例被从页面节点树移除时执行)
relations Object 否 组件间关系定义，参见 组件间关系
externalClasses String Array 否 组件接受的外部样式类，参见 外部样式类
options Object Map 否 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举）
lifetimes Object 否 组件生命周期声明对象，参见 组件生命周期 2.2.3
pageLifetimes Object 否 组件所在页面的生命周期声明对象，参见 组件生命周期 2.2.3
definitionFilter Function 否 定义段过滤器，用于自定义组件扩展，参见 自定义组件扩展 2.2.3

11.应用的生命周期

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

参数

Object object

属性 类型 默认值 必填 说明 最低版本
onLaunch function 否 生命周期回调——监听小程序初始化。
onShow function 否 生命周期回调——监听小程序启动或切前台。
onHide function 否 生命周期回调——监听小程序切后台。
onError function 否 错误监听函数。
onPageNotFound function 否 页面不存在监听函数。 1.9.90
onUnhandledRejection function 否 未处理的 Promise 拒绝事件监听函数。 2.10.0
onThemeChange function 否 监听系统主题变化 2.11.0
其他 any 否 开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问 
// app.js
App({// 1 应用第一次启动就会触发的事件onLaunch() {   // 在应用第一次启动的时候获取用户的个人信息console.log("onLaunch");},// 2 应用被用户看到onShow(){// 对应用的数据或者页面效果重置console.log("onShow");},// 3 应用被隐藏了onHide(){// 暂停或者清除定时器console.log("onHide");},// 4 应用的代码生发了报错的时候就会触发onError(){// 在应用发生代码报错的时候收集用户的错误信息，通过异步请求将错误的信息发送到后台console.log("onError");console.log(err);},// 5 页面找不动就会触发// 应用第一次启动的时候如果找不到第一个入口页面才会触发onPageNotFound(){// 如果页面不存在了，通过js的方式来重新跳转页面，重新跳到第二个首页// 不能跳到tabbar页面wx.navigateTo({url: '/pages/deom01/deom01',})console.log(" onPageNotFound");}
})

12.页面的生命周期

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

参数

Object object

属性 类型 默认值 必填 说明
data Object 页面的初始数据
options Object 页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1
onLoad function 生命周期回调—监听页面加载
onShow function 生命周期回调—监听页面显示
onReady function 生命周期回调—监听页面初次渲染完成
onHide function 生命周期回调—监听页面隐藏
onUnload function 生命周期回调—监听页面卸载
onPullDownRefresh function 监听用户下拉动作
onReachBottom function 页面上拉触底事件的处理函数
onShareAppMessage function 用户点击右上角转发
onShareTimeline function 用户点击右上角转发到朋友圈
onAddToFavorites function 用户点击右上角收藏
onPageScroll function 页面滚动触发事件的处理函数
onResize function 页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap function 当前是 tab 页时，点击 tab 时触发
onSaveExitState function 页面销毁前保留状态回调
其他 any 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

示例代码

// pages/deom04/deom04.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log("onLoad");// onLoad发送异步请求来初始化页面数据},/*** 生命周期函数--监听页面显示*/onShow: function () {console.log("onShow");},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {console.log("onReady");},/*** 生命周期函数--监听页面隐藏 可以通过隐藏应用和跳转页面实现*/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: function () {console.log("onPageScroll");},/* ** 页面尺寸改变时触发 *  小程序发生了横屏竖屏切换的时候触发*/onResize: function(){console.log("onResize");},/* ** 当前是 tab 页时，点击 tab 时触发 (点击自己的tab item才触发)*/onTabItemTap: function(){console.log("onTabItemTap");}
})

【微信小程序】微信小程序基础知识篇相关推荐

  1. 微信小程序开发数据缓存基础知识辨析以及运用实例

    微信小程序开发数据缓存基础知识辨析以及运用实例 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...

  2. 程序员必备计算机基础知识总结电子书下载

    程序员必备计算机基础知识总结电子书下载 日常 9分钟前 2阅读0点赞0评论 给大家推荐一本超级经典的计算机基础知识的书! 这本书主要是程序员必知的硬核基础知识,非常经典的入门书籍,小编吧内容看了适合看 ...

  3. 计算机中央处理器相关知识,软考程序员考点计算机硬件基础知识之中央处理器CPU...

    下面希赛小编为大家整理的软考程序员考点计算机硬件基础知识之中央处理器CPU,希望能帮助学友们.具体内容如下: 中央处理器 中央处理器(CPU,Central Processing Unit)是一块超大 ...

  4. jQuery小测试系列之jQuery基础知识

    日期:2012-4-17  来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识

  5. Android camera（4）---Android Camera开发之基础知识篇

    Android Camera开发之基础知识篇 转自:https://blog.csdn.net/feiduclear_up/article/details/51968975#jump5 概述 Andr ...

  6. 超详细的Java面试题总结（二）之Java基础知识篇

    系列文章: 超详细的Java面试题总结(一)之Java基本知识 超详细的Java面试题总结(二)之Java基础知识篇 超详细的Java面试题总结(三)之Java集合篇常见问题 超详细的Java面试题总 ...

  7. 测试岗位面试前复习之【测试基础知识篇】

    测试基础知识篇 一.app测试相关 1.android与ios的app测试的区别: 2.app测试和web测试的重点: 3.性能测试考量的指标: 4.app的性能测试,需要重点关注哪些方面? 5.站在 ...

  8. 高通平台8953 Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇)

    本系列导航: 高通平台8953  Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇) 高通平台8953 Linux DTS(Device Tree Source ...

  9. 基金投资从入门到精通之一：基础知识篇

    第一篇 基础知识篇 第一节      认识基金 基金投资入门系列--基础知识 1.什么是证券投资基金? 通俗地说,证券投资基金是通过汇集众多投资者的资金,交给银行保管,由专业的基金管理公司负责投资于股 ...

  10. 工商管理学计算机应用基础题,计算机应用基础全国网考选择题库（计算机基础知识篇）.pdf...

    计算机应用基础全国网考选择题库(计算机基础知识篇).pdf 1 2010 年计算机应用基础全国网考选择题库(计算机基础知识篇) (注计算机应用基础题库已变更,原教材附带蓝色光盘内选择题库不全.) 1. ...

最新文章

  1. Linux上安装jdk并配置环境变量
  2. MYSQL远程连接数据库
  3. 系统设计：性能指标、伸缩性、扩展性、可用性、安全性
  4. java自动推断类型_Java 7的类型推断
  5. 剑指offer面试题[40]-数组中只出现一次的数字
  6. unity 彩带粒子_Unity3d粒子特效：制作火焰效果
  7. bzoj 3351 [ioi2009]Regions
  8. mtk 充电出错问题
  9. vue3.0中使用echarts
  10. java 观察者模式类图_设计模式——观察者模式
  11. 坑爹的工行Chrome网银插件
  12. 微信公众平台开发(8)--微信公众平台接入完整实例
  13. MAC装虚拟机显示打不开 /dev/vmmon: 断裂管道 请确保已载入内核模块 ’vmmon’
  14. python列表创建操作_python列表操作
  15. Cadence软件输出PDF原理图时页码重复或乱序问题
  16. android耗电怎么解决方法,Android手机媒体进程耗电严重怎么办
  17. 并行测试和变异测试三篇文献总结(二)
  18. 浏览器调试 console.table() 方法，方便查看json和数组数据内容
  19. DXO 评测华为p20pro说的halo effect是什么
  20. 王者s19服务器维护,王者S19丨4个必须知道的调整！最后一个不知没法玩！

热门文章

  1. 用HEdit解决因修改用户文件夹名在打开pip时遇到Fatal error in launcher: Unable to create process using 的问题
  2. cad刷新快捷键_CAD快捷键大全清单，送给每一位CAD初学者，非常实用的干货
  3. C# WebSocket(Fleck) 客户端:html Winfrom
  4. oracle中删除级联方法,Oracle 外键级联删除
  5. 网络工程师必备技术汇总
  6. php 转ascii编码,php与ascii码的转换
  7. nhieushop chovt.com hoan nghenh cac ban ghe tham nhe - chovt hovabbkb
  8. OpenJ_Bailian - 2714 求平均年龄
  9. Linux中的虚拟机图形界面安装步骤，批量完成虚拟机硬件配置
  10. 句法引导的机器阅读理解