如何开发微信小程序.docxVIP

如何开发微信小程序如果你想开发小程序，一种方法是选择如：微客巴巴第三方小程序开发服务商，第二种方法就是自己开发，自己开发就得先学会一套微信特制的「开发语言」。为了让大家上手这门开发语言，微信官方提供了一份十分详细的小程序开发文档：小程序开发官方文档解读语言与文件微信小程序开发与其他平台开发的最大差异在于：微信使用的开发语言和文件很「特殊」。小程序所使用的程序文件类型大致分为以下几种：WXML（WeiXin Mark Language，微信标记语言）WXSS（WeiXin Style Sheet，微信样式表）JS（JavaScript，小程序的主体）在语言方面，小程序看似重新定义了一套标准。但实际上，它们与「前端三件套」——HTML、CSS 和 JavaScript——差不太多。下面，我们就来对比一下小程序开发语言和「前端三件套」有什么异同点：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 有较大不同。比如，我们将手机屏幕想像成一个舞台，舞台之外的演员是无法被观众看到的。小程序有专门用于滚动的视图。如果希望界面是一个可以自由滚动的界面（例如列表等），可以使用 scroll-view 视图，在 WXSS 中将其大小调整为整个屏幕，并设置 scroll-y（上下滚动）或 scroll-x（左右滚动）为 true。小程序中不能直接使用 DOM 控制 WXML 元素。如果需要进行数据更新，就得使用 WXML 提供的数据绑定及元素渲染方法。还有一点需要注意的是：小程序的栅格排版系统使用的是 Flex 布局，它是 W3C 在 2009 年提出的一种排版标准。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 属性