目录
Vue加载阳光沙滩文章适配移动端
背景
阳光沙滩提供的api中返回文章详情，由于网页没有适配移动端需要app开发者自己实现，最简单方式就是康师傅直接适配移动端，我们使用文章id直接访问就行了。移动端原生显示web本来不太适用，下面我们开始最简单网页+webview加载文章详情开发，使用vue，和简单媒体查询。看看效果。
工具
我使用的是JetBrains WebStorm 2019.2.4 x64
创建项目
创建一个vue项目，创建完成后，我们跑起来先。
这个很简单，跑起来了，安装我们需要的依赖
shell
复制代码
npm i vue-markdown-loader -D
npm i vue-loader vue-template-compiler -D继续安装语法高亮
shell
复制代码
npm install highlight.js -D
npm install github-markdown-css网络请求
shell
复制代码
npm install axios配置loader和网络
在项目根目录下创建一个配置文件vue.config.js，内容如下，直接复制
js
复制代码
chainWebpack: (config) => {
config.module
.rule('markdown')
.test(/\.md$/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
preset: 'default',
breaks: true,
raw: true,
typographer: true,
})
},
module.exports = {
//打包到手机上面跑，需要做资源路径定位，下面这个代码处理
publicPath : './',
devServer: {
}
}把康师傅之前提供的网络请求封装文件丢进去。
api文件直接写就行了，内容如下，只有一个接口
js
复制代码
import http from "./http";
export const success_code = 10000;
export const BASE_URL = 'https://api.sunofbeach.net';
//获取文章详情，包含标题，内容，用户信息
export const getArticleDetail2 = (articleId) => {
return http.requestGet(BASE_URL + '/ct/article/detail/' + articleId);
}加载文章详情
进入App.vue，这里就是我们文章详情的页面，修改代码，身体部分是这样的
html
复制代码
<template>
<div id="app">
<div class="container">
<div class="markdown-body sob-article-content" v-html="article_content">
</div>
</div>
</div>
</template>就这？没错就这。
剩下的就是网络请求
js
复制代码
mounted() {
this.httpGetArticle();
highlightCode();
},
methods: {
httpGetArticle() {
//1422385783846830082 1411666843780882434
api.getArticleDetail2(this.articleId).then(resp => {
if (api.success_code === resp.code) {
this.article_content = resp.data.content;
}
});
}
}我们在路径中获取文章id
js
复制代码
created() {
const url = window.location.href;
console.log("获取完整url:" + url);
const para = url.split('?')[1];
console.log("获取第一个参数:" + para);
this.articleId = para.split('=')[1];
console.log("获取数值 " + this.articleId);
},语法高亮
js
复制代码
// 代码高亮
// 其他元素使用 github 的样式
import 'github-markdown-css'
import 'highlight.js/styles/default.css'
import hljs from 'highlight.js'
const highlightCode = () => {
const preEl = document.querySelectorAll('pre')
preEl.forEach((el) => {
hljs.highlightBlock(el)
})
}
挂载和更新调用这个就ok，直接使用你的高级技能CV
mounted，updated -> highlightCode();样式部分，重点是媒体查询设置
css
复制代码
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
margin-top: 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 750px;
min-height: 600px;
width: 100%;
margin: 0 auto;
padding: 20px 20px;
background-color: white;
}
.image-wrap img {
max-width: 100%;
}
.sob-article-content {
max-width: 100%;
}
.sob-article-content pre code {
max-width: 100%;
}
/*img 设置max-width有效*/
.sob-article-content img {
margin-top: 10px;
max-width: 100%;
cursor: zoom-in;
}
/* 大于等于750px作用，同理max-width为小于等于下作用 不同屏幕的特殊处理，下面是例子 */
@media (min-width: 750px) {
.title {
font-size: 24px;
}
}
@media (max-width: 750px) {
.summary {
font-size: 14px;
}
}
</style>
限制最大宽度750px，viewport使用，这是我一个前端朋友给我代码，具体也没告诉什么意思，自己百度吧，他把代码给我之后就没说了，让我自己体会，我就纳闷，为啥设置一个固定值，这样到了手机不就很大了吗，直到我跑起来之后，emmmmm
js
复制代码
head() {
return {
title: 'sob文章详情',
meta: [
{
hid: 'viewport',
name: 'viewport',
content: 'width=device-width,initial-scale=1.0'
}
]
}
}
完整的代码
html
复制代码
<template>
<div id="app">
<div class="container">
<div class="markdown-body sob-article-content" v-html="article_content">
</div>
</div>
</div>
</template>
<script>
import * as api from './api/api'
// 代码高亮
// 其他元素使用 github 的样式
import 'github-markdown-css'
import 'highlight.js/styles/default.css'
import hljs from 'highlight.js'
const highlightCode = () => {
const preEl = document.querySelectorAll('pre')
preEl.forEach((el) => {
hljs.highlightBlock(el)
})
}
export default {
name: 'App',
created() {
const url = window.location.href;
console.log("获取完整url:" + url);
const para = url.split('?')[1];
console.log("获取第一个参数:" + para);
this.articleId = para.split('=')[1];
console.log("获取数值 " + this.articleId);
},
data() {
return {
article_content: '',
articleId: '',
}
},
head() {
return {
title: 'sob文章详情',
meta: [
{
hid: 'viewport',
name: 'viewport',
content: 'width=device-width,initial-scale=1.0'
}
]
}
},
mounted() {
this.httpGetArticle();
highlightCode();
},
methods: {
httpGetArticle() {
//1422385783846830082 1411666843780882434
api.getArticleDetail2(this.articleId).then(resp => {
if (api.success_code === resp.code) {
this.article_content = resp.data.content;
}
});
}
},
updated() {
highlightCode();
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
margin-top: 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 750px;
min-height: 600px;
width: 100%;
margin: 0 auto;
padding: 20px 20px;
background-color: white;
}
.image-wrap img {
max-width: 100%;
}
.sob-article-content {
max-width: 100%;
}
.sob-article-content pre code {
max-width: 100%;
}
/*img 设置max-width有效*/
.sob-article-content img {
margin-top: 10px;
max-width: 100%;
cursor: zoom-in;
}
/* 大于等于750px作用，同理max-width为小于等于下作用 不同屏幕的特殊处理，下面是例子 */
@media (min-width: 750px) {
.title {
font-size: 24px;
}
}
@media (max-width: 750px) {
.summary {
font-size: 14px;
}
}
</style>
总结
1、就是有手就行
2、前端不会，就只能问下朋友，Google一下，慢慢摸索
3、之前学习过康师傅前端，有一点认识
4、网络请求，数据显示这部分不难，主要是如何适配手机
5、就是我朋友给我的代码加上那句媒体查询，剩下都是查回来的
6、这个是加载了内容区，剩下的自己可以加头像，个人信息，评论什么的，动手就行了
一个诡异的地方，如果我只是简单使用hljs高亮代码，代码会超越限制的750px，无法适配，后来我不知道在哪里查到markdown-body这个组件，然后配合
js
复制代码
import 'github-markdown-css'就做好了宽度的限制，如果有前端大佬，可以科普下，感谢、
整个过程的重点就是一个字：查，各种查，然后尝试。。。。。。我太菜了[菜狗]
如何给手机用？
不知道上面的代码中，是否留意到了这里vue.config.js
js
复制代码
module.exports = {
//打包到手机上面跑，需要做资源路径定位，下面这个代码处理
publicPath : './',
devServer: {
}
}这是我查回来，不同cli版本打包给手机使用不同的，重点是资源的定位问题publicPath
还是老样子，直接点击build打包，得到dist中的文件，放到安卓的asset目录中，如果没有这个目录，创建一个就行。给出我的例子
js
复制代码
webView.loadUrl("file:///android_asset/vue/index.html?id="+ id)这样就可以本地加载文章了，当然也可以发布到自己的服务器中，做一个开关，当需要切换远程的时候就切过来就行了，这样方便在线改需求（修复bug）
比如我部署的：传送门点击
地址就是http://api.moonlightshadow.cn/?id=康师傅api提供文章id，如果你想白嫖，直接用这个地址就行了。
希望大家都可以写出属于自己的沙滩，拿着它摸鱼也好，面试也行。
这是我写的阳光沙滩的手机端效果。
体验下载地址点我下载
本文由 断点 原创发布于 阳光沙滩 ， 未经作者授权，禁止转载
评论
0 / 1024
学习一波
2021-08-16 04:20回复
断点回复@夙夜星辰叹： 你熟悉前端，对你来说比较简单
2021-08-16 04:39回复
夙夜星辰叹回复@断点： 怎么判断是手机浏览器请求，还是电脑浏览器请求？
2021-08-18 09:43回复
断点回复@夙夜星辰叹： 上面代码方式不需要判断手机的，如果你需要指定是否手机，可以通过user agent，里面有ios和Android的，就是移动端
2021-08-18 10:00回复
推荐文章
linux服务器的日志、容器清理
本手册提供了一套全面的Linux服务器磁盘清理与排查方法，帮助用户高效管理磁盘空间。通过查看磁盘使用情况、分析Docker占用、清理无用容器和日志，确保系统运行流畅。适合需要优化服务器性能的运维人员参考。
记给网站接入图形验证码
本文分享了如何为个人站点添加图形验证码以提升安全性，详细介绍了使用第三方接口实现验证码功能的过程，并通过代码示例展示了具体实现方式。对于关注网站安全的开发者来说，这篇文章提供了实用的参考价值。
Java开发环境搭建
本文是一份详细的Java开发环境搭建指南，涵盖了Java的发展历史、版本选择及安装配置过程。无论你是初学者还是有经验的开发者，都能从中找到实用的信息和步骤，帮助你快速上手Java开发。
Vue3.js项目的创建
本文详细介绍了如何使用Vue3创建项目，包括Node.js的安装和配置，以及项目的初始化过程。适合初学者学习如何快速搭建Vue3开发环境，并推荐了相关课程供进一步学习。
Network Tools : 您的运维“助手”升级了
Network Tools是一款专为解决运维难题而设计的软件，集设备管理、配置备份、性能监控和告警处理于一体。通过统一的工作台，帮助运维人员更高效地管理资产、定位故障并提升团队协作效率。无论是设备在线状态还是具体问题排查，都能得到全面支持。
Ubuntu 软件安装与彻底卸载指南
本文详细介绍了在 Ubuntu 系统中如何规范安装和彻底卸载 .deb 格式软件，包括依赖修复、残留清理以及图形化工具推荐，适合需要维护系统环境的用户。
JavaWeb开发客户程序更新特殊环境下的骚操作
本文分享了在无外网环境下，如何利用Docker和docker-compose实现高效部署的实战经验。通过基础镜像和本地jar包挂载的方式，解决了内网环境下的依赖问题，适合需要灵活部署方案的技术人员参考。
Linux 防火墙完全指南：从原理到多发行版实战
本文全面解析Linux防火墙的底层原理与主流工具配置，涵盖UFW、firewalld、iptables、nftables等方案，适合不同发行版用户。从基础概念到生产环境加固建议，助你掌握核心安全策略，确保服务器与网络的安全运行。
水上派对英语单词篇
探索FLOATOPIA水上派对的完整指南，涵盖签到流程、场地指引、安全须知、活动安排及夜场舞会等实用英语词汇与对话。无论是初学者还是老手，都能轻松掌握关键术语，享受完美水上体验。
麒麟操作系统下使用 virt-customize 重置虚拟机 root 密码实战
本文详细介绍了在麒麟操作系统环境下使用 virt-customize 工具重置 KVM 虚拟机 root 密码的完整流程，包含安装步骤、常见问题及解决方案，帮助运维人员高效处理密码遗忘或批量初始化场景，避免数据丢失。
浅析JS预编译-函数篇
本文详细讲解了JavaScript中函数的预编译过程，包括AO对象的创建、变量和函数声明的提升，以及执行阶段的变化。适合初学者了解JS执行机制，帮助深入理解代码运行逻辑。
访问Github的另一种姿势
本文介绍了如何通过Watt ToolKit等工具加速访问Github，适合对网络技术感兴趣的读者。内容涵盖工具介绍、下载和使用方法，以及一些实用技巧，值得一看。
使用Gulp压缩JS
本文详细介绍了如何使用Gulp压缩JavaScript文件，特别是支持ES6语法的处理方法。通过实际操作和效果对比，帮助开发者提升代码性能，适合对前端自动化工具感兴趣的读者。
使用Gulp压缩CSS
本文详细介绍了如何使用Gulp工具对CSS文件进行压缩，提升网页加载速度。适合需要优化静态资源的开发者，提供清晰的步骤和示例，帮助快速上手。
从0部署Nuxtjs项目
本文详细介绍了如何将Nuxt.js项目部署到公网，涵盖Node.js安装、环境配置、源码上传及使用PM2启动服务的全过程，适合开发者学习和实践。
Linux 命令行美化利器：tree 命令完全指南（安装 + 全部参数详解）
掌握 Linux 下的 `tree` 命令，快速直观地查看目录结构。本文详细讲解安装方法、参数含义及实战场景，适合开发者和系统管理员提升工作效率。
Linux常用命令（一）
本文详细介绍了Linux基础命令，包括文件操作、系统显示、网络状态、软件包管理等，适合初学者学习和查阅，是掌握Linux系统的实用指南。
大模型推理参数解码：温度、Top-p 与核采样如何塑造生成文本的灵魂
探索大语言模型的采样参数如何塑造生成内容，从温度到Top-p，从惩罚机制到熵控制，揭示背后的信息论原理与实践策略。了解如何通过参数调优，让AI既保持知识的严谨，又拥有创造力的自由。
记从0使用Claude code写代码
本文介绍了如何使用Claude Code搭配DeepSeek进行编程，详细讲解了安装Node.js、全局安装Claude、配置模型以及使用方法。对于开发者来说，这是一份实用的技术教程，尤其适合对AI编程工具感兴趣的读者。
Android-Studio-Gradle同步失败-Library为null的通用排查指南
遇到 Android Studio Gradle Sync 失败时，不要轻易删除全局缓存。本文详细解析了错误原因，并提供了一系列精准的排查步骤和解决方案，帮助开发者快速定位并解决问题，提升开发效率。
PHP实现密码加密
本文详细介绍了Bcrypt密码加密技术及其在PHP中的应用，帮助开发者提升用户密码的安全性。通过实际代码示例，展示了如何使用password_hash和password_verify函数进行密码加密与验证，是学习网络安全知识的实用指南。
WordCloud效果，滚动标签
本文详细介绍了如何在Vue项目中集成WordCloud组件，包括依赖安装、属性配置和使用方法。适合开发者学习如何实现数据可视化功能，提升项目交互体验。
从0使用WordPress搭建一个优美的网站
本文详细介绍了如何使用WordPress搭建一个美观的网站，从安装到主题配置和功能拓展，为读者提供了实用的操作指南。无论是初学者还是有一定经验的开发者，都能从中获得有价值的参考。
JS实现在网站底部添加运行时间
想知道如何在网站底部显示运行时间？本文详细讲解了通过JavaScript实现这一功能的方法，包括时间计算逻辑和代码实现。适合前端开发者学习参考，轻松为网站添加实用功能。
在Vercel上部署Hexo博客
本文详细介绍了如何在Vercel上快速部署Hexo博客，无需后端服务即可实现高效发布。相比传统方式，省去了手动生成和上传静态文件的步骤，更加便捷。适合想要搭建个人博客的开发者参考。
从0搭建一个Hexo博客
本文详细介绍了Hexo博客框架的使用方法，从安装到部署全流程讲解，适合想快速搭建个人博客的技术爱好者。内容清晰易懂，是入门Hexo的理想指南。
离线设备激活方案：古老的 Windows 光盘激活，离线算法授权等
本文深入解析了离线激活的核心原理与实现方式，从历史案例到现代技术，全面剖析了如何在无网络环境下确保软件授权的安全性。通过设备指纹、授权文件校验等手段，为开发者提供了可复用的架构设计思路，适用于工业、医疗等对网络依赖较低的场景。
Hexo实现生成站点地图
想为你的Hexo博客添加站点地图功能吗？本文详细介绍了如何通过安装插件和配置文件来实现，适合没有内置该功能的新主题或自定义主题的用户。简单步骤助你提升搜索引擎优化效果。
Hexo实现代码压缩
本文分享了如何通过Hexo插件优化博客性能，详细介绍了安装和配置过程，帮助提升网页加载速度。适合对网站优化感兴趣的开发者阅读。
记一次 GitHub 幽灵协作者大清洗：强制重写 Git 历史与穿透 CDN 缓存实践
本文详细讲解了如何解决GitHub上出现的‘幽灵协作者’问题，通过重写Git历史和穿透CDN缓存，彻底清理错误提交记录。适合开发者学习如何高效管理项目历史与优化仓库信息。
10