微信小程序快速入门【三】
👨🏫内容1:页面构成
🙋♀️微信小程序的页面是由WXML, WXSS, JavaScript 和JSON文件组成⬇️
WXML是类似于HTML的标记语言,用于描述页面的结构。
WXSS是类似于CSS的样式语言,用于描述页面的外观。
JavaScript是用于处理页面的逻辑和交互的脚本语言。
JSON是用于配置页面的属性和引入组件的数据格式。
➡️其中,WXML和JavaScript文件是必须存在的,WXSS和JSON文件可以省略
➡️每个页面都放在pages文件夹下的一个小文件夹中,文件夹的名称就是页面的名称
➡️接下来我们将依次了解这四个类型的文件
👨⚖️内容2:WXML
🎃WXML文件类型是微信小程序开发中使用的一种标记语言,用于描述页面的结构。它与HTML有一些相似之处,但也有一些区别,例如⬇️
- WXML支持数据绑定、列表渲染、条件渲染、模板等特性,可以实现动态的页面效果
- WXML不支持所有的HTML标签和属性,只支持微信小程序提供的 基础组件 和 自定义组件 ,以及一些特殊的标签和属性
- WXML不依赖于浏览器环境,而是在微信客户端中被解析为不同平台的渲染文件
WXML文件的后缀名为.wxml,每个页面都需要有一个对应的WXML文件来定义页面的布局和内容。WXML文件中可以使用 { {}} 来引用在页面的JavaScript文件中定义的数据和表达式
🎯实例代码【官方初始化代码】
<!--index.wxml--> <view class="container"> <view class="userinfo"> <block wx:if="{{canIUseOpenData}}"> <view class="userinfo-avatar" bindtap="bindViewTap"> <open-data type="userAvatarUrl"></open-data> </view> <open-data type="userNickName"></open-data> </block> <block wx:elif="{{!hasUserInfo}}"> <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button> <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <view wx:else> 请使用1.4.4及以上版本基础库 </view> </block> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>
我们可以看到WMXL与HTML中的基础组件有些不同
下面我将介绍几个常用的基础组件的用法⬇️1️⃣button【按钮】
<button type="primary">主要按钮</button>
2️⃣text【文本】
<text>失散多年的哥哥</text>
3️⃣image【图片】
<image src="https://z4a.net/images/2023/07/21/773b787a68956d271e2ba1ceba9eb93c.png" mode="aspectFit" style="width:750rpx"></image>
其他更多的基础组件可以查看微信开放文档👇
微信开放文档
👨💻内容3:WXSS
🎃WXSS是微信小程序开发中使用的一种样式语言,用于描述WXML的组件样式12。它与CSS有一些相似之处,但也有一些区别⬇️
- WXSS支持尺寸单位rpx,可以根据屏幕宽度进行自适应
- WXSS支持样式导入,可以在一个WXSS文件中引用另一个WXSS文件,方便样式的复用和管理
- WXSS支持全局样式和局部样式,可以在app.wxss中定义全局的通用样式,在页面的wxss文件中定义局部的特殊样式
- WXSS支持内联样式,可以在WXML的组件上使用style和class属性来控制组件的静态和动态样式
- WXSS支持选择器,可以使用类选择器、id选择器、元素选择器、伪类选择器等来选择和修改组件的样式
WXSS文件的后缀名为.wxss,每个页面都可以有一个对应的WXSS文件来定义页面的外观和布局。WXSS文件中可以使用CSS的语法和属性来编写样式规则
🎯有关Wxss的内容有很多,下面我仅举一个十分简单的例子⬇️
🍎 原始效果
<image src="https://z4a.net/images/2023/07/21/773b787a68956d271e2ba1ceba9eb93c.png" ></image>
🍉 添加样式imgClass
.imgClass{ width: 700rpx; /*width:宽 height:高*/ height: 500rpx; margin-top:100rpx; /*margin-top: 顶部间隔*/ margin-left: 25rpx; /*margin-left: 左侧间隔*/ }
👨🚀内容4:JS
👉微信小程序中js文件是用于与用户交互,进行逻辑处理,如响应用户的点击、获取用户的位置等。
👉js文件也可以用来定义一些全局的属性、变量或函数,如小程序的入口文件app.js。js文件中可以使用WXS(WeiXin Script)这种小程序的脚本语言,结合WXML,可以构建出页面的结构。
👉js文件中还可以调用小程序提供的API,如网络请求、数据存储、界面交互等
🍉 例如给之前的图片加上点击变化效果
/** * 页面的初始数据 */ data: { imgurl:"https://z4a.net/images/2023/07/21/773b787a68956d271e2ba1ceba9eb93c.png", imgurl2:"https://z4a.net/images/2023/07/22/f2d0fd4e16ec3d5614e7f72ed47483fd.jpg", }, /** * change : 点击更改图片 */ change(){ this.setData({ imgurl : this.data.imgurl2, }) },
🧑🌾内容5:JSON
👉微信小程序中json文件是用来对微信小程序进行静态配置的文件,有以下几种类型:文章来源:https://www.toymoban.com/news/detail-599445.html
- 1️⃣ app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
- 2️⃣ page.json: 是每个页面的配置,可以独立定义每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等等。页面级别的配置优先于全局配置生效
- 3️⃣ project.config.json: 是对微信开发者工具的一些配置,例如界面颜色、编译配置等等
- 4️⃣ sitemap.json: 是用来配置小程序及其页面是否允许被微信索引,影响小程序在搜索结果中的展示
文章来源地址https://www.toymoban.com/news/detail-599445.html
到了这里,关于微信小程序快速入门【三】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!