llinzeyang / gallerybyreact Goto Github PK

链接：https://wobugaosuni.github.io/galleryByReact/

参照Materliu老师的课程制作：http://www.imooc.com/learn/507

基本需求：

• 刷新网页，每张图片随机排布，而且图片在-30度~30度之间随机旋转
• 点击位于中心的图片，翻转
• 点击除了中心外的图片，与中心图片互换位置
• 圆点导航栏：
  • 位于中心的图片所在的导航点，高亮显示。点击该圆点，图片翻转
  • 位于四周的图片所在的导航点，被点击时，与中心图片互换位置

• 使用YEOMAN搭建项目，生成项目文件、代码结构
• 使用webpack实现前端自动化
• 使用HTML5新增标签，如<section>、<figure>、<figcaption>、<nav>等
• 使用lessc编译器将less文件编译成css文件，并使用wr工具，实现chrome调试样式并映射到本地文件保存
• 使用react+ES6框架完成画廊页面制作
• 使用CSS3的transition属性，实现旋转、平移、背景色的逐渐过渡
• 使用iconfont字体文件代替图片文件，支持CSS3对字体的修饰效果
• 使用json格式存放图片信息

# 在终端执行以下命令安装环境依赖(下载慢的情况下，可以使用淘宝镜像：cnpm；或者直接在终端使用代理翻墙)
  npm install

# 安装成功后执行以下命令，即可在浏览器中打开
  npm start

# dist文件的编译，执行
  npm run dist

屏幕渲染机制有两种：

• 灰阶渲染：控制边缘亮度，所耗内存相对较低，应用于手机
• 亚像素渲染：效果更好，所耗内存相对更高，应用于Mac等

Mac上有些浅色字体图片（在上面设置了白色，可以设置为深色进行测试）在浏览器上显得较粗

解决方案：在父元素上设置属性，修改浏览器的属性：

-webkit-font-smoothing: antialiased; /* 开启chrome在Mac下字体渲染的灰阶平滑 */  <br />
-moz-osx-font-smoothing: grayscale; /* 开启firefox在Mac下字体渲染的灰阶平滑 */

• 解决方法: 规划好整个组件的排版布局，如下。通过类名控制翻转

<section> -- relative
  <section> -- relative
    <figure> -- absolute
      <img />
      <figcaption>
        <h2>(图片正面描述)</h2>
        <div>(图片背面描述)</div> -- absolute
      </figcaption>
    </figure>
  </section>
  <nav> -- absolute
    （导航点组件)
  </nav>
</section>

由于实现图片翻转有两种方式：点击图片自身 + 点击导航点
因此翻转函数写在父组件为宜，直接return一个闭包函数

• 路径错误

  

  原因：
  在本地编译时，由于运行时是在根目录，可以写绝对路径
  但在生成的网页中，项目处于二级目录下，需要将编译后的绝对地址改为相对地址
  

  1. 将绝对路径改为相对路径

  #default.js:
  `publicPath: '/assets/',` 改成：`publicPath: 'gallaryByReact/assets/',`
  
  #index.html:
  `<script type="text/javascript" src="/assets/app.js"></script>`
  改成：`<script type="text/javascript" src="assets/app.js"></script>`

  2. 在终端重新编译dist，执行：npm run dist

  3. 把修改的dist提交到gh-pages分支
     git add dist
git commit -m "change path from absolute to relative"
git subtree push --prefix=dist origin gh-pages

  
  

• 图片没有编译到dist目录

  

  原因：
  npm run dist时，没有把images目录包含进去
  "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist"
  

  解决方法：增加images目录到dist，如下
  "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist && cp -a ./src/images ./dist/"