主题 : 微信web开发者工具更新到V0.14V后，看不到wxml和wxss文件了
级别: 新手上路
可可豆: 82 CB
威望: 62 点
在线时间: 293(时)
发自: Web Page
微信web开发者工具更新到V0.14V后，看不到wxml和wxss文件了&&&
如题，微信小程序的学习还没找到眉目，开发者工具（mac版）已更新后，项目使用的是官方的事例demo，打开后，我艹，找不到wxml 和wxss文件了，只有js文件可以查看用的是官方的demo，没有appid。到底是怎么回事啊
图片:屏幕快照
下午4.28.17.png
级别: 新手上路
可可豆: 82 CB
威望: 62 点
在线时间: 293(时)
发自: Web Page
我去，又出现了，而且图标也改了跟刚才的不一样了，神奇的软件。难道是我睡着了
图片:屏幕快照
下午4.44.54.png
级别: 侠客
UID: 282144
可可豆: 261 CB
威望: 233 点
在线时间: 758(时)
发自: Web Page
看左侧边栏，一个是调试，一个是编辑。
级别: 新手上路
可可豆: 82 CB
威望: 62 点
在线时间: 293(时)
发自: Web Page
回 2楼(feizhu422) 的帖子
确实是的，两种模式，调试模式下，就是看不到wxml文件，谢啦
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁？2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版体验指尖应用
一起脱去小程序的外套 - 微信小程序架构解析
微信小程序的公测掀起了学习小程序开发的浪潮，天生跨平台，即用即走、媲美原生体验、完善的文档、高效的开发框架，小程序给开发者带来了很多惊喜。通过这篇文章和大家一起分析小程序的架构，分享开发经验。
一、小程序介绍
1、小程序特点
2、小程序演示
视频地址：
3、小程序为什么那么快
Page Frame
Native预先额外加载一个WebView
当打开指定页面时，用默认数据直接渲染，请求数据回来时局部更新
返回显示历史View
退出小程序，View状态不销毁
4、小程序入口
扫码进入小程序
搜索小程序
小程序发送到桌面(Android)
发送给朋友
二、小程序架构
微信小程序的框架包含两部分View视图层、App Service逻辑层，View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个线程里运行。
视图层使用WebView渲染，逻辑层使用JSCore运行。
视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。
小程序启动时会从CDN下载小程序的完整包
三、View (页面视图)
视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
1、View - WXML
WXML（WeiXin Markup Language）
支持数据绑定
支持逻辑算术、运算
支持模板、引用
支持添加事件（bindtap）
wxml编译器：wcc &把wxml文件 转为 js
执行方式：wcc index.wxml
2、View - WXSS
WXSS(WeiXin Style Sheets)
支持大部分CSS特性
添加尺寸单位rpx，可根据屏幕宽度自适应
使用@import语句可以导入外联样式表
不支持多层选择器-避免被组件内结构破坏
wxss编译器：wcsc 把wxss文件转化为 js
执行方式： wcsc index.wxss
3、View – WXSS Selectors
WXSS目前支持如下选择器：
4、View - Component
小程序提供了一系列组件用于开发业务功能，按照功能与HTML5的标签进行对比如下：
小程序的组件基于Web Component标准
使用Polymer框架实现Web Component
5、View - Native Component
目前Native实现的组件有
&canvas/& &video/& &map/& &textarea/&
Native组件层在WebView层之上
四、App Service(逻辑层)
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈
App( ) 小程序的入口；Page( ) 页面的入口
提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
每个页面有独立的作用域，并提供模块化能力。
数据绑定、事件分发、生命周期管理、路由管理
IOS - JSCore
Android - X5 JS解析器
DevTool - nwjs Chrome 内核
1、App Service - Binding
数据绑定使用 Mustache 语法（双大括号）将变量包起来，动态数据均来自对应 Page 的 data，可以通过setData方法修改数据。
事件绑定的写法同组件的属性，以 key、value 的形式，key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart，value 是一个字符串，需要在对应的 Page 中定义同名的函数。
2、App Service - Life Cylce
3、App Service - API
API通过JSBridge和Native 进行通信
4、App Service - Router
navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用navigateBack可以返回到原页面。页面路径只能是五层
redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
五、小程序开发经验
1、小程序存在的问题
小程序仍然使用WebView渲染，并非原生渲染
需要独立开发，不能在非微信环境运行。
开发者不可以扩展新组件。
服务端接口返回的头无法执行，比如：Set-Cookie。
依赖浏览器环境的js库不能使用，因为是JSCore执行的，没有window、document对象。
WXSS中无法使用本地（图片、字体等）。
WXSS转化成js 而不是css，为了兼容rpx。
WXSS不支持级联选择器。
小程序无法打开页面，无法拉起APP。
小程序不能和公众号重名，于是小程序的名字就成了：自选股+、滴滴出行DiDi 。
2、小程序可以借鉴的优点
提前新建WebView，准备新页面渲染。
View层和逻辑层分离，通过数据驱动，不直接操作DOM。
使用Virtual DOM，进行局部更新。
全部使用https，确保传输中安全。
使用离线能力。
前端组件化开发。
加入rpx单位，隔离设备尺寸，方便开发。
3、脱离微信的“小程序”：PWA 渐进式应用
PWA 全称是 Progressive Web Apps ，译成中文就是渐进式应用，是 Google 在 2015 年 6 月 15 日提出的概念。
Progressive Web Apps 是结合了 web 和 原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问，不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系，它将变得越来越强大。它能够快速地加载，即使在弱网络环境下，能够推送相关消息, 也可以像原生应用那样添加至主屏，能够有全屏浏览的体验。
PWA具有如下特点：
渐进增强&- 支持的新特性的浏览器获得更好的体验，不支持的保持原来的体验。
离线访问&- 通过 service workers 可以在离线或者网速差的环境下工作。
类原生应用&- 使用app shell model做到原生应用般的体验。
可安装&- 允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店。
容易分享&- 通过 URL 可以轻松分享应用。
持续更新&- 受益于 service worker 的更新进程，应用能够始终保持更新。
安全&- 通过 HTTPS 来提供服务来防止网络窥探，保证内容不被篡改。
可搜索&- 得益于 W3C manifests 元数据和 service worker 的登记，让搜索引擎能够找到 web 应用。
再次访问&- 通过消息推送等特性让用户再次访问变得容易。
Web App Manifest使Web更像Native
Web App Manifest以JSON的格式定义Web应用的相关配置（应用名称、图标或图像连接、启动URL、自定义特性、启动默认配置、全屏设置等）。
Service Workers增强Web能力
通过Service Works实现资源离线缓存和更新
App Shell 提升显示效率
App Shell（应用外壳）是应用的用户界面所需的最基本的 HTML、CSS 和 JavaScript，首次加载后立刻被缓存下来，不需要每次使用时都被下载，而是只异步加载需要的数据，以达到UI保持本地化。
了解更多pwa资料：
个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我：iamaixiaoxiao。
( 9:16:23)
( 9:16:22)
( 9:16:22)
( 9:16:21)
( 9:16:20)
( 9:16:20)
( 9:16:19)
( 9:25:30)
你这个评论的模块是怎么实现的，能不能写一下哇，觉得很好看
管理员回复：
我晕，我什么时候购买博主的模板了？？首先声明的是 我的微之恋是用大前端的html页面，HTML页面我也是Ctrl+s进行另存为下来的，然后我用wordpress的程序改了改就发布了，很多bug我也懒得改，功能也没有大前段的主题功能强大，也就可以认为一个演示版吧，首先说的是本人木有购买，再者更没有购买后无耻进行发布，我只是靠的自己的双手收获我想要的成功，我想这就是开源精神吧？我把自己写的代码进行开源有何不可？况且我只是另存为了3个页面其他的PHP程序还不是都是我写的，大家爱用就用，不爱用也不要冷嘲热讽好不好?拿着我的免费主题说我的坏话，我真的很无语！系列文章：
WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言，用于描述WXML的组件样式。
WXSS用来决定WXML的组件应该怎么显示。
为了适应广大的前端开发者，我们的WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序，我们对CSS进行了扩充以及修改。
与css相比我们扩展的特性有：
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)
1rpx = 0.42px
1px = 2.34px
1rpx = 0.5px
1px = 2rpx
1rpx = 0.552px
1px = 1.81rpx
rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。
建议：开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
/** common.wxss **/
/** app.wxss **/
@import "common.wxss";
.middle-p:{
padding:15
MINA组件上支持使用style、class属性来控制组件的样式。
style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，所以不要将静态的样式写进style中，以免影响渲染速度。
&view style="color:{{color}};" /&
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
&view class="normal_view" /&
目前支持的选择器有：
选择所有拥有class="intro"的组件
#firstname
选择拥有id="firstname"的组件
选择所有view组件
element, element
view&checkbox
选择所有文档的view组件和所有的checkbox组件
view::after
在view组件后边插入内容
view::before
在view组件前边插入内容
全局样式与局部样式
定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
欢迎转载：
推荐： 　　　【开发】 微信小程序架构_小程序吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：24,562贴子：
【开发】 微信小程序架构收藏
作者介绍： 渠宏伟，腾讯高级工程师，从事Web前端开发5年，先后负责企鹅电竞、腾讯视频VIP、腾讯OA开发框架、腾讯微信HR助手等项目。对Web前端架构、.NET架构有丰富的经验。微信小程序的公测掀起了学习小程序开发的浪潮，天生跨平台，即用即走、媲美原生体验、完善的文档、高效的开发框架，小程序给开发者带来了很多惊喜。通过这篇文章和大家一起分析小程序的架构，分享开发经验。一、小程序介绍1、小程序特点2、小程序演示视频地址：3、小程序为什么那么快 Page Frame Native预先额外加载一个WebView 当打开指定页面时，用默认数据直接渲染，请求数据回来时局部更新 返回显示历史View 退出小程序，View状态不销毁4、小程序入口扫码进入小程序 搜索小程序 小程序发送到桌面(Android) 发送给朋友二、小程序架构微信小程序的框架包含两部分View视图层、App Service逻辑层，View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个线程里运行。 视图层使用WebView渲染，逻辑层使用JSCore运行。 视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。 小程序启动时会从CDN下载小程序的完整包三、View (页面视图)视图层由 WXML 与 WXSS 编写，由组件来进行展示。 将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。1、View - WXMLWXML（WeiXin Markup Language）支持数据绑定 支持逻辑算术、运算 支持模板、引用 支持添加事件（bindtap） wxml编译器：wcc 把wxml文件 转为 js 执行方式：wcc index.wxml2、View - WXSSWXSS(WeiXin Style Sheets)支持大部分CSS特性 添加尺寸单位rpx，可根据屏幕宽度自适应 使用@import语句可以导入外联样式表 不支持多层选择器-避免被组件内结构破坏wxss编译器：wcsc 把wxss文件转化为 js 执行方式： wcsc index.wxss3、View – WXSS SelectorsWXSS目前支持如下选择器：4、View - Component小程序提供了一系列组件用于开发业务功能，按照功能与HTML5的标签进行对比如下： 小程序的组件基于Web Component标准 使用Polymer框架实现Web Component5、View - Native Component目前Native实现的组件有 &canvas/& &video/& &map/& &textarea/& Native组件层在WebView层之上四、App Service(逻辑层)逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈1、App( ) 小程序的入口；Page( ) 页面的入口 3、提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。 4、每个页面有独立的作用域，并提供模块化能力。 5、数据绑定、事件分发、生命周期管理、路由管理运行环境 IOS - JSCore Android - X5 JS解析器 DevTool - nwjs Chrome 内核1、App Service - Binding数据绑定使用 Mustache 语法（双大括号）将变量包起来，动态数据均来自对应 Page 的 data，可以通过setData方法修改数据。 事件绑定的写法同组件的属性，以 key、value 的形式，key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart，value 是一个字符串，需要在对应的 Page 中定义同名的函数。 2、App Service - Life Cylce3、App Service - APIAPI通过JSBridge和Native 进行通信4、App Service - RouternavigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用navigateBack可以返回到原页面。页面路径只能是五层 redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。 navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。五、小程序开发经验1、小程序存在的问题小程序仍然使用WebView渲染，并非原生渲染 需要独立开发，不能在非微信环境运行。 开发者不可以扩展新组件。 服务端接口返回的头无法执行，比如：Set-Cookie。 依赖浏览器环境的js库不能使用，因为是JSCore执行的，没有window、document对象。 WXSS中无法使用本地（图片、字体等）。 WXSS转化成js 而不是css，为了兼容rpx。 WXSS不支持级联选择器。 小程序无法打开页面，无法拉起APP。 小程序不能和公众号重名，于是小程序的名字就成了：自选股+、滴滴出行DiDi 。2、小程序可以借鉴的优点提前新建WebView，准备新页面渲染。 View层和逻辑层分离，通过数据驱动，不直接操作DOM。 使用Virtual DOM，进行局部更新。 全部使用https，确保传输中安全。 使用离线能力。 前端组件化开发。 加入rpx单位，隔离设备尺寸，方便开发。3、脱离微信的“小程序”：PWA 渐进式应用PWA 全称是 Progressive Web Apps ，译成中文就是渐进式应用，是 Google 在 2015 年 6 月 15 日提出的概念。 Progressive Web Apps 是结合了 web 和 原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问，不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系，它将变得越来越强大。它能够快速地加载，即使在弱网络环境下，能够推送相关消息, 也可以像原生应用那样添加至主屏，能够有全屏浏览的体验。PWA具有如下特点：渐进增强 - 支持的新特性的浏览器获得更好的体验，不支持的保持原来的体验。离线访问 - 通过 service workers 可以在离线或者网速差的环境下工作。类原生应用 - 使用app shell model做到原生应用般的体验。可安装 - 允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店。容易分享 - 通过 URL 可以轻松分享应用。持续更新 - 受益于 service worker 的更新进程，应用能够始终保持更新。安全 - 通过 HTTPS 来提供服务来防止网络窥探，保证内容不被篡改。可搜索 - 得益于 W3C manifests 元数据和 service worker 的登记，让搜索引擎能够找到 web 应用。 再次访问 - 通过消息推送等特性让用户再次访问变得容易。Web App Manifest使Web更像NativeWeb App Manifest以JSON的格式定义Web应用的相关配置（应用名称、图标或图像连接、启动URL、自定义特性、启动默认配置、全屏设置等）。 Service Workers增强Web能力 通过Service Works实现资源离线缓存和更新 App Shell 提升显示效率 App Shell（应用外壳）是应用的用户界面所需的最基本的 HTML、CSS 和 JavaScript，首次加载后立刻被缓存下来，不需要每次使用时都被下载，而是只异步加载需要的数据，以达到UI保持本地化。原文阅读
统计代码触脉机构精通数据工具和分析策略,可以针对各种数据问题做出快速的判断.
老司机看片微腥公众浩：xptx100
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或1400人阅读
微信小程序（3）
WXML（WeiXin Markup Language）是微信的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
（小安娜：好像很厉害的样子，那基础组件、事件系统是什么？感觉更厉害，因为必须结合它们。），基础组件类似HTML中的标签，事件系统是JavaScript中的事件，可处理逻辑反应到界面上；wxml只是一个文件格式，如果没有组件和事件它没任何用处，又如果把组件、事件写在txt文档里面也没任何用处，所以没有谁更厉害，相辅相成的关系。（小安娜：嗦嘎，就好像ap、ad、adc的关系，一起才最强）
用以下一些简单的例子来看看 WXML 具有什么能力：
WXML 中的动态数据均来自对应* Page 的 data 对象*。
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于以下：
（小安娜：等等，有没有点诚意，Mustache是什么都不知道！），Mustache是基于JavaScript实现的模板解析引擎，等等…总之它非常方便和好用。（小安娜：我去，你自己也不知道是什么吧）
& {{ message }} &
message: 'Hello MINA!'
显示结果：
（小安娜：&view&代表什么意思，记得HTML中没这样的标签啊？），这就是基础组件，view组件代表视图容器，可以理解成HTML中的DIV标签。
组件属性（需要在双引号之内）
id="item-{{id}}"&id="item-{{id}}"&
显示结果：
控制属性（需要在双引号之内）
wx:if="{{condition}}"&你看得见我吗？&
condition: true
显示结果：
（小安娜：我刚刚试了，condition改成false就看不见我了！），是的，改成false就表示条件为假，view组件里面的内容就不会显示了。（小安娜：哦明白了，虽然我不想看见你，为了学好小程序还是改成true吧）
关键字（需要在双引号之内）
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。
checked="{{false}}" /&默认没选中
特别注意：不要直接写 checked="false"，这时候"false"是一个字符串，（JavaScript中非0为真、非空位真）转成boolean类型后代表真值。
（小安娜：那这个checkbox是不是和HTML的复选框一样？），没错啦，但checkbox组件更团结，更多是以组的概念存在，例如我们都会用checkbox-group包括起所有同类型的checkbox组件，后面用到自然会明白了。（小安娜：啊啊抓狂了，又多了个checkbox-group，感觉没耐心学了），可别这样想，基础都是乏味的，可是带你飞之前要先带你走，下篇文章我们做案例就会感觉很有意思了。（小安娜：知道啦，那我可以直接看下一篇不^_^），继续…
所以显示结果：
可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
三元运算是：条件 ? 结果1 : 结果2；条件为ture时结果1否则结果2。
hidden="{{flag ? true : false}}"& 看得见吗？ &
（小安娜：flag我找了好久没见你定义啊，你确定不会报错？），不会的，这种变量即为空变量，（还记得前面提到过非空为真）flag转成 boolean类型后代表false，也就是表达式最终是这样的：hidden="{{false}}"，明白了吗？（小安娜：阿拉搜，继续啦）
显示结果：
& {{a + b}} + {{c}} + d &
这次就先不说结果了，小安娜，你来猜猜看结果是什么？（小安娜：恩~，a=1，b=2，a+b就等于3，c=3，咦~，d没定义啊？），结果其实是：3 + 3 + d，d不是没定义，而它本来就是一个文字d，不参与任何计算。（小安娜：我这么认真回答，你居然这样坑我！！！）
显示结果：
字符串运算
&{{"hello " + name}}&
name: 'MINA2'
显示结果：
数据路径运算
如果data对象中包含了子对象，例如：
key: 'Hello '
array: ['MINA3']
可以这样访问：
&{{object.key}} {{array[0]}}&
显示结果：
这个应该没问题吧？（小安娜：没问题，就是点操作嘛，一个是JSON对象操作，一个是数组操作），OK继续。
也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
wx:for="{{[zero, 1, 2, 3, 4]}}"& {{item}} &
（小安娜：等等，这里我看了很久还是理解不了，再细讲解下），好，首先我们在data对象中定义zero变量并赋值为0，然后使用view组件的wx:for属性表示重复显示这个组件，wx:for属性的值是一个重新构造的数组，数组中第一个元素（也就是下标为0）的值来自于data中的zero对象，所以最终是用数组为[0, 1, 2, 3, 4]重复渲染组件。（小安娜：哦哦，完~全明白了）
显示结果：
wx:if我们之前已经用过了，用来判断是否渲染该组件：
wx:if="{{condition}}"&你看得见我吗？&
也可以用 wx:elif 和 wx:else 来添加其他判断：
wx:if="{{length & 5}}"& 1 &
wx:elif="{{length & 2}}"& 2 &
wx:else& 3 &
length: 10
界面显示结果：1
block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件，我们可以使用 &block/& 标签将多个组件包装起来，并在block标签上用wx:if控制属性。
wx:if="{{true}}"&
这里的{{true}}是一个boolean类型的值，所以最后view1、view2都会显示。
（小安娜：我记得你说view可以看成div，那block呢，HTML中没这种控制标签？），没错啦，&block/& 并不是一个组件，它仅是一个包装元素，不会在页面中做任何渲染显示，只接受控制属性。（小安娜：明白了，block就好像文件夹，不占用空间，可设置文件夹显示和隐藏）
在组件上使用 wx:for 控制属性绑定一个数组数据重复渲染该组件。
默认的当前项下标变量名为： index，数组当前项的变量名为：item：（小安娜：不默认是什么样啊？）
wx:for="{{array}}"&
{{index}}：{{item.message}}
message: 'foo',
message: 'bar'
显示结果：
不使用默认可以使用 wx:for-item 可以指定当前元素的变量名，使用 wx:for-index 可以指定当前下标的变量名：
wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"&
{{idx}}: {{itemName.message}}
输出结果一样。
block wx:for
类似block wx:if，也可以将wx:for用在 &block/&标签上，重复渲染多组件块。例如：
wx:for="{{['a', 'b', 'c']}}"&
& {{index}}：{{item}}&
显示结果：
wx:key（可以选择跳过，但，是很重要的重点）
（小安娜：突然有种想打你的冲动，又是重点又可以跳过，下课操场见！！！），冷静、冷静，官方文档我看到这时，也是没理解这是什么意思，后来就跳过这段了，但是也完成了B站的首页，（小安娜：哈~，原来是自己傻看不懂，别把我们的智商和你比好吧！），当写到这时再去多看了一遍（小安娜：绝对不止一遍），把官方例子运行调试之后，才发现微信官方设计wx:key的用意，而且是很重要的重点。
如果列表中的项目位置会改变或者有新的项目添加到列表中，为了项目保持自己的属性和状态（如 &input/& 的输入内容，&switch/& 的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供：
字符串；代表在for循环的array中item的某个属性，该属性的值是列表中唯一的字符串或数字，并且不能动态改变。
保留关键字；*this 代表在for循环中的item本身，这种需要item本身是唯一的字符串或者数字。
是不是完全理解不了什么意思？（小安娜：我觉得这不是重点，重点是案例你还没讲）
案例1：wx:key的值是字符串
wx:for="{{objectArray}}" wx:key="unique" style="display:"& {{item.id}} &
bindtap="switch"& 改变顺序 &
bindtap="addToFront"& 添加到前面 &
（小安娜：bindtap是什么意思呢？），这个是用来绑定事件的，bindtap是当用户点击的时候会执行相对于的函数，这个马上会在事件中详细讲解。
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
switch: function(e) {
const length = this.data.objectArray.length
for (let i = 0; i & ++i) {
const x = Math.floor(Math.random() * length)
const y = Math.floor(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = temp
this.setData({
objectArray: this.data.objectArray
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
（小安娜：天了噜，一大波代码来袭，看不懂了啦），所有函数真可以不用看懂内部实现，只需知道干什么用就行（内心的杰尔夫君：其实我知道只有她看不懂，大家照顾照顾她，假装看不懂）（小安娜：阿丘~谁在说我坏话！）。
显示结果（①：初始化状态；②：打开项目2的开关；③：改变顺序后项目2依然是打开状态；④：在最前面添加项目6，项目2依然是打开状态），这就是wx:key的作用，它会利用一个唯一值保留该项状态：
案例2：wx:key的值是*this
wx:for="{{numberArray}}" wx:key="*this" style="display:"& {{item}} &
bindtap="addNumberToFront"&添加到前面&
numberArray: [1, 2, 3, 4]
addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
numberArray: this.data.numberArray
显示结果：
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
使用name属性作为模板的名字。然后在&template/&内定义代码片段。
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。
name="msgItem"&
& {{index}}: {{msg}} &
& Time: {{time}} &
is="msgItem" data="{{...item}}"/&
msg: 'this is a template',
显示结果：
is 属性可以使用 Mustache 语法来做逻辑判断，例如以下根据条件来选择使用模板：
name="odd"&
name="even"&
wx:for="{{[1, 2, 3, 4, 5]}}"&
is="{{item % 2 == 0 ? 'even' : 'odd'}}"/&
显示结果：
恩~\~，这里有什么问题吗？（小安娜：恩~\~就是呢，不知道模板可以用在什么地方？），当你网站很多地方都用到同一种结构的时候就可以用了，例如我们要做的B站首页：
（小安娜：↓↓↓蓝色区域第二张图，不谢）
可以看出绿、红、蓝色区域的结构都一样，改变的只是内容，这样的结构就很适合用模板实现。（小安娜：那其他页面也有这种结构呢？例如B站的直播页也有这种结构，顺便问一下为什么绿色在最前面XD），像这种需求我们就需要创建单独的模板文件，在需要的地方导入模板文件就行，接下来就细讲这个。
WXML 提供两种文件引用方式import和include。
带作用域的import
import可以导入指定文件的template，例如在item.wxml中定义了一个叫item的template：
name="item"&
&{{text}}&
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
src="item.wxml"/&
is="item" data="{{text: 'forbar'}}"/&
data="{{text: 'forbar'}}"表示构造一个对象传入item.wxml中item模板。
（小安娜：显示结果是：forbar，对吧？），没错啦，厉害了我的小姐姐；还有就是import有一级作用域的概念，例如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
& A template &
src="a.wxml"/&
& B template &
src="b.wxml"/&
显示结果：B template；程序这样写编译会通过，但会在控制台（Console）报运行时警告（Runtime warn），还请注意。（小安娜：这么大个坑，那不是debug时很难找出问题？），是啊，的确很难避免，很容易出错而且找不到问题所在，但显示结果又不对，所以我们开发的时候要多注意调试控制台（Console）输出的错误和异常信息。（小安娜：开发果然是个细心活，同志们一起加油啦）。
头部和底部的include
include可以将目标文件除了&template/&的整个代码引入，相当于是拷贝到&include /&的位置，比较常用于程序的头部（header）和底部（footer），例如：
&{{header}}&
&{{footer}}&
src="header.wxml"/&
src="footer.wxml"/&
等同于 === ：
&{{header}}&
&{{footer}}&
header: "header",
footer: "footer"
显示结果：
（小安娜：发现了，它可以直接使用index.js的数据），没错，所以这种更适合头部和底部数据不会随着页面不同而改变，而import更适合定义内容中模板，因为每个页面的数据结构体是会不一样的，例如首页的数据结构可能是：{channels:[music:[],dance:[],live:[]]}，而在直播页面中的数据结构可能是：{lives:[]}，2个页面数据结构不同，这时候可以用import把数据重新构造传入给模板。（小安娜：懵懵懂懂好像明白了），没关系，后面我们实战时就会彻底明白了。（小安娜：期待期待~）
事件是视图层（wxml）到逻辑层（js）的通讯方式，可以绑定在组件上，当触发事件，就会执行逻辑层中对应的事件处理函数。
touchstart
手指触摸动作开始
手指触摸后移动
touchcancel
手指触摸动作被打断，如来电提醒，弹窗
手指触摸动作结束
手指触摸后马上离开
手指触摸后，超过350ms再离开
绑定事件格式为：bind + 事件类型（例如：bindtap），我们先来看事件类型的执行顺序：
bindtouchstart="ontouchstart"
bindtouchmove="ontouchmove"
bindtouchend="ontouchend"
bindtap="ontap"
bindlongtap="onlongtap"&点击我/&
ontouchstart: function() {
console.log( "touchstart" );
ontouchmove: function() {
console.log( "touchmove" );
ontouchend: function() {
console.log( "touchend" );
ontap: function() {
console.log( "tap" );
onlongtap: function() {
console.log( "longtap" );
当点击（&=350ms）的时候，执行顺序：
touchstart
当长按（&350ms）的时候，执行顺序：
touchstart
我们发现点击是我们想象中的那样，但是长按执行一次longtap还会在执行一次tap事件，（小安娜：那这就比较坑了，我很喜欢长按一些头像按钮，因为会有快捷操作菜单），是啊，我知道长按这个操作在Android是很常用的设计，所以我们在小程序里面尽量避免设计某个组件有长按又有点击事件。（小安娜：因为这个操作太好用了，没有解决办法吗？），可以在data里面设置一个判断长按的变量，当touchstart的时候设置此变量为false，当执行longtap事件的时候设置变量为true，然后在tap事件里面做判断就行了。
islongtap: false
ontouchstart: function() {
this.islongtap =
console.log( "touchstart" );
ontap: function() {
if( this.islongtap )
console.log( "tap" );
onlongtap: function() {
this.islongtap =
console.log( "longtap" );
（小安娜：perfect，运行了下完美解决）
像js的事件一样，小程序事件也分为冒泡事件和非冒泡事件：
id="outter" bindtap="handleTap1"&
id="middle" bindtap="handleTap2"&
id="inner" bindtap="handleTap3"&
handleTap1: function() {
console.log( "handleTap1" );
handleTap2: function() {
console.log( "handleTap2" );
handleTap3: function() {
console.log( "handleTap3" );
这是一个常用的结构，一个大的层包含内部很多小层，小层内部有个操作按钮，当我们点击操作按钮：
handleTap3
handleTap2
handleTap1
发现所有父组件的点击事件都执行了，这就是冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件就是不会向父节点传递。当然这很多时候不是件好事情，怎么避免呢？
小程序除了提供bind还提供catch绑定事件，格式为：catch + 事件类型，catch事件绑定可以阻止向上冒泡。现在在button上改用catch试一下：
id="outter" bindtap="handleTap1"&
id="middle" bindtap="handleTap2"&
id="inner" catchtap="handleTap3"&
输出结果：handleTap3，达到我们的效果了。（小安娜：我觉得把父组件的绑定事件去掉更好）
事件参数event
当组件触发事件时，处理函数会收到一个事件对象参数。
handleTap3: function(event) {
console.log( event );
控制台输出的结果：
"type": "tap",
"timeStamp": 2239,
"target": {
"id": "inner",
"offsetLeft": 0,
"offsetTop": 0,
"dataset": {}
"currentTarget": {
"id": "inner",
"offsetLeft": 0,
"offsetTop": 0,
"dataset": {}
"detail": {
"touches": [
"identifier": 0,
"pageX": 280,
"pageY": 18,
"clientX": 280,
"clientY": 18
"changedTouches": [
"identifier": 0,
"pageX": 280,
"pageY": 18,
"clientX": 280,
"clientY": 18
每个参数具体什么意思，我们放在以后B站项目中去讲解，（小安娜：噗~，我好多问题准备问了，现在又憋回去了，听你讲东西真心累），毕竟太多了，每个都讲到估计可以写几篇文章了，用到什么再回头来看看，然后再配合案例这样最容易理解了。（小安娜：好像也是，总感觉哪里不对，等等…要是你不用到呢），这个保证不会，因为有我们常用的dataset，经常会为组件自定义一些参数。（小安娜：姑且相信你）
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
用来决定 WXML 的组件应该怎么显示。
具有 CSS 大部分特性。
定义在 app.wxss 中的样式为全局样式，可用于任何Page。在 Page 里的 wxss 文件中定义的样式为局部样式，只作用在当前页面，并会覆盖 app.wxss 中相同的选择器。
与 CSS 相比增加的特性有：
尺寸单位rpx
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。（小安娜：真啰嗦，也就是1px = 2rpx嘛）
rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)
1rpx = 0.42px
1px = 2.34rpx
iPhone6/6s
1rpx = 0.5px
1px = 2rpx
iPhone6/6s Plus
1rpx = 0.552px
1px = 1.81rpx
所以：我们设计/开发微信小程序时都应该用 iPhone6s 作为视觉稿的标准。（小安娜：所以，看你教程是不是有福利，会给我们发iPhone 6s吗？）
使用@import语句导入外联样式表，@import后跟样式表的相对路径。
padding: 20rpx 0;
text-align: center;
font-size: 50rpx;
@import "common.wxss";
.content {
line-height: 50rpx;
class="header"&header&
class="content" style="color:#e64340;"&和小安娜一块去超市买东西，小安娜：“好想吃泡面，可是怕上火啊”；我：“那就不要买了”；小安娜：“不行，再去买一罐加多宝吧”；我：...&
class="footer"&footer&
这样就在index.wxss中导入了common.wxss样式文件，显示结果：
（小安娜：你怎么？不过用加多宝泡泡面还真挺好吃。喂，快说正事啦，我发现你使用了行内样式style="color:#e64340;"），wxss也支持行内样式，不过尽量避免将静态的样式写入style中，以免影响渲染速度，静态样式都应该写在wxss文件中。
目前支持的选择器
选择所有拥有 class=”intro” 的组件
选择拥有 id=”firstname” 的组件
选择所有 view 组件
element, element
view,.header
checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
view::after
在 view 组件后边插入内容
view::before
在 view 组件前边插入内容
注意：结果笔者开发试验，暂时还不支持*选择器（所有元素），例如我们经常会设置所有组件的box-sizing属性来改变测量宽度的起点边界，从而使规定宽度包括边框和填充：
box-sizing: border-box;
使用之后会发现所有wxss文件中的样式都无效了。（小安娜：那可以怎么解决呢，难道给每个组件都设置一次？），小哥哥不才，目前还真是每个组件都设置一次，或者这问题官方会很快解决。（小安娜：也是，还是官方靠谱点。）
记得官方文档
了解到这，基础知识终于告一段落了，下一篇开始实战，开发时更多组件知识请参考官方文档。
开发工具介绍和下载：
注册流程：
开发组件：
问题交流：QQ群：（非官方）
写了这么多口好干，我需要倒杯水喝，等等我。（小安娜：去吧去吧），「滴答、滴答，过去5分钟…10分钟…」（小安娜：喂喂，10分钟了，你是喝一桶水吗？），（远处的声音：quatary kill！WO CAO，要超神了），（小安娜：我去，喝个水时间去开黑了，快滚回来，马上到我的提问环节了！），都怪你了，一开始就说什么ap、ad、adc，搞的我热血沸腾的，马上来了。
小安娜有问题
WXML是什么？
杰尔夫君：WXML（WeiXin Markup Language）是一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。和HTML相似。
WXML组件怎么绑定数据？
**杰尔夫君：**WXML中的动态数据均来自对应 Page 的 data。数据绑定使用 Mustache 语法（双大括号）将变量包起来。例如：
message: 'Hello MINA!'
& {{ message }} &
什么是Mustache？
**杰尔夫君：**Mustache 是一个 logic-less （轻逻辑）模板解析引擎。在小程序里主要关注小程序的语法。详细了解前往：
WXML中怎么使用条件判断？
杰尔夫君：在框架中，我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
wx:if="{{condition}}"& True &
也可以用 wx:elif 和 wx:else ：
wx:if="{{length & 5}}"& 1 &
wx:elif="{{length & 2}}"& 2 &
wx:else& 3 &
如果想一次性判断多个组件标签，我们可以使用一个 &block/& 标签将多个组件包装起来：
wx:if="{{true}}"&
WXML怎么循环列表？
杰尔夫君：在组件上使用wx:for属性绑定一个数组，即可使用数组中的数据重复渲染该组件，默认当前的下标变量名为index，当前项的变量名为item。用wx:for-index指定当前下标的变量名，用wx:for-item指定当前元素的变量名；
wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"&
{{idx}}: {{itemName.message}}
等等，怎么感觉你从头到尾都有问题啊，感觉没学过一样？（小安娜：没办法啦，这次讲太多了，本小姐记忆不太好，都不记得学了什么），好吧好吧，也正好总结一下，继续你的问题。（小安娜：你别打断啊！）
WXML怎么使用模板？
杰尔夫君：用&template/&定义模板，指定name属性为模板的名字，用is属性指定使用模板的名称，然后将模板所需要的data传入，如：
name="msgItem"&
& {{index}}: {{msg}} &
& Time: {{time}} &
is="msgItem" data="{{...item}}"/&
msg: 'this is a template',
也可以把模板定义在单独文件中，通过import或include引入。
name="item"&
&{{text}}&
src="item.wxml"/&
is="item" data="{{text: 'forbar'}}"/&
& header &
& footer &
src="header.wxml"/&
src="footer.wxml"/&
import和include区别是：import有一层作用域概念，即C import B，B import A，在C中可以使用B的template，在B中可以使用A的template，但是C不能使用A定义的template。而include相当于是拷贝，使用原页面数据。
WXML中怎么使用事件？
杰尔夫君：使用bind或catch开头，然后跟上事件的类型（如：bindtap, catchtouchstart），bind事件绑定会发生事件冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
什么是WXSS？
**杰尔夫君：**WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，对 CSS 进行了扩充以及修改了：尺寸单位、样式导入。
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。以iPhone6为例：1rpx = 0.5px，1px = 2rpx。
使用@import语句导入外部样式，@import后跟外部样式文件的相对路径。
@import "common.wxss";
.middle-p {
padding:15px;
（小安娜：嗯~\~，我问完了），好的今天就到这了，今天学的比较多，希望多多复习交流，记住我们的交流QQ群：（非官方的也很营养），（小安娜：好的，已经加了，撒哟啦啦！）
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2890次
排名：千里之外}