# 小程序目录结构

你可以通过 Boss-cli 方式或小程序开发者工具快速创建 BossHi 小程序工程

# vue 写法

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。默认包含如下目录及文件结构：

┌─components            组件目录
│ └─comp                可复用的组件
├─pages                 业务页面文件存放的目录
│  ├─index              index 页面
│  │  └─index.vue
│  └─list               list 页面
│     └─list.vue
├─main.js               Vue初始化入口文件
├─bz.scss               scss 公共变量文件
├─App.vue               应用配置，用来配置App全局样式以及监听
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

1
2
3
4
5
6
7
8
9
10
11
12

# pages.json

pages.json 文件用来对小程序进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在小程序中是在 manifest 中配置。

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "demo"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# manifest.json

manifest.json 文件是应用的配置文件，用于指定应用的名称、appid、版本等。

{
    "name": "{{ name }}",
    "appid": "{{ appid }}",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": "100",
    "transformPx": false, // 是否转换项目的px，为true时将px转换为rpx
}

1
2
3
4
5
6
7
8

# main.js

main.js是项目的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex。

首先引入了Vue库和App.vue，创建了一个vue实例，并且挂载vue实例。

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

1
2
3
4
5
6
7
8
9
10

# App.vue

App.vue是项目的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储 globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

<script>
export default {
    onLaunch: function () {
        console.log('App Launch')
    },
    onShow: function () {
        console.log('App Show')
    },
    onHide: function () {
        console.log('App Hide')
    }
}
</script>

<style>
/*每个页面公共css */
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# bz.scss

bz.scss 文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，bz.scss文件里预置了一批 scss 变量预置。

bz.scss 是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。小程序的构建配置中特殊处理了这个 bz.scss ，使得每个scss文件都被注入这个 bz.scss，达到全局可用的效果。

注意需要在 style 节点上加上 lang="scss"。

<style lang="scss">
</style>

1
2

# 标准小程序写法

写法规范还在建设中

# 上传的文件

build 打包之后会生成一个 *.wgt 的文件（appid），可手动将该小程序产物上传至开放平台，进行小程序的版本发布操作

在开发中工具中，也可以快捷操作直接自动上传至开放平台。

← 小程序代码构成配置小程序 →