【微信小程序篇-01】微信开发者工具基本介绍

小程序基本认识

• 一，微信小程序基本介绍
• • 1，微信开发者工具整体布局介绍
  • 2，配置文件介绍
  • • 2.1，全局配置文件pages
    • 2.3，全局配置window
    • 2.3，全局配置tabbar
    • 2.4，局部页面配置
    • 2.5，项目配置文件和配置sass
    • 2.6，sitemap.json文件

一，微信小程序基本介绍

本文开始正式学习微信小程序原生开发，内容来自于b站尚硅谷的微信小程序开发。前面关于微信小程序注册等可以详细看他们的视频，这里直接跳过，本文主要讲解微信小程序的整体布局和基本介绍

1，微信开发者工具整体布局介绍

在使用微信小程序之前，需要去微信公众号注册一个微信小程序账号，然后安装微信开发者工具，再在微信开发者工具上面创建项目。在创建新项目之后，其页面如下。一个完整的小程序主要分为两个部分：主体文件、页面文件。

主体文件主要由以下部分组成：

• app.js：小程序的入口文件
• app.json：小程序的全局配置文件
• app.wxss：小程序的全局样式

页面文件一般指的是放在pages下面的文件，一般一个页面对应一个文件夹，每个文件夹下的四个文件组成如下：

• .js文件一般用于页面逻辑
• .wxml用于页面结构
• .wxss用于页面样式
• .json小页面配置

随后修改渲染模式，设置为webview模式，就是将app.json文件下的以下内容删掉

\"renderer\": \"skyline\",\"rendererOptions\": { \"skyline\": { \"defaultDisplayBlock\": true, \"defaultContentBox\": true, \"tagNameStyleIsolation\": \"legacy\", \"disableABTest\": true, \"sdkVersionBegin\": \"3.0.0\", \"sdkVersionEnd\": \"15.255.255\" }},\"componentFramework\": \"glass-easel\",

在page文件夹下创建一个文件夹，再创建一个page就能将下面四个文件创建出来，比如直接在pages文件下新建一个list文件夹，然后在list文件夹下新建一个Page，就能将这四个文件创建出来

除了上面这种方式之外，也可以直接修改app.json文件里面的内容，修改pages里面的路径就行，往里面添加想要的路径

在详情中，需要在本地设置那设置调试基础库，一般优先选择最多人使用的那个版本

2，配置文件介绍

json是一种轻量级的数据格式，常用于前后端数据交互，在小程序中，json扮演的配置项的角色，用于配置项或者页面属性行为，每个页面或者组件也都有一个对应的json文件

• app.json：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由
• 页面.json：小程序页面配置文件，用于配置当前页面的窗口样式、页面标题等
• project.config.json：小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置
• sitemap.json：配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎被搜到的概率

2.1，全局配置文件pages

用于指定小程序由哪些页面组成，用于小程序知道由哪些页面组成以及页面定义在哪一个目录，每一项都对应一个页面路径的信息，如里面的index路径和list路径等

• 在使用页面路由时，不需要写文件后缀，框架会自动的去寻找对应位置的四个文件进行处理
• 小程序新增或者减少页面时，都需要对pages数组进行修改
• 未指定entryPagePath时，数组的第一项代表小程序的初始页面，即首页

//手动设置首页\"entryPagePath\":\"pages/index/index\"

2.3，全局配置window

window字段一般用于设置小程序的状态栏、导航条、标题、窗口背景色

其官网的地址如下：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

一般在开发中对上面的导航栏等进行调整时，可以直接修改app.json下面的window中的属性即可

\"window\": { \"navigationBarTitleText\": \"小丽学习\", \"navigationBarBackgroundColor\":\"#f3514f\", \"enablePullDownRefresh\": true, \"backgroundColor\": \"#efefef\", \"backgroundTextStyle\":\"dark\"}

2.3，全局配置tabbar

tabBar字段用于定义小程序顶部、底部tab栏，用于实现页面之间的快速切换。可以通过tabBar配置项指定tab的表现，以及tab切换时显示对应的页面。

在上图中列出了比较常用的一些配置项

