微信小程序——标签wxml、样式wxss、js、json

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

一、标签wxml

之前学过HTML,里面常用的标签是div、span、img、a,现在小程序里面wxml文件里面写结构,相对应的写法是:
div——>view
span——>text
img——>image
a——>navigator
比如跳转:<navigator url="/pages/index/index"></navigator>

二、样式wxss

小程序里的样式wxss和之前的学过的css样式有一些区别:

  • 新增了rpx单位,这种单位能在不同大小的屏幕上进行自动换算。
  • 提供了全局样式和局部样式:app.wxss里写的样式会应用于所有页面,局部的wxss文件只针对当前页面。【局部的优先级高于全局】
  • wxss仅支持部分css选择器:id选择器、类选择器、标签选择器、并集选择器、后代选择器、::after ::before伪类选择器等。

三、js

app.js

  • 是整个小程序项目的入口文件,通过调用APP()函数来启动整个小程序

页面js文件

  • 单个页面的入口文件,通过调用page()函数用来创建并运行页面

普通的js文件

  • 用来封装一些公共的功能函数或者属性以供页面使用,比如utils里面的utils.js文件

四、json

JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。
具体说明:https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE
注意: JSON 文件中无法使用注释,试图添加注释将会引发报错。文章来源地址https://www.toymoban.com/news/detail-501361.html

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

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

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

相关文章

  • 微信小程序 | 小程序WXSS-WXML-WXS

    🖥️ 微信小程序 专栏:小程序WXSS-WXML-WXS 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、WXSS编写程序样式 小程序的样式写法 WXSS支持的

    2024年01月23日
    浏览(71)
  • 【微信小程序】wxss 和 css 、wxml 和 html 区别

    wxss 支持小程序特有的选择器和 样式属性 scroll-into-view cover-view 等 wxss 引入了 rpx 单位,可以根据屏幕宽度进行自适应,使得开发者可以更方便的处理不同尺寸屏幕的适配问题。 wxss 背景图片只能引入外链,不能使用本地图片 wxss 使用 @import 引入 外链样式文件,地址为相对路

    2024年02月19日
    浏览(48)
  • 微信小程序-----wxss模版样式

    目录 前言 一、WXSS 1. 什么是 WXSS 2. WXSS 和 CSS 的关系 二、rpx 1. 什么是 rpx 尺寸单位 2. rpx 的实现原理 3. rpx 与 px 之间的单位换算 三、样式导入 1. 什么是样式导入 2. @import 的语法格式 四、全局样式和局部样式 1. 全局样式 2. 局部样式         上一期我们学习了wxml的模版语法,

    2024年01月17日
    浏览(67)
  • 微信小程序 样式和全局配置 WXSS

    wxss 把屏幕分为750个物理像素,大屏大,小屏小,随着设备不一致自动适配 推荐使用iPhone6作为标准,1个rpx = 0.5个px,把px乘以2就是rpx的参数 导入外部样式表  样式  权重一样时,局部样式可以覆盖全局样式 导航栏区域 navigationBar 背景区域 backgroud 页面主体区域 可以配置【导

    2024年02月15日
    浏览(65)
  • 无插件,简单配置prettier,将微信小程序的wxml和wxss当作html和css进行格式化

    使用prettier的项目、安装了prettier扩展的vscode和微信开发者工具。 prettier是根据默认的解析器对相应的文件进行处理,我们可以自定义什么格式的文件用什么解析器。具体看 documentSelectors。 只列出有关的配置 编辑器的配置 设置wxml和wxss文件的默认格式化工具为prettier 配置pre

    2024年02月09日
    浏览(66)
  • 微信小程序 <view></view>容器嵌套,wxss样式修改内部内部样式不产生效果

    网上关于”微信小程序讲的知识很少“,微信开发文档对于新手不是很友好,但是建议一定要学会看文档。 问题如下: 我写了好几个view/view 容器嵌套,我在对内部容器包括的内容做修改时,不产生效果,后来发现这是因为引用方式有误。 ’ view 示例二/view   view class = 

    2024年02月17日
    浏览(55)
  • 【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

    🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列专栏:小程序开发基础教程 👑名言警句:海阔凭鱼跃,天高任鸟飞。 📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!! 👉关注✨点赞👍收藏📂

    2024年01月16日
    浏览(70)
  • 微信小程序wxml中view标签下的文字位置

    1. 文字水平居中(上) 2. 文字在整个view容器中居中(上下左右) 3. 关于2的各种组合实现 css align-items属性怎么用?-css教程-PHP中文网 https://www.php.cn/css-tutorial-415237.html#:~:text=CSS%20align-items%E5%B1%9E%E6%80%A7.%20align-items%E5%B1%9E%E6%80%A7%E6%98%AFFlexible%20Box,%E5%B8%83%E5%B1%80%E6%A8%A1%E5%9D%97%E7%

    2024年02月09日
    浏览(44)
  • 【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件

    静态写法 直接使用下面的写法,是静态的。 动态写法 在wxml最外层套一个自己定义的page的class。 如果想修改.page的样式,再用普通的动态class判断改变就可以了。 例如:改变背景颜色 参考:微信小程序如何动态修改page标签的css样式 设置id时需要注意下:id 的设置要求是字母

    2024年02月05日
    浏览(65)
  • 【微信小程序】在WXML文件中显示JS文件中全局变量

    我们知道在wxml中可以通过数据绑定的方法来获取到js文件中data里面的数据,并且显示到wxml界面,那么我们该如何在wxml中显示js文件里面的全局变量呢? 在wxml种我们可以显示js代码中data代码段中的变量。 具体的操作是: 1.在js中添加data字段以及相应的格式,并在data字段中创

    2024年02月04日
    浏览(66)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包