微信小程序
小程序基础文档
基础
page.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 中设置该项 |
模板语法
数据绑定
- text标签:相当于web中的 span标签 行内元素 不会换行
- view标签:相当于web中的 div标签 块元素 会换行
- block标签:相当于占位符标签,写代码时存在,页面渲染时会移除掉
1 |
|
1 |
|
列表渲染
- wx:for=”“,wx:for-item=”循环项的名称/对象的value”,wx:for-index=”循环项的索引/对象的key名”
wx:for-item="循环项的名称",wx:for-index="循环项的索引"
:默认名称叫 item和index,如果只有一层循环可以不写,直接使用- wx:key=”唯一的值”:提高列表渲染的性能,wx:key=”*this” 表示数组是一个普通数组,数组中不是对象
1 |
|
1 |
|
条件渲染
当标签频繁切换使用 hidden
,不频繁使用 wx:if
1 |
|
事件绑定
1 |
|
1 |
|
常用组件
引入自定义样式:@import
,只支持相对路径
1 |
|
view
代替 原来的 div 标签
1 |
|
swiper
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
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 | s是否循环轮播 |
swiper-item:滑块,默认宽度和⾼度都是100%
navigator
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
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时⽣效 |
rich-text
可以将字符串解析成 对应标签,类似 vue中 v–html 功能
1 |
|
nodes属性⽀持 字符串
和 标签节点数组
属性名 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | string | 是 | ⽀持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | ⽀持部分受信任的属性,遵循 Pascal 命名法 |
children | ⼦节点列表 | array | 否 | 结构和 nodes ⼀致 |
⽂本节点:type = text
属性名 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
text | ⽂本 | string | 是 | ⽀持entities |
button
1 |
|
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
size | string | default | 否 | 按钮的⼤⼩ |
type | string | default | 否 | 按钮的样式类型 |
plain | boolean | false | 否 | 按钮是否镂空,背景⾊透明 |
disabled | boolean | false | 否 | 是否禁⽤ |
loading | boolean | false | 否 | 名称前是否带 loading 图标 |
formtype | string | 否 | ⽤于 组件,点击分别会触发 组件的submit/reset 事件 |
|
open-type | 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 | 打开“意⻅反馈”⻚⾯,⽤⼾可提交反馈内容并上传⽇志,开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容 |
icon
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
type | string | 是 | icon的类型,有效值:success, success_no_circle,info, warn, waiting, cancel, download, search,clear | |
size | number/string | 23 | 否 | icon的⼤⼩ |
color | string | 否 | icon的颜⾊,同css的color |
1 |
|
1 |
|
自定义组件
与pages同级新建一个components文件夹
右键新建Component
组件
1 |
|
1 |
|
使用组件
1 |
|
1 |
|
页面分享代码
1 |
|
应用生命周期 app.js
1 |
|
页面生命周期
1 |
|