微信小程序3

1.网络请求

发起网络请求获取服务器数据,需要用到wx.request()接口API

wx.request()请求的域名必须在微信公众平台进行配置,如果使用wx.request()请求未配置的域名则控制台会报错

2.界面交互,loading提示框

小程序提供了一些用于交互的API,如loading提示框,消息提示框,模态对话框等API

loading提示框常配合网络请求来使用,用于增加用户体验,对应API有两个:

1.wx.showLoading()显示loading提示框

2.wx.hideLoading()关闭提示框

#提示框不会主动关闭,所以wx.showLoading()和wx.hideLoading()必须结合使用

(2)模态对话框,消息提示框

wx.showModel():模态对话框,常用于询问用户是否执行一些操作

例如询问用户是否退出登录,是否删除该商品

wx.showToast():消息提示框,根据用户的某些操作来告知操作结果

例如退出成功,提示删除成功等

本地存储

小程序本地存储是指小程序中使用的API将数据存储在用户的设备上,以便小程序运行时和下次启动时快速读取这些数据

3.路由与通信

在小程序中实现页面的跳转,有两种方式

1.声明式导航:navidator组件

2.编程式导航:使用小程序提供的API

路径后可以带参数,参数路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔,例如:path?key=value&key2=value2

参数需要在跳转到的页面的onLoad钩子函数中通过形参进行接收

4页面处理函数,上拉加载

上拉加载是小程序中常见的加载方法,当用户滑动到页面底部时,会自动加载更多的内容,以便用户继续浏览

(1)在app.json或者page.json中配置距离页面底部距离:onReachBottomDistance;默认50px

(2)在页面.js中定义onReachBottom事件监听用户上拉加载

5.下拉刷新

下拉刷新是小程序中常见的一种刷新方式,当用户下拉刷新时,页面会自动刷新,以便用户获取最新的内容

小程序中实现的方式

(1)在app.json或者page.json中开启允许下拉,同时可以配置窗口,loading样式等

(2)在页面.js中定义onPullDownRefresh事件监听用户下拉刷新

6.增强scroll-view

使用scroll-view实现上拉加载和下拉刷新

当需要纵向滑动时,需要添加scroll-y属性,当属性值为true时允许滑动,可省略

触底距离:lower-threshold;当距离底部对应距离时触发刷新

bindscrolltolower="事件处理函数名"用来触发触底时的事件

enable-back-to-top当值为true时,当点击底部或顶部时回到最顶部

refresher-enable:开启自定义下拉刷新

bindrefresherrefresher="函数名":刷新时触发函数

refresher-triggered="{{isTriggered}}":用来消除下拉刷新

7.创建和注册组件

小程序目前已经支持组件化开发,可以将页面中的功能模块抽取成自定义组件,以便在不同页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,利于代码维护

开发中常见的两种组件

1.公共组件:将页面内的功能模块抽取成自定义组件,以便在不同的页面中重复使用

2.页面组件:将复杂的页面拆分成多个低耦合的模块,有助于代码维护

公共组件建议放在根目录的components文件夹中

页面组件放在对应页面目录下

建议一个组件一个文件夹

组件需要注册

1.全局注册:在app.json文件中配置usingComponents进行注册,注册后可以在任意页面使用

2.局部注册:在页面的json文件中配置usingComponents进行注册,注册后只能在当前页面使用

在usingComponents中进行组件注册时,需要自定义组件的组件名和自定义组件文件路径

在将组件注册好以后,直接将自定义组件的组件名当成组件标签使用即可

8.组件的数据和方法

组件数据和方法需要在组件.js的Component方法在进行定义,Component创建自定义组件

(1).data:定义组件内部数据

(2)methods:在组件中事件处理程序需要写到methods中才可以

9.组件的属性

Properties是指组件的对外属性,主要用来接收组件使用者传递给组件内部的数据

和data一同用于模板渲染

10.插槽

在使用基础组件时,可以在组件中间写字节点,从而将字节点的内容展示到页面中,自定义组件也可以接收子节点,只不过在组件模板中需要定义<slot/>节点,用于承载组件中间的子节点

