微信小程序学习起步

一.起步

微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
1.申请账号
2.安装开发者工具
3.新建项目

二.小程序代码构成

1.一个项目中生成了4种文件
①.json 后缀的 JSON 配置文件
②.wxml 后缀的 WXML 模板文件
③.wxss 后缀的 WXSS 样式文件
④.js 后缀的 JS 脚本逻辑文件

2.JSON配置
JSON 是一种数据格式，在小程序中扮演静态配置的角色。
在项目的根目录有一个 app.json 和 project.config.json，在 pages/logs 目录下还有一个 logs.json

①app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。配置内容：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

（1）pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
（2）window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

②工具配置 project.config.json
每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，例如界面颜色、编译配置。就算重新安装工具或者换电脑时，个性化配置也不会丢失。
③页面配置 page.json
用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
如果整个项目的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色。如果每个页面都有不一样的色调来区分不同功能模块，因此提供了 page.json，让开发者可以独立定义每个页面的一些属性。

3.JSON语法
JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，一定要给 Key 值加双引号，写成单引号是错误的。
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

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

注：JSON 文件中无法使用注释，添加注释将会报错。

4.WXML 模板
WXML 由标签、属性等等构成，和 HTML 非常相似，但是也有很多不一样的地方：
①标签名字有点不一样
HTML经常会用到的标签是 div, p, span
WXML 用的标签是 view, button, text 等等

②多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
通过 {{ }} 的语法把一个变量绑定到界面上，称为数据绑定。还需要 if/else, for等控制能力描述状态和界面的关系，这些控制能力都用 wx: 开头的属性来表达。
WXML：

<text>{{msg}}</text>

JS：

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

5.WXSS 样式
WXSS 具有 CSS 大部分的特性，也有一些扩充和修改。
①新增了尺寸单位rpx，可以免去换算的烦恼，只要交给小程序底层来换算即可
②提供了全局的样式和局部样式。可以写一个 app.wxss 作为全局样式，作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
③WXSS 仅支持部分 CSS 选择器

6.JS 逻辑交互
通过编写 JS 脚本文件来处理用户的操作：

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，把界面上 msg 显示成 “Hello World”，在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应点击操作：

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

三.小程序宿主环境

1.微信客户端给小程序所提供的环境为宿主环境。

2.渲染层和逻辑层
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

3.程序与页面
整个小程序只有一个 App 实例，是全部页面共享的。小程序启动后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行：

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

pages/logs/logs 下包括了4种文件，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字都可以在这里边定义好。然后客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js， logs.js 的大体内容就是:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构。
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。
4.组件
①如果需要在界面上显示地图：

<map></map>

②如果希望地图一开始的中心的经纬度是济南，需要声明地图的 longitude（中心经度） 和 latitude（中心纬度）两个属性:

<map longitude="济南经度" latitude="济南纬度"></map>

③如果用户点击了地图上的某个标记，可以在 js 编写 markertap 函数来处理：

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

5.API
①要获取用户的地理位置时，只需要：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})

②调用微信扫一扫能力，只需要：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})