微信小程序（微信基本界面配置---JSON配置文件）

朴灿烈づ我的快乐病毒、 2023-06-12 15:28 3阅读 0赞

# （一）认识小程序的目录结构 #

## 一、根目录下的文件 ##

1.  **app.js**小程序逻辑文件（必须）
2.  **app.json**小程序配置文件（必须）
3.  **app.wxss**全局公共样式文件
4.  用于存放页面文件的文件夹：**\[pages\]**
5.  用于存放公共js的文件夹：**\[utils\]**

## 二、微信小程序的页面 ##

1.  **微信小程序是由若干个页面构成的。**
2.  **所有的页面内容必须存放在\[pages\]文件夹下。**
3.  **在\[pages\]文件夹下，每个页面都具备一个独立的文件夹。**
4.  **页面由以下4个文件组成**：以pages/index/为例：  
    **index.wxml**页面的的结构文件，类似于html文件（必须）  
    **index.wxss**页面的样式表文件，类似于css文件（必须）  
    **index.js**页面的逻辑文件。类似于js文档（必须）  
    **index.json**页面的配置文件
5.  **每一个小程序页面都必须在app.json文件中进行注册**

{
    "pages": [
        "pages/only/only",
        "pages/index/index",
        "pages/logs/logs"
      ]
    }

> 注意：  
> a.页面路径前面不要加"/"  
> b.路径最后一段不需要指定文件扩展名  
> c.微信小程序的首页由page数组的第一个数组元素来确定

1.  **新建页面page**  
    ①手动创建：  
    右键单击\[page\]文件夹，在弹出的菜单中选择“新建目录”  
    右键单击新建的目录，在弹出的菜单中选择“新建page”  
    ②自动创建：  
    直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件 page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件
2.  **删除页面**  
    鼠标右键单击需要删除的页面文件夹，在弹出的菜单中选择“删除”。  
    打开app.json文件，将被删除页面的注册信息从pages选项中删除。

# （二）微信基本界面配置 #

## 一、小程序自适应单位：rpx ##

1.  rpx单位可以使组件自适应屏幕的宽度和高度。
2.  开发时建议以iPhone6的宽度作为标准。  
    物理像素：750。  
    1物理像素=1rpx=0.5px。  
    例如：要使用一个宽度为200px、高度为200px的图片，可以将该图片的宽度设置为200rpx，高度为200rpx。也可以设置为宽度和高度均为100px。
3.  结论：  
    ①设置图片大小、元素边界大小时可以使用rpx作为单位。  
    ②设置边框粗细、圆角半径可以使用px作为单位。

## 二、配置文件 ##

*  后缀：.json，文件格式遵循JSON语法规范
 *  作用：对微信小程序进行全局配置，设置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 切换页等
 *  分类：**小程序**全局配置文件**app.json**和页面配置文件**page.json**

### 小程序/全局配置文件app.json ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]

#### 小程序/全局配置文件app.json ####

*  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置
 *  文件内容本质就是一个 **JSON 对象**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pages</td> 
   <td>字符串数组string[]</td> 
   <td>是</td> 
   <td>页面路径列表</td> 
  </tr> 
  <tr> 
   <td>window</td> 
   <td>对象object</td> 
   <td>否</td> 
   <td>全局默认窗口表现</td> 
  </tr> 
  <tr> 
   <td>sitemapLocation</td> 
   <td>字符串string</td> 
   <td>是</td> 
   <td>指明 sitemap.json文件的位置</td> 
  </tr> 
 </tbody> 
</table>

###### 1、小程序/全局配置文件→pages属性 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

###### 2、小程序/全局配置文件→Windows属性 ######

作用：用于设置小程序的状态栏、导航条、标题、窗口背景色

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>string</td> 
   <td>dark暗</td> 
   <td>下拉 loading 的样式，仅支持 dark 暗色系加载点和light亮色系加载点</td> 
  </tr> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor16进制色码值</td> 
   <td>#000000</td> 
   <td>导航栏背景颜色，如 #000000</td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>string</td> 
   <td>无</td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>string</td> 
   <td>white</td> 
   <td>导航栏标题颜色，仅支持 black / white</td> 
  </tr> 
 </tbody> 
</table>

1.  **window属性~下拉刷新**  
    ①新建一个空白页，例如home页，建好后会发现home.js文件中已经写好各个阶段钩子函数。观察后发现onPullDownRefresh下拉函数，这里添加验证代码，输出验证。

