微信小程序入门篇

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

安装开发工具

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

账号申请

小程序开发需要一个AppID，小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

如果是正式项目，需要进入小程序注册页 根据指引填写信息和提交相应的资料，注册自己的小程序帐号。
然后再登录 小程序后台 ，在菜单 “设置”-“开发设置” 就可以看到小程序的 AppID 了 。

由于本文讲解小程序demo，使用的是开发工具中提供的测试AppID。

小程序与网页开发的区别

​1.小程序的主要开发语言是 JavaScript，是由微信中的 WebView衍生出来供开发者调用的JS API。
2.网页开发和小程序的区别：

• ​网页开发渲染线程和脚本线程是互斥的， 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。
• 小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
•  jQuery、 Zepto 等，在小程序中是无法运行的，一些 NPM 的包在小程序中也是无法运行的。

3.小程序包含一个描述整体程序的 app 和多个描述各自页面的 page，代码目录如下图：

小程序宿主环境

我们称微信客户端给小程序所提供的环境为宿主环境。 
小程序的运行环境分成渲染层和逻辑层，其中 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.js
Page({
  data: {
    latitude: 29.61612895289891,
    longitude: 106.50210664019774
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  }
})

事件

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

发送请求方式

1.wx.request()
只支持https，需要ICP备案
2.云函数(第三方库)
根据第三方库决定http/https，可以不备案