首页 前端知识 【微信小程序】wxml、wxss、js、json文件介绍

【微信小程序】wxml、wxss、js、json文件介绍

2024-05-19 09:05:22 前端知识 前端哥 334 458 我要收藏

在这里插入图片描述

😉博主:初映CY的前说(前端领域) ,📒本文核心:微信小程序的入门介绍

【前言】书接上回,我们知道了一个小程序的构成结构,接下来我们来进一步学习小程序的目录结构中的.wxml、.wxss、.js、.json。

目录

  • ⭐ 一、wxml
  • ⭐ 二、wxss
  • ⭐ 三、js
  • ⭐ 四、json

⭐ 一、wxml

用于页面的布局结构,相当于网页中 .html 文件
换做网页来说就是我们的HTML代码在这个页面中书写,下面来个例子感受下!

1.我们在wxml文件中写下这一段代码:

<view >
    <text >Hello,小程序</text>
</view>

2.页面查看
在这里插入图片描述
是不是很简单??对的没错,写法与平时写HTML代码类似,只不过换成了等等标签仅此而已,语法格式也是同理。

⭐ 二、wxss

用于页面的样式,相当于网页中的 .css 文件
这一点与之前不同的是,我们所写的样式文件不是写在与html代码那个页面,而是像引入外部js文件一样。我们写在一个专属的页面,小程序会自动解析不需要我们引入到html页面中会自动用上我们写下的样式。
1.给上述html中代码添加一个hello类

<view class="hello">
    <text >Hello,小程序</text>
</view>

2.在wxss中写下我们的类

.hello{
  text-align: center;
  margin-top: 100px;
  font-size: 30px;
  color: orange;
}

3.页面查看
在这里插入图片描述

⭐ 三、js

用于页面的逻辑
同理,似我们写的javaScript代码。每个页面的 .js 文件中必须调用一个内置全局的函数 Page 并且至少要传入一个空对象做为它的参数,否则会报错。
在 data 选项中定义数据。

data:定义页面初始数据,类似 vue 组件的 data 函数

1.定义数据

// pages/index/index.js
Page({
    data: {
        msg: '大家好,这是我开发的第一个小程序!',
    },
})

2.在页面渲染数据

<view class="hello">
    <text >Hello</text>
    <text >{{msg}}</text>
</view>

3.页面查看
在这里插入图片描述

⭐ 四、json

用于页面的配置
该功能需要点数据支撑,我们后期再来学习如何配置

好了今天的介绍就此结束喽~下一篇文章将会介绍小程序的基础语法知识,敬请期待!

至此本文结束,愿你有所收获!
期待大家的关注与支持! 你的肯定是我更新的最大动力!!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8911.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!