微信小程序开发详解：从入门到精通-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52789121/article/details/124891412

微信小程序

1. 小程序简介
2. 开始
3. 小程序代码构成
- 整体结构
- page文件
- json 文件
- WXML
- WXSS
- JS 逻辑交互
4. 小程序的宿主环境
5. WXML
6. WXSS
7. 全局配置
- window
- tabBar
8. 网络数据请求
9. 页面导航
10. 页面事件
- onPullDownRefresh

1. 小程序简介

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

1、运行环境不同

网页运行在浏览器环境中，小程序运行在微信环境中。网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。

2、API不同

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

3、开发模式不同

网页的开发模式：浏览器 + 代码编辑器
小程序有自己的一套标准开发模式：

申请小程序开发账号

安装小程序开发者工具

创建和配置小程序项目

2. 开始

注册小程序账号

进入小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
在这里插入图片描述

获取小程序的AppID

在小程序管理平台，我们可以管理自己的小程序的权限，查看数据报表，发布小程序等操作。

在菜单 开发管理->开发设置->开发者ID可以看到小程序的 AppID ，其相当于小程序平台的一个身份证。
在这里插入图片描述

安装开发者工具

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

① 快速创建小程序项目
② 代码的查看和编辑
③ 对小程序功能进行调试
④ 小程序的预览和发布

推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具，进入开发者工具下载网址下载适合的版本，这里我选择的是Windows64位。
在这里插入图片描述
下载后按照指示即可完成安装

创建小程序项目

进入小程序开发者工具，选择小程序点击+
在这里插入图片描述
填写项目名称，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID。勾选 “不使用云服务” ，选择JavaScript语言，点击新建。
注意: 要选择一个空的目录才可以创建项目

这样，你就得到了你的第一个小程序。
在这里插入图片描述
可以在模拟器上查看项目效果，也可以在真机上预览项目效果

3. 小程序代码构成

整体结构

pages 用来存放所有小程序的页面
utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 工具配置，在工具上做的任何配置都会写入到这个文件。
项目根目录中的 project.config.json 和 project.private.config.json 文件可以对项目进行配置，project.private.config.json 中的相同设置优先级高于 project.config.json
sitemap.json 用来配置小程序及其页面是否允许被微信索引

page文件

小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在。每个页面由 4 个基本文件组成，它们分别是：

.js 文件：页面的脚本文件，存放页面的数据、事件处理函数等
.json 文件：当前页面的配置文件，配置窗口的外观、表现等
.wxml文件：充当的就是类似 HTML 的角色,包含页面的模板结构
.wxss 文件：当前页面的样式表文件

在这里插入图片描述

json 文件

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

pages：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景色、文字颜色等
style：全局定义小程序组件所使用的样式版本
sitemapLocation：用来指明 sitemap.json 的位置

{
“pages”:[
“pages/index/index”,
“pages/logs/logs”
],
“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “Weixin”,
“navigationBarTextStyle”:“black”
},
“style”: “v2”,
“sitemapLocation”: “sitemap.json”
}

project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：

setting 中保存项目的编译设置
projectname 中保存的是项目名称，只在新建项目时读取
appid 中保存的是项目的 appid，只在新建项目时读取

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。

如下，所有页面都会被微信索引（默认情况）

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

配置 path/to/page 页面被索引，其余页面不被索引

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page"
  }, {
    "action": "disallow",
    "page": "*"
  }]
}

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
在这里插入图片描述

我们在app.json的pages配置中输入新建的页面，就可以自动生成对应的文件夹。