微信小程序的标签及常见样式

这篇具有很好参考价值的文章主要介绍了微信小程序的标签及常见样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

view

类似div 块状元素 可设置 宽高!

fix-direction:row   横向布局
fix-direction:column    纵向布局

横向滑动

标签组件: swiper和swiper-item(单个页面)

一般都是照片! 视屏和音频都可不行,上传代码包大小有限制!

swiper组件常用属性:

indicator-dots  boolean false 是否显示面板指示点!
indicator-color="#ccc" color 只能用十六进制 指示点颜色!
indicator-active-color="blue" 当前选中的指示点颜色!
autoplay    boolean false   是否自动切换!
interval    number  5000(毫秒)    自动切换的时间!
circular    boolean false   是否采用衔接滑动!
<swiper class="swiper-container" indicator-dots indicator-color="#ccc" indicator-active-color="blue" circular>
    <!-- 第一项轮播图 -->
    <swiper-item>
        <view class="item">
            <image src="/img/001.jpg"></image>
        </view>
    </swiper-item>
​
     <!-- 第二项轮播图  -->
     <swiper-item>
        <view class="item">
            <image src="/img/002.jpg"></image>
        </view>
    </swiper-item>
     <!-- 第三项轮播图  -->
     <swiper-item>
        <view class="item">
            <image src="/img/003.jpg"></image>
        </view>
    </swiper-item>
</swiper>

竖向滑动

组件: scroll-view 滚动的视图容器 必须给个固定高度!

<!-- scroll-y 属性   允许竖向滚动 -->
​
<!-- 注意,使用竖向滚动时,必须给个固定高度 -->
​
<!-- scroll-x 属性   允许横向滚动 -->
​
<scroll-view  scroll-y>
​
•    <view></view>
​
•    <view></view>
​
•    <view></view>
​
</scroll-view>

text标签

类似HTML中span标签 是个行内标签!

该标签只有一个作用 selectable(要加,不加效果不显示)!

<text selectable>15876345671</text>

在实际页面 长按可以复制!!


rich-text

渲染HTML标签-用于小程序书写

要知道,HTML标签与小程序标签不是一个概念,不能直接用!

<rich-text nodes="<h1 style='color:red;'>苏苏少年</h1>"></rich-text>

button组件

<button>默认按钮</button>   白背景黑色字
<button type="primary">主色调按钮</button>   绿背景白字
<button type="warn">警告按钮</button>   白背景红字
​
size="mini" 缩小版的
<button size="mini">默认按钮</button>
​
plain 镂空按钮  就是白色背景-字体颜色不一样!
<button plain>默认按钮</button>

在全局样式配置 app.json

"style" : "v2"  新版样式!

删掉此代码,button按钮将使用老版样式!


image组件

小程序中只有image标签, 没有img标签

<image src=""></image>
/(斜杠)   表示根目录!

image组件中的mode属性!

微信小程序的标签及常见样式

 


API

简单了解!!

① 事件监听API

特点: 以on开头

②同步API

特点: 以Sync结尾

③异步API


数据绑定

在页面对应的.js文件中,把数据定义到data对象中

page({
    data: {
        info: 'hello world',
        imgSrc: 'images/...'
    }
})

页面结构如下:

<view>{{info}}</view>
<image src="{{imgSrc}}" mode="widthFix"></image>

三元运算

页面数据如下:

page({
    data: {
        randomNum: Math.random()*10
        //  随机生成10以内的数!
    }
})

页面结构如下:

<view>{{randomNum >=5 ? '数字大于或等于5' : '数字小于5'}}</view>

算数运算

页面数据如下:

page({
    data: {
        randomNum: Math.random().toFixed(2)
        //  生成一个带两位小数的随机数 0.34
    }
})

页面结构如下

<view>生成100以内的随机数:{{randomNum * 100}}</view>

常用的事件

微信小程序的标签及常见样式

 


事件对象

微信小程序的标签及常见样式

 


条件渲染

