创建第一个小程序

使用命令创建项目模板：

bili-sapp-cli init my-project

注意：开发过程中可能涉及跨域请求问题，可以使用命令新建禁用安全策略的chrome

open -a "Google Chrome" --args --disable-web-security --user-data-dir

然后：

cd my-project
npm install
npm run dev

之后工具会自动打开chrome访问本地运行的页面，可以看到项目模板的首页。

使用命令创建一个新的页面，页面名称为sample

bili-sapp-cli page sample

编写sample页面

<template>
    <div>
        <h1>Sample Page</h1>
        <div>{{info}}</div>
        <div>{{message}}</div>
        <button @click="request">点我发起请求</button>
        <button @click="back">点我返回</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {},
            message: ''
        };
    },
    created() {
        bl.getSystemInfo({
            success: (result) => {
                this.info = result;
            }
        });
    },
    methods: {
        request() {
            bl.request({
                url: 'http://static.hdslb.com/public/json.json',
                responseType: 'json',
                success: (response) => {
                    this.message = response;
                }
            });
        },
        back() {
            bl.navigateBack({
                delta: 1
            });
        }
    }
};
</script>

<style>
</style>

重新运行npm run dev，在打开的chrome中访问/sample.html即可访问新创建的页面。

可以点击页面上的按钮进行简单的测试。如果没有异常，说明本地开发环境已经正确启动了。