微信小程序学习笔记

小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/

项目构成

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

微信小程序的项目目录构成主要包括以下几个部分：

1. pages 文件夹：主要存放小程序的页面文件。每个页面包含四个文件：
   • index.js：小程序的逻辑文件，也称事件交互文件和脚本文件，用于处理界面的点击事件等功能。
   • index.wxml：界面文件，是页面结构文件，用于构建页面，在页面上增加控件，相当于HTML。
   • index.wxss：样式表文件，类似于前端中的CSS，是为index.wxml文件和page文件进行美化的文件，让界面显示的更加美观。
   • index.json：配置当前页面的默认项，主要是JSON数据格式存放，用于设置程序的配置效果。
2. utils 文件夹：存放一些辅助函数或工具类。
3. app.js 文件：小程序的全局配置文件，包括全局变量、函数、生命周期函数等。

以下是微信小程序项目目录树的一个示例：

/my\_wechat\_app
|-- pages/
| |-- index/
| | |-- index.js
| | |-- index.wxml
| | |-- index.wxss
| | |-- index.json
|-- utils/
| |-- helper.js
| |-- another\_helper.js
|-- app.js

这里只是一个基本的目录结构示例，实际上可能还有其他的文件夹和文件。为了方便新手理解，可以按照以下步骤操作：

1. 在你的开发环境中创建一个新的文件夹，例如命名为my_wechat_app。
2. 在my_wechat_app文件夹下创建pages文件夹，并按照上面的示例结构进行创建。
3. 在my_wechat_app文件夹下创建utils文件夹，并添加一些辅助函数或工具类文件。
4. 在my_wechat_app文件夹下创建app.js文件，这是小程序的全局配置文件。
5. 在你的开发环境中打开my_wechat_app文件夹，就可以看到完整的目录结构了。

在我看来，小程序的开发过程其实和Vue开发是有些许相同的，在Data,渲染，和生命周期来看，都能看到些许共同点，不同的是，小程序提供了更多的封装功能API，方便开发者更快的实现功能，小程序的出现比起现在的Web项目，应该更加方便和容易开发，以微信的庞大人群，可以让开发者更快的实现自己想要的功能和部署出自己的项目。

app.json

这是一个全局配置文件

pages:用来记录当前小程序所有页面的路径

window:全局定义定义小程序所有页面的背景颜色，文字颜色等

style:全局定义小程序组件所使用的样式版本 默认v2是最新版本 删除后回到老版

sitemapLocation:指明sitemap.json的位置

project.config.json

这是一个个性化配置文件

setting:编译相关配置

progectname:项目名称

appid:小程序账号ID

sitemap.json

这个文件用来配置小程序页面是否允许微信索引

有些类似PC网页的SEO

aciton:是否允许被索引 默认是allow允许，如果你不想被索引可以替换为disallow

page:页面 默认是*号，就是允许所有页面被索引

tip:如果不想看到索引的黄色警告，可以在project.config.json的setting里的checkSiteMap改为false，意为关闭警告 如果没有找到这个数据可以自己补全。

页面.json配置文件的作用

此文件作用是用来配置页面的外观

tip:在相同配置中，页面的配置文件会覆盖全局的配置文件

新建小程序页面

当你在app.json的pages里新增一个页面路径，程序就会自动生成相关文件和配置

修改项目首页

在app.json的pages里，顺序就可以决定首页，排在最上方的会被微信小程序自动识别为首页

WXML模板

微信小程序用来构建网页结构的模板文件

虽然名字不同，但是其原理和HTML相同，套用即可快速学会

WXML和HTML的区别

1.标签名称不同

• HTML (div, span, img, a)
• WXML (view, text, image, navigator)

2.属性节点不同

<ahref="#">超链接</a>
<navigator url="/pages/home/home"></navigator>

3.提供了类似于 Vue 中的模板语法

可以帮助我们快速实现模板的渲染

• 数据绑定
• 列表渲染
• 条件渲染

WXSS样式

微信小程序用来描述组件的样式文件

和HTML的CSS逻辑类似

WXSS和CSS的区别

1.新增了 rpx 尺寸单位

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

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

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

3.WXSS 仅支持部分 CSS 选择器

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

JS

使用Js文件来编写页面逻辑部分的操作判断

app.js是整个小程序项目的入口文件

页面.js是创建页面后自动生成的js文件，用来实现个人页面的逻辑功能

普通的.js文件用来封装公共的函数或者属性来供页面使用

宿主环境(Host environment)

不同的宿主环境支持不同的程序项目

而小程序的宿主环境基于微信中

基于微信环境这个特殊的位置，我们可以使用微信提供的各种封装接口来实现在普通网页无法完成的功能，比如，微信扫码、微信支付、微信登陆、地理定位、etc….等等等。

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

• 通信模型
• 运行机制
• 组件
• API

小程序启动过程顺序

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

页面渲染过程

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

通信模型

组件

组件的出现可以让开发者快速开发出自己想要的功能，这些组件都是微信官方封装好的，可以直接调用

view

image

API

事件传参和数据同步

生命周期

API调用

全局配置