One~day

小程序简介

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

1 运行环境不同

网页运行在浏览器中
小程序运行在微信环境中

2API不同

由于运行环境的不同，所有小程序中
无法调用 DOM 和 BOM 的 API
但是小程序中可以调用微信环境提供的各种API
列如:
地理定位
扫码
支付

3 开发模式不同

网页的开发模式: 浏览器 + 代码编辑器
小程序有自己的一套标准开发模式
申请小程序开发账户
安装小程序开发工具
创建和配置小程序项目

2 体验小程序

可使用手机微信(6.7.2及以上版本)扫码下方小程序吗,体验小程序

小程序的四种能力 1 组件 2 扩展能力 3 接口 4 云开发

第一个小程序

第一个小程序-注册小程序开发账户

1 点击注册按钮

使用浏览器打开 mp.weixin.qq.com/ 网址,点击右上角的 "立即注册" 即可进入到小程序开发账户的注册流程，主要流程截图如下:

2 选择注册账号的类型

3 填写账户信息

4 提示邮箱激活

5 点击链接激活账户

6 选择主体类型

7 主体信息登记

8 获取小程序的AppID

获取小程序的AppID 过程

1 登录页登录账户

2 工具栏点击开发

3 开发开发设置开发者 ID AppID(小程序ID)

第一个小程序-安装开发者工具

1 了解微信开发者工具

微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下:

1 快速创建小程序项目 2 代码的查看和编辑 3 对小程序功能进行调试 4 小程序的预览和发布

2 下载

推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具,下载页面的链接如下: developers.weixin.qq.com/miniprogram…

3 安装

点击完成按钮，完成对微信开发者工具的安装

显示这个窗口，则安装完成

4 扫码登录

1 扫码登录 2 手机确定登录 3手机上点击确定

4 主页创建微信小程序

5 设置外观和代理

默认情况下，外观的颜色是灰色

第一个小程序-创建小程序项目

1 点击 "加号"按钮

2 填写项目信息

3 项目创建完成

4 在模拟器上查看项目效果

5 在真机上预览项目效果

6 主界面的5个组成部分

建议改变 ID如果是游客，想改为自己的，点击详情的基本信息

二、小程序代码的构成

1 了解项目的基本组成结构

2 小程序的页面的组成部分

小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件存在，如图所示:

小程序代码的构成-JSON配置文件

1 JSON配置文件的作用

JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目中也不例外;通过不同的 .json配置文件，可以对小程序项目进行不同级别的配置

小程序项目中有4种json配置文件,分别是: 1 项目根目录中的 APP.json 配置文件 2 项目根目录中的 project.config.json 配置文件 3 项目根目录中的 sitemap.json 配置文件 4 每个页面文件夹中的 .json 配置文件

2 app.json 文件

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。Demo 项目里面的 app.json 配置内容如下:

3 project.config.json 文件

project.config.json是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置，列如: setting 中保存了编译相关的配置 projectname 中保存的是项目名称 appid 中保存的是小程序的账户 ID

4 sitemap.json 文件

微信现已开放小程序内搜索,效果类似于PC网页的SEO.sitemap.json文件用来配置小程序页面是否允许微信索引. 当开发者允许微信索引时，微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

注意: sitemap的索引提示是默认开启的，如需要关闭 sitmap的索引提示，可在小程序项目配置文件 project.config.json 的setting中配置字段 checkSiteMap 为 flase

5 页面的 .json配置文件

小程序中的每一个页面，可以使用 .json文件来对本页面的窗口外观进行配置，页面中的配置顶会覆盖 app.json 的window中相同的配置项.列如:

6 新建小程序页面

只需要在 APP.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件，如图所示:

7 修改项目的首页

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

小程序代码的构成-WXML模版

1 什么是wxml

wxml(weixin Markup Language)是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

2 wxml 和 HTML 的区别

1 标签名称不同

HTML(div.span.img.a)
wxml(view,text,image,navigator) 2 属性节点不同
超链接
3 提供了类似于Vue中的模版语法
数据绑定
列表渲染
条件渲染

小程序代码的构成-wxss样式

1 什么是wxss

wxss(weixin style sheets)是一套样式语言，用于描述wxml的组件样式，类似于网页开发中的css。

2 wxss 和 css的区别

1 新增了 rpx尺寸单位

css中需要手动进行像素单位换算，列如 rem
wxss在底层支持新的尺寸单位 rpx，在不同大小的屏幕小程序会自动进行换算

2 提供了全局的样式和局部样式

项目根目录中的app.wxss会作用于所以小程序页面
局部页面的 .wxss样式仅对当前页面生效

3 wxss仅支持部分 CSS选择器

.class 和 #id
element
并集选择器、后代选择器
::after 和 ::before等伪类选择器

小程序代码的构成-JS逻辑交互

1 小程序中的 .js文件

一个项目仅仅是提供界面展示是不够的，在小程序中，我们通过 .js文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。

2 小程序中 .js文件的分类

小程序中的js文件分为三大类，分别是:

1 app.js

是整个小程序项目的入口文件，通过调用APP()函数来启动整个小程序

2 页面的 .js文件

是页面的入口文件，通过调用Page()函数来创建并运行页面

3 普通的 .js文件

是普通的功能模块文件，用来封装公共的函数或属性供页面使用

三小程序的宿主环境-宿主环境简介

小程序的宿主环境-宿主环境简介

1 什么是宿主环境

宿主环境(host environment)指的是程序运行所必须的依赖环境。列如: Android系统和IOS系统是两个不同的宿主环境。安装版的微信APP是不能在ios环境下运行的，所有，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

2 小程序的宿主环境

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

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能,列如: 微信扫码、微信支付、微信登录、地理位置、etc

3 小程序宿主环境包含的内容

通信模型
运行机制
组件
API

1 通信的主体

小程序中通信的主体是渲染层和逻辑层，其中:

1 WXML模版和WXSS样式工作在渲染层
2 js脚本工作在逻辑层

2 小程序的通信模型

小程序的通信模型分为两部分

1 渲染层和逻辑层之间的通信由微信客户端进行转发
2 逻辑层和第三方服务器之间的通信由微信客户进行转发

3小程序的运行机制

5 小程序启动的过程

1 小程序的代码包下载到本地
2 解析 app.json全局配置文件
3 执行 app.js小程序入口文件，调用 APP()创建小程序实例
4 渲染小程序首页
5 小程序启动完成

6 页面的渲染过程

1 加载解析页面的 .json配置文件
2 加载页面的 .wxml模版和.wxss样式
3 执行页面的 .js文件，调用Page()创建页面实例
4 页面渲染完成

小程序~一点笔记