小程序简介

小程序与普通网页开发的不同

• 运行环境不同
• 小程序运行在微信环境中，
  
• API不同
  
• 小程序中无法调用DOM和BOM的API，可以调用微信环境的各种API
  
• 开发模式不同
• 小程序有自己的一套标准开发模式
• 申请小程序开发账号
• 安装开发者工具
• 创建和配置小程序项目

小程序账号及开发者工具

可登录已注册的开发者账号https://mp.weixin.qq.com/

APPID在上面官网中的“开发”中进行查找，

微信开发者工具

开发者工具外观和代理

外观将深色改为浅色，选中设置——外观，如下图所示

将代理模式设置为不使用任何代理，（默认为使用系统代理）

创建一个小程序项目

选择新建，选择项目地址，输入APPID，然后后端服务选择不使用云服务（两种后端服务是有区别的），语言选择JavaScript

查看项目效果

• 在模拟器上查看项目效果：如下图所示，点击编译可以在模拟器上展示

• 在真机上预览项目效果

点击预览按钮，弹出二维码使用微信扫描在手机上查看，，如下所示：

微信开发者工具主界面的5个组成部分

如下图所示：

常用的：

• 菜单栏帮助-》开发者文档
• 可能会用到工具-》构建npm
• 详情界面，别人发过来的项目自己使用可能要修改appid为自己的

• 建议模拟器机型选择iphone6机型，缩放比例选择85%

小程序项目的项目结构

项目结构：

• pages存放所有小程序的页面
• utils存放工具性质的模块
• app.js小程序项目的入口文件
• app.json小程序项目的全局配置文件
• app.wxss小程序项目的全局样式文件
• project.config.json项目的配置文件
• sitemap.json用来配置小程序及其页面是否允许被微信索引

小程序页面的组成部分：

​ 例如我们创建的小程序的页面，都存放在pages目录中，以单独的文件夹存在。如下图所示：

​ 其中每个页面由4个基本文件组成：

• .js文件：页面的脚本文件，存放页面的数据、事件处理函数等
• .json文件：页面的配置文件，配置窗口的外观、表现等
• .wxml文件：页面的模板结构文件
• .wxss文件：页面的样式表文件

json配置文件的作用

.json配置文件，对项目进行不同级别的配置

小程序项目中有4中.json配置文件：

• 根目录中的app.json配置文件
• 整个项目的全局配置文件，包括小程序的所有页面路径、窗口外观、界面表现、底部tab等
  
• 根目录中的project.config.json配置文件
  
• 是项目配置文件，记录对小程序开发工具所作的个性化配置
  setting中保存了编译相关的配置
  projectname保存项目名称，项目名称无所谓，不等于小程序名称，小程序名称在管理后台配置
  appid保存小程序账号id（被人手中项目拿过来首先更改为自己的appid）
  
• 根目录中的sitemap.json配置文件
  
• 用来配置小程序页面是否允许微信索引
  
• 不允许被索引：disallow
• 终端不出现警告内容：在project.config.json中找到checkSitemap设置为false
  
• 每个页面文件夹中的.json配置文件
  
• 页面中的配置项会覆盖app.json的window中相同的配置项，对当前页面进行个性化的配置
  
• 例如：navigationBackgroundColor为窗口背景色，

新建小程序页面

只需要在app.json->pages中新增页面的存放路径，开发工具即可帮我们自动创建对应的页面文件。

例如新增list页面：表示有一个list文件夹，里面是list页面

修改项目首页

只需要调整app.json->pages数组中页面路径的前后顺序，即可修改项目的首页，小程序会把排在第一位的页面当做项目首页进行渲染。

例如将list页面进行排序：

WXML模板

WXML和HTML的区别：

超链接

WXSS

WXSS和CSS区别：

• 新增了rpx尺寸单位
• CSS中需要手动进行像素单位换算
• WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算
• 提供了全局的样式和局部样式
• app.wxss会作用于所有的小程序页面
• 局部的.wxss样式仅对当前页面生效
• WXSS仅支持部分的CSS选择器
• 不要用比较生僻的选择器
• 支持的选择器
• .class和#id
• element
• 并集选择器、后代选择器
• ::after和::before等伪类选择器

JS逻辑交互

通过.js处理用户的操作，例如：响应用户的点击、获取用户的位置等等。

• app.js

APP()

• 页面的.js文件

页面的入口文件，调用Page

• 普通的.js文件

普通的功能模块文件，封装公共的函数

小程序的宿主环境

• 宿主环境：指的程序运行所必须的依赖环境

​ 安卓是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的。

• 小程序的宿主环境：手机微信是小程序的宿主环境，如下图所示：

小程序是基于微信才能安装运行的。

小程序借助宿主环境提供的能力，可以完成普通网页无法完成的功能：例如微信扫码、微信支付、微信登录等等

• 小程序宿主环境包含的内容
  
• 通信模型
  
• 通信主体

主体是渲染层、逻辑层：wxml模板和wxss样式工作在渲染层，js脚本工作在逻辑层

• 通信模型分为两部分
  
• 渲染层和逻辑层之间的通信：微信客户端进行中间转发
  
• 逻辑层和第三方服务器之间的通信：逻辑层和第三方服务器之间由微信客户端进行转发

• 运行机制
  
• 小程序启动的过程

App()

• 小程序页面渲染过程

Page()

• 组件
  小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为9大类：
  
• 视图容器
  
• view
  类似div，是一个块级元素，常用来实现页面的布局效果
  
• scroll-view
  可滚动的视图区域，常用来实现滚动列表效果
  
• swiper和swiper-item
  轮播图容器组件和轮播图item组件
  
• 基础内容
  
• 表单组件
  
• 导航组件
  
• 媒体组件
  
• map地图组件
  
• canvas画布组件
  
• 开放能力
  
• 无障碍访问
  


• API
  小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息
  
• 事件监听API

特点：以on开头，用来监听某些事件的触发
举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

• 同步API

特点：以Sync结尾的都是同步API ；同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

• 异步API

类似于JQuery中的$.ajax(options)函数，需要通过success,fail,complete接收调用的结果

小程序的版本

不同版本：

• 开发版本
• 体验版本
• 发布正式版

小程序的版本：

发布上线

• 上传代码
• 提交审核
• 发布

前后端分离：微信小程序+java后台

前端渲染数据，数据处理操作放在后端。

后端处理完数据返回前端。