微信⼩程序,简称⼩程序,英⽂名MMiinnii PPrrooggrraamm ,是⼀种不需要下载安装即可使⽤的应⽤,它实现
了应⽤“触⼿可及”的梦想,⽤⼾扫⼀扫或搜⼀下即可打开应⽤
⼩程序⽰例源码
开发微信⼩程序之前,必须要准备好相应的环境
建议使用全新的邮箱,没有注册过其他小程序或者公众号的。
访问注册⻚⾯,耐⼼完成注册即可。
由于后期调⽤微信⼩程序的接⼝等功能,需要索取开发者的⼩程序中的AAPPPPIIDD ,所以在注册成功后,可登录,然后获取APPID。登录,成功后可看到如下界⾯然后复制你的APPID,悄悄的保存起来,不要给别⼈看到是????????????。
开发工具
微信⼩程序⾃带开发者⼯具,集 开发 预览 调试 发布 于⼀⾝的 完整环境。
但是由于编码的体验不算好,因此 建议使⽤ vs code
+ 微信小程序编辑工具
来实现编码vs code
负责敲代码, 微信编辑工具 负责预览
注意 第⼀次登录的时候 需要扫码登录
详细的使⽤,可以查看官⽹
⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣ APP 体验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML
和 WXSS
,以及 JavaScript
,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
通过以上对⽐得出,传统web 是三层结构。⽽微信⼩程序 是四层结构,多了⼀层 配置.json
结构 | 传统web | 微信小程序 |
---|---|---|
结构 | HTML | WXML |
结构 | CSS | WXSS |
逻辑 | Javascript | Javascript |
配置 | 无 | JSON |
通过以上对⽐得出,传统web 是三层结构
。⽽微信⼩程序 是四层结构,多了⼀层 配置.json
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json
和 ⻚⾯⾃⼰的page.json
注意:配置文件中不能出现注释
app.json
是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的 app.json
配置
字段的含义
这⾥的page.json
其实⽤来表⽰⻚⾯⽬录下的page.json
这类和⼩程序⻚⾯相关的配置。
开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等。
⻚⾯的配置只能设置app.json
中部分window
配置项的内容,⻚⾯中配置项会覆盖app.json
的window
中相同的配置项。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜⾊,如#000000 |
navigationBarTextStyle | String | white | 导航栏标题颜⾊,仅⽀持black/white |
navigationBarTitleText | String | 导航栏标题⽂字内容 | |
backgroundColor | HexColor | #ffffff | 窗⼝的背景⾊ |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅⽀持 dark/ light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新。 详⻅Page.onPullDownRefresh |
onReachBottomDistance | Number | 50 | ⻚⾯上拉触底事件触发时距⻚⾯底部距离,单位为px。 详⻅Page.onReachBottom |
disableScroll | Boolean | false | 设置为true 则⻚⾯整体不能上下滚动;只在⻚⾯配置中有效,⽆法在中app.json 设置该项 |
⼩程序根⽬录下的sitemap.json
⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。
WXML(WeiXin Markup Language)是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构建出⻚⾯的结构。
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
不要直接写checked="false"
其计算结果是⼀个字符串
字符串和花括号之间一定不要有空格,否则会识别失败!
<checkbox checked="{{false}}"> </checkbox>
<view hidden="{{flag ? true : false}}"> Hidden </view>
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
<view wx:if="{{length > 5}}"> </view>
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
花括号和引号之间如果有空格,将最终被解析成为字符串
项的变量名默认为 item
wx:for-item
可以指定数组当前元素的变量名
下标变量名默认为 index
wx:for-index
可以指定数组当前下标的变量名wx:key
⽤来提⾼数组渲染的性能wx:key
绑定的值 有如下选择
如果wx:key绑定一个普通的字符串,那么这个字符串名称肯定是循环数组中对象的唯一属性
string 类型,表⽰ 循环项中的唯⼀属性 如
list:[
{
id:0,
name:"炒饭"
},
{
id:1,
name:"炒面"
}
]
wx:key="id"
保留字 *this
,它的意思是 item
本⾝ ,*this
代表的必须是 唯⼀的字符串和数组。
如果wx:key="*this
",那么数组就是一个普通的数组,*this
表示循环项
list:[1,2,3,4,5]
wx:key="*this"
vx:for-item
和vx:for-index
vx:for-item
和vx:for-index
,小程序也会把循环项的名称和索引的名称定义为item和index。如果只有一层循环的话,vx:for-item
和vx:for-index
可以不写。vx:for-item="value",vx:for-index="key"
<view wx:for="{{array}}" wx:key="id">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
id:0,
message: 'foo',
}, {
id:1,
message: 'bar'
}]
}
})
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
7.4.1. wx:if
在框架中,使⽤ wx:if="{{condition}}"
来判断是否需要渲染该代码块:
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
<view hidden="{{condition}}"> True </view>
类似 wx:if
频繁切换用 hidden
不常使用用 wx:if
⼩程序中绑定事件,通过bind关键字来实现。如bindtap
、bindinput
、bindchange
等不同的组件⽀持不同的事件,具体看组件的说明即可。
绑定事件
<input bindinput="handleInput" />
通过事件源对象可以获取输入框的值—e.detail.value
Page({
// 绑定的事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
}
})
<input bindinput="handleInput(100)" />
value
<input bindinput="handleInput" data-item="100" />
handleInput: function(e) {
// {item:100}
console.log(e.currentTarget.dataset)
// 输入框的值
console.log(e.detail.value);
}
WXSS( WWeeiiXXiinn SSttyyllee SShheeeettss )是⼀套样式语⾔,⽤于描述 WXML
的组件样式。与 CSS 相⽐,WXSS 扩展的特性有:
rpx
rpx
(responsive pixel): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx
。如在iPhone6
上,屏幕宽度为375px
,共有750个物理像素,则750rpx = 785px = 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 作为视觉稿的标准。
使⽤步骤:
pageWidth
750rpx = pageWidth px
,因此 1px = 750rpx/pageWidth
px=>750/pageWidth rpx
即可。wxss中直接就⽀持,样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤@import
语句可以导⼊外联样式表,只⽀持相对路径
。
⽰例代码:
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
特别需要注意的是 ⼩程序 不⽀持通配符 *
因此以下代码⽆效!
*{
margin:0;
padding:0;
box-sizing:border-box;
}
⽬前⽀持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.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 组件前边插⼊内容 |
原⽣⼩程序不⽀持less,其他基于⼩程序的框架⼤体都⽀持,如wepy
, mpvue
, taro
等。但是仅仅因为⼀个less
功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现
编辑器是 vs code
安装插件 easy less
在vs code
的设置中加⼊如下,配置
在要编写样式的地⽅,新建 lexx
⽂件,如 index.lese
然后正常编辑即可。
重点讲解⼩程序中常⽤的布局组件view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox
。等
代替 原来的 div
标签
<view hover-class="h-class">
点击我试试
</view>
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
selectable | Boolean | false | 文本是否可选 |
decode | Boolean | false | 是否解码 |
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | 不缩放图⽚,只显⽰图⽚的右下边区域 |
微信内置轮播图组件
默认宽度 100% ⾼度 150px
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | 是否循环轮播 |
滑块视图容器。
滑块
默认宽度和⾼度都是100%
导航组件 类似超链接标签
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
target | String | self | 在哪个⽬标上发⽣跳转,默认当前⼩程序,可选值self/miniProgram |
url | String | 当前⼩程序内的跳转链接 | |
opentype | String | navigate | 跳转⽅式 |
open-type 有效值:
值 | 说明 |
---|---|
navigate | 保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到 tabbar ⻚⾯ |
redirect | 关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到 tabbar ⻚⾯。 |
switchTab | 跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯ |
reLaunch | 关闭所有⻚⾯,打开到应⽤内的某个⻚⾯ |
navigateBack | 关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈,决定需要返回⼏层 |
exit | 退出⼩程序,target="miniProgram"时⽣效 |
富文本标签
可以将字符串解析成 对应标签,类似 vue中 v-html
功能
代码
// 1 index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
// index.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
nodes
属性⽀持 字符串
和 标签节点数组
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | string | 是 | ⽀持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | ⽀持部分受信任的属性,遵循 Pascal 命名法 |
children | ⼦节点列表 | array | 否 | 结构和 nodes ⼀致 |
⽂本节点:type = text
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
text | ⽂本 | string | 是 | ⽀持entities |
<button
type="default"
size="{{defaultSize}}"
loading="{{loading}}"
plain="{{plain}}"
>
default
</button>
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
size | string | default | 否 | 按钮的⼤⼩ |
type | string | default | 否 | 按钮的样式类型 |
plain | boolean | false | 否 | 按钮是否镂空,背景⾊透明 |
disabled | boolean | false | 否 | 是否禁⽤ |
loading | boolean | false | 否 | 名称前是否带 loading 图标 |
formtype | string | 否 | ⽤于组件,点击分别会触发 组件的submit/reset 事件 | |
opentype | string | 否 | 微信开放能⼒ |
size 的合法值
default 默认⼤⼩
mini ⼩尺⼨
type 的合法值
值 | 说明 |
---|---|
primary | 绿⾊ |
default | ⽩⾊ |
warn | 红⾊ |
form-type 的合法值
值 | 说明 |
---|---|
submit | 提交表单 |
reset | 重置表单 |
open-type 的合法值
值 | 说明 |
---|---|
contact | 打开客服会话,如果⽤⼾在会话中点击消息卡⽚后返回⼩程序,可以从bindcontact 回调中获得具体信息,具体说明 |
share | 触发⽤⼾转发,使⽤前建议先阅读使⽤指引 |
getPhoneNumber | 获取⽤⼾⼿机号,可以从bindgetphonenumber回调中获取到⽤⼾信息,具体说明 |
getUserInfo | 获取⽤⼾信息,可以从bindgetuserinfo回调中获取到⽤⼾信息 |
launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明 |
openSetting | 打开授权设置⻚ |
feedback | 打开“意⻅反馈”⻚⾯,⽤⼾可提交反馈内容并上传⽇志,开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容 |
open-type 的 contact的实现流程
appid
由测试号改为 ⾃⼰的appid
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
type | string | 是 | icon的类型,有效值:success, success_no_circle,info, warn, waiting, cancel, download, search,clear | |
size | number/string | 23 | 否 | icon的⼤⼩ |
color | string | 否 | icon的颜⾊,同css的color |
代码
<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>
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'
],
}
})
可以通过 color属性来修改颜色
需要搭配 radio-group ⼀起使⽤
可以通过 color属性来修改颜色
需要搭配 checkbox-group ⼀起使⽤
11. 自定义组件类似vue或者react中的自定义组件
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。
类似于页面,一个自定义组件由 json
wxml
wxss
``js 4个文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构
在⽂件夹内 components/myHeader
,创建组件 名为 myHeader
⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
myHeader.json
{
"component": true
}
同时,还要在组件的 wxml
⽂件中编写组件模板,在 wxss
⽂件中加⼊组件样式slot
表⽰插槽,类似vue中的slotmyHeader.wxml
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
<slot></slot>
</view>
在组件的 wwxxssss ⽂件中编写样式
注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
myHeader.wxss
/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}
在组件的 js
⽂件中,需要使⽤ component()
来注册组件,并提供组件的属性定义、内部数据和⾃定义⽅法
myHeader.js
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
// 期望要的数据是 string类型
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
⾸先要在⻚⾯的 json
⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
{
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"my-header":"/components/myHeader/myHeader"
}
}
11.3. ⻚⾯中使⽤⾃定义组件
<view>
<!-- 以下是对一个自定义组件的引用 -->
<my-header inner-text="Some text">
<view>用来替代slot的</view>
</my-header>
</view>
component
构造器可⽤于定义组件,调⽤component
构造器时可以指定组件的属性、数据、⽅法等。
定义段 | 类型 | 是否必填 | 描述 |
---|---|---|---|
properties | Object Map | 否 | 组件的对外属性,是属性名到属性设置的映射表,参⻅下⽂ |
data | Object | 否 | 组件的内部数据,和 properties ⼀同⽤于组件的模板渲染 |
observers | Object | 否 | 组件数据字段监听器,⽤于监听 properties 和 data 的变化,参⻅ 数据监听器 |
methods | Object | 否 | 组件的⽅法,包括事件响应函数和任意的⾃定义⽅法,关于事件响应函数的使⽤,参⻅ 组件事件 |
created | Function | 否 | 组件⽣命周期函数,在组件实例刚刚被创建时执⾏,注意此时不能调⽤ sseettDDaattaa ,参⻅ 组件⽣命周期 |
attached | Function | 否 | 组件⽣命周期函数,在组件实例进⼊⻚⾯节点树时执⾏,参⻅ 组件⽣命周期 |
ready | Function | 否 | 组件⽣命周期函数,在组件布局完成后执⾏,参⻅ 组件⽣命周期 |
moved | Function | 否 | 组件⽣命周期函数,在组件实例被移动到节点树另⼀个位置时执⾏,参⻅ 组件⽣命周期 |
detached | Function | 否 | 组件⽣命周期函数,在组件实例被从⻚⾯节点树移除时执⾏,参⻅ 组件⽣命周期 |
{{tabs}}
传递到 ⼦组件的 tabItems
属性中onMyTab
事件bindmytap
中的 mytap
事件triggerEvent
⽅法,指定事件名、detail
对象this.selectComponent("#tabs")
父组件代码
// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
内容-这里可以放插槽
</tabs>
// page.js
data: {
tabs:[
{name:"体验问题"},
{name:"商品、商家投诉"}
]
},
onMyTab(e){
console.log(e.detail);
},
子组件代码
// com.wxml
<view class="tabs">
<view class="tab_title" >
<block wx:for="{{tabItems}}" wx:key="{{item}}">
<view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
</block>
</view>
<view class="tab_content">
<slot></slot>
</view>
</view>
// com.js
Component({
properties: {
tabItems:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleItemActive(e){
this.triggerEvent('mytap','haha');
}
}
})
myHeader.js
的等innerText
分为应⽤⽣命周期和⻚⾯⽣命周期
关于小程序前后台的定义和小程序的运行机制,请参考运行机制章节。
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
onLaunch | function | 否 | 监听⼩程序初始化。 | |
onShow | function | 否 | 监听⼩程序启动或切前台。 | |
onHide | function | 否 | 监听⼩程序切后台。 | |
onError | function | 否 | 错误监听函数。 | |
onPageNotFound | function | 否 | ⻚⾯不存在监听函数。 |
属性 | 类型 | 说明 |
---|---|---|
data | Object | ⻚⾯的初始数据 |
onLoad | function | ⽣命周期回调—监听⻚⾯加载 |
onShow | function | ⽣命周期回调—监听⻚⾯显⽰ |
onReady | function | ⽣命周期回调—监听⻚⾯初次渲染完成 |
onHide | function | ⽣命周期回调—监听⻚⾯隐藏 |
onUnload | function | ⽣命周期回调—监听⻚⾯卸载 |
onPullDownRefresh | function | 监听⽤⼾下拉动作 |
onReachBottom | function | ⻚⾯上拉触底事件的处理函数 |
onShareAppMessage | function | ⽤⼾点击右上⻆转发 |
onPageScroll | function | ⻚⾯滚动触发事件的处理函数 |
onResize | function | ⻚⾯尺⼨改变时触发,详⻅ 响应显⽰区域变化 |
onTabItemTap | function | 当前是 tab ⻚时,点击 tab 时触发 |
字符串和花括号之间一定不要有空格,否则会识别失败!
如果wx:key绑定一个普通的字符串,那么这个字符串名称肯定是循环数组中对象的唯一属性
如果wx:key="*this",那么数组就是一个普通的数组,*this表示循环项
输入框绑定事件bindinput
获取输入框值
通过事件对象获取
e.detail.value
给data中赋值,类似于react中的状态机。
this.setData({
值:新值
})
按钮绑定事件bindtap
。无法在小程序的事件中直接传参,需要通过自定义属性的方式来传递参数。可以在事件源中获取自定义属性。
小程序中不需要主动引入样式文件。
将页面中元素的单位改为rpx,可以实现不同屏幕宽度自动发生变化。
利用calc
属性,设置rpx。
① 750和rpx之间不要留空格
② 运算符的两边不要留空格
wxss引入的代码通过@import引入,路径只支持相对路径。
常用标签/组件
① view
:相当于div
标签
② text
:相当于span
标签
text
标签可以实现长按文字复制text
标签内只能嵌套text
标签selectable
属性控制文本是否可选decode
属性控制是否解码,可以识别空格回车等字符。③ image
:图片
④ swiper
:自带轮播图
swiper宽度 / swiper高度 = 原图宽度 / 原图高度
。→ swiper高度 = swiper宽度 * 原图高度 / 原图宽度
→ height = 100vw * 352 / 1125⑤ navigator
:导航标签
⑥ rich-text
:解析html标签
⑦ button
:按钮
open-type:
bindgetphonenumber
,在事件的回调函数中,通过参数获取信息。获取到信息后,已经加密过。需要用户自己搭建小程序后台服务器,需要在后台服务器中进行解析⑧ icon
:字体图标
⑨ radio
:单选radio标签 必须和父元素 radio-group 搭配使用,value 选中的单选框的值,绑定bindchange事件可以监听变化。
⑩ checkbox
:复选框
自定义组件
父组件(界面)向子组件 传递数据 通过标签属性的方式来传递
子组件调用父组件事件方法:this.triggerEvent(“父组件自定义事件的名称”,要传递的参数)
slot插槽可以用来传递标签