微信小程序学习笔记02 WXML/WXSS/JS 及其和 HTML /CSS的区别

已于 2022-01-19 09:53:52 修改
阅读量1.7k 收藏 14
点赞数 2
分类专栏： 微信小程序 文章标签： css javascript html
于 2022-01-17 14:42:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50707858/article/details/122536487
版权

一、WXML 和 HTML 的区别：

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。与HTML相似，区别如下：

1.标签名称不同

① html中有 （div span img a）等标签
② wxml中有（ view text image navigator） 等标签

2.属性节点不同
html:

<a href="#">超链接</a>

wxml:


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  lith__romantic
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    14
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
微信小程序 WXML、WXSS 和JS介绍及详解

				
			

			

				

					10-21
				

			

		

		

			
				
主要介绍了微信小程序 WXML、WXSS 和JS介绍及详解的相关资料,需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
前端学习笔记-微信小程序学习笔记

				
			

			

				

					01-09
				

			

		

		

			
				
前端学习笔记-微信小程序学习笔记  微信小程序是一种基于微信平台的轻量级应用程序，提供了前端开发的解决方案。本笔记总结了微信小程序的基本组成部分、JSON 配置文件的作用、WXML 模板语法、WXSS 样式语言、JS ...

			
		

	



                


  
              

                


	

		

			

				
					
【微信小程序】WXML和HTML区别

				
			

			

				

					MrsBaek的博客
				

				

					07-12
					
					3001
					
				

			

		

		

			
				
HTML和WXML是两种不同的标记语言，用于构建网页和小程序的用户界面。它们有以下区别：用途：HTML（Hypertext Markup Language）是用于构建网页的标记语言，而WXML（Wechat Mini Program XML）是微信小程序中用于构建页面结构的标记语言。平台限制：HTML可以在各种Web浏览器上运行，而WXML主要用于微信小程序平台。标签和属性：HTML使用一系列预定义的标签和属性来描述网页结构和样式。

			
		

	





	

		

			

				
					
WXML与HTML的区别

				
			

			

				

					Black_stonenight的博客
				

				

					08-13
					
					9791
					
				

			

		

		

			
				
1、标签名字有点不一样
2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
3、开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。
4、组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。
5、没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。

...

			
		

	



		

			
		



	

		

			

				
					
wxml与标准的html的异同

				
			

			

				

					m0_61093181的博客
				

				

					12-26
					
					752
					
				

			

		

		

			
				
总结来说，WXML和HTML都是用于构建前端界面的标记语言，它们在语法结构、元素标签、样式和布局、兼容性等方面存在一些异同。开发者需要根据具体的开发平台和需求选择使用适当的标记语言。WXML和标准的HTML是两种不同的标记语言，用于构建不同的前端界面。它们之间存在一些异同点。

			
		

	





	

		

			

				
					
微信小程序 - 云笔记源码.zip

					
最新发布

				
			

			

				

					05-04
				

			

		

		

			
				
综上所述，"微信小程序 - 云笔记源码.zip"是一个全面的微信小程序开发实例，涵盖了前端开发的基本技术栈，对于学习和理解微信小程序开发流程、实践组件化开发、API调用以及数据管理等方面具有很高的参考价值。

			
		

	





	

		

			

				
					
微信小程序源码-HotApp云笔记.zip

				
			

			

				

					03-07
				

			

		

		

			
				
1. **微信小程序框架**：微信小程序使用一套基于WXML（Weixin Markup Language）和WXSS（Weixin Style Sheets）的自定义标记语言，以及JavaScript进行业务逻辑处理。WXML负责结构表现，WXSS负责样式设计，而...

			
		

	





	

		

			

				
					
微信小程序-火车票机票小程序

				
			

			

				

					12-21
				

			

		

		

			
				
在微信小程序开发中，开发者会用到类似的原理，只是微信提供了自己的开发环境和API，如WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets）来替代HTML和CSS，JS（JavaScript）则是处理业务逻辑的主要语言...

			
		

	





	

		

			

				
					
微信小程序开发学习笔记

				
			

			

				

					07-23
				

			

		

		

			
				
总之，微信小程序开发是一个综合了前端技术、移动应用特性和微信生态的领域，学习者需要对JS、HTML和CSS有一定的基础，同时也需要熟悉微信提供的开发环境和框架特性。通过实际项目练习和不断探索，你可以逐步掌握这...

			
		

	





	

		

			

				
					
WXML和HTML的区别

				
			

			

				

					weixin_45627726的博客
				

				

					01-20
					
					1234
					
				

			

		

		

			
				
