企业官网重构 - 从传统网站到多端适配
项目背景
去年接到了一个精密科技公司的官网重构项目。客户原来的网站是几年前做的，PC端访问还行，但在手机上看效果很差，文字太小，图片变形，导航点不到。客户希望新网站能在电脑和手机上都有好的体验，最好还能做成小程序。
技术选型
经过对比，我选择了uni-app作为开发框架。原因有几点：
第一，uni-app一套代码可以编译成H5网站、微信小程序、安卓APP，满足客户的多端需求。
第二，uni-app基于Vue语法，我之前学过Vue，上手比较快。
第三，uni-app有丰富的组件库，开发效率高。
后端用了HKCMS，这是一个开源的PHP内容管理系统，提供现成的文章管理和API接口，省去了自己写后台的时间。
主要功能模块
这个项目主要包含以下几个功能模块：
一、首页展示
首页包含了头部轮播图、公司简介入口、核心产品展示、新闻动态列表、底部导航。设计风格偏商务，主色调用了科技蓝，整体简洁大气。
二、关于我们
这个页面展示公司的发展历程、企业文化、荣誉资质等内容。布局用了左右分栏的方式，左边是文字介绍，右边是公司照片。
三、产品中心
产品中心是网站的核心板块。产品按类别分组，用户可以点击分类筛选产品。每个产品都有单独的详情页，展示产品图片、参数规格、应用场景等信息。
四、新闻动态
新闻动态用于发布公司新闻和行业资讯。列表页展示标题和发布时间，详情页展示完整内容。后台可以方便地增删改查。
五、联系我们
这个页面展示了公司的地址、电话、邮箱，还嵌入了百度地图。用户可以直接拨打电话或复制邮箱。
开发过程中的难点
开发过程中遇到了几个技术难点：
第一个是响应式布局。为了适配不同尺寸的屏幕，我用了flex布局和rem单位，配合媒体查询做断点调整。
第二个是图片优化。产品图片比较多，如果不处理加载会很慢。我用了图片懒加载，只有滚动到可视区域才加载，还做了图片压缩。
第三个是小程序兼容。有些CSS属性在浏览器里正常，但在小程序里不生效。比如某些伪类选择器，后来换成了组件模拟。
项目成果
项目从接到上线花了大约三周时间。最终交付的成果包括：
一套PC端和手机端自适应的H5网站
一个微信小程序版本
一个安卓APP安装包
客户对最终效果很满意，网站上线后访问量稳步增长。通过这个项目，我完整走了一遍从需求分析到设计开发再到上线交付的全流程，积累了宝贵的实战经验。
经验总结
做企业官网类的项目，有几点经验可以分享：
第一，前期沟通要充分。了解客户想要什么样的风格、需要哪些功能模块，避免后期返工。
第二，移动端体验要重视。现在大部分用户用手机浏览，移动端的适配一定要做好。
第三，后台要易用。客户需要自己更新新闻和产品，后台操作要简单直观。
项目背景
去年接到了一个精密科技公司的官网重构项目。客户原来的网站是几年前做的，PC端访问还行，但在手机上看效果很差，文字太小，图片变形，导航点不到。客户希望新网站能在电脑和手机上都有好的体验，最好还能做成小程序。
技术选型
经过对比，我选择了uni-app作为开发框架。原因有几点：
第一，uni-app一套代码可以编译成H5网站、微信小程序、安卓APP，满足客户的多端需求。
第二，uni-app基于Vue语法，我之前学过Vue，上手比较快。
第三，uni-app有丰富的组件库，开发效率高。
后端用了HKCMS，这是一个开源的PHP内容管理系统，提供现成的文章管理和API接口，省去了自己写后台的时间。
主要功能模块
这个项目主要包含以下几个功能模块：
一、首页展示
首页包含了头部轮播图、公司简介入口、核心产品展示、新闻动态列表、底部导航。设计风格偏商务，主色调用了科技蓝，整体简洁大气。
二、关于我们
这个页面展示公司的发展历程、企业文化、荣誉资质等内容。布局用了左右分栏的方式，左边是文字介绍，右边是公司照片。
三、产品中心
产品中心是网站的核心板块。产品按类别分组，用户可以点击分类筛选产品。每个产品都有单独的详情页，展示产品图片、参数规格、应用场景等信息。
四、新闻动态
新闻动态用于发布公司新闻和行业资讯。列表页展示标题和发布时间，详情页展示完整内容。后台可以方便地增删改查。
五、联系我们
这个页面展示了公司的地址、电话、邮箱，还嵌入了百度地图。用户可以直接拨打电话或复制邮箱。
开发过程中的难点
开发过程中遇到了几个技术难点：
第一个是响应式布局。为了适配不同尺寸的屏幕，我用了flex布局和rem单位，配合媒体查询做断点调整。
第二个是图片优化。产品图片比较多，如果不处理加载会很慢。我用了图片懒加载，只有滚动到可视区域才加载，还做了图片压缩。
第三个是小程序兼容。有些CSS属性在浏览器里正常，但在小程序里不生效。比如某些伪类选择器，后来换成了组件模拟。
项目成果
项目从接到上线花了大约三周时间。最终交付的成果包括：
一套PC端和手机端自适应的H5网站
一个微信小程序版本
一个安卓APP安装包
客户对最终效果很满意，网站上线后访问量稳步增长。通过这个项目，我完整走了一遍从需求分析到设计开发再到上线交付的全流程，积累了宝贵的实战经验。
经验总结
做企业官网类的项目，有几点经验可以分享：
第一，前期沟通要充分。了解客户想要什么样的风格、需要哪些功能模块，避免后期返工。
第二，移动端体验要重视。现在大部分用户用手机浏览，移动端的适配一定要做好。
第三，后台要易用。客户需要自己更新新闻和产品，后台操作要简单直观。
