微信小程序开发快速上手

微信小程序开发快速上手

由于学生工作需要，我最近在一些工具书的参考帮助下尝试进行了微信小程序的开发，本文主要内容为我本人在近期微信小程序开发的过程中，关于指定类型的微信小程序开发的一点心得体会。

1.0基础知识

微信小程序采用JavaScript语言进行开发，可以理解为基于ECMAScript的一种实现，即一种标准化的脚本程序设计语言，因此在微信小程序的开发上，可以直接按照ES6标准语法进行学习和设计。(可以在设置中勾选ES6转ES5以便微信小程序在一些版本较低的老型号手机上能够正常使用）
首先开始一个标准的helloworld代码

var name = 'Hello world!'
console.log (name)

1.1 ES变量

作为一种比较简单的脚本语言，ES中的变量没有特定的类型，在定义这些变量时常常只使用var运算符进行定义，可以将这些变量初始化为任意值。
代码示例-定义并输出变量

var color = "red";
var num = 25;
var visible = true;
console.log("color:",color)
console.log("num:",num)
console.log("visible:",visible)

上述代码的输出结果为：

color:red
num:25
visible:true

在ES中，每行代码末尾的分号并不是必须的，若不存在分号，ES就将折行代码的结尾作为该语句的结尾
在ES中，还存在let和const两种声明变量的方式，其中let语句常用于在代码块中声明的局部变量，const命令则会声明不能改变值的变量。
let命令和const命令都会造成一个不能使用变量的暂时性“死区”：在块级作用域中，在let声明这个变量之前对变量的任意操作都会造成错误，即使是在更早地区域中存在有重名的全局变量；const命令在定义变量后不能对这个变量作任何的赋值操作。

var ex =123;
if (true){
ex='abc';
let ex;//代码报错，原因是在块内let命令前对ex变量做修改
}

1.2 ES输出命令

在微信小程序开发过程中，常常采用一些控制台输出命令来对小程序运行中一些特定的变量作运行过程中的展示，常见的输出信息的命令如下图所示：

console.log() //输出普通信息
console.info()//输出提示性信息
console.error()//输出错误信息
console.warn()//输出警告信息
console.debug()//输出调试信息

console.log()和concole.info()的作用方法类似，会向控制台输出一个带有指向代码中语句位置的超链接；而console.error()命令则会向控制台输出一个带有警告图标的信息来表示，在实际使用过程中，console.log()命令的作用是最大的。
console.log命令也同样支持C语言中最为常用的printf格式化输出，也支持微信小程序中常用的数组和对象输出。，常用于在程序的运行过程中查看变量状态和调试程序。

var animal = 'frog',count=10;
console.log("The %s jumped over %d tall buildings",animal,count);
console.log("The",animal,"jumped over",count,"tall buildings");

执行代码，输出结果为

The frog jumped over 10 tall buildings
The frog jumped over 10 tall buildings

1.3 ES数组和对象

在ES中，数组用于在变量中存储多个值，使用数组名称[num]的方式直接访问数组中的制定变量。
下图展示的是常见的数组操作命令：

concat()//连接两个或更多地数组并返回结果
indexOf()//搜索数组中的指定元素并返回其所在的位置
lastIndexOf()//搜索数组中的指定元素并返回其最后出现的位置
pop()//删除数组的最后一个元素并返回删除的元素
push()//向数组的末尾添加一个或更多元素，并返回新的长度
shift()//删除并返回数组的第一个元素
unshift()//想数组的开头添加一个或更多的元素，并返回新的长度
splice()//从数组中添加或删除元素
toString()//将数组的全部元素转化为一个字符串并返回结果
length()//设置或返回数组元素的个数
map()//返回一个新的数组，数组中的元素为原始数组元素调用函数处理之后的值

将上述展示的命令在代码中展示即为：

var itmes = ['a','b','c'];
console.log(items.length);	//控制台输出3
items.push(d);
console.log(items); //控制台输出 Array(4)["a","b","c","d"]
var index =items.indexOf("b");
console.log(items[index]); //控制台输出 "b"
var item=items.pop();
console.log(items); //控制台输出 Array(3)["a","b","c"]
items.splice(2,1); //删除数组下表为2的元素
console.log(items); //控制台输出 Array(2)["a","b"]

其中，关于数组的操作push()和concat()之间存在一定区别，push()在遇到数组参数的时候，会将整个数组参数作为一个元素，而concat()则是将数组参数拆开，将元素逐个加入进去；在使用这些命令操作数组参数的时候，要注意对应的情况。

1.4 JSON对象访问

JSON作为一种轻量级的数据交换格式，在微信小程序和后端之间的交互都被采用。JSON格式的数据存在一定的必要格式：对象必须使用花括号{}包围，对象必须以键值对书写；键必须是字符串，值必须是有效的JSON数据类型（包括字符串、数字、对象、数组、布尔型或NULL）
访问JSON对象属性主要有以下两种方法
①直接使用a.b的格式访问指定对象
②使用方括号[]的格式来访问对象

objectName.propertyName //a.b格式
objectName["propertyName"] //[]格式

通常访问对象采用方式①，但当小程序中存在中文名称作为字段的情况下必须使用方式②的方括号访问方式。
在实际的操作过程中，常常存在有将JSON对象与字符串形式互相转化的过程。
常使用JSON.stringify()将JSON对象转换为字符串
或使用JSON.parse()将字符串转换为JSON对象