源码库

微信小程序开发

源码库-建站教程-网站开发-微信小程序开发- 正文

wxml是什么语言?wxml源代码用什么软件打开?

2018-05-02 源码库 www.aspku.com 大字
wxml是什么语言?

WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。,基础组件类似HTML中的标签,事件系统是JavaScript中的事件,可处理逻辑反应到界面上;wxml只是一个文件格式,如果没有组件和事件它没任何用处,又如果把组件、事件写在txt文档里面也没任何用处,所以没有谁更厉害,相辅相成的关系。

wxml,wxml是什么,wxml是什么语言,wxml源代码

用以下一些简单的例子来看看WXML具有什么能力:

数据绑定

  1. <!--wxml--><view> {{message}} </view> 
  2. // page.jsPage({ 
  3.   data: { 
  4.     message: 'Hello MINA!' 
  5.   } 
  6. }) 

                                  
列表渲染

  1. <!--wxml--><view wx:for-items="{{array}}"> {{item}} </view> 
  2. // page.jsPage({ 
  3.   data: { 
  4.     array: [1, 2, 3, 4, 5] 
  5.   } 
  6. }) 

                                  
条件渲染

  1. <!--wxml--><view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view><view wx:elif="{{view == 'APP'}}"> APP </view><view wx:else="{{view == 'MINA'}}"> MINA IS NOT APP </view> 
  2. // page.jsPage({ 
  3.   data: { 
  4.     view: 'MINA' 
  5.   } 
  6. }) 

                                  
模板
  1. <!--wxml--><template name="staffName"
  2.   <view>FirstName: {{firstName}}, LastName: {{lastName}}  </view></template><template is="staffName" data="{{...staffA}}"></template><template is="staffName" data="{{...staffB}}"></template><template is="staffName" data="{{...staffC}}"></template> 
  3. // page.jsPage({ 
  4.   data: { 
  5.     staffA: {firstName: 'Hulk', lastName: 'Hu'}, 
  6.     staffB: {firstName: 'Shang', lastName: 'You'}, 
  7.     staffC: {firstName: 'Gideon', lastName: 'Lin'
  8.   } 
  9. }) 

                                  
事件

  1. <view bindtap="add"> {{count}} </view> 
  2. Page({ 
  3.   data: { 
  4.     count: 1 
  5.   }, 
  6.   add: function(e) {this.setData({ 
  7.       count: this.data.count   1}) 
  8.   } 
  9. }) 

wxml源代码用什么软件打开?

wxml源代码常用微信官方的微信开发者工具来进行编辑、编译、预览。当然,也可以使用一些其它的专业编程软件,如:editplus、dreamweaver、Notepad++等软件来打开编辑,但这些软件没有微信开发者工具方便。

以上则是wxml是什么语言?wxml源代码用什么软件打开的全部内容,如需了解更多微信小程序编程知识可参考《微信小程序开发文档》!
分享到:

相关阅读

阅读排行