vue3+electron开发一个文章获取工具(附原码)

最新推荐文章于 2024-09-15 20:06:57 发布
最新推荐文章于 2024-09-15 20:06:57 发布
阅读量481 收藏 15
点赞数 6
分类专栏： 前端项目实战 文章标签： electron javascript vue node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lijron/article/details/137629029
版权

一、前言

平时在搜索文章时总会有很多的干扰信息影响我们问题的查找，于是，将我比较常用的CSDN、稀土掘金、简书等网站汇总到这个工具中。每次进入程序时默认获取对应网址前几个文章，仅显示标题和详情信息，如果有自己想看的文章，点击标题即可直接跳转到对应的文章详情，也可以根据自己的需求输入关键字查找对应的文章。这样的好处是过滤掉其他无关信息，以下实现代码是根据网址的调用接口开发的，可能会因为网址的变动而导致调用失败。

二、设计思路

  1. 在要查询的网站，按F12打开控制台，查找对应接口的名称及调用参数
  2. nodejs+express编写后端服务，根据接口参数要求写接口函数
  3. vue3+electron搭建前端页面，对接自己搭建的nodejs服务
  4. nodejs调用接口处理响应数据，然后将处理后的数据返回给前端页面展示

三、运行效果

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

四、代码实现

1. 渲染进程

// api.js
import axios from "axios"
const URL = process.env.NODE_ENV === 'production'?"http://127.0.0.1:3050": 'api'
function juejinList(param) {
    return new Promise((reslove, reject) => {
        axios.post(URL + "/juejinlist", param).then((res) => {
            reslove(res)
        })
    })
}
function juejinSearch(param) {
    return new Promise((reslove, reject) => {
        axios.get(params(URL + "/juejinsearch", param)).then((res) => {
            reslove(res)
        })
    })
}
function csdnList() {
    return new Promise((reslove, reject) => {
        axios.get(URL + "/csdnlist").then((res) => {
            reslove(res)
        })
    })
}
function csdnSearch(param) {
    return new Promise((reslove, reject) => {
        axios.get(params(URL + "/csdnsearch", param)).then((res) => {
            reslove(res)
        })
    })
}
function jianshuList(param) {
    return new Promise((reslove, reject) => {
        axios.get(params(URL + "/jianshulist", param)).then((res) => {
            reslove(res)
        })
    })
}
function jianshuSearch(param) {
    return new Promise((reslove, reject) => {
        axios.get(params(URL + "/jianshusearch", param)).then((res) => {
            reslove(res)
        })
    })
}
function params(url, params) {
    if (params) { // 有参数时拼接
        return params ? url + '?' + Object.keys(params)
            .filter(key => params[key] || params[key] === 0)
            .map(key => `${key}=${params[key]}`)
            .toString().replace(/,/g, '&') :
            url
    } else { // 没参数时获取
        let obj = {};
        url.match(/(\w+)=(\w+)/g).forEach(item => {
            Object.assign(obj, {
                [item.split('=')[0]]: item.split('=')[1]
            })
        })
        return obj
    }
}

export default {
    juejinList,
    juejinSearch,
    csdnList,
    csdnSearch,
    jianshuList,
    jianshuSearch
}

<!-- index.vue -->
<div class="container">
  <div class="silder"> <!-- 侧边栏 -->
    <div v-for="(item,index) in data.list" :key="index">
      <el-link
        type="primary"
        :underline="false"
        style="font-size: 14px; margin-top: 10px"
        :style="item.state ? 'font-weight: bold;' : ''"
        @click="handleChose(index)"
      >{{ item.name }}</el-link>
    </div>
  </div>
  <div class="content"> <!-- 滚动栏 -->
    <div class="head">
      <el-input
        style="width: 150px;margin-right:10px;"
        v-model="data.keyword"
        placeholder="请输入关键字"
        size="small"
        :disabled="data.disabled"
        clearable
        @clear="handleChose(data.index)"
      ></el-input>
      <el-button size="small" :disabled="data.disabled" @click="search">搜索</el-button>
    </div>
    <el-scrollbar class="main_content" :height="`${data.height}px`" @scroll="scroll">
      <div id="content" v-loading.fullscreen.lock="fullscreenLoading">
        <div v-for="(item,index) in data.contentList" :key="index">
          <el-collapse v-model="activeNames">
            <el-collapse-item :name="index">
              <template #title>
                <el-link
                  class="link"
                  :underline="false"
                  @click="handleUrl(item.url)"
                  v-html="item.title"
                ></el-link>
              </template>
              <div style="margin-right: 10px" v-html="item.describe"></div>
              <div v-if="item.time">{{ item.time }}</div>
              <div v-if="item.tag" class="label">
                <div v-for="(val, key) in item.tag" :key="key">
                  <el-tag style="margin:5px 10px 0 0;">{{ val }}</el-tag>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-scrollbar>
  </div>