默认情况下,一个组件的wxml中只能有一个slot。需要使用多slot时,可以在组件js中声明启用

同时需要slot添加name属性来区分不同的slot

然后子节点内容添加slot属性,属性值是对应slot的name名称,从而将内容插入到对应的slot中

11.组件样式

自定义组件有自己的wxss样式,组件wxss文件的样式,默认只对当前组件生效

样式隔离:默认情况下,自定义组件样式只受自身wxss影响,但是有时候我们需要组件使用者的样式能够影响到组件,这时候就需要指定特殊样式隔离选项stylesolation,选择它支持以下取值

(1)islated:表示启用样式隔离,在自定义组件内外,使用class指定的样式将不会相互影响

(2)apply-shared:表示页面wxss样式将影响到自定义组件,但自定义组件wxss中指定的样式不会影响页面

(3)shared:表示页面wxss样式将影响到自定义组件,自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件

数据监听器:数据监听器主要用于监听和相应任何属性(properties)和数据(data)的变化,当数据发生变化时就会触发对应回调函数,从而方便开发者进行业务逻辑的处理

在组件中如果需要进行数据监听,就需要observes字段

12.组件通信

父组件如果需要向子组件传递数据,只需要两个步骤

(1)在父组件wxml中使用数据绑定的方式向子组件传递动态数据

(2)子组件内部使用properties接收父组件传递的数据即可

子组件如果需要向父组件传递数据,可以通过小程序提供的事件系统实现,可以传递任意数据

(1)自定义组件内部使用triggerEvent方法发射一个自定义的事件,同时可以携带数据

(2)自定义组件标签上通过bind方法监听发射的事件,同时绑定事件处理函数,在事件处理函数中通过事件对象获取传递的数据

获取组件实例:父组件可以通过this.selectComponent方法,获取子组件实例对象,这样就可以直接访问子组件的任意数据和方法,this.selectComponent方法在调用时需要传入一个匹配选择器selector

13.组件生命周期

组件的生命周期:指的是组件自身的一些钩子函数,这些函数在特定的节点时会被自动触发

组件的生命周期函数需要在lifetimes字段内进行声明

组件的生命周期函数有5个:created,attached,ready,moved,detached

组件还有一些特殊的生命周期,这里周期和组件没有很强的关联

主要用于组件内部监听父组件的展示,隐藏状态,从而方便组件内部执行一些业务逻辑的处理

组件所在页面的生命周期函数有4个:show,hide,resize,routeDone需要在pageLifetimes字段内进行声明

声明周期总结:一个小程序完整的生命周期由应用生命周期,页面生命周期和组件生命周期三部分组成

(1)小程序冷启动,钩子函数执行的顺序

(2)保留当前页面,进入下一个页面,钩子函数执行的顺序

(3)销毁当前页面,进入下一个页面,钩子函数执行的顺序

(4)小程序热启动,钩子函数执行的顺序

相关推荐
杰建云1672 小时前
小程序如何提升留存?
小程序·小程序制作
PinTrust SSL证书2 小时前
Geotrust企业型OV通配符SSL
网络协议·网络安全·小程序·https·云计算·ssl
怀君3 小时前
Uniapp——微信小程序Canvas层级过高问题解决
微信小程序·小程序·uni-app
杰建云1675 小时前
小程序如何提升转化率?
小程序·小程序制作
杰建云1675 小时前
小程序如何做用户运营?
小程序·产品运营·用户运营
Devil枫5 小时前
【腾讯位置服务开发者征文大赛】AI 赋能小程序地图开发:腾讯地图 Miniprogram Skill 实战记录
人工智能·小程序
00后程序员张1 天前
完整教程:如何将iOS应用程序提交到App Store审核和上架
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张1 天前
iOS应用性能优化全解析:卡顿、耗电、启动与瘦身
android·ios·性能优化·小程序·uni-app·iphone·webview
大力水手~1 天前
小程序模仿iphone苹果手机滑动选时间
智能手机·小程序