技术栈

简介

酷狗直播小程序是一个跨端跨平台的技术方案，涉及 WEB、原生 APP 等平台。为了降低开发门槛，提高开发效率，酷狗直播小程序提供了一套技术方案，尽量让您的代码能“一次开发，多端运行”。理想情况下，您只需要针对业务，编写主播端和观众端的代码，通过这个跨平台的技术方案，就能运行在酷狗直播平台的各个端。您也可以根据具体的某个平台编写个性化的代码，达到最大程度的代码复用。

目录结构

参考 快速开始 章节中创建的小程序模版：

• project.config.json：项目的配置文件，指定小程序一些配置
• /m/app/index.js：小程序的入口文件（半屏）
• /streamer_pc/app/index.js：小程序入口文件（推流）

配置

以模版的配置文件为例：

{
	"name": "myApp",
	"releasePath": "release",
	"builder": {
		"appId": "6e1de55f92e04949aaf5f5bb0150583d", // 小程序appId
		"appMode": 0, // 小程序模式，0 主播模式，1 用户模式
		"appType": [ "m", "streamer_pc" ],
		"framework": "react",
		"sdkVersion": "1.0.5",
		"designWidth": 720,
		"pcDesignWidth": 720,
		"https": true,
		"host": "localhost",
		"port": 18080
	}
}

其中配置了小程序基本信息：小程序appId和小程序模式，以及使用的开发框架、 SDK 版本、名称、本地开发的域名和端口、设计稿尺寸等。

入口

import { render } from "@fxext/core";
import Main from "../containers/Main";

render(Main);

if (module.hot) {
  module.hot.accept("../containers/Main", () => {
    const HotMain = require("../containers/Main").default;
    render(HotMain);
  });
}

入口会渲染小程序根组件并在开发阶段监听代码变动执行热更新。

组件

以入口文件指定的 React 组件./containers/Main/index.js为例：

import "./index.scss";
import React from "react";
import { App } from "@fxext/core";
import routers from "./routers";

const init = async (history, setAppState) => {
  return true;
};

export default function Main() {
  return (
    <App
      title="酷狗直播小程序"
      titleStyle="black"
      routers={routers}
      init={init}
    />
  );
}

这个组件跟普通的 React 组件是一样的，所以您可以像编写一个普通的 React 程序一样组织和编写您的酷狗直播小程序。

进阶：@fxext/core 提供了更多组件，详情查看 UI组件

使用 SDK

直接访问全局变量 FxExt 即可,例如

FxExt.onExit(() => {
  console.log("小程序退出了！");
});

升级sdk版本：修改project.config.json下的builder.sdkVersion字段后重新运行项目

样式

提供了跨平台的样式自适应方案，开发者无需关心适配屏幕的问题，只需关心设计稿（宽度为 720px）的尺寸去写样式。

在 project.config.json 文件中填写 designWidth 设计稿的宽度，默认为 720px。直接在样式文件中填写样式即可, 示例如下

div {
  width: 10px;
  height: 20px;
}

路由

开发者只需进行简单的配置即可使小程序拥有多路由页面分别展示主播端和观众端不同的页面。

在/m/containers/Main/routers.js 下对页面路由进行配置 path、title、component等，示例如下

import UserRecord from "../UserRecord";

export default [
  {
    path: "/user/record", // 路由路径
    component: UserRecord, // 路由页面组件
    title: "摇中记录", // 路由页面标题，非必传
    titleBarColor: "#3E2597", // 小程序标题栏背景色，非必传
    titleStyle: "white", // 小程序主题，可选值为'black' | 'white'，非必传
  },
];

注意：vue小程序需自行安装vue-router进行路由配置