小程序目录架构和页面组件

image.png

补充:pages里面还有一个index文件夹,index文件夹表示首页; utils文件夹表示公共文件

基础和常用组件

视图容器中的view(块标签)

view属性.png

text标签(普通的行级标签)

text标签及其属性.png

其中space的合法值为:


space合法值.png

图像音视频组件

image组件所拥有的的属性(行级标签)


image组件属性

注:image可以通过添加src属性给定网络地址跳转到网络图片

mode的合法值分为缩放模式(常用)和裁剪模式
mode缩放模式

mode裁剪模式

页面链接navigator(块元素)

页面链接只能在应用进行跳转,不允许外网-


navigator常用属性

target属性合法值

opentype属性合法值
navigation说明

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateTo(Object object)中的

object参数

redirect说明

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。


object参数
SwitchTab说明

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面


switchTab中object参数
reluanch说明

关闭所有界面,打开到应用内的某个界面


relauch的object参数说明
navigationBack说明

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages获取当前的页面栈,决定需要返回几层


object参数

滚动视图scroll view

scroll-view:可滚动的视图区域,使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0版本起支持传入单位(rpx/px)。

scroll-view常用的基本属性

具体属性参考:scroll-view | 微信开放文档 (qq.com)

滑块试图(轮播器)swiper

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

滑块试图的几种常用属性

swiper-item:仅可放置在swiper组件里面,宽高自动设置为100%
swiper-item属性

swiper具体属性参考:swiper | 微信开放文档 (qq.com)

你可能感兴趣的:(小程序目录架构和页面组件)