(一)、微信小程序概括
1.微信小程序简介
(1).小程序与普通网页开发的区别
运行环境不同: 网页运行在浏览器、小程序运行在微信。开发模式不同: 网页的开发模式: 浏览器+代码编辑器。
小程序的有自己的一套标准的开发模式
(1).申请小程序开发账户。
(2).安装小程序开发者工具。
(3).创建和配置小程序项目。API不同:由于运行环境的不同，所以小程序种无法调用DOM和BOM的API。但是，小程序中可以调用微信环境模式的各种API。
2.注册微信小程序账号
(1).注册小程序账号
官方网址: https://mp.weixin.qq.com/cgi-bin/wx
账号注册成功:
(2).获取小程序的AppID
3.安装微信开发者工具
(1).微信开发者工具的简介:
微信开发者工具是官方推荐使用的小程序开发工具，他提供的主要功能如下:
- 快速创建小程序项目。
- 代码的查看和编辑。
- 对小程序功能进行调试。
- 小程序的预览和发布。
(2).微信开发者工具的下载
微信开发者工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安装
4.创建第一个小程序
(1).创建小程序步骤
1. 点击"+"号按钮
2.创建项目
勾选不使用云服务、选用js
(2).开发者工具的功能介绍 ⭐
1.编译与预览
2.五大分区
(二)、微信小程序目录讲解
1.小程序代码的目录构成
(1).了解小程序的目录结构
(2).小程序页面的组成文件
小程序官方建议把所有小程序的页面，都存放在Pages目录中，以单独的文件夹存在，如图所示。
每一个页面都是有4个基本文件组成的:
.js 文件 (页面的脚本文件，存放页面的数据、事件处理函数等) .json文件(当前页面的配置文件，配置窗口的外观、表现等) .wxml文件(页面的模板结构文件) .wxss文件(当前页面的样式表文件)
2.四种JSON配置文件 ♻
JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目中也不列外；通过不同的 .json配置文件，可以对象名进行不同级别的配置。
小程序项目中有4种配置JSON配置文件，分别是:
1. 项目根目录中的app.json 配置文件 2. 项目根目录中的peoject.config.json 配置文件 3. 项目根目录中的sitemap.json配置文件 4. 每个页面文件夹中的.json配置文件
(1). app.json (全局配置文件)
(app.json)当前小程序的全局配置，包括了小程序的所有路径、窗口外观、界面表现、底部tab等。
{ "pages":[ // 1.用来记录当前小程序所有页面的路径 "pages/index/index", "pages/logs/logs" ], "window":{ // 2.全局定义小程序所有页面的背景色、文字颜色等 "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", //3. 全局定义小程序组件所使用的样式版本 "sitemapLocation": "sitemap.json" // 4. 指明sitemap.json的位置 }
(2). peoject.config.json 项目配置文件
peoject.config.json 是项目配置文件，用来记录我们对小程序开发工具所做过的个性化配置，列如:
{ "description": "项目配置文件", "packOptions": { "ignore": [], "include": [] }, "setting": { //1. 保存了编译相关的配置 "bundle": false, "userConfirmedBundleSwitch": false, "urlCheck": true, "scopeDataCheck": false, "coverView": true, "es6": true, "postcss": true, "compileHotReLoad": false, "lazyloadPlaceholderEnable": false, "preloadBackgroundData": false, "minified": true, "autoAudits": false, "newFeature": false, "uglifyFileName": false, "uploadWithSourceMap": true, "useIsolateContext": true, "nodeModules": false, "enhance": true, "useMultiFrameRuntime": true, "useApiHook": true, "useApiHostProcess": true, "showShadowRootInWxmlPanel": true, "packNpmManually": false, "enableEngineNative": false, "packNpmRelationList": [], "minifyWXSS": true, "showES6CompileOption": false, "minifyWXML": true, "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" }, "condition": false }, "compileType": "miniprogram", "libVersion": "2.19.4", "appid": "wxee18f6535b4ea95c", // 2. 账号AppID "projectname": "miniprogram-92", // 3. 项目名称 "condition": {}, "editorSetting": { "tabIndent": "insertSpaces", "tabSize": 2 } }
(3). sitemap.json 文件 -索引优化
微信现已开发小程序内搜索，效果类似于PC网页的SEO。sitemap.json用来配置小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
{ "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", "rules": [{ // 1.数组 "action": "allow", // 3. 允许所有的页面 "page": "*" // 2.所有的页面 }] }
注意: sitemap的索引提示时默认开启的，如果需要关闭sitemap的索引提示，可在小程序项目配置文件 peoject.config.json的 setting中的配置字段 checkSiteMap为false
(4). 页面的.json配置文件
小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。
