微信小程序快速入门【三】

最新推荐文章于 2025-03-22 23:26:29 发布

原创最新推荐文章于 2025-03-22 23:26:29 发布 · 5.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #html #css #js

微信小程序笔记专栏收录该内容

6 篇文章

订阅专栏

微信小程序快速入门【三】

文章目录

在这里插入图片描述

👨‍🏫内容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文件是用来对微信小程序进行静态配置的文件，有以下几种类型：

1️⃣ app.json： 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
2️⃣ page.json： 是每个页面的配置，可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。页面级别的配置优先于全局配置生效
3️⃣ project.config.json： 是对微信开发者工具的一些配置，例如界面颜色、编译配置等等
4️⃣ sitemap.json： 是用来配置小程序及其页面是否允许被微信索引，影响小程序在搜索结果中的展示