• borderStyle：用于控制tab栏上方的边界展示和隐藏
• backgroundColor：用于配置整个tab栏的背景色
• selectedColor：用于控制当前tab被激活时的文字颜色
• color：表示tab没有被激活时对应的颜色
• selectedIconPath：tab被激活时对应的path路径
• pagePath：点击某个tab时需要跳转的某个路径
• iconPath：tab没有被激活时的路径
• text：每个tab对应的文字是什么
• list：list是一个数组，用于配置上面四个selectedIconPath、pagePath、iconPath、text

tab数组的顺序排序，list配置最少配置两个，最多配置5个tab，如下面在list中定义四个tarbar，分别配置首页，分类，购物车和我的4个模块。该模块位于app.json里面

\"tabBar\": { \"list\": [ { \"text\": \"首页\", \"pagePath\": \"pages/index/index\", \"iconPath\":\"/assets/tabbar/index.png\", \"selectedIconPath\": \"/assets/tabbar/index-active.png\" }, { \"text\": \"分类\", \"pagePath\": \"pages/cate/cate\", \"iconPath\":\"/assets/tabbar/cate.png\", \"selectedIconPath\": \"/assets/tabbar/cate-active.png\" }, { \"text\": \"购物车\", \"pagePath\": \"pages/cart/cart\", \"iconPath\":\"/assets/tabbar/cart.png\", \"selectedIconPath\": \"/assets/tabbar/cart-active.png\" }, { \"text\": \"我的\", \"pagePath\": \"pages/profile/profile\", \"iconPath\":\"/assets/tabbar/my.png\", \"selectedIconPath\": \"/assets/tabbar/my-active.png\" } ]},

在pages中，需要定义者四个模块，对应四个模块的页面和路径

\"pages\": [ \"pages/index/index\", \"pages/cate/cate\", \"pages/cart/cart\", \"pages/profile/profile\", \"pages/list/list\"],

2.4，局部页面配置

小程序的页面配置，也称为局部配置，每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置，需要注意的是：页面配置文件的属性和全局配置文件中的window属性几乎一致，只不过这里不需要额外指定window字段，因此如果出现相同的配置项，那么页面的配置项会覆盖全局配置文件中相同的配置项。

示例如下：

{ \"navigationBarBackgroundColor\": \"#ffffff\", \"navigationBarTextStyle\": \"black\", \"navigationBarTitleText\": \"微信接口功能演示\", \"backgroundColor\": \"#eeeeee\", \"backgroundTextStyle\": \"light\"}

总而言之就是如果局部配置文件和全局配置文件出现了相同的配置项，那么局部配置文件会覆盖全部配置的文件

2.5，项目配置文件和配置sass

在创建项目时，每个项目的根目录会生成两个config.json文件，用于保存开发者在工具上做的个性化配置，例如和编译有关的配置，当重新安装微信开发者工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置。

config配置文件主要有：project.config.json 和 project.private.config.json 两个配置文件

• project.config.json：一般用于项目公共配置文件，常用来公共的配置，与编译有关的设置必须设置到这里面
• project.private.config.json：项目私有配置，常用来配置个人的配置，需要写到.gitignore中避免版本冲突

在项目中配置sass如下，只需要在project.config.json文件下的setting配置中加上一下命令即可

{ \"setting\": { \"useCompilerPlugins\":[\"sass\"], }}

2.6，sitemap.json文件

用于配置小程序页面是否允许被微信索引，从而提高小程序在微信内部被用户搜索到的概率

微信小程序已经开发小程序内搜索，开发者可以提供sitemap.json配置来设置小程序页面是否允许微信索引，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。

如果没有sitemap.json文件，那么默认就是所有的页面都能被索引。在索引的优先级中，分别以action、allow、page、* 等最低优先级的默认规则，未显示指明disallow的那么就是默认被索引

在项目中，在最下面有一个sitemap.json文件，其内容如下，这里的意思就是所有的页面都允许被微信索引

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

如果想某个页面不被微信索引，那么就可以设置action为disallow，并且在pages指明相应的路径

{ \"rules\": [{ \"action\": \"disallow\", \"page\": \"pages/index/index\" }]}