WXML可以通过上述语法快速实现一些功能。

			
		

	





	

		

			

				
					
微信小程序 WXML和html有什么区别？WXML是什么文件？

				
			

			

				

					贼厉害
				

				

					02-04
					
					1815
					
				

			

		

		

			
				
WXML全程WeiXin Markup Language 是小程序框架设计的一套标签语言用来构建小程序页面的结构，起作用类似于网页开发中的HTML。

			
		

	





	

		

			

				
					
【微信小程序】wxss 和 css 、wxml 和 html 区别

				
			

			

				

					qq_17335549的博客
				

				

					02-18
					
					799
					
				

			

		

		

			
				
wxss 和 css 区别

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

wxml 中使用双大括号 {{}} 来插入动态数据
	wxml 的标签名必须使用小写字母，有一些特殊标签 v

			
		

	





	

		

			

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

				
			

			

				

					嗨，朋友你好！我是前端领域的工作者
				

				

					06-10
					
					5003
					
				

			

		

		

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

			
		

	





	

		

			

				
					
微信小程序的wxml、wxss、js、json的理解

					
热门推荐

				
			

			

				

					weixin_52658156的博客
				

				

					07-15
					
					1万+
					
				

			

		

		

			
				
微信小程序的基础学习(2)
小程序的有些语言，有时候按照官方的解释来理解非常的吃力，会把初学者搞得很懵很难受，不知道从何下手！
文件夹下四个文件的理解：




文件
中文解释（个人理解）




.wxml
小程序页面视图 例如人的脸


.wxss
小程序页面视图修饰 例如修饰人脸的胖瘦肤白


.js
小程序逻辑层 例如人脸的神经，其作用就是控制整个人脸的运行


.json
小程序全局配置 其作用配置导航栏的文字、背景颜色、页面底部tabbar等


wxml----小程序的脸面
官方解释：WXML

			
		

	





	

		

			

				
					
【微信小程序】基础篇 -- WXML & WXSS & JS 逻辑交互介绍（四）

				
			

			

				

					JMFive的博客
				

				

					02-22
					
					2407
					
				

			

		

		

			
				
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第4篇文章;今天开始学习微信小程序的第二天💖💖💖，开启新的征程，记录最美好的时刻🎉。【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。也欢迎你，关注我。👍 👍！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉更多专栏订阅:😀。

			
		

	





	

		

			

				
					
微信的WXML和HTML WXSS和CSS的区别详解

				
			

			

				

					psjasf1314的博客
				

				

					09-29
					
					727
					
				

			

		

		

			
				
微信的WXML和HTML WXSS和CSS的区别详解

			
		

	





	

		

			

				
					
写一个含有注册登录功能的微信小程序界面，包括wxml，wxss,js,json

				
			

			

				

					05-05
				

			

		

		

			
				
很抱歉，作为AI语言模型，我无法提供完整的微信小程序注册登录功能的代码，但我可以提供一个简单的UI示例，帮助您了解微信小程序的页面设计和样式：

wxml文件：

```html
<view class="container">
  <image class="logo" src="/images/logo.png"></image>
  <form class="form" bindsubmit="onSubmit">
    <view class="input-group">
      <input class="input" type="text" placeholder="用户名" name="username"></input>
    </view>
    <view class="input-group">
      <input class="input" type="password" placeholder="密码" name="password"></input>
    </view>
    <button class="btn" form-type="submit">登录</button>
    <view class="register">
      <text>还没有账号？</text>
      <navigator url="/pages/register/register">立即注册</navigator>
    </view>
  </form>
</view>
```

wxss文件：

```css
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 50rpx;
}

.form {
  width: 80%;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 20rpx;
}

.input {
  width: 100%;
  height: 60rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  font-size: 28rpx;
}

.btn {
  width: 100%;
  height: 60rpx;
  margin-top: 20rpx;
  background-color: #0191d8;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 30rpx;
}

.register {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register text {
  font-size: 28rpx;
  color: #666;
}

.register navigator {
  font-size: 28rpx;
  color: #0191d8;
}
```

js文件：

```javascript
Page({
  onSubmit: function(event) {
    // 获取表单数据
    const username = event.detail.value.username;
    const password = event.detail.value.password;

    // 处理登录逻辑
    // ...

    // 跳转到首页
    wx.switchTab({
      url: '/pages/index/index'
    })
  }
})
```

json文件：

```json
{
  "navigationBarTitleText": "登录"
}
```

请注意，这只是一个UI示例，需要您自己编写逻辑代码来实现注册登录功能。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值