【开源】如何从零开发一个手机直播助手提供直播辅助

最新推荐文章于 2025-01-30 02:51:08 发布

关注我进社群

最新推荐文章于 2025-01-30 02:51:08 发布

阅读量644

点赞数 4

文章标签： html5 vue

本文链接：https://blog.csdn.net/ldz1997106/article/details/144107504

版权

由于想要直播又不想露脸，所以想在抖音，快手尝试一下娱乐赛道，我看很多给别人测名字，手机号测评的。收益看着还不错，但是网上搜的程序都是电脑程序，电脑程序又需要电脑开播，电脑开播又需要电脑版本的抖音伴侣，电脑版本的直播伴侣又需要1000粉丝，无解了…

所以想着自己是程序员，在手机上开发一个html+js应用，然后封装为一个app 然后使用抖音或者快手就可以开直播，打开手游模式就可以投屏自己的手机直播出去了下面是完整代码和效果图

第一步：使用html + js + vue开发网页应用效果图如下；html代码参照gitee

在这里插入图片描述

<template>
  <div class="home">
    <!-- 顶部标题 -->
    <div class="title">
      <span class="gradient-text">娱乐直播助手</span>
    </div>
    
    <!-- 轮播图区域 -->
    <div class="banner" v-if="banners.length">
      <van-swipe :autoplay="3000" :height="bannerHeight" :show-indicators="true" :loop="true">
        <van-swipe-item 
          v-for="banner in banners" 
          :key="banner.id"
          @click="banner.link ? handleBannerClick(banner.link) : null"
        >
          <div class="banner-wrapper">
            <img :src="banner.picUrl" class="banner-image" alt="banner">
            <div class="banner-overlay"></div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 公告栏 -->
    <div class="notice-wrapper" v-if="notices.length">
      <van-notice-bar
        left-icon="volume-o"
        :scrollable="true"
        :text="formatNoticeText"
        background="#242424"
        color="#fff"
      >
        <template #left-icon>
          <van-icon name="volume-o" color="#FF3CAC" size="16"/>
        </template>
      </van-notice-bar>
    </div>
    
    <!-- 玩法列表 -->
    <div class="play-list">
      <div v-for="(item, index) in playList" 
           :key="item.key" 
           class="play-item"
           @click="handlePlayClick(item)">
        <div class="play-card" :class="{ 'disabled': item.enable !== 1 }">
          <div class="card-image">
            <template v-if="item.cover && item.enable === 1">
              <img :src="item.cover" :alt="item.name">
              <div class="image-overlay"></div>
            </template>
            <template v-else>
              <div class="placeholder-bg" :class="{ 'disabled-bg': item.enable !== 1 }">
                <span class="coming-soon-text">{{ item.enable !== 1 ? '敬请期待' : '即将上线' }}</span>
              </div>
            </template>
          </div>
          <div class="card-content">
            <div class="card-title" 
                 :style="{
                   backgroundImage: getNameColor(index),
                   '-webkit-background-clip': 'text',
                   'background-clip': 'text',
                   color: 'transparent'
                 }">
              {{ item.name }}
            </div>
            <div class="tag-container">
              <div v-for="(tag, tagIndex) in item.tag.split(',')"
                   :key="tagIndex"
                   class="custom-tag">
                {{ tag }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

第二步：使用electron 将应用带包为安卓apk

const {app, BrowserWindow, ipcMain, Menu} = require('electron');
const path = require('path');

const os = require('os');



let mainWindow;



// 更新预设的手机分辨率
const phoneResolutions = [
    // iPhone 系列
    { label: 'iPhone SE (第一代)', width: 320, height: 568 },
    { label: 'iPhone SE (第二代)', width: 375, height: 667 },
    { label: 'iPhone 8', width: 375, height: 667 },
    { label: 'iPhone 8 Plus', width: 414, height: 736 },
    { label: 'iPhone X/XS', width: 375, height: 812 },
    { label: 'iPhone XR/11', width: 414, height: 896 },
    { label: 'iPhone 12/13 mini', width: 375, height: 812 },
    { label: 'iPhone 12/13/14', width: 390, height: 844 },
    { label: 'iPhone 12/13/14 Pro Max', width: 428, height: 926 },
    { label: 'iPhone 14 Pro', width: 393, height: 852 },
    
    // Android 系列
    { label: '小米 12', width: 393, height: 851 },
    { label: '小米 13', width: 412, height: 915 },
    { label: 'OPPO Find X5', width: 390, height: 844 },
    { label: '华为 P40 Pro', width: 396, height: 866 },
    { label: '三星 S21', width: 360, height: 800 },
    { label: '三星 S22 Ultra', width: 390, height: 844 },
    { label: 'Pixel 6', width: 412, height: 915 },
    { label: 'Pixel 7 Pro', width: 412, height: 892 },
    
    // 平板尺寸
    { label: 'iPad Mini', width: 768, height: 1024 },
    { label: 'iPad Air', width: 820, height: 1180 },
    { label: 'iPad Pro 11"', width: 834, height: 1194 },
    { label: 'iPad Pro 12.9"', width: 1024, height: 1366 }
];



function createWindow() {

    mainWindow = new BrowserWindow({

        width: 390,

        height: 844,

        webPreferences: {

            nodeIntegration: false,

            contextIsolation: true,

            preload: __dirname + '/preload.js'

        },

        icon: path.join(__dirname, 'static/applogo_256x256.ico'),

        title: '娱乐助手'

    });

    

    // 创建菜单模板
    const template = [
        {
            label: '返回主页',
            click: () => {
                mainWindow.loadURL('/');
            }
        },
        {
            label: '机型选择',
            submenu: phoneResolutions.map(resolution => ({
                label: `${resolution.label} (${resolution.width}x${resolution.height})`,
                click: () => {
                    mainWindow.setSize(resolution.width, resolution.height);
                    mainWindow.center();
                }
            }))
        },