移动Web APP开发之实战美团外卖

移动端Web 适配篇

flex

display: -webkit-flex;

flex-direction(决定元素是横着排还是竖着排):row row-reverse column column-reverse flex-wrap(元素换行):nowrap wrap wrap-reverse justify-content(元素水平方向居中居左还是居右):flex-start flex-end center space-between space-around align-item(元素垂直方向居中居上还是居下):flex-start flex-end center baseline stretch align-self(用在子元素的css 上):auto flex-start flex-end center baselint stetch order(标识子元素的顺序): flex:flex-grow(增大方向占据的位置) flex-shrink(缩小方向的倍数) flex-basis(指定具体数值占据一个位置)

touch 事件

changedTouches touches targetTouches

300ms 点击延迟

因为有判断是否双击，所有需要一个延迟如何避免：

添加meta 标签
Tap 组件（FastClick，react-tap）

点击穿透

不要混用 touch 和 click

移动 web 开放软技能

代码管理工具

项目构建基础介绍

webpack 工具使用介绍

Sass预处理工具使用介绍

React 组件化思想

三、美团外卖移动 webApp

webpack4
Sass
React + Redux
rem
Jsbridge + ios

webpack 配置文件中，循环遍历输入 entry：

const path = require('path') 
const fs = require('fs')
const pageDir = path.resolve(__dirname, './src/page')

function getEntry() {
    let entryMap = {}

    fs.readdirSync(pageDir).forEach((pathname) => {
        let fullPathName = path.resolve(pageDir, pathname)
        let stat = fs.statSync(fullPathName)
        let fileName = path.resolve(fullPathName, 'index.js')

        if (stat.isDirectory() && fs.existsSync(filename)) {
            entryMap[pathname] = fileName
        }
    })

    return entryMap
}

循环遍历hmlt 文件多页面应用

function getHtmlArray(entryMap) {
    let htmlArray = []
    Object.keys(entryMap).forEach(key => {
        let fullPathName = path.resolve(pageDir, key)
        let fileName = path.resolve(fullPathName, key + '.html')
    })

    if (fs.existsSync(fileName)) {
        htmlArray.push(new HtmlWebpackPlugin({
            filename: key + '.html',
            template: fileName,
            chunks: [key]
        }))
    }

    return htmlArray
}

//

flexble.js 适配rem方案

@function px2rem($px) {
    $rem: 37.5;
    @return ($px / $rem) + rem;
}

将sass 的 function 应用到每个 scss 文件中 sass-resources-loader --save

{
    loader: 'sass-resources-loader',
    options: {
        resources: srcRoot + '/component/common/scss'
    }
}

vs code 插件 Px to rem with scss

热更新

npm i react-hot-loader --save

配置webpack

import React from 'react'
import Main from './Main.jsx'
import {hot} from 'react-hot-loader'

class Contianer extends React.Component {
    render() {
        return <Main/>
    }
}

export default hot(module)(Container)

关于redux 的热更新

if (module.hot) {
    module.hot.accept('./reducers/main', () => {
        const nextRootReducer = require('./reducers/main.js').default
        store.replaceReducer(nextRootReducer)
        })
}

安装 router

npm i react-router-dom react-router-redux -S

多行输入框 compositionstart 和 compositionend 事件

一行省略号：

.one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

两行省略号：

.two-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

性能优化

路由懒加载（webpack4、react-router4）：

npm install react-loadable -S

import Loadable from 'react-loadable'

const LoadableComponent = Loadable({
    loader: () => import('./my-component'),
    loading: Loading, // 占位组件
})

split-chunks-plugin 共用逻辑的抽离

css 抽离： mini-css-extract-plugin 前身是 extract-text-webpack-plugin.用于支持webpck4。npm 安装 -D

plugins: [
    // new webpack.NamedModulesPlugin(),
    // new webpack.HotModuleReplacementPlugin(),
    new MinCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css'
        })
]

// ...
use: [MinCssExtractPlugin.loader, 'css-loader']

编写 node 代理接口：

npm i express-generator -g

window scroll 事件移除和绑定的函数要是同一个。滚动事件请求数据时多次触发请求事件的bug。

打包

清空 dist 文件夹

npm i clean-webpack-plugin -D

const CleanWebpackPlugin = require('clean-webpack-plugin')

// webpack config
{
    plugins: [
    new CleanWebpackPlugin([distPath])
    ]
}

拷贝文件：

npm i -D copy-webpack-plugin

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')

const config = {
    plugins: [
        new CopyWebpackPlugin({
            from: 'src/json',
            to: 'path.resolve(distPath, 'json')',
            force: true
        })
    ]
}

Hybrid

JS bridge 原理
开发 ios webview
编写 JS API 接口
集成 ios app

JS bridge 通信原理

js 构造 iframe 请求

let iframe = document.createElement('iframe')
iframe.src = 'jsbridge://xxx?c=123'
document.body.appendChild(iframe)

Native 拦截请求，接受 js 的调用
```
#pragma mark - WKNavigationDelegate
```
(void)webView:(WKWebView )webView decidePolicyForNavigationAction: (WKNavigationAction )navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { decisionHandler(WKNavigationActionPolicyAllow); }

Native 调用 js 执行 callback

// 执行 callback
// window.CALLBACK0(110);
[self.webView evaluateJavaScript:[NSString stringWithFormat:@"window.%@(110);", callback] completionHandler:^(id _Nullable response,NSError * _Nullable error) {
NSLog(@"value: %@ error: %@", response, error)
}];

滚动顺滑：-webkit-overflow-scrolling: touch

React 全家桶安装使用指南

https://git.imooc.com/Project/coding-272/src/master/React全家桶安装使用指南.md

MrZWH / MrZWHblog