在线修图手机网页版_抠图网页_mac抠图软件_p图软件抠图_在线图片制作_网页设计模板图片

抠图网页_mac抠图软件_p图软件抠图_在线图片制作_网页设计模板图片移动版

建站首页 > 公司实力 >

在线修图手机网页版

在线修图手机网页版:潜行者——基于React的SSR框架NextJs实现h5兼容Pc端

项目默认移除PC浏览器滚动条,避免滚动条宽度影响页面布局,配置在global.scss文件,如需定制可自行修改


极简化的配置对于定制化需求是一种灾难,项目追加route.js用于区分访问对象是静态资源或页面,开发页面需手动添加页面路径,开发环境下使用nodemon监听文件修改,会触发自动重启。


在入口文件server.js判断当前访问是否属于PC环境,如果不属于正常返回页面,否则重定向到/pc路径下,并将原访问路径和参数一并带过去.在/pages/pc.tsx文件中,配置了iframe作为真实访问路径的加载窗口,凭借iframe的特性,也使上文中我们提到的使用vw作为视图单位的开发思路得以实现.同时,我们默认为PC页面添加了二维码浮窗,地址为原始访问地址,方便用户扫码访问以此提供更佳的访问体验.

是否推荐

不推荐此实现方式,h5页面本身的着力点应该是体验性,不再追求传统的SEO,以优秀的体验稳住流量,依赖微信等社交工具实现裂变传播.如果需求、业务场景比较简单,可以考虑这一实现方式,否则请使用更加专业的 来做h5业务.

关键代码
// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const qs = require('qs');
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const RouteList = require('./route');
const port = process.env.PORT || 3000;
app.prepare().then(() = {
 createServer((req, res) = {
 const parsedUrl = parse(req.url, true)
 const { pathname, query } = parsedUrl
 if (RouteList.includes(pathname)) {
 const isPc =
 !/mobile/gi.test(req.headers['user-agent']) query.mode !== 'mobile';
 const isNext = !/\/_next\/webpack-hmr/gi.test(pathname);
 const url = isPc isNext ? '/pc' : pathname === '/pc' ? '/' : pathname;
 if (isPc isNext) {
 query.mode = 'mobile';
 query.pathname = `${
 req.headers.host
 ? `${req.headers['x-forwarded-proto'] || 'http'}://${req.headers.host}`
 : '.'
 }${pathname}?${qs.stringify(query)}`;
 app.render(req, res, url, query);
 } else {
 handle(req, res, parsedUrl)
 }).listen(port, (err) = {
 if (err) throw err
 console.log(` Ready on http://localhost:${port}`);
  (责任编辑:admin)
  • 上一篇:没有了
  • 下一篇:没有了