微信小程序基础知识学习（一）

1.小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

2.使用 JS-SDK 调用图片预览组件

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

注：​JS-SDK是对之前的 WeixinJSBridge 的一个包装，以及新能力的释放，并且由对内开放转为了对所有开发者开放，​JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，之后设计了一个 JS-SDK 的增强版本，其中有一个重要的功能，称之为“微信 Web 资源离线存储”。

3.小程序与普通网页开发的区别

​1.小程序的主要开发语言是 JavaScript
2.网页开发者需要面对的环境是各式各样的浏览器，而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具
3。​网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。>

4.安装

1.进入小程序注册页申请账号
可以管理小程序的权限，查看数据报表，发布小程序等操作。
登录小程序后台 ，可以在菜单 “开发”-“开发设置” 看到小程序的 AppID（小程序的 AppID 相当于小程序平台的一个身份证） 。
2.安装开发工具

新建项目时，填入小程序的AppId,勾选“不使用云服务”， （注意: 你要选择一个空的目录才可以创建项目）

5.小程序代码构成

1.json 后缀的 JSON 配置文件
2.wxml 后缀的 WXML 模板文件
3.wxss 后缀的 WXSS 样式文件
4.js 后缀的 JS 脚本逻辑文件

6.JSON 配置

小程序配置 app.json

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

工具配置 project.config.json

当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json，让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。

JSON配置的一些注意事项。

1.SON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。
2.JSON的Key必须包裹在一个双引号中
3.JSON的值只能是以下几种数据格式
（1）数字，包含浮点数和整数
（2）字符串，需要包裹在双引号中
（3）Bool值，true 或者 false
（4）数组，需要包裹在方括号中 []
（5）对象，需要包裹在大括号中 {}
（6）Null
4. JSON 文件中无法使用注释

7.WXML 模板

WXML 充当的就是类似 HTML 的角色，和 HTML 非常相似，WXML 由标签、属性等等构成。

WXML和HTML的不同之处：
1.标签名字有点不一样
小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者
包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。
2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

如果需要把一个 Hello World 的字符串显示在界面上。

WXML 是这么写 :
<text>{{msg}}</text>

JS 只需要管理状态即可:
this.setData({ msg: "Hello World" })

8.WXSS 样式(WXSS 具有 CSS 大部分的特性)

1.新增了尺寸单位。
WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼(注：由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。)
2.提供了全局的样式和局部样式。
app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3.此外 WXSS 仅支持部分 CSS 选择器

9.JS 逻辑交互

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

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，
于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边
声明了 clickMe 方法来响应这次点击操作：

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

10.渲染层和逻辑层

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

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发

11.API

要获取用户的地理位置时，只需要：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})
调用微信扫一扫能力，只需要：

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

注：多数 API 的回调都是异步，需要处理好代码逻辑的异步问题

12.事件监听 API

以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。
wx.onCompassChange(function (res) {
  console.log(res.direction)
})

同步 API

以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。
此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等
try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

异步 API
大多数 API 都是异步 API，如 wx.request，wx.login 等