微信小程序 （JS逻辑文件）

业务逻辑案例
调用API案例
ECMAScript
小程序执行环境
模块化
作用域与全局变量

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

JS 作用：
①开发者使用 JS来开发业务逻辑；
②调用小程序的 API 来完成业务需求。

业务逻辑案例
用户响应操作案例


用户未操作的效果

用户操作后的效果

调用API案例
界面交互案例


效果

扫一扫案例
wx.scanCode(Object object)调起客户端扫码界面进行扫码
场景：
为了让用户减少输入，我们可以把复杂的信息编码成一个二维码，利用宿主环境/微信客户端wx.scanCode这个API调起微信扫一扫，用户扫码之后，wx.scanCode的success回调会收到这个二维码所对应的字符串信息。


开启手机调试
真机测试小程序时，也可以开启手机调试模板

点击右上角按钮，弹框中选择打开调试，之后会自动关闭，重启即可


ECMAScript
在大部分开发者看来，ECMAScript和JavaScript表达的是同一种含义，但是严格的说，两者的意义是不同的。
ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。
简介：
ECMAScript(简称ES)是一个语言标准，javascript则是基于这个标准实现的脚本语言。

JS是 ECMAScript 一种实现后，即ES是一个语言标准，JS则是基于这个标准实现的脚本语言。
理解这个关系可以帮助开发者理解小程序中的 JS同浏览器中的JS以及 NodeJS 中的JS是不相同的。

ECMA-262 规定了 ECMAScript 语言的几个重要组成部分：
语法、类型、语句、关键字、操作符、对象

浏览器的JavaScript
浏览器中JavaScript 构成如下图：

浏览器中的JavaScript 是由 ECMAScript 和 BOM（浏览器对象模型）以及 DOM（文档对象模型）组成的，Web前端开发者很熟悉这两个对象模型，它使得开发者可以去操作浏览器的一些表现。

NodeJS的JavaScript
NodeJS中JavaScript 构成如下图：

NodeJS中的JavaScript 是由 ECMAScript 和 NPM以及Native模块组成，NodeJS的开发者会非常熟悉 NPM 的包管理系统，通过各种拓展包来快速的实现一些功能

小程序的JavaScript
同开发者所熟悉的以上两个环境是不同的，小程序中 JavaScript 构成如图

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。
注意：
①同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，
②因为缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。

小程序执行环境
明白了小程序中的 JavaScript 同浏览器以及NodeJS有所不同后
开发者还需要注意到另外一个问题，不同的平台的小程序的脚本执行环境也是有所区别的。
小程序目前可以运行在三大平台：
①iOS平台，包括iOS9、iOS10、iOS11
②Android平台
③小程序IDE

这种区别主要是体现三大平台实现的 ECMAScript 的标准有所不同。截止到当前一共有七个版本的ECMAScript 标准

兼容问题：
目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准，但是在小程序中， iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准，一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的，例如：箭头函数、let const、模板字符串等…

方案：
一些开发者会发现有些代码在旧的手机操作系统上出现一些语法错误。为了解决这类问题，小程序IDE提供语法转码工具，将 ECMAScript 6代码转为 ECMAScript 5代码，从而在所有的环境都能得到很好的执行。
开发者需要在项目设置中，勾选 ES6 转 ES5 开启此功能

模块化：
浏览器中，所有 JavaScript 是在运行在同一个作用域下的，定义的参数或者方法可以被后续加载的脚本访问或者改写。
同浏览器不同，小程序中可以将任何一个JavaScript 文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。

模块示例：
B.js 引用模块A，并使用A暴露的方法完成排序的操作
header.js文件引用sort.js暴露的模块，完成排序操作

①根目录下新建data→sort.js文件

②编写模块，进行导出暴露

③header.js文件利用require导入模块

④使用模块暴露导出的排序方法进行排序



排序前

排序后

以上案例便调用了sort.js导出的模块，实现数组元素排序，即小程序的模块化思想。

脚本执行顺序
浏览器中脚本严格按照加载的顺序执行，即自上而下执行
小程序中的脚本执行顺序有所不同，小程序的执行的入口文件是 app.js ，并且会根据其中 require 的模块顺序决定文件的运行顺序
template.js

打印输出后的顺序

作用域
同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同 NodeJS 更为相似
在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响

①在脚本 template.js 中定义局部变量

②在脚本 home.js 中无法访问 template.js 定义的变量

会出现报错

全局变量设置：
当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的

①在脚本 template.js 中设置全局变量

②在脚本 home.js 中访问 template.js 定义的全局变量

注意：上述示例只有在 template.js 比 home.js 先执行才有效，当需要保证全局的数据可以在任何文件中安全的被使用到，那么可以在 App() 中进行设置

全局变量
app.js定义全局变量
定义全局变量num（userInfo为用户数据，暂时不用关注）

操作全局变量
①获取以及修改 global 变量的方法

②获取 更改后的global 变量

执行后num值为2

以上是JS的逻辑文件