微信小程序学习笔记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有什么区别？WXML是什么文件？

				
			

			

				

					贼厉害
				

				

					02-04
					
					1815
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

				
					
WXML和HTML,WXSS和CSS的区别

				
			

			

				

					爬楼梯的前端小白的博客
				

				

					07-03
					
					2816
					
				

			

		

		

			
				
wxml 是小程序框架设计的一套标签语言 用来构建小程序页面的结构 其作用类似于网页开发中的html

WXML和HTML的区别：

标签名称不同

	html（div span img a）
		wxml （view text image navigator）
	
	属性节点不同
	<a href = "#">超链接为例</a>
		<navigator url="/pages/home/home"></navigator>
	
	提供了类似vue中的模版语

			
		

	





	

		

			

				
					
微信小程序学习笔记③——wxml+wxss+js基础入门[样例+解析]

				
			

			

				

					Wang_Dou_Dou_的博客
				

				

					02-03
					
					6766
					
				

			

		

		

			
				
关键字：微信小程序三大件、WXML+WXSS+JS基础内容了解、实战样例。

			
		

	





	

		

			

				
					
微信小程序 - 云笔记源码.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有一定的基础，同时也需要熟悉微信提供的开发环境和框架特性。通过实际项目练习和不断探索，你可以逐步掌握这...

			
		

	





	

		

			

				
					
小程序中将html内容转化成wxml可以显示的内容，方便用于小程序中显示

				
			

			

				

					01-04
				

			

		

		

			
				
小程序中将html内容转化成wxml可以显示的内容，方便用于小程序中显示

			
		

	





	

		

			

				
					
微信小程序-将html文件转为微信小程序用的wxml文件

				
			

			

				

					08-05
				

			

		

		

			
				
html2wxml
将html文件转为微信小程序使用的文件
转化规则


将以下标签转化为view
body,article,aside,ul,li,ol,caption,dd,dl,dt,footer,header,nav,section,table,thead,tbody,tr,td,th,h1,h2,h3,h4,h5,h6,div,p


将img转化为image


将a转化为navigator


将span,s,b,i,strong转化为text


安装使用
下载安装成功后，将需要处理的html文件拖拽到工具界面即可自动转化，并将文件文件名后缀改为wxml，生成到与当前目录同级的wxml文件夹
界面预览

下载
暂时支持mac版
mac版

			
		

	





	

		

			

				
					
微信包含视图（wxml和wxss）和逻辑(js)的组件优化实例.rar

				
			

			

				

					07-10
				

			

		

		

			
				
微信包含视图（wxml和wxss）和逻辑(js)的组件优化实例，微信小程序组件优化方案的演示源代码，做法分三步：
　　- 子组件的wxml作为模板include到父容器中
　　- 子组件的wxss import到父容器的wxss中
　　- 把父容器的data和方法与子组件的data和方法合并（注意：合并的data及方法名不能重名）
　　看看效果：
　　在子组件的input框中输入内容，父容器中显示input的内容，父容器中点击清空按钮后子组件input内容清空。

			
		

	





	

		

			

				
					
微信小程序wxml和wxss样式

					
热门推荐

				
			

			

				

					zxhandroid的博客
				

				

					04-18
					
					2万+
					
				

			

		

		

			
				
对于css不熟悉的android程序员来说，开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了，它们两者相当于android的布局文件，其中wxml指定了界面的框架结构，而wxss指定了界面的框架及元素的显示样式。
一、wxml
界面结构wxmL比较容易理解，主要是由八大类基础组件构成：

			
		

	





	

		

			

				
					
【小程序从0到1】宿主环境｜WXML｜WXSS｜JS逻辑交互

				
			

			

				

					Coding and studying
				

				

					09-15
					
					1万+
					
				

			

		

		

			
				
宿主环境（host environment）指的是程序运行所必需的依赖环境。例如：
Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

			
		

	





	

		

			

				
					
微信小程序一些常用标签与html的对应关系

				
			

			

				

					天心天地生的博客
				

				

					09-06
					
					1万+
					
				

			

		

		

			
				
简介：微信小程序的wxml和html写法很是相似，但是有些标签和html不同,本文主要介绍了微信小程序一些常用标签与html5的对应关系.







  HTML
  微信小程序



  &lt;div&gt;&lt;/div&gt;
  &lt;view&gt;&lt;/view&gt;


  &lt;h1&gt;&lt;/h1&gt;...&lt;h6&gt;&lt;/h

			
		

	





	

		

			

				
					
html如何转换成wxml,微信小程序脚手架及html转译GUI工具

				
			

			

				

					weixin_32102617的博客
				

				

					05-30
					
					1281
					
				

			

		

		

			
				
微信小程序出现引发了很多讨论，许多开发者都跃跃欲试尝试了小程序的开发。它重新定义了自身的一套开发规范，对于现有的html页面是不支持了。为此我们设想了一套方案，怎么最快速的把现有的开发流接入到小程序中，并能快速的修改现有html项目以符合微信小程序的规范？于是写了一套html暴力转译成wxml的方案，以及搭配了初始模板的脚手架。结构沿用feWorkflow，大部分改动是针对目录的gulp工作流。1...

			
		

	





	

		

			

				
					
微信小程序与web页面制作的区别

				
			

			

				

					Little_Thief的博客
				

				

					05-09
					
					5448
					
				

			

		

		

			
				
前言
最近在做一个微信小程序版的个人博客，本来我还有点胆颤，毕竟也没正儿八经的去学一下，不过我之前接触过，而且web方面（网页制作）的基础还可以，所以斗胆就试一试咯，到今天为止，微信小程序页面终于算是基本做完了，自我感觉微信小程序和web制作没什么很大的区别，今天就根据我的项目博客来总结一下，web和微信小程序两者中比较，让我体会最深的一些知识点。

如果想要完全看懂以下内容，您需要对web方面的知识有一定的了解。并且以下内容我主要写的是web和微信小程序两者之间的区别，并没有对知识点讲解很详细，但是我相信

			
		

	





	

		

			

				
					
XML和HTML的区别

				
			

			

				

					Cathy
				

				

					09-26
					
					1491
					
				

			

		

		

			
				
【前言】XML和HTML长得很像，他们之间有什么区别，我们在学习的过程中应该注意区分，这两个对比来学习会对他们的认识更加全面。一、从定义来看   XML是可扩展的标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。 
  HTML是超文本标记语言，标准通用标记语言的下一个应用。所谓超文本就是指页面内可以包含图片、链接，甚至是音乐、程序等非文字元素。 
二、从用途来看

			
		

	





	

		

			

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

				
			

			

				

					05-05
				

			

		

		

			
				
很抱歉，作为AI语言模型，我无法提供完整的微信小程序注册登录功能的代码，但我可以提供一个简单的UI示例，帮助您了解微信小程序的页面设计和样式：  wxml文件：  ```html   <image class="logo" src="/images/logo....

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值