贵阳小程序开发语言与前端三件套的区别

贵阳微信开发使用的开发语言和文件很「特殊」小程序所使用的程序文件类型大致分为以下几种:

 

①WXML(WeiXin Mark Language,微信标记语言)

 

②WXSS(WeiXin Style Sheet,微信样式表)

 

③JS(Java,小程序的主体)

 

在语言方面,小程序看似重新定义了一套标准。但实际上,它们与「前端三件套」——HTML、CSS 和 Java——差不太多。

 

下面,我们就来对比一下小程序开发语言和「前端三件套」有什么异同点:

 

HTML 与 WXML:两者差异比较大,如果之前没有接触过 Android 开发,可能会觉得有些头疼。事实上,WXML 更像是 Android 开发中的界面 XML 描述文件,适合于程序界面的构建;而 HTML 则倾向于文章的展示(这与 HTML 的历史有关),以及互联网页面的构建。

 

WXSS 与 CSS:两者在语言上几乎没有差别,可以直接通用。

 

JS 文件:小程序的 JS 文件与前端开发使用的 JS 几乎没有区别,只是小程序的 JS 新增了微信的一些 API 接口,并去除了一些不必要的功能(如 DOM)。

 

在语言上,小程序完全向学习成本的前端开发看齐,但这不代表所有前端开发者都能无缝迁移。

 

如果你是从前端开发转向贵阳小程序开发,就需要注意这两个点:

 

HTML 与 WXML 两种文件的构建思想差异较大,如果之前只接触过前端开发,需要一点时间才能适应 WXML 的编写方法。

 

虽然小程序使用的是前端语言,但不代表可以继续沿用前端的开发思想进行开发。小程序对前端开发的要求从「构建界面」升级成「开发完整应用」,前端开发需要在意识上进行转变。

 

界面构建

 

1. 基本逻辑

 

WXML 和 WXSS 两种文件是小程序界面元素声明及样式描述文件。

 

WXML 的特点是以视图(view)的方式串联界面元素,并通过程序逻辑(AppService),将信息更新实时传递至视图层。

 

view 类似于 HTML 中的 div 元素。在构建的时候,view 可以被多级嵌套,view 内可以放置任意视觉元素。

 

需要注意的是,元素一旦超出屏幕之外,用户就无法看到了,这与 HTML 有较大不同。

 

2. 绑定数据

 

对于单个字段,开发者可以使用数据绑定的方法进行信息更新。

 

绑定的数据除了在加载的时候可以更新,也可以在 JS 主程序中以函数形式进行更新,更新同样可以反映到界面上被绑定的数据中。

 

3. 条件渲染与列表(循环)渲染

 

条件渲染适用于有意外情况提示的页面(如无法加载列表或详情时,做出提示等等)。

 

它的渲染带有触发条件,即符合条件时渲染这个页面,否则忽略或渲染另一段代码。

 

两个花括号所包含的判断条件中的变量于主程序 JS 代码中的 data 中声明。

 

若需要在界面中构建一个列表,可以使用 WXML 中的循环渲染,将同一元素渲染代码进行集合。循环的数据可以通过数组的方式写入 data 中供 WXML 访问。

 

染完毕后,渲染判断条件的变动可以影响界面变动。

 

4. 模板与引用

 

WXML 支持使用模板与引用减少代码体积。

 

模板是在 WXML 代码中对相同的代码进行复用的方式。

 

可以将多个模板写入至同一文件,并使用 import 在其他文件中进行引用。

 

如果需要整个页面引用,需要使用到 include。

 

5. 样式

 

通过 WXSS 样式表,开发者可以定义 WXML 中的元素样式。

 

WXSS 与 CSS 代码一样,可以直接使用选择器选择元素。在 WXML 中也可以直接定义元素的 id 和 class 以便于在 WXSS 文件中进行样式定义。

 

6. 用户操作与事件响应

 

由于微信使用的不是 HTML,所以也 不能通过添加超链接(a 元素)的方式来监测用户的点击事件。

 

对于需要监听点击事件的元素,应该在 WXML 中使用 bindtap 属性或 catchtap 属性进行绑定。

 

除了点击一次,微信也提供按住、开始触摸、松手等事件响应。

 

WXML 中绑定好一个事件之后,就能在主程序 JS 中使用。


我们已经准备好了,你呢?

2020我们与您携手共赢,为您的企业形象保驾护航!

在线客服
联系方式

热线电话

18690730296

上班时间

周一到周五

公司电话

15761610413

二维码
线
在线留言