微信小程序开发

微信小程序这么火热，咱也不能错过，所以我就尝试着接触了微信小程序，从注册--搭建--开发第一个dome，总的感受就是方便快捷，接下来，就简单的说一下我对小程序的理解，详情如下：

第一步：下载微信小程序开发者工具并安装，安装路径：

https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html

第二步：打开开发者工具，可以看到自动生成的项目目录，个项目里边生成了不同类型的文件:

1、.json 后缀的 JSON 配置文件(其实就是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等)

2、.wxml 后缀的 WXML 模板文件（其实也就是我们平时用到的html文件）

3、.wxss 后缀的 WXSS 样式文件（其实也就是我们平时用到的css文件）

4、.js 后缀的 JS 脚本逻辑文件（其实也就是我们平时用到的js文件）

WXML 模板分析：

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色，和 HTML 非常相似，有标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

1、标签名字有点不一样 往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。 从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力 更多详细的组件讲述参考下个章节 小程序的能力

2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式(例如 React, Vue)，提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。 小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。 WXML 是这么写 :

                        

                        

WXSS 样式分析：
微信小程序中，WXSS 在底层支持新的尺寸单位 rpx ，因为这样开发者可以免去换算的烦恼，只要交给小程序底层来换算即可。

.container {

      height: 100%;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: space-between;

      padding: 200rpx 0;

      box-sizing: border-box;

}

JS 交互逻辑分析：

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

WXML里面写：

  {{msg}}

点击我

js里面写：

Page({

             clickMe:function(){

                    this.setData({ msg:"Hello World"}) 

             }

})

打开微信开发者工具，里面有模拟器，编辑器，调试器，也可以在手机上直接观看页面的样子，下图是页面的首页：

页面首页dome

在微信开发者工具里，自己动手操作一下吧，这样记忆更深刻。