WebApp

一、项目准备

项目结构

compnents文件夹存放整个项目公共的组件主要写的是功能和样式
assets文件夹存放样式和字体图标
api文件夹存放请求文件
pages文件夹存放项目页面
pages文件夹中没有个页面中conponents 存在的是页面级的公共组件写的是html结构
1、搭建环境
npm init 初始化项目
npm install --save-dev css-loader@4.2.1 style-loader@1.2.1 file-loader@6.0.0 url-loader@4.1.0 安装开发依赖
npm install art-template@4.13.2 swiper@6.1.1 安装线上依赖
"start": "webpack-dev-server --open chrome" 修改scripts属性值
配置webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 获取绝对路径
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  mode: 'development',
  // Webpack 入口文件
  entry: {
    index: './src/pages/index',
    destination: './src/pages/destination'
  },
  // Webpack 输出路径
  output: {
    // 输出的目录
    path: resolve('dist'),
    // 输出的文件名
    filename: 'js/[name].js'
  },
  // source-map，调试用的，出错的时候，将直接定位到原始代码，而不是转换后的代码
  devtool: 'cheap-module-eval-source-map',
  resolve: {
    // 自动补全（可以省略）的扩展名
    extensions: ['.js'],
    // 路径别名
    alias: {
      api: resolve('src/api'),
      icons: resolve('src/assets/icons'),
      styles: resolve('src/assets/styles'),
      components: resolve('src/components'),
      pages: resolve('src/pages'),
      utils: resolve('src/utils')
    }
  },
  // 不同类型模块的处理规则
  module: {
    rules: [
      // css
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 模板文件
      {
        test: /\.art$/,
        loader: 'art-template-loader'
      },
      // 图片
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: 'url-loader',
        options: {
          // 小于 10K 的图片转成 base64 编码的 dataURL 字符串写到代码中
          limit: 10000,
          // 其他的图片转移到
          name: 'images/[name].[ext]',
          esModule: false
        }
      },
      // 字体文件
      {
        test: /\.(woff2?|eot|ttf|otf)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    // 自动将依赖注入 html 模板，并输出最终的 html 文件到目标文件夹
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/pages/index/index.art',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'destination.html',
      template: './src/pages/destination/destination.art',
      chunks: ['destination']
    })
  ]
};

二、项目开发相关的笔记

1、html/body添加overflow:hidden;属性是为了解决获取scrollTop属性值存在的兼容性问题，防止出现页面出现滚动条。
2、js中引入对应的css文件，然后在art中引入其他模板文件，最后在index.js引入对应的js文件
3、幻灯片

index/index.art文件中引入幻灯片art模板（替换为loading组件实现加载效果）
index/slider/index.js文件中引入slider.css文件以及swiper组件提供的css和js文件
index/index.js文件中引入幻灯片组件
使用ajax获取数据
- 引入slider.art模板
- 引入api/getData.js模块
- 获取index.art文件中的元素，然后替换innerHTML属性值。
- 将获取的数据传给slider模板
  
  image.png
  
  image.png

4、tabbar组件

使用原始模板语法，通过传递参数控制tabbar激活样式

image.png

5、返回顶部组件

通过添加删除一个特殊类，控制元素的隐藏和显示，默认是隐藏的
image.png
滚动条滚过一个页面的高度window.innerHeight时，显示按钮

6、代码优化：将header组件和返回顶部组件功能相同的代码，提取出来，封装为一个公共类
7、目的地页

引入公共的searchbox组件，通过传递参数placeholder设置提示文字
text-shadow ???
tab和content组件中定义各自的方法，在父组件中调用
tab组件中定义两个方法：
（1）一个是根据索引添加对应的active类名，设置特殊样式；

（2）一个是根据索引发送数据请求，不处理获取的数据，直接将结果返回出去即可。

image.png

content组件中，定义两个个方法
（1）将获取的数据中填充到模板中

image.png

（2）没有获取到数据时，显示loading组件

image.png

main组件中，通过事件代理，左侧列表绑定点击事件，在获取数据填充到content模板之前，先调用loading组件，提升用户体验

image.png
由于每次切换都会发送请求，但由于请求是异步的，先发送的请求不一定先返回数据，所以可能会导致bug出现。
解决方式：使用abort方法终止上一次请求。

image.png
使用sessionStorage做缓存
返回顶部，滚动超出content组件可视区域高度scrollContainer.offsetHeight，显示按钮