微信小程序的标签及常见样式

 

......(这里不在深究!)


列表渲染

微信小程序的标签及常见样式

 

......(这里不在深究!)


WXSS

WXSS(WeiXin Style Sheets)是一套样式语言,用于美化WXSS的组件样式,类似于网页开发中的CSS!

WXSS具有CSS大部分特性 同时,WXSS还对CSS进行了扩充以及修改,以适用微信小程序的开发.

WXSS扩展特性有:

① rpx尺寸单位

rpx(responsive pixel) 是微信小程序独有的,用来解决屏适配的尺寸单位! (了解)

② @import样式导入

@import后跟需要导入的外联样式表的相对路径 用 ; 表示语句结束!

示例: @import "common.wxss";

首先,建立一个公共样式common.css 写一个样式 导入 以及导入的路径 就可以在wxml直接使用!


全局配置

小程序根目录下的app.json文件是小程序的全局配置文件.

常用的配置如下:

① pages

  • 记录当前小程序所有页面的存放路径!

② window (!!)

  • 全局设置小程序窗口的外观!

③ tabBar (!!)

  • 设置小程序底部的tabBar效果!

④ style

  • 是否用新版的组件样式!


window节点

微信小程序的标签及常见样式

 

导航栏颜色仅支持十六进制 (#2b4b6b)!


下拉刷新效果

概念: 下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,重新加载页面数据的行为!

在全局配置/单个页面配置(app.json / .js)

 "enablePullDownRefresh": true

定义下拉刷新的背景色

"backgroundColor":	 (十六进制)	#efefef(浅灰色)

设置下拉刷新时loading的样式!

"backgroundTestStyle":   dark或light

上拉触底

概念: 上拉触底是移动端的专有名词, 通过手指在屏幕上的上拉滑动操作, 从而加载更多数据的行为!

"onReachBottomDistance":50px
默认距离为50px

tabBar

tabBar 是移动端应用常见的页面效果, 用于实现多页面的快速切换.

小程序中通常将其分为:

  • 底部tabBar

  • 顶部tabBar

注意:

  • tabBar中只能配置最少两个 最多五个tab页签!

  • 当渲染顶部tabBa时, 不显示icon(图标) 只显示文本!

backgrundColor: tabBar的背景色!
borderStyle: tabBar上边框的颜色!
selectedIconPath: 选中时的图片路径!
iconPath: 未选中时的图片路径!
selectedColor: tabBar上的文字选中时的颜色!
color: tabBar上文字的默认(未选中)颜色!

tabBar配置

每个tab项的配置选项

配置tabBar选项!

"tabBar":{
	"list":[
		{
			"pagePath": "pages/index/index",
			"text": "首页",
			"iconPath":"/images/houme.png",
			"selectedIconPath": "/images/home.png"
		},
		{
			"pagePath": "pages/demo/demo",
			"text": "消息",
			"iconPath":"/images/houme.png",
			"selectedIconPath": "/images/home-active.png"
		}
	]
}

页面配置

在小程序中, 每个页面都有自己的.json配置文件, 用来对当前页面的窗口外观 页面效果等进行配置!

页面配置全局配置的关系:

在小程序中 app.json中的winow节点 可以全局配置小程序中每一个页面的窗口表现.

如果某些小程序页面想要拥有特殊的窗口表现 此时 "页面级别的.json配置文件" 就可以实现这种需求!

注意: 当页面配置与全局配置冲突时 根据就近原则 最终结果以页面配置为准!


数据请求

出于对安全性方面的考虑 小程序官方对数据接口的请求做出了如下两个限制:

  • 只能请求HTTPS类型的接口!

  • 必须将接口的域名添加到信任列表中!


关闭黄条警示

"checkSiteMap":false

声明式导航

  • 在页面上声明一个<navigator>导航组件

  • 通过点击<navigator>组件实现页面导航

导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面

在使用<navigator>组件跳转指定的tabBar页面时,需要指定url属性和open-type属性:

其中

url表示要跳转的页面的地址, 必须以 / 开头 (不加斜杠 不起作用)

open-type表示跳转的方式 必须为 switchTab

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

导航到非tabBar页面

url表示要跳转的页面的地址, 必须以 / 开头 (不加斜杠 不起作用)

open-type表示跳转的方式 必须为 navigate (可省略)

<navigator url="/pages/info/info">导航到info页面</navigator>

后退导航

如果要退到上一页面或多级页面, 则需要指定open-type属性和delta属性

其中:

  • open-type的值必须是navigateBack, 表示进行后退导航

  • delta得知必须是数字 表示要后退的层级

<navigator open-type="navigateBack" delta="1"></navigator>

注意:

为了简单, 如果只是后退到上一页,则可以省略delta属性 因为其默认值就是1!


编程式导航

调用小程序的导航API, 实现页面的跳转!


跳转到tabBar页面

页面结构:

<button bindtap="gotoMessage">跳转到message页面</button>

微信小程序的标签及常见样式

 


跳转到非tabBar页面

<button bindtap="gotoInfo">跳转到info页面</button>

微信小程序的标签及常见样式

 


后退导航

微信小程序的标签及常见样式

 


声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径. 同时,路径也可以携带参数!

  • 参数与路径之间使用 ? 分隔

  • 参数键与参数值用 = 相连

  • 不同参数用 & 分隔

........文章来源地址https://www.toymoban.com/news/detail-484716.html

到了这里,关于微信小程序的标签及常见样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS基础:块状元素、内联元素、内联块状元素(行内元素)

    CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 1.常用的块状元素有: 2.常用的内联元素有: 3.常用的内联块状元素有: 什么是块级元素?在html中 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码

    2023年04月12日
    浏览(50)
  • 微信小程序折叠面板 (类似手风琴 收起展开一样的噢)

    效果图 sass/lsee 转换css 网站 SASS 转 CSS 工具,在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具 wxml js wxss

    2024年02月12日
    浏览(46)
  • 微信小程序:全局状态管理mobx-miniprogram(类似store)

            需求是,每个播放视频的地方都有控制是否静音的按钮,点某一个静音则全局静音。         问题 :由于我的每个小卡片都是一个组件,本质是每个页面引几次同一个组件,刚开始用的setData,但是这样每个卡片中的数据都是经过深拷贝而独立的,所以点击某个按钮

    2024年02月11日
    浏览(52)
  • 微信小程序实现页面数据侦听器,类似vue的watch

    既然小程序的组件已经有Observer功能,那为什么还要手写watch功能呢? Observer只能在Component中使用,没法在Page中使用。若是想在Page中监控某一数据的变化,Observer做不到。 Observer属于小程序的新功能,只能在高版本微信使用,低版本微信无法使用。公司的小程序就因为使用了

    2024年02月03日
    浏览(57)
  • 微信小程序通过 wxministore 实现类似于vuex的全局装填数据管理

    首先 我们打开终端 引入依赖 然后 如果你是新版开发者工具 就 构建一下 如果你是 老版本的 微信开发者工具 就打开右上角详情 选择本地管理 勾选 使用 npm 模块 然后 在根目录下创建一个 store.js 当然建在哪是你自己决定的 反正 后面能引入到就好 然后 store.js 编写代码如下

    2024年02月05日
    浏览(41)
  • 微信小程序:布局样式

    2024年02月04日
    浏览(37)
  • 【微信小程序】文章样式,标题样式,及设置背景~

    | background-size  设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。 | background-size: cover;适配屏幕大小 文章样式,标题样式,及设置背景~ index.wxml app.wxss index.scss 注意: 微信小程序中不支持直接

    2024年02月07日
    浏览(42)
  • 微信小程序动态修改样式

    微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式 代码如下(示例):

    2024年02月12日
    浏览(53)
  • 微信小程序修改placeholder样式

    微信小程序有既定的修改placeholder的标签

    2024年04月10日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包