⼩程序简介
1.什么是⼩程序
⼩程序，简称⼩程序，英⽂名Wechat Mini Program，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤触⼿可及的梦想,⽤户扫⼀扫或搜⼀下即可打开应⽤
2.⼩程序与普通⽹页开发的区别
(1)开发语⾔
⼩程序的主要开发语⾔是javaScript
同普通的⽹页开发有很⼤的相似性
（2）逻辑层和渲染层
⽹页开发渲染线程和脚本线程是互斥的(长时间的脚本运⾏可能会导致页⾯失去响应)
说明:⽹页开发者可以使⽤到各种浏览器暴露出来的DOM APl，进⾏了DOM选中和操作
⼩程序的逻辑层和渲染层是分开的，分别运⾏在不同的线程中·
写文章的小程序说明:⼩程序的逻辑层运⾏在JSCore中，并没有⼀个完整浏览器对象，因⽽缺少相关的DOM APl。这⼀区别导致了前 端开发⾮常熟悉的⼀些库，例如jQuedry、Zepto等，在⼩程序是⽆法运⾏的。同时JSCore的环境同NodeJS环境也是不尽相同，所有⼀些的NPM的包在⼩程序也是⽆法运⾏的。
(3)开发者⾯对的运⾏环境
⽹页开发者⾯对的环境是各式各样的浏览器
说明:pc端需要⾯对IE 、Chrome、QQ等浏览器；在移动端需要⾯对Safari、Chrome以及 iOS、Android 系统中的各式 WebView
⼩程序开发过程中需要⾯对的是两⼤操作系统 iOS 和 Android 的客户端，以及⽤于辅助开发的⼩程序开发者⼯具
(4)开的准备⼯作及流程
⽹页开发者在开发⽹页的时候，只需要使⽤到浏览器，编辑器已经其他的⼀些辅助⼯具即可
-⼩程序的开发需要经过申请⼩程序账号、安装⼩程序开发者⼯具、配置项⽬等等过程⽅可完成
说明:
a.申请⼩程序账号并获取AppId ：进⼊⼩程序注册页记性注册既可以拥有⾃⼰的⼩程序帐号(在这个⼩程序管理平台，你可以管理你的⼩程序的权限，查看数据报表，发布⼩程序等操作)。在登录⼩程序后台，我们可以在菜单设置开发设置看到⼩程序的ApplD了，注意这⾥要区别于服务号或的ApplD(⼩程序的AppID相当于⼩程序平台的⼀个⾝份证，后续你会在很多地⽅要⽤到AppID)。
b.安装⼩程序开发者⼯具并⽤扫码登录：申请⼩程序账号后，我们需要安装⼩程序。前往开发者⼯具下载页⾯，根据⾃⼰操作系统下载对应的安装包
进⾏安装，之后打开⼩程序开发者⼯具,⽤扫码登录开发者⼯具，准备开发。
2.⼩程序与普通⽹页开发的联系(代码构成)
备注:⽹页编程采⽤HTML+CSS+JS这样的组合，其中HTML是⽤来描述当前这个页⾯的结构,css⽤来描述页⾯的样⼦,js通过是⽤来处理这个页⾯和⽤户的交互。同样道理，在⼩程序中也有同样的⾓⾊，其中WXML充当的就是类似HTML的⾓⾊，但⽐HTML更简单，主要体现在便签的简化和规范上;wxss充当的就是类似css的⾓⾊，但是对css进⾏了修改和拓展;JS逻辑交互使⽤到了javaScript的核⼼部分。
2.1.json后缀的JSON配置⽂件(JSON配置)
当前⼩程序全局配置app.json
⼩程序开发者⼯具配fig.json
⼩程序局部页⾯配置page.json
说明：JSON 是⼀种数据格式，并不是编程语⾔，在⼩程序中，JSON扮演的静态配置的⾓⾊。
注意：
a. JSON⽂件都是被包裹在⼀个⼤括号中 {}，通过key-value的⽅式来表达数据。JSON的Key必须包裹在⼀个双引号中。忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
b. JSON的值只能是以下⼏种数据格式(数字、字符串、Bool值、数组、对象、Null)，其他任何格式都会触发报错，例如 JavaScript 中的undefined。
c. JSON ⽂件中⽆法使⽤注释，试图添加注释将会引发报错。
2.2.wxml 后缀的 WXML 模板⽂件(WXML 模板)
⼩程序开发中的WXML 充当的就是类似⽹页编程中HTML 的⾓⾊。和 HTML ⾮常相似，WXML 由标
签、属性等等构成。但是也有很多不⼀样的地⽅：
(1)标签名字有点不⼀样
⽹页HTML经常会⽤到的标签是 div, p, span（开发者在写⼀个页⾯的时候可以根据这些基础的标签组合出不⼀样的组件，例如⽇历、弹窗等等）
说明：既然⼤家都需要这些组件，为什么我们不能把这些常⽤的组件包装起来，⼤⼤提⾼我们的开发效率。
⼩程序WXML ⽤的标签是 view, button, text 等等（这些标签就是⼩程序给开发者包装好的基本能⼒，我们还提供了地图、视频、⾳频等等组件能⼒）
(2)多了⼀些 wx:if 这样的属性以及 {{ }} 这样的表达式
在⽹页的⼀般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产⽣的树)，以引起界⾯的⼀些变化响应⽤户的⾏为。
说明：当项⽬越来越⼤的时候，你的代码会充斥着⾮常多的界⾯交互逻辑和程序的各种状态变量，显然这不是⼀个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和
逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过⼀种模板语法来描述状态和界⾯结构的关系即可。
⼩程序的框架就是⽤到了这个思路。通过 {{ }} 的语法把⼀个变量绑定到界⾯上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界⾯的关系，还需要 if/else, for等控制能⼒，在⼩程序⾥边，这些控制能⼒都⽤ wx: 开头的属性来表达。
2.3 .wxss 后缀的 WXSS 样式⽂件(WXSS 样式)
WXSS 具有 CSS ⼤部分的特性，⼩程序在 WXSS 也做了⼀些扩充和修改：
(1) 新增了尺⼨单位 rpx（ rpx可以根据屏幕宽度进⾏⾃适应）
在写 CSS 样式时，开发者需要考虑到⼿机设备的屏幕会有不同的宽度和设备像素⽐，采⽤⼀些技巧来换算⼀些像素单位
WXSS 在底层⽀持新的尺⼨单位 rpx ，开发者可以免去换算的烦恼，只要交给⼩程序底层来换算（换算采⽤的浮点数运算，所以运算结果会和预期结果有⼀点点偏差）
建议： 开发⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
(2)提供了全局的样式和局部样式（类似 app.json和page.json 的概念）
定义在 app.wxss 中的样式为全局样式，作⽤于当前⼩程序所有页⾯
在 page 的 wxss ⽂件中定义的样式page.wxss为局部页⾯样式仅对当前页⾯⽣效，并会覆盖 app.wxss 中相同的选择器
(3)WXSS 仅⽀持部分 CSS 选择器
2.4 .js 后缀的 JS 脚本逻辑⽂件(JS 逻辑交互)
说明：⼀个服务仅仅只有界⾯展⽰是不够的，还需要和⽤户做交互：响应⽤户的点击、获取⽤户的位置等等。在⼩程序⾥边，我们就通过编写 JS 脚本⽂件来相应处理⽤户的操作。
响应⽤户的操作-事件
在 JS 中调⽤⼩程序提供的丰富的 API，利⽤这些 API 可以很⽅便的调起提供的能⼒，例如获取⽤户信息、本地存储、⽀付等
拓展-⽬录结构：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。