Внешний вид настольного музыкального проигрывателя (nw и electronic)
адрес сервераmajunchang.cn:3000/#/recommend
Недавно я изучал, как внешний интерфейс создает настольные приложения, и взглянул на nw и eectron. Поэтому я использовал vue для написания компьютерной версии музыкального проигрывателя qq. Из-за нехватки времени функции, которые необходимо выполнить, очень ограничены. Уровень дублирования кода высок. Надеюсь, вы понимаете. В этой статье в основном представлены два инструмента: nw и electronic. Интерфейсный код имеет открытый исходный код, и заинтересованные студенты могут загрузить его самостоятельно, добавить некоторые интересные функции и оптимизировать код.
Прикреплено - используйте обещание для реализации внешнего кэширования (пример кода приведен в файле Recommended.vue)
интерфейс
// 分类歌单数据
export function getDiscList() {
let href = window.location.href
let url
if (href.includes('localhost') || href.includes('127.0.0.1')) {
url = '/api/getDiscList'
} else {
url = 'http://127.0.0.1:3000/api/getDiscList'
}
// 需要拼接的数据
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
})
}
тайник
import {
getDiscList
} from './recommend.js'
let getDiscListCache
let test
function fn() {
if (!getDiscListCache) {
test = '测试变量'
getDiscListCache = getDiscList() // 在此赋值 import 引入的时候 就向后端发送接口
}
}
fn()
export {
getDiscListCache,
test
}
использовать
methods: {
getcateList() {
getDiscListCache.then(res => {
console.log(test);
console.log(res);
this.songList = res.data.data.list;
});
}
}
Предварительный просмотр проекта
Разделен на домашнюю страницу, страницу со списком исполнителей, страницу с подробностями о исполнителе, рейтинги. Страница сведений о таблице лидеров и страница игрока, таблица лидеров и страница певца в основном одинаковы, поэтому я не буду вдаваться в подробности.
титульная страница
Страница со списком исполнителей
Страница сведений о певце
Функция поиска исполнителя
страница игрока
стек технологий
-
Внешний интерфейс vue, vue-router, webpack
-
Бэкэнд (прокси) узел+экспресс в качестве прокси
-
Переадресация интерфейса jsonp axios
-
Упаковочные инструменты
Описание Проекта
1. Часть сбора данных
数据主要是获取QQ音乐的接口，有得接口jsonp的方式 就可以获取到数据 有得接口需要使用Node做一下代理 来解决跨域
2. Переадресация через прокси
在开发阶段，我们可以使用vue中的dev模块中的proxyTable进行路径的重写和代理的转发
在build的时候 我们可以手动配置 访问路径 或者使用express做一下配置 类似于我们将代码 放入nginx服务器中那样
3. Примечания к проекту
我们需要在node启动的服务器里面（也就是本地服务器中）解决跨域问题
使用nw的时候需要解决不能播放音频的问题
index.html以及静态资源的这些路径问题
4. Точки оптимизации проекта
项目的css部分可以优化 优化为less，sass 或者cssmodule这样
项目的组件可以抽离一下 目前排行榜详情页以及歌手详情页基本上的逻辑是一样的 可以进行抽使用组件化 也可以使用 slot
项目中 还可以新增很多功能 比如说播放mv 下载歌曲 以及添加我喜欢的音乐等
Прокси для NodeJs+Express
Используйте экспресс для доступа к статическим ресурсам в каталоге dist после упаковки.
B Чтобы решить междоменную проблему, когда файл dist перетаскивается в nw для открытия или прямого открытия index.html каталога dist и интерфейса после упаковки с помощью electronic
import path from 'path'
import express from 'express'
import axios from 'axios'
import {join} from 'path'
const app = express()
// 挂载静态路径
// A
app.use(express.static(join(__dirname, '../../dist')))
let router = express.Router()
// B
router.all('*', function (req, res, next) {
// res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With')
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
res.header('X-Powered-By', ' 3.2.1')
next()
})
// 做代理的分发和请求 分类歌单
router.get('/getDiscList', function (req, res) {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
console.log('接口响应成功')
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
router.get('/lyric', function (req, res) {
var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
// 由于response 是一个jsonp格式的 所以我们要对这个 进行json转化
var result = response.data
var regExe = /^\w+\(({[^()]+})\)$/
var matchArr = result.match(regExe)
if (matchArr) {
res.json(JSON.parse(matchArr[1]))
}
}).catch((e) => {
console.log(e)
})
})
app.use('/api', router)
app.listen(3000, () => {
console.log('服务器已经启动,监听的端口号是3000')
})
nw (введение и использование node-weikit)
Введение в node-webkit
Официальный сайт должен быть через стену, и загрузка должна быть через стену.
На Github есть более 20 000 звезд и почти 3000 форков nw.js, что указывает на то, что он достаточно зрелый. И в конце проекта Github видно, что Intel спонсировала этот проект, что выглядит великолепно.
- nw.js — это также фреймворк, использующий интерфейсные технологии (html, css, JavaScript) для создания программ для ПК.
- Совместимость с системой Windows XP
- Поддерживает написание приложений на HTML5, CSS3, JS и WebGL, включая настольные и мобильные;
- Полная поддержка API Node.js и всех сторонних модулей;
- Производительность будет неплохой, и для легковесных приложений ее достаточно;
- Упаковка и распространение приложений очень просты, что означает, что написанный код легко портировать на разные платформы (включая основные Linux, Mac OS X и Windows);
Что может нв сделать?
nw.js — это программа, написанная на HTML, CSS и JavaScript, которая изначально работает в браузере, а также может работать на рабочем столе.
Установка и использование nw
-
Загрузите установочный пакет и установите его (рекомендуется загрузить пакет с пакетом разработки для легкой отладки)
Загрузите сжатый пакет nw.app с официального сайта и используйте его после распаковки.
Прикрепил официальный адрес сайта:github.com/nwjs/nw.js
效果图：
- Используйте командную строку для установки (загрузка из командной строки медленная, поэтому особо не рекомендуется)
sudo npm install -g nw
процесс упаковки
Инструменты для упаковки (несколько кратких вступлений)
- nodebob — это инструмент сборки для node-webkit, который может автоматически публиковать приложения node-webkit в среде Windows. В настоящее время в версии 0.1, написанной в пакетном сценарии Windows.
- nw-builder и grunt-nw-builder позволяют создавать приложения node-webkit для Mac, Win и Linux с помощью grunt. Они загружают предварительно созданный двоичный файл для определенной версии, распаковывают его, создают папку версии, создают файл app.nw для указанного каталога и копируют файл app.nw туда, где он принадлежит.
- Нук! Нук! Приложения для Mac можно легко создавать на основе node-webkit, что упрощает процесс тестирования и сборки. Он отвечает за создание исполняемого файла, прикрепление значка приложения и соответствующую настройку файла plist. (очень альфа-стадия)
- генератор-узел-вебкит — это генератор yeoman для разработки приложений узла-вебкита и создания пакетов для mac, linux и win. Свободно интегрированный в ваш процесс сборки, он загрузит 32/64-битную версию nwjs для Linux, Windows и OSX и соберет пакеты для всех трех платформ из заданного исходного каталога.
Процесс упаковки под окнаБлог Woohoo.cn на.com/tiny PHP/afraid/5…
Процесс упаковки под mac/osx
nw решить проблему не воспроизведения звука
Кодирование MP3 является запатентованным кодированием и не авторизовано открытым исходным кодом, поэтому воспроизведение MP3 не поддерживается по умолчанию в nw.js, и его необходимо включить вручную.
Нужно скачать из сообществасоответствующая версияФайл libffmpeg.dll, а затем замените исходный файл, чтобы решить проблему.
Адрес сообщества:GitHub.com/IT EU Fe made/Тогда я…
Адрес целевого файла: /Users/baidu/Desktop/nwjs-sdk-v0.31.1-osx-x64/nwjs.app/Contents/Versions/67.0.3396.79
Я установил это программное обеспечение на рабочий стол.Это целевой адрес.Только запомните последний.
Использование nw и способы отладки
Откройте встроенную консоль Google с помощью сочетания клавиш option+command+i. Если его не удается открыть или он не отвечает, возможно, загруженная вами версия не поставляется с инструментами разработки.
применение нз
nwjs - вы это заслужили! Я должен упомянуть, что приложения, разработанные nw.js, охватывают многие области:
- WhatsApp — классическое приложение для чата, а также Messenger;
- Скачать торрент Powder Player и видеоплеер;
- Редактор кода Boson Editor и даже редактор Markdown под названием Story-writer;
- Leanote Desktop App — это приложение для создания заметок, похожее на Evernote;
- Приложение для управления базой данных Mongo Management Studio.
электрон (введение и использование)
Официальный адрес сайта (хорошо, что не надо переходить через стену)
Введение
- электрон — это фреймворк, который позволяет нам использовать js для создания настольных приложений, и он может легко реализовывать кроссплатформенность, позволяя нам легче писать бизнес-логику, не беспокоясь о проблемах кроссплатформенности.
- По сравнению с nw, у electronic больше пользователей, больше полных документов и более удобное использование.
- Сообщество очень сильное, и в основном все проблемы, с которыми вы сталкиваетесь, могут быть решены в сообществе.
Официальный пример
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start
Скриншот проекта
Установка электроники и установка упаковочных инструментов
-
Установить электрон глобально
npm install electron -g -
локальная установка
npm install electron --save-dev -
упаковочный инструмент
Инструмент для упаковки, который я выбираю, — это электронный упаковщик.
Установите инструмент упаковки в проект и настройте командную строку
npm install --save-dev electron-packager
{ "name": "qq-music", "version": "1.0.0", "description": "A Vue.js project", "author": "junchang.ma.ele_waimai <junchang.ma@ele.me>", "private": true, "scripts": { "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "electron_dev": "electron build/electron.js", "electron_build": "electron-packager ./dist/ --platform=darwin --arch=x64 --overwrite" }, "dependencies": { .... }, "devDependencies": { ... }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }Давайте поговорим о конфигурации командной строки:
packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"
- расположение проекта: путь, по которому находится проект
- имя проекта: имя упакованного проекта
- платформа: определяет, на какой платформе вы хотите создать приложение (Windows, Mac или Linux) win32=> под окнами darwin=> mac
- архитектура: решает, использовать ли x86 или x64 или оба
- электронная версия: версия электрона
- дополнительные опции: дополнительные опции
Имя проекта, версия и путь к значку в поле должны быть изменены на ваши собственные;
Упаковка электрона (интеграция электрона в vue)
Конфигурация командной строки см. выше
локальный режим предварительного просмотра
-
Создайте электрон.js в папке сборки
// Modules to control application life and create native browser window const {app, BrowserWindow} = require('electron') // import path from 'path' const path = require('path') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindow function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. mainWindow.loadFile(path.join(__dirname, '../dist/index.html')) // Open the DevTools. // mainWindow.webContents.openDevTools() // Emitted when the window is closed. mainWindow.on('closed', function () { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = null }) } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', function () { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { // On OS X it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (mainWindow === null) { createWindow() } }) // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.
Режим упаковки
-
Скопируйте electro.js из каталога сборки в dist-файл.
-
Настройте package.json
{ "name": "nw-qqMusic", 项目名称 "version": "0.0.1", 版本号 "main": "electron.js" 项目入口文件 } -
Запуск из командной строки в корневом каталоге проекта
npm run build npm run electron_build
Сравнение Nw и Electron
- nw.js ближе к Node.js по внешнему виду и сущности. nw.js напрямую наследует и использует методы запуска, разработки и работы node.js. Изменения в node.js минимальны, а изменения в электрон великолепны, увеличивая количество собственных вещей, и они значительно отличаются от node.js. nw.js является однопроцессным, как и node.js, электрон был изменен на двухпроцессный, и технология изменилась.
- Преимущества электрона: Расширение ядра с открытым исходным кодом относительно простое, а интерфейс легко настраивается В принципе, пока Интернет может это сделать, он может это сделать. На данный момент это самое дешевое кроссплатформенное техническое решение, по сравнению с другими кроссплатформенными решениями (такими как QT GTK+ и т.п.) оно более стабильно и содержит меньше ошибок, ведь пока работает оболочка браузера, не будет слишком много проблем внутри.
- Недостатки электрона:
- Карта, медленный запуск, это может быть горшком webkit. В конце концов, действительно есть много функций, которые браузер должен поддерживать.
- В дополнение к основному процессу вам может понадобиться запустить несколько вспомогательных процессов, чтобы выполнить работу. И всякий раз, когда вы запускаете новый процесс, стартовая цена — это накладные расходы памяти на nodejs!
- Пропуски кадров, это самое серьезное, но я привык к шелковистой плавности натива, под маком нормально, а под win немного скучновато.
- Пакет слишком большой. (Очевидно, что даже пустой пакет содержит как минимум размер браузера
- NW.js имеет более глубокую интеграцию библиотеки, в некотором смысле более глубокое понимание хрома и Node (для создания новых функций необходимо использовать исходный код).
- С точки зрения лицензии Electron — от Github, а NW.js — от Intel.
- nw может создавать приложения для Mac только на Mac, а на Windows можно создавать только окна. И электрон может собирать linux mac и windows в разных средах через командную строку
Документация
Связанные документы о том, как получить музыкальный интерфейс qq
blog.CSDN.net/Следующая страница 5/AR… blog.CSDN.net/Вне транса_/art… сегмент fault.com/ah/119000000…
сопутствующая информация
Электронная информация
Создайте свое первое электронное приложение
Electron: написать приложение для блокнота с нуля
Общие параметры команды электронно-упаковщика
Исследуй и думай
Как сделать, чтобы высота div адаптировалась к ширине всегда в одной пропорции, сколько способов добиться этого?
Адрес проекта и способ запуска
克隆项目地址
git clone https://github.com/majunchang/QQ-music.git
安装依赖
npm i
cd nodeServer
npm i
启动Node代理 在nodeServer文件夹下
npm run dev
本地预览 （项目的根目录下）
npm run dev
本地electron预览
npm run electron_dev
打包编译
npm run build
npm run electron_build