</div>

// index.js
import api from "../api";
import { ipcRenderer } from "electron";
import { onMounted, reactive, ref } from "vue";
const data = reactive({
  list: [
    {name: "稀土掘金",state: false},
    {name: "CSDN",state: false},
    {name: "简书",state: false}
  ],
  contentList: [], // 主内容列表
  curPlatform: "", // 当前平台
  index: 0, // 平台索引
  height: 500,
  keyword: "",
  disabled: false
});
var param = {
  juejin: {
    id_type: 2,
    sort_type: 300,
    cate_id: "6809637767543259144",
    cursor: "0",
    limit: 20,
    search: {
      query: "",
      cursor: 0
    }
  },
  csdn: {
    search: {
      q: "",
      t: "all",
      p: 1
    }
  },
  jianshu: {
    page: 1,
    type_id: 31,
    count: 10,
    search: {
      q: "",
      page: 1,
      type: "note",
      order_by: "default"
    }
  }
};
const fullscreenLoading = ref(false)
onMounted(() => {
  data.list[data.index].state = true;
  data.curPlatform = data.list[data.index].name;
  data.height = window.innerHeight - 90;
  window.onresize = function() {
    data.height = window.innerHeight - 90;
  };
  getjuejinList();
});
// 平台切换
function handleChose(index) {
  data.list.forEach(item => {
    item.state = false;
  });
  data.list[index].state = true;
  data.curPlatform = data.list[index].name;
  data.index = index;
  switch (data.curPlatform) {
    case "稀土掘金":
      data.disabled = false
      param.juejin.cursor = "0";
      data.contentList = [];
      getjuejinList();
      break;
    case "CSDN":
      data.disabled = false
      data.contentList = [];
      getcsdnList();
      break;
    case "简书":
      data.disabled = false
      param.jianshu.page = 1;
      data.contentList = [];
      getjianshuList();
      break;
  }
}
// 滚动加载
function scroll(e) {
  let num = document.querySelector("#content").clientHeight - document.querySelector(".main_content").clientHeight;
  if (Math.floor(e.scrollTop - num) == 44) {
    switch (data.curPlatform) {
      case "稀土掘金":
        if (data.keyword) {
          param.juejin.search.cursor += 20;
          juejinSearch();
        } else {
          param.juejin.cursor = "0";
          getjuejinList();
        }
        break;
      case "CSDN":
        if (data.keyword) {
          param.csdn.search.p += 1;
          csdnSearch();
        } else {
          getcsdnList();
        }
        break;
      case "简书":
        if (data.keyword) {
          param.jianshu.search.page += 1;
          jianSearch();
        } else {
          getjianshuList();
        }
        break;
    }
  }
}
function handleUrl(url) {
  ipcRenderer.send("openUrl", url);
}
function getjuejinList() {
  fullscreenLoading.value = true
  api.juejinList(param.juejin).then(res => {
    data.contentList = [...data.contentList, ...res.data.list];
    param.juejin.cursor = res.data.param;
    fullscreenLoading.value = false
  });
}
function juejinSearch() {
  fullscreenLoading.value = true
  api.juejinSearch(param.juejin.search).then(res => {
    data.contentList = [...data.contentList, ...res.data.list];
    fullscreenLoading.value = false
  });
}
function getcsdnList() {
  fullscreenLoading.value = true
  api.csdnList().then(res => {
    data.contentList = [...data.contentList, ...res.data.list];
    fullscreenLoading.value = false
  });
}
function csdnSearch() {
  fullscreenLoading.value = true
  api.csdnSearch(param.csdn.search).then(res => {
    data.contentList = [...data.contentList, ...res.data.list];
    fullscreenLoading.value = false
  });
}
function getjianshuList() {
  fullscreenLoading.value = true
  api.jianshuList(param.jianshu).then(res => {
    data.contentList = [...data.contentList, ...res.data.list];
    fullscreenLoading.value = false
  });
}
function jianSearch() {
  fullscreenLoading.value = true
  api.jianshuSearch(param.jianshu.search).then(res => {
    data.contentList = [...data.contentList, ...res.data.list];
    fullscreenLoading.value = false
  });
}
function search() {
  switch (data.curPlatform) {
    case "稀土掘金":
      param.juejin.search.cursor = 0;
      param.juejin.search.query = data.keyword;
      data.contentList = [];
      juejinSearch();
      break;
    case "CSDN":
      param.csdn.search.p = 1;
      param.csdn.search.q = data.keyword;
      data.contentList = [];
      csdnSearch();
      break;
    case "简书":
      param.jianshu.search.page = 1;
      param.jianshu.search.q = data.keyword;
      data.contentList = [];
      jianSearch();
      break;
  }
}

