pages用来存放所有小程序的页面
小程序官方建议把所有小程序的页面都存放在pages目录中 ,一档都的文件夹存在
其中,每个页面由4个 基本文件组成,他们分别是:
.js
文件:页面的脚本文件,存放页面的数据、事件处理函数等.json
文件:当前页面的配置文件,配置窗口的外观 、表现等,页面中的配置项会覆盖 app.json
的window中相同的配置项.wxml
文件:页面的模板结构文件.wxss
文件:当前页面的样式表文件utils用来存放工具性质的模块(例如:格式化时间的自定义模块)
app.js小程序项目的入口文件
app.json小程序项目的全程配置文件,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等,Demo项目里边 的app.json
配置 内容如下:
简单了解这4个配置项的作用:
pages
:用来记录当前小程序所有页面的路径
- 新建小程序页面:只需要在
app.json
->pages
中新增 页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件- 修改项目首页:只需要调整
app.json
->pages
数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面 ,当作项目首页进行渲染
window
:全局定义小程序所有页面 的背景色、文件颜色等style
:全局定义小程序组件所使用的样式版本sitemapLocation
:用来指明sitemap.json
的位置app.wxss小程序项目的全局样式文件
project.config.json项目的配置文件,用来 记录对小程序开发工具所做的个性化配置,例如:
setting
中保存了编译相关的配置projectname
中保存的是项目名称appid
中保存的是小程序的账号IDsitemap.json用来配置小程序及其页面是否允许被微信索引
JSON配置文件的作用:
JSON是一种数据格式,在实际开发中,JSON总是以配置文件的形式出现。小程序项目中也不例外:通过不同的.json
配置 文件,可以对小程序项目进行不同级别的配置
小程序项目中有4种json配置文件,分别 是:
- 项目根目录中的
app.json
配置文件- 项目根目录中的
project.config.json
配置文件- 项目根目录中的
sitemap.json
配置文件- 每个页面文件夹中的
.json
配置文件
超链接
WXSS和CSS区别
app.wxss
会作用于所有小程序页面.wxss
样式仅对当前页面生效rpx尺寸单位
.js
文件.js
文件来处理用户的操作 。例如响应用户的点击、获取用户的位置等等.js
文件的分类
app.js
:是整个小程序的入口文件,通过调用App()
函数来启动整个小程序.js
文件:是页面的入口文件,通过调用Page()
函数来创建并运行页面.js
文件:是普通的功能模块文件,用来封装公共的函数或属性供页面使用app.json
全局配置文件app.js
小程序入口文件,调用App()
创建小程序实例.json
配置文件.wxml
模板和.wxss
样式.js
文件,调用Page()
创建页面实例小程序中组件的分类
小程序中的组件由宿主环境提供,开发者可以基于组件快速搭建漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:
常用的视图容器
常用的基础内容组件
其他常用 组件
button
按钮组件
功能比HTML中的按钮丰富
通过open-type
属性可以调用 微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等等)
属性
属性 | 类型 | 说明 | 值 | 必填 |
---|---|---|---|---|
size | string | 按钮大小 | 1.default(默认大小) 2.mini(小尺寸) |
否 |
type | string | 按钮的样式类型 | 1.primary(绿色) 2.default(白色) 3.warn(红色) |
否 |
disabled | boolean | 是否禁用 | 1.false 2.true |
否 |
loading | boolean | 名称前是否带loading(加载)图标 | 1.false 2.true |
否 |
form-type | string | 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 | 1.submit(提交表单) 2.reset(重置表单) |
否 |
open-type | string | 微信开发能力 | 1.contact( 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息) 2.share (触发用户转发) 3.getPhoneNumber(获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息) 4.getUserInfo(获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息) 5.launchApp(打开APP,可以通过 app-parameter 属性设定向 APP 传的参数) 6.openSetting(打开授权设置页) 7.feedback (打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容) 8.chooseAvatar(获取用户头像,可以从 bindchooseavatar 回调中获取到头像信息) |
否 |
image
navigator
(后面再说)
事件监听API
①特点:以on开头,用来监听某些事件的出发
②举例:wx.onWindowResize(function callback)
监听窗口尺寸变化的事件
同步API
①以Sync结尾的API都是同步API
②同步API执行结果,可以通过函数返回值直接获取,如果执行出现错误会抛出异常
举例:wx.setStorageSync('key','value')
向本地存储中写入内容
异步API
①类似与jQuery中的$.ajax(options)
函数,需要通过success、fall、complete接受调用的结果
②举例:wx.request()
发起网络数据请求,通过success回调函数接收数据
开发者的权限说明:
1. 开发者权限:可使用小程序开发者工具及对小程序的功能进行代码开发
2. 体验者权限:可使用体验版小程序
3. 登录权限:可登录小程序管理后台,无需管理员确认
4. 开发设置:设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
5. 腾讯云管理:云开发相关设置
插值语法:把data中的数据绑定到页面中渲染,使用插值语法(双大括号)将变量包起来即可
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
小程序中常用的事件
类型 | 绑定方法 | 事件描述 |
---|---|---|
tap | bindtap或bind:tap | 手指触摸后马上离开,蕾仕于HTML中的click事件 |
input | bindinput或bind:input | 文本框的输入事件 |
change | bindchange或bind:change | 状态改变时触发 |
事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下所示
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件所经历的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
target和currentTarget的区别
target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件,举例如下:
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数
此时,对于外层的view来说:
e.target指向的是触发事件的源头组件,因此e,target是内部的按钮组件
e.currentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件
bindtap的语法格式
在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。
在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)
方法,可以给页面中data中的数据重新赋值,示例如下:
data: {
d:0
},
//2222按钮处理事件
btnTapHandler(e){
this.setData({
d:this.data.d+1
})
console.log(e);
}
事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:
因为小程序会把bindtap的属性值统一当作事件名称来处理。
可以为组件提供data-*
自定义属性传参,其中*
代表的是参数名字,示例代码如下:,其中
info
会被解析为参数的名字,数值2
会被解析为参数的值。
然后,在事件处理函数中,通过event.target.dataset.参数名
即可获取到具体参数的值,示例代码如下:
bindinput的语法格式
在小程序中,通过input事件来响应文本框的输入内容,语法格式如下:
实现文本框和data之间的数据同步
实现步骤:①定义数据、②渲染结构、③美化样式、④绑定input事件处理函数
通过value属性来与data中的数据进行绑定,再绑定input事件处理函数
wx:if
wx:if="{{condition}}"
来判断是否需要渲染该代码:wx:elif
和wx:else
来添加 esle判断:使用wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用
标签将 多个组件包装起来,并在
标签上使用wx:if
控制属性,示例如下:
注意:
并不是一个组件,只是一个包裹性质的容器,不会在页面中做任何渲染。
hidden
hidden="{{condition}}"
也能控制元素的显示与隐藏:
wx:if
与hidden
的对比
- 运行方式不同
wx:if
以动态创建和移除元素的方式,控制元素的展示与隐藏hidden
以切换样式的方式(display:none/block;
),控制元素的显示与隐藏
wx:for
基本使用
通过wx:for
可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
默认情况下,当前循环项的索引用index
表示,当前循环项用item
表示
手动指定索引和当前项的变量名
wx:key
的使用
类似于Vue列表渲染中的:key
,小程序在实现列表渲染的时候,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率,示例代码如下:
使用id作为key 的时候,不需要使用插值语法,直接写id即可,没有id的时候,可以使用index作为key。
全局配置文件及常用的配置项
在第2节小程序项目的构成中届解锁过,小程序根目录下的app.json
文件时小程序的全局配置文件,常用配置项如下:
全局配置window
属性名 | 类型 | 默认值 | 说明 | |
---|---|---|---|---|
导航栏相关 | navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 | |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white | |
窗口背景相关 | backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉loading的样式,仅支持dark/light | |
页面效果相关 | enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时据页面底部距离,单位为px (概念:上拉触底是移动端的专有名词,通过 手指再屏幕上的上拉滑动操作,从而加载更多数据的行为,没有特殊需求,使用默认值即可) |
全局配置tabBar
注意:
- tabBar中至少只能配置最少2个、最多5个tab页签
- 当渲染顶部tabBar时,不显示icon,只显示文本
.json
配置文件,用来对当前页面的窗口外观、页面效果等进行配置。app.json
中的window节点,可以全局配置小程序中配个页面的窗口表现,如果某个小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json配置文件”就可以实现这种需求。注意事项:
- 域名只支持https协议
- 域名不能使用IP地址或localhost
- 域名必须经过ICP备案
- 服务器域名一个月内最多可申请5次修改
wx.request()
方法,可以发起GET?POST数据请求,示例代码如下:wx.request({
url: 'https://www.escook.cn/api/get',
method:'GET', //若是POST就改为POST
data:{
name:'zc',
age:20
},
success:(res)=>{ //请求成功后的回调函数
console.log(res.data);`
}
})
小程序导航分类
导航组件
组件实现页面跳转声明式导航
组件跳转到指定的tabBar页面时,需要指定url
属性和open-type
属性,其中:
url
表示要跳转的页面地址。必须以/
开头open-type
表示跳转的方式,必须为switchTab
组件跳转到指定的tabBar页面时,需要指定url
属性和open-type
属性,其中:
url
表示要跳转的页面地址。必须以/
开头open-type
表示跳转的方式,必须为navigate
为了简便,在导航到非tabBar页面时,
open-type="navigate"
属性可以省略
open-type
属性和delta
属性,其中:
open-type
的值必须是navigateBack
,表示要进行后退导航delta
的值必须是数字,表示要后退的层级为了简便,如果只是后退到一页面,则可以省略
delta
属性,因为其默认值就是1
编程式导航
app.json
的window
节点中,将enablePullDownRefresh
设置为true;②局部开启,在页面的.json
配置文件中,将enablePullDownRefresh
设置为true。在实际开发中,推荐使用第二种方法,为需要的页面单独开启下拉刷新的效果。.json
配置文件中,通过backgroundColor
和backgroundTextStyle
来分别配置下来刷新窗口的背景颜色和loading的样式。.js
文件中,通过onPullDownRefresh()
函数即可监听当前页面的下拉刷新事件。wx.stopPullDownRefresh()
可以停止当前页面的下拉刷新。.js
文件中,通过onReachBottom()
函数即可监听当前页面的上拉触底事件onReachBottomDistance
属性来配置上拉触底的距离data
中定义isloading
节流阀isloading
节流阀的值complete
回调函数中,将节流阀重置为falseonreachBottom
中判断节流阀的值,从而对数据请求进行节流控制生命周期的分类
在小程序中,生命周期分为两类,分别是:
小程序的生命周期函数
app.js
中声明:onLaunch
:当小程序初始化完成时,会触发 onLaunch(全局只触发一次)onShow
:当小程序启动,或从后台进入前台显示,会触发 onShowonHide
:当小程序从前台进入后台,会触发 onHideonError
:当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息.js
文件中进行声明,示例代码如下:
onLoad
:生命周期函数–监听页面加载onReady
:生命周期函数–监听页面初次渲染完成onShow
:生命周期函数–监听页面显示onHide
:生命周期函数–监听页面隐藏onUnload
:生命周期函数–监听页面卸载注意:
为了保证目录结构的清晰,建议把不同的组件,存放到单独目录中
引用组件
组件的引用方式分为“局部引用”和“全局引用”
组件和页面的区别
从表面来看,组件和页面都是由.js
、.json
、.wxml
和.wxss
这四个文件组成的。但是组件和页面的.js
与.json
文件由明显的不用:
.json
文件中需要声明"component": true
.js
文件中调用的是Component()
函数methods
组件的样式
好处:
防止外界的样式影响组件内部的样式
防止组件的样式破坏外界的样式
data
节点中,如下:methods
节点中,如下(自定义方法建议以“_”开头):proerties
是组件的对外属性,用来接收外界传递到组件中的数据,如下(相当于Vue中的props):在小程序组件中,
proerties
和data
中数据的用法相同,它们都是可读可写,区别在于,data
更倾向于存储组件的私有数据,proerties
更倾向于存储外界传递到组件中的数据
observers
节点):data
中有三个变量n1
、n2
的值的变化,并求和:组件全部生命周期函数
序号 | 生命周期函数 | 参数 | 描述说明 |
---|---|---|---|
① | created | 无 | 在组件实例刚刚被创建时执行 |
② | attached | 无 | 在组建实例进入页面节点树时执行 |
③ | ready | 无 | 在组件在视图层布局完成后执行 |
④ | moved | 无 | 在组件实例被移动到节点数另一个位置时执行 |
⑤ | detached | 无 | 在组件实例被从页面节点树移除时执行 |
⑥ | error | Object Error | 每当组件方法抛出错误时执行 |
常用的生命周期函数
setData
this.data
已被初始化完毕detached
生命周期函数定义组件的生命周期函数
在小程序组件中,生命周期函数可以直接定义在Component
构造器的第一级参数中,也可以在lifetimes
字段内进行声明(这是推荐的方式,其优先级最高)
有时候,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期,在自定义组件中,组件所在页面的生命周期函数有如下三个:
生命周期函数 | 参数 | 描述 |
---|---|---|
show | 无 | 组件所在页面被展示时执行 |
hide | 无 | 组件所在页面被隐藏时执行 |
resize | Object Size | 组件所在页面尺寸变化时执行 |
组件所在页面的生命周期函数需要定义在pageLifetimes
节点中,如下:
节点(插槽),用于承载组件使用者提供的wxml结构。
进行占位,这种个数上的限制叫做单个插槽。
插槽时,可以在组件的.js
文件中,通过如下方式进行启用:slot
属性来将节点插入到不同的中,如下:
父子组件之间的通信方式有3种
this.selectComponent()
获取子组件实例对象,这样可以直接访问子组件的任意数据和方法属性绑定
属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件,如下
在父组件中:
子组件中:子组件在properties
节点中声明对应的属性并使用
事件绑定
事件绑定用于实现子向父传值,可以传递任何类型的数据,使用步骤如下:
获取组件实例
可以在父组件里面调用this.selectComponent("id或class选择器")
,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器
behaviors
作用behaviors
是小程序中用于实现组件间代码共享的特性behaviors
的工作方式behaviors
可以包含一组属性、数组、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到数组中。behaviors
,behaviors
也可以引用其他behaviors
behaviors
Behavior(Object object)
方法即可创建一个共享的behaviors
实例对象,供所有的组件使用:behaviors
require()
方法导入需要的behaviors
,挂载后即可访问behaviors
中的数据或方法,如下:behaviors
中所有可用的节点总结就是npm上能供小程序使用的包不多。
API Promise化
默认情况下,小程序官方提供的异步API都是基于回调函数实现的,例如,网络请求的API需要按照如下的方法调用:
缺点:容易造成回调地狱的问题,代码的可读性、维护性差。
而API Promise化指的是通过额外的配置,将官方提供的、基于回调函数的异步API,升级改造为基于Promise的异步API,从而提高代码的可读性、维护性,避免回调地狱的问题。
全局数据共享(状态管理)是为了解决组件之间数据共享的问题,类似Vue中的VueX。
mobx-miniprogram
配合mobx-miniprogram-bindings
实现全局数据共享。
mobx-miniprogram
用来创建Store实例对象mobx-miniprogram-bindings
用来把Store中的共享数据或方法,绑定到组件或页面中使用基础概念
什么是分包
分包是指一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。
分包的好处
分包前项目的构成
分包前,小程序项目中所有的页面和资源都被打包到了一起,导致整个项目体积过大,影响小程序首次启动的下载时间
分包后项目的构成
分包后,小程序项目由1个主包+多个分包组成:
分包的加载机制
分包的机制限制
目前,小程序分包的大小有一下两个限制:
使用分包