小程序官方开发文档解读语言与文件(嵌套三件套)
发表时间:2023-11-18 13:41:59
文章来源:炫佑科技
浏览次数:114
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
小程序官方开发文档解读语言与文件(嵌套三件套)
想要开发小程序,首先要学习一套微信专用的“开发语言”。
为了让大家能够上手这种开发语言,微信官方提供了非常详细的开发文档:
如果您没有时间阅读,这里有一个节省时间的替代方案:
(微信ID)准备了超精简版的官方开发文档。 它不仅包含了官方文件的所有关键信息,而且只有原文的三分之一。
只要看完这篇文章,你就能快速上手小程序开发。
注:本文适合有一定编程基础的人阅读。 如果您想从零开始学习小程序开发,请继续关注了解小程序(微信ID)后续内容。
小程序官方开发文档解读
语言和文档
微信小程序开发与其他平台开发*大的区别在于:
微信使用的开发语言和文件都很“特别”。
小程序使用的程序文件类型大致分为以下几类:
从语言上来说,小程序似乎重新定义了一套标准。 但实际上,它们与“前端三件套”——HTML、CSS和——并没有太大区别。
接下来我们来对比一下小程序开发语言和“前端三件套”的异同:
从语言上来说,小程序完全与前端开发接轨,学习成本*低,但这并不意味着所有前端开发都可以无缝迁移。
如果你是从前端开发转向小程序,需要注意这两点:
界面搭建
1. 基本逻辑
WXML和WXSS这两个文件是小程序界面元素声明和样式描述文件。
WXML*大的特点就是界面元素以视图的形式串联起来,信息更新通过程序逻辑实时传输到视图层()。
视图类似于 HTML 中的 div 元素。 构建时,视图可以多层嵌套,任何视觉元素都可以放置在视图内。
需要注意的是,一旦元素超出屏幕,用户就看不到它,这与 HTML 有很大不同。
例如,我们把手机屏幕想象成一个舞台,舞台外的演员是观众看不到的。
小程序有一个专门的滚动视图。
如果希望界面是可自由滚动的界面(如列表等),可以使用-view视图,在WXSS中将其大小调整为整个屏幕小程序官方开发文档解读语言与文件(嵌套三件套),并设置-y(上下滚动)或-x(左右滚动)为 true 。
DOM 不能直接用于控制小程序中的 WXML 元素。 如果需要更新数据,就必须使用WXML提供的数据绑定和元素渲染方法。
另外需要注意的是,小程序的网格排版系统采用的是Flex布局,这是W3C在2009年提出的排版标准。
2. 绑定数据
对于单个字段小程序开发摇一摇功能,开发可以使用数据绑定方法来更新信息。
绑定的数据除了加载时更新外,还可以在JS主程序中以函数的形式更新。 更新也可以反映在界面上的绑定数据中。
3.条件渲染和列表(循环)渲染
条件渲染适用于有意外情况提示的页面(例如列表或详情无法加载时的提示等)。
它的渲染是有触发条件的,即满足条件就渲染页面,否则忽略或者渲染另一段代码。
两个大括号括起来的判断条件中的变量在主程序的JS代码中的data中声明。
如果需要在界面中构建列表,可以使用WXML中的循环渲染来组装同一元素的渲染代码。 循环的数据可以以数组的形式写入data中,供WXML访问。
渲染完成后,渲染判断条件的改变会影响界面的变化。
4. 模板和参考
WXML 支持使用模板和引用来减少代码大小。
模板是一种在 WXML 代码中重用相同代码的方法。
多个模板可以写入同一文件并在其他文件中引用。
如果需要引用整个页面,则需要使用它。
5. 风格
通过WXSS样式表,开发可以为WXML中的元素定义样式。
WXSS 和 CSS 代码一样,可以直接使用选择器来选择元素。 在WXML中,还可以直接定义元素的id和class,以方便WXSS文件中的样式定义。
6. 用户操作和事件响应
由于微信不使用HTML,因此无法通过添加超链接(a元素)来监听用户点击事件。
对于需要侦听单击事件的元素,应使用 WXML 中的属性或属性来绑定它们。
除了一键点击之外,微信还提供按住、开始触摸、放开等事件响应。
在WXML中绑定事件后,就可以在主程序JS中使用了。
其他API中也有其他对应的事件,这些事件可以在微信小程序的官方文档中找到。
当需要在小程序页面之间跳转时,应该使用wx.()方法。
需要注意的是,关于页面级别跳转,微信将级别跳转限制为五级。 开发时需要注意是否超出相应的限制。
网络访问
小程序支持三种请求方式。