组件
视图类容器组件
view
- 普通视图区域
- 类似于html中的div,是一个块级元素
- 常用来实现页面的布局效果
基本使用
<view class="container">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightskyblue;
}
.container1 view:nth-child(3){
background-color: lightcoral;
}
.container1{
display: flex;
/**分散布局**/
justify-content: space-around;
}
scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
基本使用
<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y="true">
<view>view A</view>
<view>view B</view>
<view>view C</view>
</scroll-view>
/* pages/list/list.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightskyblue;
}
.container1 view:nth-child(3){
background-color: lightcoral;
}
.container1{
border: 1px solid red;
height: 120px;
width: 100px;
}
swiper和swiper-item
- 轮播图组件和轮播图item组件
基本使用
<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
/* pages/list/list.wxss */
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1).item{
background-color: lightgreen;
}
swiper-item:nth-child(2).item{
background-color: lightskyblue;
}
swiper-item:nth-child(3).item{
background-color: lightcoral;
}
常用属性
基础内容类组件
text
- 文本组件
- 类似于html中的span标签,行内元素
基本使用
- 通过selectable属性,实现长按选中文本内容的效果
<!--pages/list/list.wxml-->
<view>
手机号
<text selectable="true">11111111111111</text>
</view>
rich-text
- 富文本组件
- 支持把html字符串渲染为wxml结构
基本使用
通过 rich-text 组件的** nodes** 属性节点,把 HTML 字符串染为对应的 UI 结构
<!--pages/list/list.wxml-->
<view>
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
</view>
其他组件
button
- 按钮组件
- 功能比HTML中的button按钮丰富
- 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
基本使用
<!--pages/list/list.wxml-->
<view>
<view>---------通过type指定按钮类型-------------</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
</view>
<view>---------size=“mini”小尺寸按钮-------------</view>
<button size="mini">默认按钮</button>
<view>---------plain镂空按钮-------------</view>
<button size="mini" plain="true">默认按钮</button>
image
- 图片组件
- 默认宽度约为300px,高度约为240px
基本使用
<view>
<!-- 空白图片也会占空间 -->
<image></image>
<image src=""></image>
</view>
mode属性
navigator
- 页面导航组件
- 类似于html中的a标签
小程序API
事件监听类API
特点:以on开头,用来监听某些事件的触发
同步API
特点:
- 以Sync结尾的
- 同步API的执行结果,可以通过函数返回值直接获取,如果出错直接抛出异常
异步API
特点:类似于JQuery中的$.ajax(option)函数,需要通过success、fail、complete接收调用的结果
模板语法
数据绑定
基本原则
- 在data中定义数据
在对应页面的js文件中,把数据定义到data对象即可
// pages/list/list.ts
Page({
/**
* 页面的初始数据
*/
data: {
info:"init data",
msgList:[{msg:"hello"},{msg:"world"}]
},
})
- 在WXML中使用数据
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。
<view>{{要绑定的数据名称}}</view>
事件绑定
事件是渲染层到逻辑层的通讯方式
常用事件
- bintap语法格式
<button type="primary" bind:tap="test"></button>
test(e: any){
console.log(e);
},
- bindinput语法格式
事件对象的属性列表
当事件回调触发时,会收到一个事件对象event,属性如下表
PS:
- target事件和currentTarget事件的区别
- 点击事件函数不能直接传参数,参考下图
在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值
Page({
/**
* 页面的初始数据
*/
data: {
count: 0
},
methods:{
changeCount(){
this.setData({
count: this.data.count++
})
}
},
实现文本框与data之间的数据同步
条件渲染
wx:if
结合block标签使用wx:if
hidden
PS:wx:if与hidden对比
列表渲染
wx:for
PS:手动指定索引和当前项的变量名
wx:key
WXSS模板样式
定义
WXSS (WeChat Style Sheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS。
与CSS的关系
WXSS 具有 CSS 大部分特性,同时,WXSS 还对CSS 进行了扩充以及修改,以适应微信小程序的开发。
新增特性
- rpx尺寸单位
- @import样式导入.
rpx
定义
rpx是微信小程序独有的,用来解决屏适配的尺寸单位
实现原理
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)。
样式导入
使用 WXSS 提供的 @import 语法,可以导入外联的样式表。
语法格式
@import 后跟需要导入的外联样式表的相对路径,用;表示语句结束。示例如下:@import "common.wxss";
全局样式与局部样式
全局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
局部样式
在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面
PS:
注意:
- 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
- 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式
全局配置
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
pages
记录当前小程序所有页面的存放路径
window
全局设置小程序窗口的外观
小程序窗口的组成部分
常用配置项
tabBar
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
- 底部tarBar
- 顶部tarBar
PS:
- tabBar中只能配置最少2个、最多5个tab 页签
- 当渲染顶部 tabBar 时,不显示icon,只显示文本
组成部分
配置项
style
是否启用新版的组件样式
页面配置
作用
小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
页面配置与全局配置的关系
小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json 配置文件”就可以实现这种需求。
常见配置项
网络数据请求
网络请求限制
出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:
- 只能请求 HTTPS 类型的接口
- 必须将接口的域名添加到信任列表中
配置request合法域名
配置步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 ->服务器域名 ->修改 request 合法域名
PS:
- 域名只支持 https 协议域名不能使用IP 地址或localhost
- 域名必须经过 ICP 备案
- 服务器域名一个月内最多可申请5 次修改
GET请求
POST请求
在页面刚加载时请求数据
注意事项
跳过request合法域名检验
仅能在开发与调试阶段跳过
关于跨域和ajax的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端,所
以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络数据请求”
页面导航
页面导航指的是页面之间的相互跳转
声明式导航
- 在页面上声明一个导航组件
- 通过点击组件实现页面跳转
导航到tarBar页面
tabBar 页面指的是被配置为 tabBar 的页面。
在使用 组件跳转到指定的 tabBar 页面时,需要指定 url属性和 open-type 属性,其中:
- url表示要跳转的页面的地址,必须以/开头
- open-type 表示跳转的方式,必须为switchTab
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
导航到非tarBar页面
非 tabBar 页面指的是没有被配置为 tabBar 的页面
在使用 组件跳转到普通的非 tabBar 页面时,则需要指定url属性和 open-type 属性,其中:
- url 表示要跳转的页面的地址,必须以/开头
- open-type 表示跳转的方式,必须为navigate
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
PS:为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略
后退导航
如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:
- open-type 的值必须是 navigateBack,表示要进行后退导航
- delta 的值必须是数字,表示要后退的层级
<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>
PS:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1。
编程式导航
调用小程序的导航 API,实现页面的跳转
导航到tarBar页面
调用 wx.switchTab(0bject object)方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下:
导航到非tarBar页面
调用 wx.navigateTo(0bject object)方法,可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下:
后退导航
调用 wx.navigateBack(0bject object)方法,可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下:
导航传参
声明式导航传参
navigator 组件的 url属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数:
- 参数与路径之间使用?
- 分隔参数键与参数值用=相连
- 不同参数用 &分隔
编程式导航传参
调用 wx.navigateTo(0bject object)方法跳转页面时,也可以携带参数,代码示例如下:
在onload里接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到,示例代码如下:
下拉刷新
下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
启用下拉刷新
全局
在 app.json 的 window节点中,将enablePullDownRefresh 设置为 true
局部
在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true
PS:在实际开发中,推荐使用第2种方式,为需要的页面单独开启下拉刷新的效果
配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中,通过 backgroundColor 和 backgroundTextstyle 来配置下拉刷新窗口的样式,其中:
- backgroundcolor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值
- backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light
监听页面的下拉刷新事件
在页面的 .js 文件中,通过 onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。
停止下拉刷新的效果
当处理完下拉刷新后,下拉刷新的loading 效果会一直显示,不会主动消失,所以需要手动隐藏loading 效果。此时,调用 wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。示例如下:
上拉触底
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
监听页面的上拉触底事件
在页面的 .js 文件中,通过 onReachBottom()函数即可监听当前页面的上拉触底事件。示例代码如下:
配置上拉触底的距离
上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离
可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。
生命周期
定义
生命周期(Life Cycle)是指一个对象从创建 ->运行 ->销毁的整个阶段,强调的是一个时间段。
分类
应用生命周期
特指小程序从启动 ->运行->销毁的过程
页面生命周期
特指小程序中,每个页面的加载->渲染 ->销毁的过程
PS:其中,页面的生命周期范围较小,应用程序的生命周期范围较大,如图所示:
生命周期函数
定义
生命周期函数是由小程序框架提供的内置函数会伴随着生命周期,自动按次序执行
作用
允许程序员在特定的时间点,执行某些特定的操作。例如,页面刚加载的时候,可以在onLoad 生命周期函数中初始化页面的数据。
PS:生命周期强调的是时间段,生命周期函数强调的是时间点
分类
应用生命周期函数
定义:特指小程序从启动->运行->销毁期间依次调用的那些函数
小程序的应用生命周期函数需要在 app.js 中进行声明,示例代码如下:
页面周期函数
特指小程序中,每个页面从加载->渲染 ->销毁期间依次调用的那些函数
WXS
定义
WXS(WeiXin Script)是小程序独有的一套脚本语言,结合 WXML,可以构建出页面的结构。
使用场景
wxml中无法调用在页面的 .js 中定义的函数,但是,wxml中可以调用 wxs 中定义的函数。因此,小程序中wxs 的典型应用场景就是“过滤器”
WXS与JS的区别
基础语法
内嵌脚本
wxs 代码可以编写在 wxml文件中的标签内,就像Javascript 代码可以编写在 html文件中的
定义外联的WSX脚本
wxs 代码还可以编写在以 .wxs 为后缀名的文件内,就像javascript 代码可以编写在以 .js 为后缀名的文件中一样。示例代码如下:
使用外联的WSX脚本
在 wxml 中引入外联的 wxs 脚本时,必须为 标签添加 module 和 src 属性,其中:
module 用来指定模块的名称
src 用来指定要引入的脚本的路径,且必须是相对路径
自定义组件
创建组件
引用组件
局部引用
全局引用
全局引用VS局部引用
样式
样式隔离
默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的UI结构,如图所示:
- 组件 A的样式不会影响组件C的样式
- 组件 A的样式不会影响小程序页面的样式
- 小程序页面的样式不会影响组件A和C的样式
PS:
- app.wxss中的全局样式对组件无效
- 只有 class 选择器会有样式隔离效果,d 选择器、属性选择器、标签选择器不受样式隔离的影响
- 建议:在组件和引用组件的页面中建议使用 class 选择器不要使用 id、属性、标签选择器!
修改组件
stylelsolation
data数据
在小程序组件中,用于组件模板渲染的私有数据,需要定义到 data 节点中,示例如下:
method方法
properties属性
生命周期
定义
有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期
pageLifetimes
组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中,示例代码如下
插槽
在自定义组件的 wxml结构中,可以提供一个节点(插槽),用于承载组件使用者提供的 wxml结构
单个插槽
启用多个插槽
在小程序的自定义组件中,需要使用多插槽时,可以在组件的.js 文件中,通过如下方式进行启用。
组件通信
父子组件之间的3种通信方式
属性绑定
用于父组件向子组件的指定属性设置数据,仅能设置JSON 兼容的数据
属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。父组件的示例代码如下:
事件绑定
用于子组件向父组件传递数据,可以传递任意数据
事件绑定用于实现子向父传值,可以传递任何类型的数据。使用步骤如下:
- 在父组件的js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件
- 在父组件的 wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件
- 在子组件的js 中,通过调用 this.triggerEvent(‘自定义事件名称’’,{/*参数对象 */}),将数据发送到父组件
- 在父组件的js 中,通过 e.detail 获取到子组件传递过来的数据
获取组件实例
可在父组件里调用 this.selectComponent(“id或class选择器”),获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(“.my-component”)。
behaviors
定义
behaviors 是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js,中的“mixins”
工作方式
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个 behavior,behavior 也可以引用其它 behavior。
创建behavior
导入并使用behavior
behavior中所有可用的节点
同名字段的覆盖和组合规则
npm
使用npm包的支持与限制
vant Weapp
定义
Vant weapp 是有赞前端团队开源的一套小程序 U1组件库,助力开发者快速搭建小程序应用。它所使用的是MIT 开源许可协议,对商业使用比较友好。
安装Vant组件库
Vant Weapp - 轻量、可靠的小程序 UI 组件库
定制全局主题样式
Vant Weapp 使用 CSS 变量来实现定制主题。关于 CSS 变量的基本用法,请参考 MDN 文档:
使用 CSS 自定义属性(变量) - CSS:层叠样式表 | MDN
API Promise化
基于回调函数的异步API的缺点
缺点:容易造成回调地狱的问题,代码的可读性、维护性差!
定义
API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步 API,升级改造为基于Promise 的异步 API,从而提高代码的可读性、维护性,避免回调地狱的问题。
全局数据共享
定义
小程序中全局数据共享方案
Mobx
安装Mobx相关的包
创建MobX的Store实例
将Store成员绑定到页面中
将Store中的成员绑定到组件中
分包
定义
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。
好处
- 可以优化小程序首次启动的下载时间
- 在多团队共同开发时可以更好的解耦协作
分包前项目的构成
分包后项目的构成
分包加载原则
分包的体积限制
基本用法
配置方法
打包原则
引用原则
独立分包
定义
与普通分包的区别
应用场景
配置方法
引用原则
分包预下载
定义
在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度。
配置
文章来源:https://www.toymoban.com/news/detail-857975.html
限制
文章来源地址https://www.toymoban.com/news/detail-857975.html
到了这里,关于一篇搞定微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!