wx小程序（wxml）

简介

WXML-->HTML（一种用来制作超文本（带图片视频）文档的简单标记语言）

WXSS-->CSS（CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。）

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

WXML的功能
1.数据绑定

//表示看见的数据
<!--wxml-->
<view>{{message}}</view>//在Page.js里，以js为后缀，是JavaScript写的
Page({data: {message: 'Hellod MINA!'}
})
//在网页上看到的效果应该就是“Hellod MINA!”这个亚子

2.列表渲染

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
//在Page.js里，以js为后缀，是JavaScript写的
//底下是一个数组，然后从数组里面for循环拿每一个数，我猜item是关键字
Page({data: {array: [1,2,3,4,5]}
})

3.条件渲染

<!--wxml-->
//就是用条件判断来写这个代码
//如果view包裹的是WEBVIEW，那我就可以看到WEBVIEW
<view wx:if="{{view=='WEBVIEW'}}">VEBVIEW</view>
//如果view包裹的是APP，那我就可以看到APP
<view wx:elif="{{view=='APP'}}">APP</view>
//如果view包裹的是MINA，那我就可以看到MINA
<view wx:else="{{view=='MINA'}}">MINA</view>
//在Page.js里，以js为后缀，是JavaScript写的
Page({data: {view: "MINA"}
})

4.写一个页面所需要的模版

//view你可以记成一个可以看见的关键词，以如下形式写就可以。
//至于templaye，你可以大概理解成template.js是一个基于 jquery 的前端 javascript 模板，插件主要解决数据渲染时的繁琐的数据处理。模板解决了html片段连接效率低下和繁琐的问题，因为我也不清楚呜呜呜
<!--wxml-->
<template name="staffName"><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>
//在Page.js里，以js为后缀，是JavaScript写的
//这里data就是来存数据的，然后firstName就是staffA里的数据，lastName也是staffA里的数据。
//具体的效果图等我发给你。
Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}}
})

wx小程序（wxml）相关推荐

wx小程序笔记（2）
wx小程序笔记第三章:常用组件第一节:scroll-view组件 view: scroll-view: 设置横向滚动: 设置竖向滚动: scrolltoupper和scrolltolower事件: ...
从0到一开发微信小程序（5）—小程序WXML
文章目录其他相关文章 1.WXML 1.1.事件 1.1.1.系统 1.1.2.分类 1.1.2.1.冒泡事件(bindtap) 1.1.2.2.非冒泡事件(catchtap) 1.1.3.携带参数 ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
wx小程序笔记（1）
wx小程序笔记第一章:小程序前奏第一节:账号和软件第二章:小程序基础第一节:项目结构第二节:配置第三节:WXML语法数据绑定(js数据) 条件渲染(判断) 列表渲染(循环) wx:key ...
微信小程序-WXML转换类型
微信小程序-WXML转换类型情景:需要在WXML中把字符串转化成数字类型解决:引入WXS wxs是小程序的一套脚本语言,结合wxml,可以构建出页面的结构. wxs不依赖于运行时的基础库版本,可以 ...
fiddler设置中文版本_突破安卓7.0以上版本WX小程序抓包篇
工作上经常需要使用brupsuite抓取APP和WX小程序的包,所以会在安卓上安装burp的证书.但是你会发现安卓7.0之后有了network-security-config这个选项,可以让app只信 ...
wx小程序工具下载及安装
wx小程序工具的下载及安装微信开发者工具的下载微信开发者工具的安装微信开发者工具的下载请在浏览器的地址栏输入下面网址:https://developers.weixin.qq.com/mini ...
wx小程序，前端公众号推送消息
wx小程序,前端引导用户关注公众号推送消息第一步: 在小程序登录后,请求后台得到返回是否关注公众号字段(如果有关注后台是有unionID的),将该字段存入storage中,在首页处拿来判断显隐' 引 ...
微信小程序WXML语法介绍
WXML 介绍全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建出页面的结构. 打开开发工具的编辑器,在根目录下找到 ap ...

wx小程序（wxml）

简介

wx小程序（wxml）相关推荐

最新文章

热门文章