小程序代码构成

在上一章中，我们通过开发工具快速创建了一个 Demo 项目，项目里有两种不同的文件：

1、zmip.config.js 配置文件

2、.vue 后缀的页面文件

接下来分别说明这两个文件的作用

JSON 配置

JSON 在小程序开发中发挥着静态配置的作用。在小程序中分为小程序全局配置 app.json 和页面配置 <config> 两种类型。具体如下：

全局配置

zmip.config.js 是当前小程序的全局配置，包括了小程序调试和编译的一些配置以及所有界面表现等。具体配置可查阅全局配置

示例代码

module.exports = {
  site: {
    title: "Template",
  },
  app: {
    window: {
      navigationBarBackgroundColor: "#ffffff",
      navigationBarTextStyle: "#333333",
      navigationBarTitleText: "",
      backgroundColor: "#f6f6f6",
      backgroundTextStyle: "#333333",
    },
  },
};

其中 site 字段表示当前小程序调试和编译的一些配置，app.window 字段定义了小程序页面的背景颜色和字体样式等。

页面配置

在实际开发中，我们很可能要给部分页面进行特定的配置，例如页面布局格式等，因此我们提供了 vue 文件中的config配置，具体配置可查阅页面配置

示例代码

<config type='json'>
	{
		"navigationBarTitleText": "小程序",
		"navigationStyle": "custom"
	}
</config>

JSON 语法

这里说一下小程序里 JSON 配置的一些注意事项。

JSON 都是被包裹在一个大括号中 {}，通过 key-value 的方式来表达数据。JSON 的 Key 如果包含 - 必须包裹在一个引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加引号是常见错误。

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

1、数字，包含浮点数和整数

2、字符串，需要包裹在引号中

3、Bool 值，true 或者 false

4、数组，需要包裹在方括号中 []

5、对象，需要包裹在大括号中 {}

6、Null

VUE 页面

浙江农信小程序采用 vue 框架的开发方式，在pages目录下的所有 .vue 文件为一个小程序页面（自定义组件除外）。

接触过 vue 开发的开发者都知道，vue 文件包含三个部分 template 、script 和 style。其中 template 为其中的 html 部分，script 为数据和逻辑部分， style 为样式部分。

同样的，在小程序页面中与 vue 的开发逻辑保持一致。打开pages\index\Index.vue，你会看到以下内容：

<template>
  <div class="home">
    <van-button type="primary" @click="go">PageA</van-button>
  </div>
</template>
<script>
export default createPage({
  name: 'home',
  activated() {
  },
  deactivated() {
  },
  methods: {
    go() {
      this.$Native.navigateTo({
        url: `/pages/page-a`,
      })
    },
  },
})
</script>
<config type='json'>
{
     "navigationBarTitleText": "首页"
}
</config>

和 vue 文件基本上一致，也包含<template>、<script>、<style>,但是也一些不一样的地方，我们来一一阐述一下：

1. script 中 export default 的内容不一样
   在 vue 中可以直接 export 一个由{}包裹的 json 对象，在小程序页面中 export createPage()方法的返回值
2. 多出了<config>标签
   config 标签中是一个 JSON 配置对象，这里的配置是当前小程序页面相关的配置。 如果你整个小程序的风格是蓝色调，那么你可以在 zmip.config 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了<config>，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否全屏显示等等。
   其他配置项细节可以参考文档页面配置。