微信小程序开发

接触到微信小程序，是在这个疫情时期，在年前还没有学习的时候就听说微信小程序是一种新的开放能力，开发者可以快速地开发一个小程序，可以在微信内被便捷地获取和传播，同时具有出色的使用体验。所以年后线上一开课，就接触了解它是怎么去开发应用以及一些其他相关内容。

一，小程序的框架介绍

小程序框架包含小程序的配置、框架接口、场景值、WXML 和 WXS 等

1、全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象。
下面介绍一下常用的配置选项

1.1 pages

pages文件夹下的文件对应小程序的页面，右击项目目录 --> 新建page 即可新建一个页面，每一个页面都由4个文件组成，每一项都对应一个页面的 路径（含文件名） 信息。

文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理,有多少个页面，此处就应该有多少个选项，其中js文件用来处理逻辑，json文件是该页面的文件配置，wxml和wxss用来绘制该页面的UI。

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

开发小技巧

微信小程序默认是当前目录，app.json和 pages在同一目录下，所以在指定文件路径时，直接写出路径即可创建相应的页面
默认项目如图所示

而如果你在pages目录下的文件夹需要…/目录，一层的话就要…/一级。
例如 pages下目录文件引用资源文件require(’…/…/utils/util.js’);，如果在pages下分类，引用资源文件需要require(’…/…/…/utils/source.js’)
创建首页、分类、购物车、我的页面，编辑app.json中的pages选项如下

app.json 是小程序的全局配置文件，包括小程序所有页面路径、界面表现、网络超时时间、底部tab等。需要注意的是 该文件不支持任何形式的注释，并且page[ ] 最后一个页面路径不允许使用“,”分割， 各个页面路径之间必须用“,”分割。pages目录下的文件必须在该json文件中进行配置。

1.2 window

用于设置小程序的状态栏、导航条、标题、窗口背景色。注意在app.json中配置的属性会被子window属性覆盖

然后在 APP.json 中配置

其中backgroundTextStyle，表示背景内容的样式，只有light和dark这个两个选项。
navigationBarBackgroundColor表示导航的背景颜色。
navigationBarTitleText这个表示导航的背景内容是什么。
navigationBarTextStyle表示导航的样式是怎样的，例如：“navigationBarTextStyle”: “black”。
backgroundColor表示下拉刷新的背景颜色。
enablePullDownRefresh表示是否开启下拉刷新，经常和backgroundColor一起配合使用。

1.3 tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

1. 配置信息
   在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
   所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
   示例：
   
2. 添加 tabBar 代码文件
   在代码根目录下添加入口文件:
   
3. 编写 tabBar 代码
   用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

2、页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。只须设置app.json中的 window 配置项的内容，页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。

页面的配置比app.json全局配置简单得多

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，其所有属性与app.json 全局配置的属性一致

实例：

3、sitemap 配置

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

path/to/page?a=1&b=2 => 优先索引
path/to/page => 不被索引
path/to/page?a=1 => 不被索引
path/to/page?a=1&b=2&c=3 => 不被索引
其他页面都会被索引

注：没有 sitemap.json 则默认所有页面都能被索引
注：{“action”: “allow”, “page”: “*”} 是优先级最低的默认规则，未显式指明 “disallow” 的都默认被索引

这以上算是在这个疫情下逆战学习过程中自己对小程序开发的理解，希望接下来可以和更多的小伙伴共同学习进步！！！