/* 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () {
        console.log("您进行了下拉操作")；
      }

②下拉无效  
然而下拉后发现触发不了js回调，因为下拉功能需要配置，才可以支持下拉功能，即enablePullDownRefresh设置为true  
![在这里插入图片描述][20191113162938976.png]  
③真机下拉bug  
经过之前步骤，已经可以在模拟器实现下拉效果，但真机测试后容易出现不缩回的现象，这时可以在下拉监听事件中添加手动缩回的代码。  
方案：微信小程序还提供了停止下拉刷新效果的api，如果发现进入刷新状态，无法停止，可以使用wx.stopPullDownRefresh这个api

/* 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () {
        var timer = setInterval(function(){
          wx.stopPullDownRefresh();
          clearInterval(timer);
        },1500)
        //设置1.5秒后回到原来状态
        // console.log("您进行了下拉操作")
      }

1.  **配置项内容**  
    ①enablePullDownRefresh，设置是否开启下拉刷新。  
    ②backgroundColor，设置下拉刷新时窗口的背景色。  
    ③backgroundTextStyle，设置下拉刷新时loading的样式，取值为dark/light。  
    ④navigationBarBackgroundColor，设置导航栏背景颜色。  
    ⑤navigationBarTextStyle，设置导航栏文本颜色，取值为white/black。  
    ⑥navigationBarTitleText，设置导航栏标题栏文本。

###### 3、小程序/全局配置文件→sitemapLocation属性 ######

sitemapLocation属性：  
①指明 sitemap.json 的位置；默认为 ‘sitemap.json’ 即在 app.json 同级目录下名字的 sitemap.json 文件  
②sitemap.json为小程序收录设置文件，默认所有页面都能被索引，开发中一般不用进行相关配置

### 页面/局部配置文件page.json ###

**作用**：对本页面的窗口表现进行配置，文件内容本质为一个 JSON 对象  
**场景**：如果整个小程序的风格是蓝色调，那么在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此小程序提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。  
**简单理解**：就是对单个小程序页面的配置，可以覆盖全局配置app.json。  
**特性**：**覆盖性**，即每一个小程序页面可以使用同名 .json 文件来对本页面的窗口表现进行配置，但页面中配置项会覆盖 app.json 的 **window** 中相同的配置项。

#### 常用配置项属性 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor16进制色码值</td> 
   <td>#000000</td> 
   <td>导航栏背景颜色，如 #000000</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>string</td> 
   <td>white</td> 
   <td>导航栏标题颜色，仅支持 black / white</td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>string</td> 
   <td>无</td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>navigationStyle</td> 
   <td>string</td> 
   <td>default</td> 
   <td>导航栏样式，仅支持2个值：default 默认样式；custom 自定义导航栏，只保留右上角胶囊按钮（版本要求：微信客户端 7.0.0）</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>是否开启当前页面下拉刷新。</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>窗口的背景色</td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>string</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 dark / light</td> 
  </tr> 
  <tr> 
   <td>disableScroll</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 设置</td> 
  </tr> 
 </tbody> 
</table>

> 小结注意：  
> 页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性；  
> usingComponents为页面自定义组件配置，非必填项，数据类型为对象Object，以后涉及到再详细介绍。

### json语法结构 ###

###### 优点 ######

*  简单易读：易于人的阅读和编写，通常不需要特殊的工具，就能读懂和修改
 *  轻量：是一种轻量级的数据交换格式

###### 格式 ######

JSON文件都是被包裹在一个大括号中 \{\}，通过key-value的方式表达数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

###### 注意事项 ######

*  json格式看起来和js的对象表达方式十分相似，但是有所不同
 *  JSON的Key必须包裹在一个双引号中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]

###### 数据格式限制 ######

JSON的值只能是以下几种数据格式：

1.  数字，包含浮点数和整数
2.  字符串，需要包裹在双引号中
3.  Bool值，true或者false
4.  数组，需要包裹在中括号中\[\]
5.  对象，需要包裹在大括号中\{\}
6.  Null

其他任何格式都会触发报错，例如 JS中的 undefined  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]  
JSON 文件中无法使用注释，添加注释将会引发报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]

## 三、为页面设置单独的导航栏文本 ##

1.  在app.json文件中设置配置项，可以为整个小程序设置全局导航栏文本。
2.  如果要为任意页面单独设置导航栏文本，有两种方法：  
    ①方法一：在页面的json文件中设置配置项。

{
      "usingComponents": {},
      "navigationBarTitleText":"专题"
    }

②方法二：在页面的onReady()生命周期中设置。

onReady:function(){
           wx.setNavigationBarTitle({
             title:this.postData.title
    })
    }

## 四、页面根元素 ##

1.  每一个页面都具备一个根元素：。
2.  页面根元素可以在控制台的Wxml选项卡中看到。
3.  允许在wxss文件中对page根元素进行样式设置。

> 总结重点：  
> ①覆盖性：页面配置文件相关设置会覆盖小程序配置文件中已有配置  
> ②书写格式：页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性  
> ③JSON语法格式及相关限制

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111316093417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113161850908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191113162938976.png]: https://img-blog.csdnimg.cn/20191113162938976.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191113170730636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191113171028394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191113171416488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191113171449771.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70