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

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

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


微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js


微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js


👨‍🏫内容1:页面构成


🙋‍♀️微信小程序的页面是由WXML, WXSS, JavaScript 和JSON文件组成⬇️
WXML是类似于HTML的标记语言,用于描述页面的结构。
WXSS是类似于CSS的样式语言,用于描述页面的外观。
JavaScript是用于处理页面的逻辑和交互的脚本语言。
JSON是用于配置页面的属性和引入组件的数据格式。
➡️其中,WXML和JavaScript文件是必须存在的,WXSS和JSON文件可以省略
➡️每个页面都放在pages文件夹下的一个小文件夹中,文件夹的名称就是页面的名称
➡️接下来我们将依次了解这四个类型的文件

微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js

🌸🌸🌸🌷🌷🌷💐💐💐🌷🌷🌷🌸🌸🌸

👨‍⚖️内容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>

微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js


2️⃣text【文本】

<text>失散多年的哥哥</text>

微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js


3️⃣image【图片】

<image src="https://z4a.net/images/2023/07/21/773b787a68956d271e2ba1ceba9eb93c.png" mode="aspectFit" style="width:750rpx"></image>

微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js
其他更多的基础组件可以查看微信开放文档👇
微信开放文档

🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻

👨‍💻内容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>

微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js

🍉 添加样式imgClass

.imgClass{
 width: 700rpx;    /*width:宽  height:高*/
 height: 500rpx;
 margin-top:100rpx;  /*margin-top: 顶部间隔*/
 margin-left: 25rpx; /*margin-left: 左侧间隔*/
}

微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js

🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾

👨‍🚀内容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,
   })
 },

微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js

🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮

🧑‍🌾内容5:JSON


👉微信小程序中json文件是用来对微信小程序进行静态配置的文件,有以下几种类型:

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

微信小程序快速入门【三】,微信小程序笔记,微信小程序,小程序,html,css,js文章来源地址https://www.toymoban.com/news/detail-599445.html

到了这里,关于微信小程序快速入门【三】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • JavaWeb(2)——HTML、CSS、JS 快速入门

    目录 一、JavaScript 结构 💬 什么是BOM,什么是DOM?👭 BOM(浏览器对象模型 👨‍💻): DOM(文档对象模型 🏡): 总结下来就是 🌱  : 二、JavaScript 书写位置 🐟 三、JavaScript 注释 🔥 四、JavaScript 输入输出语法 🤖  五、JavaScript 变量 💎  六、JavaScript 变量命名 ✨

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

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

    2024年02月19日
    浏览(46)
  • 微信小程序js如何动态设置css

    微信小程序中可以使用setData()方法动态设置CSS样式。 例如,我们可以在wxml文件中定义一个样式类: ``` view class=\\\"my-class\\\"Hello World/view ``` 然后在js文件中使用setData()方法动态设置该样式类的CSS样式: ``` Page({   data: {     myClassStyle: \\\'\\\'   },   onLoad: function () {     this.setData({    

    2024年02月09日
    浏览(40)
  • 微信小程序通过js动态修改css样式的方法,以及css变量

    不知道各位小帅有没有遇到这种问题,在微信小程序开发的时候,我们想要将某个文字大小变大,那么本篇文章就是解决这个问题。

    2024年02月06日
    浏览(53)
  • 微信小程序快速入门

    在这里首先祝大家国庆节快乐,其实原本文章都没有准备好,也没有打算更文的,那还是将就一下吧,发个简单的。 相信大家对微信小程序并不陌生,以前我们接触网络刚开始是CS架构,我们可以下载很多的电脑软件,游戏各种都是连线玩的,后来呢,我们都知道BS架构更加

    2024年02月11日
    浏览(38)
  • 微信小程序快速入门【二】

    🙋‍♀️上一篇文章我们已经入门了小程序开发,申请了小程序号,也准备了开发环境,今天我们来分析一下小程序的项目结构。 🌸🌸🌸🌷🌷🌷💐💐💐🌷🌷🌷🌸🌸🌸 🎃 小程序的项目结构: 👉小程序的项目结构如下图所示,小程序的项目主要包含四种文件: 1️

    2024年02月11日
    浏览(39)
  • 微信小程序快速入门【三】

    🙋‍♀️微信小程序的页面是由WXML, WXSS, JavaScript 和JSON文件组成⬇️ WXML 是类似于HTML的标记语言,用于描述页面的结构。 WXSS 是类似于CSS的样式语言,用于描述页面的外观。 JavaScript 是用于处理页面的逻辑和交互的脚本语言。 JSON 是用于配置页面的属性和引入组件的数据格

    2024年02月16日
    浏览(36)
  • 微信小程序快速入门【四】

    不同于Android应用和iOS应用直接运行于Andorid系统和iOS系统,微信小程序运行在微信提供的宿主环境中,由于微信已经替我们抹平了不同平台的差异,所以微信小程序能够实现跨平台,且能够实现很多普通网页无法实现的功能。我们将以之前建立的Test项目为例介绍一下微信小程

    2024年02月07日
    浏览(51)
  • 微信小程序快速入门【一】

    🙋‍♀️自2017年微信推出《微信小程序》以来,阿里、百度、字节跳动等一众大佬平台相继也推出了自己的小程序体系。 👉由于微信自身的强势社交属性,以及其对小程序的战略定位(连接人与服务)的前提下进行了持续的大力支持,所以到目前为止,微信小程序还是所有

    2024年02月08日
    浏览(45)
  • 微信小程序快速入门03

    🏡浩泽学编程 :个人主页  🔥 推荐专栏 :《深入浅出SpringBoot》《java项目分享》               《RabbitMQ》《Spring》《SpringMVC》 🛸学无止境,不骄不躁,知行合一 本文讲诉:生命周期、WXS脚本。 生命周期(Life Cycle) 是指一个对象从创建 - 运行 -销的整个阶段,强调的

    2024年01月20日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包