调试预览

h5预览

在项目根目录下执行以下命令在pc上开启h5模拟预览：

npm run dev

默认打开 app.json 配置的第一个页面。

由于有热更新，调试样式等较为方便，但由于部分api实现与真机有差异，最终展现仍以真机预览为主。

另：默认域名为本机ip地址，端口号为8080，若要使用其他域名和端口号，可如下两种方式配置：

npm run dev -- --host=dev.bilibili.com --port=80

// bl.config.js
module.exports = {
    dev: {
        host: 'dev.bilibili.com',
        port: 80
    }
}

再运行 npm run dev 即可。

可配置成bilibili的域名(并绑上host: 127.0.0.1 dev.bilibili.com)，用于调试登录等功能用。

注：需升级 npm包 bili-small-app 至最新版本。

本地开发环境是小程序的H5版本，和真机运行有一定差异，在发布之前，还是需要真机预览保证小程序在真机中工作正常。

构建小程序安装包：

npm run build

构建过程没有报错，会在终端里生成一个二维码，使用bilibili app扫描二维码即可开始真机预览。需注意手机和电脑要在同一个局域网下。

注：npm包 bili-small-app 版本号大于等于 1.4.3 后，无需另外使用命令 bili-sapp-cli serve 开启真机预览服务，请升级至最新版本。

基础库版本 >= 2.4.0 支持

在真机上，如果想要查看 console API 输出的日志内容和额外的调试信息，可以：

此时小程序会退出，重新打开后会右下角会出现一个 vConsole 按钮。点击 vConsole 按钮可以打开日志面板。

vConsole 打开界面如下：

由于实现机制的限制，开发者调用 console API 打印的日志内容，是转换成 JSON 字符串后传输给 vConsole 的，导致 vConsole 中展示的内容会有一些限制：

    let a = {}
    a.b = a
    console.log(a)
    // "{b: '<Circular: @>'}"

基础库版本 >= 2.8.0 后，增加Storage与Cache面板，支持storage查看与清除，支持缓存文件清理

点此下载小程序真机调试工具

使用步骤：

打开调试工具，在要构建的项目根目录下执行 npm run build，注意需将 bili-small-app npm包升级到最新版本，构建完成后自动展示二维码。如下：

注：