小程序常用标签
page 页面根组件
小程序的页面根标签为
view 容器组件
代替之前 html 的
h1 ~ h6,p,ul ,ol, li, dl, dt, dd ,table , header, nav, section 等都不支持。
所以在小程序开发的时候不需要注意标签语义化问题。布局的时候首选都是 view 标签。
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 (🧨开发的时候记得修改)
属性名类型默认值说明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 导航组件
参考代码
小程序页面分类
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诊断主要检查什么?