微信小程序开发基础

​关于开发文档阅读说明

后文中为了保持简单，经过如下格式来展现上述的代码逻辑，使用第一段注释来代表 WXML 对应的脚本文件中的 data 结构。

代码清单2-7 展现格式

<!--

{

  time: (new Date()).toString()

}

-->

<text>当前时间：{{time}}</text>

 

小程序由配置代码JSON文件、模板代码 WXML 文件、样式代码 WXSS文件以及逻辑代码 JavaScript文件组成。

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

 

配置代码JSON文件

JSON 语法

这里说一下小程序里JSON配置的一些注意事项。

JSON文件都是被包裹在一个大括号中 {}，经过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是如下几种数据格式，其余任何格式都会触发报错，例如 JavaScript 中的 undefined。

1. 数字，包含浮点数和整数
2. 字符串，须要包裹在双引号中
3. Bool值，true 或者 false
4. 数组，须要包裹在方括号中 []
5. 对象，须要包裹在大括号中 {}
6. Null

还须要注意的是 JSON 文件中没法使用注释，试图添加注释将会引起报错。

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

每个小程序页面也可使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

1. JSON 是一种并非数据格式，编程语言，在小程序中，JSON扮演的静态配置的角色。
2. JSON文件在小程序代码中扮演静态配置的做用，在小程序运行以前就决定了小程序一些表现，须要注意的是小程序是没法在运行过程当中去动态更新JSON 配置文件从而发生对应的变化的。
3. JSON文件都是被包裹在一个大括号中 {}，经过key-value的方式来表达数据。Key必须包裹在一个双引号中
4. JSON 文件中没法使用注释，试图添加注释将会引起报错。

模板代码 WXML 文件

1. WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，能够构建出页面的结构。
2. 不带有任何逻辑功能的 WXML 基本语法以下：

<!-- 在此处写注释 -->

<标签名 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签名>

1. ​标签能够拥有属性，属性提供了有关的 WXML元素更多信息。属性老是定义在开始标签中，除了一些特殊的属性外，其他属性的格式都是key="value" 的方式成对出现。
2. 在网页的通常开发流程中，咱们一般会经过 JS 操做 DOM (对应 HTML 的描述产生的树)，以引发界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时经过 DOM API 操控 DOM 的属性或者行为，进而引发界面一些变化。当项目愈来愈大的时候，你的代码会充斥着很是多的界面交互逻辑和程序的各类状态变量，显然这不是一个很好的开发模式，所以就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来讲就是不要再让 JS 直接操控 DOM，JS 只须要管理状态便可，而后再经过一种模板语法来描述状态和界面结构的关系便可。

在 Web 开发中，开发者使用 JavaScript 经过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。

1. 数据绑定

(1).WXML 经过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。

(2). 属性值也能够动态的去改变，有所不一样的是，属性值必须被包裹在双引号中

<text data-test="{{test}}"> hello world</text>

(3). 没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中

(4). 还支持字符串的拼接,{{ }}中还能够直接放置数字、字符串或者是数组

1. 逻辑语法

(1). 经过 {{ 变量名 }} 语法可使得 WXML 拥有动态渲染的能力，除此外还能够在 {{ }} 内进行简单的逻辑运算。

(2). WXML 中，使用 wx:if="{{condition}}" 来判断是否须要渲染该代码块：

(3). 若是要一次性判断多个组件标签，可使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

1. 列表渲染

(1). 在组件上使用 wx:for 控制属性绑定一个数组，便可使用数组中各项的数据重复渲染该组件,默认数组当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

(2). 使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：

(3). 若是列表中项目的位置会动态改变或者有新的项目添加到列表中，而且但愿列表中的项目保持本身的特征和状态（如 <input/> 中的输入内容， <switch/> 的选中状态），须要使用 wx:key 来指定列表中项目的惟一的标识符。

wx:key 的值以两种形式提供：

1. 字符串，表明在 for 循环的 array 中 item 的某个 property，该 property 的值须要是列表中惟一的字符串或数字，且不能动态改变。
2. 保留关键字 this 表明在 for 循环中的 item 自己，这种表示须要 item 自己是一个惟一的字符串或者数字，如：

当数据改变触发渲染层从新渲染的时候，会校订带有 key 的组件，框架会确保他们被从新排序，而不是从新建立，以确保使组件保持自身的状态，而且提升列表渲染时的效率。

1. 模板

(1).WXML提供模板（template），能够在模板中定义代码片断，而后在不一样的地方调用。使用 name 属性，做为模板的名字。而后在 <template/> 内定义代码片断，

(2). 使用 is 属性，声明须要的使用的模板，而后将模板所须要的 data 传入

1. 引用

(1). WXML 提供两种文件引用方式import和include。

import 能够在该文件中使用目标文件定义的 template

include 能够将目标文件中除了 <template/> <wxs/> 外的整个代码引入，至关因而拷贝到 include 位置

WXSS 样式

(1). 项目公共样式：根目录中的app.wxss为项目公共样式，它会被注入到小程序的每一个页面。

(2). 与app.json注册过的页面同名且位置同级的WXSS文件

其它样式：其它样式能够被项目公共样式和页面样式引用

(3). 在小程序中，咱们依然能够实现样式的引用，样式引用是这样写：

@import './test_0.wxss'

因为WXSS最终会被编译打包到目标文件中，用户只须要下载一次，在使用过程当中不会由于样式的引用而产生多余的文件请求。

 

JavaScript 脚本

1. console.log() 方法用于在控制台输出信息。
2. wxml中的动态数据均来自于对应js文件中的Page的data，在js中访问Page的data用this.data， 改变data中某个属性的值用setData()方法。
3. 整个小程序只有一个 App 实例，是所有页面共享的。开发者能够经过 getApp （）方法获取到全局惟一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数
4. 小程序中的Javascrpt

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，因此相似 JQuery、Zepto这种浏览器类库是没法在小程序中运行起来的，一样的缺乏 Native 模块和NPM包管理的机制，小程序中没法加载原生库，也没法直接使用大部分的 NPM 包。

1. 模块化

浏览器中，全部 JavaScript 是在运行在同一个做用域下的，定义的参数或者方法能够被后续加载的脚本访问或者改写。同浏览器不一样，小程序中能够将任何一个JavaScript 文件做为一个模块，经过module.exports 或者 exports 对外暴露接口。

1. 脚本的执行顺序

小程序的执行的入口文件是 app.js 。而且会根据其中 require 的模块顺序决定文件的运行顺序

当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行

1. 做用域

(1).同浏览器中运行的脚本文件有所不一样，小程序的脚本的做用域同 NodeJS 更为类似。在文件中声明的变量和函数只在该文件中有效，不一样的文件中能够声明相同名字的变量和函数，不会互相影响，

(2).当须要使用全局变量的时，经过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的

(3).须要注意的是，上述示例只有在 a.js 比 b.js 先执行才有效，当须要保证全局的数据能够在任何文件中安全的被使用到，那么能够在 App() 中进行设置