模版名称

page-video

解释：

短视频详情页模板

使用说明

• 该模版要求的最低基础库版本为3.190.15。
• 该模版使用了es6语法，需要开启开发者工具的增强编译，操作步骤： 开启说明；同时也需开启上传代码时样式自动补全。
• 该模版展现的数据皆为测试数据，使用的测试数据皆放在utils/mock.js文件里，开发者可以按需修改为自己项目所需的格式和数据。
• 【改】本模板适用于各政府部门或区县政务服务线上办事大厅快速搭建工作，如社保、公安、税务、教育等部门，模板包含服务类目列表页、二级服务列表页，开发者可根据实际业务分类方式进行二次开发，以实现服务列表清晰、直观、结构化的展现形式。
• 可通过数据里的theme属性定义当前主题颜色，提供两种配色：蓝色: blue ，红色: red

目录结构

.
├── README.md                           // 模版说明文档
├── package.json                        // 包配置
├── project.swan.json                   // 项目配置文件
├── app.json                            // 小程序配置文件
├── app.css                             // 小程序全局样式
├── app.js                              // 小程序全局逻辑
├── atomic-index.json                   // 模板配置信息
└── @smt-ui-template-page-frame         // 模板文件
    ├── common                          // 公共文件
        └──css                          // 公共样式
            └── index.js                // 公用颜色变量
    ├── images                          // 图片
    ├── pages                           // 模板页面
    │   ├── index                       // 短视频详情页
    │   └── comment-detail              // 评论详情页
    └── utils                           // 模板工具
        ├── mock.js                     // 短视频详情页测试数据
        └── utils.js                    // 公用方法文件

示例

模板展示默认配置，包含视频区、短视频标题及辅助信息区、长视频信息区、互动区 可修改模板已展示全配置示例，包含视频区、短视频标题及辅助信息区、长视频信息区、运营区、广告区、短视频列表区、互动区

// packages/s-pages/page-video/@smt-ui-template-page-video/pages/index/index.js

attr: {
    // 请求的 url，请替换为真实的请求地址，该值仅做为示例，值为 defaultData 为默认配置示例，其他值为全配置示例
    url: '/defaultData',
    ...
},

其他

• 评论功能需要用户登入，开发者需要补充 AppKey 和 AppSecret

  // packages/s-pages/page-video/@smt-ui-template-page-video/utils/index.js
  
  export const login = () => {
    return new Promise(resolve => {
        swan.login({
            success: res => {
                swan.request({
                    url: 'https://spapi.baidu.com/oauth/jscode2sessionkey',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        code: res.code,
                        'client_id': '', // AppKey【补充】
                        sk: '' // AppSecret【补充】
                    },
                    success: res => {
                        if (res.statusCode === 200) {
                            resolve(res);
                        }
                    }
                });
            }
        });
    });

};

* 本模板使用的广告组件、订阅组件、书架组件等需要开发者查阅相关文档自行实现。