自学微信小程序开发第一天-准备工作，了解结构、逻辑层和视图层

微信小程序比较移动端APP有很多优势。 对于普通用户，小程序实现了应用的触手可及，只需要通过扫描二维码、搜索或者是朋友的分享就可以直接打开，而不用下载安装应用。在登录时，通过微信授权，可以直接调用微信账号进行登录操作，也省却了用户名密码的麻烦。

开发准备工作1：申请及注册

因为微信小程序是基于微信运行的，所以需要在微信的开发页面进行注册：

微信公众平台

注册时选择小程序然后按照提示进行注册就好了。注册成功之后，点击 “开发”—“开发设置” 就可以看到小程序的 AppID

开发准备工作2：安装调试开发者工具

在小程序开发文档中找到小程序开发工具的下载页面，根据自己的操作系统下载对应的安装包进行安装。

微信小程序开发者工具下载

安装完成，打开小程序开发工具，使用之前注册小程序所使用的微信扫码登录。

登录后就可以建立项目了。

开发准备工作3：测试开发环境，经典的Hello,World!

新建个新项目，模板使用空的就行，然后在根目录下创建app.json（其实应该是已经创建好的）

{
  "pages": ["pages/index/index"]
}

在根目录下新建pages目录，然后在pages目录下新建index目录，接着在index目录下创建两个文件index.wxml和index.js(应该也是创建好的)。

index.wxml的内容：

<view class="container">
    <text>Hello World</text>
</view>

index.js的内容：

Page({})

然后在左侧的浏览器里，就应该显示出基本的Hello World了。

开发准备工作4：开发语言

小程序的主要开发语言是 JavaScript，但是和网页开发还是有区别。网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。

另外开发微信小程序还需要了解下XML和CSS。

开发准备工作5：微信小程序的结构、默认应用入口

微信小程序代码构成分为4个部分，也是4个独立的文件：JOSN配置、WXML页面结构、WXSS样式、JS逻辑交互。一个独立的页面包含这4部分，当然JOSN和WXSS不是必须的，是可以继承上级的。

这里说明一下app.json文件。这个文件是存放整个应用的配置信息的，主要包括：pages、window、tabBar。

• pages存放了小程序的页面情况，是个字符串数组类型，第一条即小程序的默认页面。例如"pages/index/index"。因为小程序的页面是由4个文件组成，所以不需要扩展名。
• window存放了各页面的一些配置信息，比如背景颜色、标题信息等。在小程序中，只有这个参数是可以由页面json配置覆盖改写的。
• tarBar设置页面切换栏。可以设置2到5个页面，在小程序的切换栏中呈现，方便快速切换页面。

还有其他的一些成员，可以参考小程序开发文档具体章节。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

开发准备工作6：逻辑层和视图层

逻辑层

逻辑层主要使用JavaScript语言，不过除了缺少DOM和BOM外，还有一些不同之处。

小程序的JS具有一些额外的成员：
App 方法，用于定义应用程序实例对象
Page 方法，用于定义页面对象
getApp 方法，用于获取全局应用程序对象
getCurrentPages 方法，用于获取当前页面的调用栈
WX 对象，用来提供核心API

小程序的JS是支持CommonJS规范的，即可以通过导出 来调用其他文件中的函数。例：
utils/utils.js

//定义一个方法
function say(msg){
	console.log('Hello ' + msg)
}

//导出say方法
module.exports = {
	say : say
}
//exports.say = {} 是不支持的

index/index.js

const utils = require('./utils/utils.js')
utils.say('World!')

视图层

视图层使用WXML结构和WXSS样式来进行页面呈现。

​一个完整的 WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML语句，这一点上同 HTML 是一致的。有所不同的是，WXML要求标签必须是严格闭合的，没有闭合将会导致编译错误。​标签可以拥有属性，属性提供了有关的WXML元素更多信息。属性总是定义在开始标签中，除了一些特殊的属性外，其余属性的格式都是key=“value” 的方式成对出现。需要注意的是，WXML中的属性是大小写敏感的，也就是说class和Class 在WXML中是不同的属性。

用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。在 Web 开发中，开发者使用JavaScript通过Dom接口来完成界面的实时更新。在小程序中，使用WXML 语言所提供的数据绑定功能，来完成此项功能。

数据绑定

WXML 里的变量由两对花括号标注：

<view> {{message}} view>
<view>
	<text>{{person.name}}text>
view>

而对变量提供的数据，则在相应的.js文件的data对象属性内：

Page({
	data: {
		message: 'Hello World!',
		person: {
			name: 'zhangsan',
			age: 18
		}
	}
})

属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中，再次强调大小写敏感。

<text data-test="{{test}}"> hello worldtext>

此外还可以在{{}}内进行简单的逻辑运算，算数运算，字符串拼接，还可以直接放置数字、字符串或数组等

<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}text>

<view> {{a + b}} + {{c}} + d view>



<view>{{"hello " + name}}view>


<text>{{[1,2,3]}}text>


<text>{{"hello world"}}text>

重要参考：

B站上找到的开发教程视频，Up主不知道叫啥……