微信小程序入门篇-即速应用

本文简单介绍如何完成一个微信小程序入门demo的开发，以及它与WEB开发有何异同。
适合初学者学习，有HTML/CSS/Vue.js基础的同学将更容易理解文章的对比角度。

安装开发工具

工欲善其事必先利其器，小程序开发使用的IDE是——微信开发者工具。
前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装。
打开小程序开发者工具后，需用微信扫码登录开发者工具。

小程序宿主环境

我们称微信客户端给小程序所提供的环境为宿主环境。
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：
渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。

程序与页面

通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径：
写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

小程序代码构成

JSON配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
1. app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
2. project.config.json 在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
3. page.json 指的是用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。

{  "pages": [    "pages/index/index",    "pages/me/index"  ],  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#DF0029",    "navigationBarTitleText": "签到打卡",    "navigationBarTextStyle": "white"  },  "tabBar": {    "color": "#000",    "selectedColor": "#426EB4",    "list": [      {        "pagePath": "pages/index/index",        "text": "打卡",        "iconPath": "images/index/sign_gray.png",        "selectedIconPath": "images/index/sign_blue.png"      },      {        "pagePath": "pages/me/index",        "text": "我的",        "iconPath": "images/me/me_gray.png",        "selectedIconPath": "images/me/me_blue.png"      }    ]  },  "style": "v2",  "sitemapLocation": "sitemap.json"}

WXML 模板

1. 标签名字有点不一样
换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。
2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

!--index.wxml--view class="container"  map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" show-location style="width: 100%; height: 360px;"  /map  view class="bottom"    button type="primary" open-type="getUserInfo" plain="true" lang="zh_CN" bindtap="bindViewTap"签到/button  /view/view

WXSS 样式

1. 新增了尺寸单位。
在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。
2. 提供了全局的样式和局部样式。
你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3. WXSS 仅支持部分 CSS 选择器

/**index.wxss**/.container{  padding: 0;}.bottom{  padding: 1.5rem 0;}

JS 逻辑交互

在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

//index.jsPage({  data: {    latitude: 29.61612895289891,    longitude: 106.50210664019774  },  //事件处理函数  bindViewTap: function () {    wx.navigateTo({      url: '../logs/logs'    })  }})

事件

1.什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches
2.使用事件
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。