前端微信小程序入门学习笔记

微信小程序的入门学习和基本使用

前言：最近学习了微信小程序，归纳总结笔记，只是简单的去介绍使用流程，可以作为快速上手的基本过程，学习过程遇到的问题会单独拎出来单独归纳，这篇文章只是代表总结的一个梳理过程。

一、简介与发展历史

​ 简介：小程序是一种全新的连接用户与服务器的方式，他可以在微信内被便捷的获取和传播，同时具有出色的使用体验。也是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或者搜一下就可以打开应用。也体现了“用完就走”的理念，用户不用关心是否会在手机上安装太多应用的问题。小程序实现了应用将无处不在，随时可用，无需卸载安装的现象。

​ 发展史：2016年1月11日，2016微信公开课PRO版在广州发布，“微信之父”张小龙首次公开演讲，宣布微信公众号将推出"应用号"，通过公众号完成一些App的部分功能。详情见传送门:微信小程序百度百科

二.微信小程序和普通网页开发的区别

​ 小程序的主要开发语言是JavaScript，小程序的开发同普通网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

​ 细分来讲区别点主要分为以下几点

1. 微信小程序用开发者工具来查看预览页面，H5用浏览器来查看渲染页面。
2. 微信小程序扩展了底层能力，H5调用底层能力比较弱。
3. 小程序的逻辑层和渲染层是分开的，逻辑层运行在JSCore中,并没有一个完整的浏览器对象，因而缺少相关的DOM API和BOM API，这一区别导致了前端开发非常熟悉的的一些库，例如JQuery、Zepto等，在小程序中是无法运行的。而H5呢是拥有完整的JS API（ECMAScript，DOM，BOM）开发能力。

熟悉了以上那么我们就可以正式的去学习小程序的开发了，首先在学习任何一门技术的时候必不可少的就是去下载安装对应的编辑软件还有对应的一些注册流程了。

三.微信小程序的使用流程

申请账号

进入小程序注册页根据指引填写信息和提交响应的资料，就可以拥有自己的小程序账号啦！

在登录小程序管理平台，你可以管理你的小程序权限，查看数据报表，发布小程序等操作。

登录小程序后台，我们可以在菜单“开发”-“开发设置”看到小程序的AppID了。

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

有了小程序帐号之后，我们需要一个工具来开发小程序。

安装开发工具

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！

你的第一个小程序

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

接下来我们来预览一下这个小程序的效果。

编译预览

点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微