bilibili小程序

使用小贴士

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的src根目录，如下：

文件必须作用版本
app.js是小程序逻辑 
app.json是小程序公共配置 
app.less否小程序公共样式表 

一个小程序页面由四种文件组成，分别是：

文件类型必须作用版本
index.vue是页面主体文件，需要遵守约定必须为index.vue 
js否可以被index.vue import 的js脚本 
less否可以被index.vue import 的样式 
vue否可以被index.vue import 的单文件组件 

页面目录下的子目录结构可以由开发者任意指定，只要index.vue能正确引用的到即可，除了index.vue，其他任意vue单文件组件，都不会被当作页面主体，开发者可以自由封装vue单文件组件，就像使用vue开发web那样。

推荐的页面目录结构

.
├── index.vue
├── js/
│   └── func.js
├── vue/
│   └── MyComponent.vue
└── style/
    ├── a.less
    └── b.less

本地图片

  • 如果开发者需要随小程序发布本地图片，需要把图片放置在/static目录中。如 tabBar 中的 iconPath 和 selectedIconPath，bl.uploadFile 等涉及到使用本地图片的api。

  • 静态引用时图片放置目录无限制，可以使用相对路径或者绝对路径，webpack会处理好。如 b-image 的 src。

注：

  • 静态引用时图片打包时会带上hash值（/static/xxx.[hash:7].png），如果在tabBar或某个api中也使用到了该图片（/static/xxx.png），则会找不到。

  • 如果开发者通过程序动态拼接的本地图片路径，需要路径变量计算结果为这种形式：static/path/to/image.jpg，注意是static开头。

例如：

<template>
    <div>
        <b-image v-for="(item, i) in items" :src="'static/item/' + i + '.jpg'"></b-image>
    </div>
</template>

完整的小程序项目目录结构

以下是一种小程序项目目录结构

.
├── build/
├── dep/
├── node_modules/
├── src/
│   ├── components/
│   │   └── MyComp.vue
│   ├── pages/
│   │   ├── index/
│   │   │   └── index.vue
│   │   └── logs/
│   │       └── index.vue
│   ├── app.js
│   ├── app.json
│   └── app.less
├── static/
│   └── logo.png
├── .sapprc
├── package.json
└── README.md

.sapprc文件

若调试时需根据appId做校验或其他操作，或发布上线时，.sapprc 文件里需将申请到的 appId 填入配置中，此外还可配置 vAppId 等。

注： vAppId请勿使用 -、_ 字符

← Previous生命周期 →