幻域竞界 - 全球网游活动速递站

首页 > 跨区攻略 > 小程序常用标签

小程序常用标签

page 页面根组件

小程序的页面根标签为 ,相当于 html 的 body 标签。

view 容器组件

代替之前 html 的

h1 ~ h6,p,ul ,ol, li, dl, dt, dd ,table , header, nav, section 等都不支持。

所以在小程序开发的时候不需要注意标签语义化问题。布局的时候首选都是 view 标签。

标签可通过添加类名,配合 wxss 样式的方式实现不同的页面布局。

text 文本组件

text 组件支持回车键换行,也可以通过 \n 换行。长按文字可以复制(只有 text 标签有这个功能,手机端和模拟器长按选择效果有差异)只能嵌套 text

属性类型默认值说明user-selectbooleanfalse文本是否可选,该属性会使文本节点显示为 inline-blockdecodebooleanfalse是否解码,  一个字符大小spacestring显示连续空格,space="emsp" 一个字符大小image 图片组件

图片标签,image 组件默认宽高(🧨记得手动设置宽高)。支持懒加载。

属性名类型默认值说明srcString图片资源地址modeStringscaleToFill图片裁剪、缩放的模式lazy-loadBooleanfalse图片懒加载webpBooleanfalsewebp图片格式比 jpg 和 png 更小,旧版手机和微信不支持mode 有效值:

值说明备注aspectFit保持纵横比缩放图片,使图片的长边能完全显示出来。预览大图(图片能完整显示)aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来。头像容器,朋友圈多图展示widthFix宽度不变,高度自动变化,保持原图宽高比不变高度自适应heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变宽度自适应建议:模式使用的时候不要死记硬背属性的值,特容易混淆,建议查看文档,第一个不是想要的就换第二个…。

swiper 滑动组件

swiper 容器组件默认样式有高度 150px (🧨开发的时候记得修改) 容器有 width:100%; height:100%; postion:absolute;

滑动项1

滑动项2

滑动项3

组件属性:

属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色indicator-active-colorColor#000000当前选中的指示点颜色autoplayBooleanfalse是否自动切换intervalNumber5000自动切换时间间隔circularBooleanfalse是否循环轮播button 按钮

超级按钮 - 调用微信开放能力

微信开放能力是原生微信 App 里面的功能,模拟器无法模拟原生 app,以下功能都需要微信扫码体验真实效果。

open-type 的合法值功能描述备注share调用分享功能可以分享给个人,微信群,项目成员有权访问未上线的项目contact调用客服功能登录微信公众平台,配套客服管理系统getUserInfo调用获取用户信息功能需要通过小程序的事件获取getPhoneNumber获取用户手机号功能个人开发者没法调用,需要企业账号才能调用微信开放能力 - 客服聊天

navigator 导航组件

参考代码

导航标签-基础

跳转到demo06

跳转到demo06

跳转到demo07自己

导航标签-跳转tabBar页 🚩

tabBar页demo01

tabBar页demo02

tabBar页demo03

tabBar页demo04

导航标签-替换页面

跳转到demo06

替换到demo06

导航标签-返回上一页

跳转到新的demo07

返回上一页

回退两级

小程序页面分类

tabBar 页,在 app.json 的 tabBar 中配置过的页面,最多 5 个,tabBar 页打开后就一直在内存中。普通页,底部没有 tab 栏的,普通页没法展示 tabBar,普通页点击了返回后会被销毁。

打开方式

open-type 的合法值功能说明备注open-type="navigate"打开新的普通页默认值,可以省略不写open-type="switchTab"切换 tabBar 页打开 tabBar 页的时候会销毁所有普通页open-type="redirect"替换普通页面支付成功后,登录成功后open-type="navigateBack"返回上一页自定义返回按钮小结

小程序是多页面应用,Vue 是单页面应用。小程序页面分两类,普通页 和 tabBar 页。最多同时保留10个普通页面,到达10页后无法再打开新的普通页。跳转 tabBar 页需要指定 open-type="switchTab",否则无法跳转。tabBar 左上角没有返回箭头,跳转 tabBar 的时候,所有普通页都会被销毁。

rich-text 富文本(渲染)组件

功能相当于 Vue 中的 v-html。

可以在小程序中渲染静态的 html 内容。

其他组件

icon 组件

checkbox 组件

// pages/demo09/index.js

Page({

// 获取 checkbox 复选按钮编组的值,获取的数据格式是数组

getCheckboxValue(e){

console.log(e.detail.value); // ["dadoudou", "chifan", "shuijiao"]

},

})

radio 组件

// pages/demo09/index.js

Page({

// 获取单选框的值,获取的数据格式是字符串

getRadioValue(e){

console.log(e.detail.value); // "chifan"

}

})

注意事项

icon 组件可以改大小和颜色。checkbox radio 微信只提供颜色的修改属性,不能修改大小。




原神藏锋任务 寻找藏锋剑的具体在哪里
派克CT诊断主要检查什么?