微信小程序简介

大家好，欢迎来到IT知识分享网。

1.什么是微信小程序

微信小程序,简称小程序,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或搜一下即可打开应用

2.小程序与普通网页开发的区别

(1)开发语言

• 小程序的主要开发语言是javaScript
• 同普通的网页开发有很大的相似性

（2）逻辑层和渲染层

• 网页开发渲染线程和脚本线程是互斥的(长时间的脚本运行可能会导致页面失去响应)
  说明:网页开发者可以使用到各种浏览器暴露出来的DOM APl,进行了DOM选中和操作
• 小程序的逻辑层和渲染层是分开的,分别运行在不同的线程中·
  说明:小程序的逻辑层运行在JSCore中,并没有一个完整浏览器对象,因而缺少相关的DOM APl。这一区别导致了前 端开发非常熟悉的一些库,例如jQuedry、Zepto等,在小程序是无法运行的。同时JSCore的环境同NodeJS环境也是不尽相同,所有一些的NPM的包在小程序也是无法运行的。

(3)开发者面对的运行环境

• 网页开发者面对的环境是各式各样的浏览器
  说明:pc端需要面对IE 、Chrome、等浏览器;在移动端需要面对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
• 小程序开发者工具配project.config.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 模板)

网页HTML经常会用到的标签是 div, p, span（开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等）

说明：既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。
小程序WXML 用的标签是 view, button, text 等等（这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力）
(2)多了一些 wx:if 这样的属性以及 {
{ }} 这样的表达式

在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。

2.3 .wxss 后缀的 WXSS 样式文件(WXSS 样式)

在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位
WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算（换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差）
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
(2)提供了全局的样式和局部样式（类似 app.json和page.json 的概念）

(3)WXSS 仅支持部分 CSS 选择器

2.4 .js 后缀的 JS 脚本逻辑文件(JS 逻辑交互)

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

响应用户的操作-事件
在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等
拓展-目录结构：