前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序开发(常用标签用法-第二篇)

微信小程序开发(常用标签用法-第二篇)

作者头像
全栈开发日记
发布2022-05-13 14:31:19
6660
发布2022-05-13 14:31:19
举报
文章被收录于专栏:全栈开发日记全栈开发日记

目录:

image标签 navigator标签 button标签

本篇中三个标签在小程序中都是相较重要的,我在下面列举了它们常用的属性和方法。

image标签

与HTML中img一样,用来引入图片的。

但是在小程序中需要注意,图片尽量不要放在项目中,因为在最后上传项目时大小不能超过8MB

解决方法

① 无成本方式:将项目中的图片放到图床中。这个图床可以是你的QQ空间,或微博等可以发布图片的地方,然后将图片的地址复制下来,引入到你的小程序中。

② 小成本方式:存放到你的小型服务器中,这个需要一定成本。当然你可以租一个云空间来存放图片,可以节省更多的成本。

小程序中image标签可以设置model属性,可以定义图片在你的小程序中以什么方式呈现给用户。

还有一个很关键的属性:

navigator 标签

导航组件。与HTML中的a标签作用相似。不过它是块级元素,会独占一行。

官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

常用的一些属性:

常用属性

描述

url

要跳转的页面路径,相对和绝对路径都行,不需要文件后缀

target

指定跳转到哪个小程序。self,默认值,指当前小程序。miniProgram,其他的小程序的页面

open-type

指定跳转方式,值比较多,另外列一个表格。

open-type合法值

描述

navigate

保留当前页面,跳转到当前小程序的其他页面,不能跳转到 tabbar 页面

redirect

关闭当前页面,其他介绍同上。即没有返回按钮

switchTab

跳转到tabbar页面,并关闭其他非tabbar页面

reLaunch

关闭所有页面,打开到应用内的某个页面,可以随便跳

navigateBack

返回上一个页面

exit

退出小程序,target="target"时生效

其他的属性请移步官方文档。

button标签

与HTML相同,同样是按钮。但是小程序中按钮内置的功能比较强大,且无可替代。

官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

属性列表:

属性

描述

size

指定按钮的大小。default,默认。mini,小尺寸。

type

指定按钮的颜色。默认灰色,primary绿色,warn红色。

plain

指定按钮是否镂空,背景色透明

loading

在按钮前面带一个等待样式

open-type

开放能力,能力很多,看下图。

代码示例:

代码语言:javascript
复制
<button size="mini" open-type="contact">打开客服窗口</button>

注意:在开发工具中无法模拟打开客服窗口,需要在手机端模拟。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-12-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈开发日记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • image标签
  • navigator 标签
  • button标签
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档