微信小程序简介

什么是小程序

是一种介于原生App、和Web App的Hybrid。通过微信进行加载，达到类似原生App的流畅体验。相对原生App来说，小程序更加轻量、能实时更新、跨平台；相对Web App来说，小程序资源离线，体验更流畅。

可以归纳为是用类ReactNative/Weex框架编写的，在手机微信环境中运行的应用。

小程序的实现机制

小程序是基于微信提供的一套框架进行开发的。微信通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一套完整的JavaScript API，使得开发者能够非常方便的使用到微信客户端提供的各种基础功能，快速构建一个小程序。框架设计如下：

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的应用逻辑层。视图层与逻辑层之间通过单向数据绑定进行数据传输，开发者能更加聚焦于数据与逻辑上。

开发者如何编写小程序

1.开发环境

微信官方提供了一个IDE，编码、调试、编译、项目管理、提交等功能都涵盖在其内。

2.创建项目与编码

在IDE中新建项目后，会自动初始化几个简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

项目全局文件

• app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口�背景色，配置导航条样式，配置默认标题等。

• app.wxss 可以看做全局的公共样式表，凡是在这里写过的CSS样式，在各自子页面里面可以直接使用。写在其他.wxss文件里的样式是不能跨page使用的，可以通过@import进行样式导入。

• app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。通过js的一个全局函数getApp()可以获得当前app实例对象。

页面文件

小程序的每一个页面是由同一路径下4个同名但不同后缀的文件组成，如：HomePage.js、HomePage.wxml、HomePage.wxss、HomePage.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

• HomePage.js 是这个页面的业务逻辑，当你在空白js里面输入page的时候会自动出现代码补全，帮你补全了一个page的所有生命周期，onLoad，onHide等。

• HomePage.wxss 是这个页面专属的样式，别的页面不能使用，只在这个页面才可以用，但是可以被import到app.wxss里面，实现全局通用。wxss的代码提示非常完善。

• HomePage.wxml 描述页面的结构，wxml语法虽然乍看与HTML类似，但并不是HTML。我们必须用wx提供的wxml相关组件完全重写，条件渲染，循环渲染，数据绑定，都需要按照微信文档制定规则编码，并且提供了最简单的模板模块功能，实现一定程度的复用。

• HomePage.json 是页面的配置文件： 页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

• 通过.js和.wxml实现MVC模型

3.调试

微信小程序的调试模式，和Chrome的debug模式基本一模一样，里面应该是封装一套WebKit，有人在反编译出的源码里发现Chrome Debug tool的js代码。

4.发布

小程序开发完成之后，通过IDE可以将项目代码文件上传到微信开发平台，具有管理员权限的用户登录平台后，可以提交给微信官方审核。

管理员将其他同事微信添加到体验组里后，可以在手机微信中体验小程序运行效果。

5. 其他：

• 主动推送模板消息

• 数据统计

底层API与基础组件库

微信主要为开发者提供了基于微信APP的底层API 和 一套基础组件库。

1. 通过调用API，可以方便的使用微信提供的各项功能，如获取用户信息，本地存储，支付功能等。API涵盖以下七个主要部分：

• 网络：发起请求、文件上传与下载、WebSocket

• 媒体：图片、录音、音频播放控制、音乐播放控制、文本文件、视频

• 数据：数据缓存同步、摘要、移除

• 位置：获取、查看详情

• 设备：网络状态、系统信息、重力感应、罗盘、拨打电话

• 界面：交互反馈、设置导航条、导航、动画、绘图

• 开放接口：登录、用户信息、微信支付、模板消息

2. 微信为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。基础组件库涵盖以下八个主要部分：

• 视图容器：view、scroll-view、swiper

• 基础内容：icon、text、progress

• 表单组件：button、checkbox、form、input、label、picker、radio、slider、switch、textarea

• 操作反馈：action-sheet、modal、toast、loading

• 导航：navigator

• 媒体组件：audio、image、video

• 地图：map

• 画布：canvas