/* index.css */
.container {
  display: flex;
}
.silder {
  border-right: 1px solid #dddddd;
  width: 10%;
}
.content {
  width: 90%;
}
.head {
  margin: 0 10px;
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.main_content {
  margin-left: 10px;
  padding-right: 10px;
}
.link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.label {
  display: flex;
}

2. 主进程

// service.js
import express from 'express'
import axios from 'axios'
import dayjs from 'dayjs'

function params(url, params) {
    if (params) { // 有参数时拼接
        return params ? url + '?' + Object.keys(params)
            .filter(key => params[key] || params[key] === 0)
            .map(key => `${key}=${params[key]}`)
            .toString().replace(/,/g, '&') :
            url
    } else { // 没参数时获取
        let obj = {};
        url.match(/(\w+)=(\w+)/g).forEach(item => {
            Object.assign(obj, {
                [item.split('=')[0]]: item.split('=')[1]
            })
        })
        return obj
    }
}

export default function initService() {
    const app = express()
    const port = 3050

    // 获取掘金最新列表
    app.post("/juejinlist", (req, res) => {
        let body = ''
        req.on('data', (thunk) => {
            body += thunk
        })
        req.on('end', () => {
            axios.post(params("https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed", {
                aid: 2608,
                uuid: "7236633682860246562",
                spider: 0
            }), JSON.parse(body)).then((result) => {
                console.log("yes")
                let list = result.data.data.map((item) => {
                    return {
                        id: item.article_id, // 文章id
                        url: "https://juejin.cn/post/" + item.article_id, // 文章链接
                        title: item.article_info.title, // 文章标题
                        describe: item.article_info.brief_content, // 文章描述
                        time: dayjs.unix(item.article_info.mtime).format('YYYY-MM-DD HH:mm:ss'), // 发布时间
                        tag: item.tags.map(value => value.tag_name) // 文章标签
                    }
                })
                res.send({
                    list,
                    param: result.data.cursor
                })
            }).catch((err) => {
                // console.log(err)
            })
        })
    })

    // 关键字查询
    app.get("/juejinsearch", (req, res) => {
        axios.get(params("https://api.juejin.cn/search_api/v1/search", {
            aid: 2608,
            uuid: "7236633682860246562",
            spider: 0,
            id_type: 0,
            limit: 20,
            search_type: 0,
            sort_type: 0,
            version: 1,
            ...params(req.url)
        })).then((result) => {
            console.log("yes")
            let list = result.data.data.map((item) => {
                return {
                    id: item.result_model.article_id, // 文章id
                    url: "https://juejin.cn/post/" + item.result_model.article_id, // 文章链接
                    title: item.result_model.article_info.title, // 文章标题
                    describe: item.result_model.article_info.brief_content, // 文章描述
                    time: dayjs.unix(item.result_model.article_info.mtime).format('YYYY-MM-DD HH:mm:ss'), // 发布时间
                    tag: item.result_model.tags.map(value => value.tag_name) // 文章标签
                }
            })
            res.send({
                list,
                param: ""
            })
        }).catch((err) => {
            // console.log(err)
        })
    })

    // 获取csdn最新列表
    app.get("/csdnlist", (req, res) => {
        axios.get(params("https://cms-api.csdn.net/v1/web_home/select_content", {
            componentIds: "www-recomend-community",
            cate1: "web"
        })).then((result) => {
            console.log("yes")
            let list = result.data.data["www-recomend-community"].info.map((item) => {
                return {
                    id: item.extend.product_id, // 文章id
                    url: item.extend.url, // 文章链接
                    title: item.extend.title, // 文章标题
                    describe: item.extend.desc, // 文章描述
                    time: item.extend.created_at, // 发布时间
                    tag: item.extend.csdnTag // 文章标签
                }
            })
            res.send({
                list,
                param: ""
            })
        }).catch((err) => {
            // console.log(err)
        })
    })

    // 关键字查询
    app.get("/csdnsearch", (req, res) => {
        axios.get(params("https://so.csdn.net/api/v3/search", {
            ...params(req.url)
        })).then((result) => {
            console.log("yes")
            let list = result.data.result_vos.map((item) => {
                return {
                    id: item.id, // 文章id
                    url: item.url, // 文章链接
                    title: item.title, // 文章标题
                    describe: item.description, // 文章描述
                    time: item.created_at, // 发布时间
                    tag: item.search_tag // 文章标签
                }
            })
            res.send({
                list,
                param: ""
            })
        }).catch((err) => {
            // console.log(err)
        })
    })

    // 获取简书最新列表
    app.get("/jianshulist", (req, res) => {
        axios.get(params("https://www.jianshu.com/programmers", params(req.url))).then((result) => {
            console.log("yes")
            let list = result.data.map((item) => {
                return {
                    id: item.id, // 文章id
                    url: "https://www.jianshu.com/p/" + item.slug, // 文章链接
                    title: item.title, // 文章标题
                    describe: item.desc, // 文章描述
                    time: "", // 发布时间
                    tag: "" // 文章标签
                }
            })
            res.send({
                list,
                param: ""
            })
        }).catch((err) => {
            // console.log(err)
        })
    })

    // 关键字查询
    app.get("/jianshusearch", (req, res) => {
        axios.post(params("https://www.jianshu.com/search/do", params(req.url)),{},{
            headers: {
                "Accept": "*/*"
            }
        }).then((result) => {
            console.log("yes")
            let list = result.data.entries.map((item) => {
                return {
                    id: item.id, // 文章id
                    url: "https://www.jianshu.com/p/" + item.slug, // 文章链接
                    title: item.title, // 文章标题
                    describe: item.content, // 文章描述
                    time: dayjs(item.first_shared_at).format('YYYY-MM-DD HH:mm:ss'), // 发布时间
                    tag: "" // 文章标签
                }
            })
            res.send({
                list,
                param: ""
            })
        }).catch((err) => {
            // console.log(err)
        })
    })

    app.listen(port, () => {
        console.log(`http://127.0.0.1:${port}`)
    })
}

在本地配置代理路径

// vue.config.js
devServer: {
  proxy: {
    '/api': {
      target: "http://127.0.0.1:3050",
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

// index.js
import {
  ipcMain,
  shell
} from 'electron'
import initService from './service'
ipcMain.on("openUrl", (e, url) => {
    shell.openExternal(url)
})
initService()

五、结尾

目前项目只实现了文章搜索和关键字查询的功能，大家可以根据自己的想法扩充查询的范围，也可以自定义开发些的筛选功能以满足自己的需求。

蓝冰链雪
关注
专栏目录
Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 & 一键打包两个服务
northcastle的博客
04-30 2073
electron + vue3 + vite + electron-forge 实现一键启动 & 一键打包功能
vue3+electron开发桌面应用，静态资源处理方式及路径问题总结
autumngold的专栏
02-27 2252
的引用解析为相应模块的路径，并且，如果项目配置了相应的loader，Webpack 还会处理文件内容，可能会转换这些静态资源为 base64 URI，或者将其复制到输出目录，并修改为最终路径。当你的网站或应用需要在多个子路径或不同的环境中部署，而没有固定的根路径时，设置。目录下的静态资源时，例如图片或样式文件，Webpack 会使用相应的加载器(loader)来处理它们。这里的静态路径是指直接写死的字符串，动态路径是指vue中的响应式数据生成的路径。静态路径没什么好说的，写相对路径，vue会自动处理好。
vue3项目源码汇集
热门推荐
前端-尔嵘
02-18 1万+
vue3学习项目参考
收集用户行为日志—前端vue埋点（一）
weixin_43565319的博客
12-11 4354
前端vue收集用户行为日志（一） 1.创建用于埋点setPoint.js import Cookies from 'js-cookie' export default { /** * @param currentPage 当前页 * @param fromPage 从哪个页面跳转过来 * @param type 事件类型 * @param element 触发事件的元素 */ setPoint: function (currentPage,fromPage,
基于Electron和Vue3桌面版图片压缩应用(内附源码)
imagine_tion的博客
07-16 1098
基于Electron和Vue3桌面版图片压缩应用(内附源码) 一、效果展示 1.图片压缩 2.转换成PNG 3.转换成JPG 二、Electron electron可以使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，我们熟悉的Visual Studio Code也是通常electron构建的 electron 核心分为 主进程和渲染进程： 渲染进程负责页面展示 主进程负责与系统交互 对于图片压缩功能的实现，用户在页面批量选择图片，发送图片路径给主进程，主进程压缩图片并
vue3 + vite
WJLSH123的博客
04-26 7580
端口控制 + 跨域 在vite.config.js文件中 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], base: "./",//打包路径 resolve: { alias: {
SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程
10-15
主要介绍了SpringBoot + Vue + Electron 开发 QQ 版聊天工具的教程，本文通过截图实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vite+Vue3+TS+Electron构建桌面应用
weixin_30230009的博客
04-03 4206
前言之前开发项目遇到前端的需求，我通常会选择Vue2，无他，只是在众多前端框架中，我比较熟悉Vue2，此前尝试学过一段时间React，被它的Hook恶心到了，会了又学，学了又忘，所以还是回到Vue的怀抱，至于React，日后再挑战。本篇文章使用当前最新的前端技术体系来构建一个桌面应用，本篇只是记录项目搭建的过程并实现项目的打包与安装，先看效果图：image.png我们使用...
Vue+Electron打包桌面应用(从零到一完整教程)
weixin_68658847的博客
07-15 1719
Vue+Electron打包桌面应用(从零到一完整教程)
如何将 Electron 项目上架 Apple Store
我码玄黄的博客
09-11 1748
Electron 应用程序可以运行在 Windows、macOS 和 Linux 上，本文将探讨如何将 Electron 构建的桌面应用程序上架到 App Store
electron多标签页模式更像客户端
luck332的专栏
09-14 501
Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。
2024年微电子与纳米技术国际研讨会（ICMN 2024） Microelectronics and Nanotechnology
刘大猫
09-14 660
2024微电子与纳米技术国际研讨会（ICMN 2024）将作为第三届电子信息技术国际学术会议（EIT 2024）分论坛于2024年9月20-22日在中国·成都召开。这次会议旨在汇聚全球领先的研究学者、工程师和行业专家，深入探讨微电子与纳米技术领域的最新进展和未来趋势。会议将涵盖从基础研究到实际应用的广泛主题，包括但不限于纳米材料、纳米器件、微结构设计、集成电路、量子计算和先进制造技术等。
探索 Electron：助力文档操作应用快速落地
ztK63LrD的博客
09-15 497
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
electron nsis打包windows应用程序
最新发布
u011269801的专栏
09-15 248
electron nsis打包windows应用程序
Vite + Electron 时，Electron 渲染空白，静态资源加载错误等问题解决
Lovely Ruby 的手账
09-12 601
如果在electron里直接引入vite打包后的东西，那么有些资源是请求不到的这是我的引入方式根据报错，我们来到vite打包后的路径看一看 ，修改一下dist里的文件路径试了一试修改后的样子，发现是可以的了。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 869
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 515
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 461
实现中国地图各省数据案例
vue3+electron开发桌面软件0基础入门
06-10
首先，Vue和Electron是两个不同的技术，Vue是一种用于构建用户界面的JavaScript框架，而Electron是一种用于构建跨平台桌面应用程序的框架，它使用Web技术（HTML，CSS和JavaScript）来构建应用程序。 如果你是0基础入门，首先需要学习Vue和Electron的基础知识。以下是一些学习资源： Vue： - Vue官方文档：https://v3.vuejs.org/guide/introduction.html - Vue Mastery：https://www.vuemastery.com/ - Codecademy：https://www.codecademy.com/learn/learn-vue Electron： - Electron官方文档：https://www.electronjs.org/docs - Udemy：https://www.udemy.com/course/electron-from-scratch/ - Pluralsight：https://www.pluralsight.com/courses/electron-fundamentals 一旦你学习了Vue和Electron的基础知识，你可以开始构建你的第一个Vue3+Electron桌面应用程序。以下是一些步骤： 1. 安装Vue CLI和Electron：使用npm安装Vue CLI和Electron。 ``` npm install -g @vue/cli npm install -g electron ``` 2. 创建Vue项目：使用Vue CLI创建一个新的Vue项目。 ``` vue create my-electron-app ``` 3. 添加Electron支持：在Vue项目中安装electron-builder。 ``` cd my-electron-app vue add electron-builder ``` 4. 编写代码：你现在可以开始编写Vue和Electron代码了。你可以在Vue组件中使用Electron API来访问系统资源。你可以在Electron主进程中编写Node.js代码以访问底层系统资源。 以上是一个简单的介绍，希望对你有所帮助。祝你好运！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值