iFeng-News-Web-APP

【注：仅个人学习，绝不商用】

仿凤凰新闻客户端 Web APP，基本覆盖凤凰新闻所有页面（视频，音频，地图/定位，小视频，个人中心，用户鉴权），欢迎 star
共计 100+接口，80+页面，从 0 开始做 web APP
借鉴客户端是Android端的，版本是7.30.3
本项目目前只支持本地预览，需要下载到本地，并且修改src/setting.json的proxy_ip为本机 ip 地址（ipconfig/ifconfig 查询），然后安装（yarn），开启代理服务器（yarn proxy）和前端服务（yarn dev）
移动端组件使用了Vant和Quasar

Preview part of the page

见screenshot文件夹或移步百度网盘

Install the dependencies

yarn

Start the app in development mode

# nodejs proxy server
yarn proxy
# FE server
yarn dev

Project structure

Config

// settings.json
配置代理ip和端口
...
"proxy_ip": "192.168.3.240",
"proxy_ip_port": "3000",
...

// proxy/server.js
app.use(
  '/',
  createProxyMiddleware({
    router: {
      // /config=》host:https://config.nine.ifeng.com
      // 需要pathRewrite
      '/config': 'https://config.nine.ifeng.com',
      '/uc': 'https://uc.ifeng.com',
      '/api_iclient': 'https://api.iclient.ifeng.com',
      '/shankapi': 'https://shankapi.ifeng.com',
      '/comment_list': 'https://comment.ifeng.com',
    },
    target: 'https://nine.ifeng.com',
    onProxyReq(proxyReq, req, res) {
      proxyReq.setHeader('User-Agent', randomUseragent.getRandom());
    },
    pathRewrite: { '^/config': '', '^/uc': '', '^/api_iclient': '', '^/shankapi': '', '^/comment_list': '' },
    onError(err, req, res, target) {},
    onClose(res, socket, head) {},
    changeOrigin: true,
  }),
);

Proxy

proxy 文件夹是为了代理接口用的
proxy/api 是路由文件
proxy/html_parser 是转发jsonp/html页面/第三方接口，重新整理了响应体的格式，方便前端调用
proxy/public 是静态文件，比如地图依赖的数据
proxy/utils  是一些公用方法
server.js 是入口文件，做了代理接口

Views

src/pages/app  入口vue，一些公共的css
src/pages/tabs app 底部的 bottomNavItem
src/pages/home_tab_item 首页头部的左右滑动tab子项
src/pages/webview 一些子页面，在原生app里的体现就像一个webview

Build the app for production

# spa
quasar build
# electron
quasar build -m electron
# pwa
quasar build -m pwa
# capacitor
quasar build -m capacitor -T ios

Customize the configuration

See Configuring quasar.conf.js.