移动端

移动端 Web 开发

自动轮播效果

HTML
1. 轮播使用的标签是 ul, ul 中的 li 默认是竖起来排列的, 通过 CSS 设置为左浮动将他们横向排列
JS
1. 为了实现左右的循环轮播, 将第 1 张复制到最后, 将原来的最后复制到第 1 个之前, 这样总的轮播是从第 2 个开始的
2. 使用 zepto 库, 使用 setInterval 定时器每个一段时间使用 zepto 的 fx 动画库将 ul 平移(这是 left 属性, 需要先将 ul 的 position 设置为 relative), 最后的回调判断是否是最后一张或者是第一张, 重置索引实现循环轮播
3. 标识的设置
  - 将所有标签的 class 去掉, 在将当前的设置为激活

node 安装与配置

安装 nvm (类似于 pyenv 管理多版本 node)
- nvm 命令
  - nvm install node: 安装最新版本的 nodejs
  - nvm install stable: 安装最新稳定的 nodejs
  - nvm ls: 列出当前安装的 nodejs 版本, 加星号为当前正在使用的nodejs版本
  - nvm use ...: 使用哪个 nodejs 版本
安装 nrm (用于管理 npm 安装的默认源), npm install -g nrm
- nrm ls: 列出所有可用的源, 其中加了 * 表示当前正在使用的默认源
- nrm use taobao: 将默认源转为 taobao
安装模块
- 使用 npm
  - npm install -g ...: 全局模块, 放在 /usr/local 下
  - npm install ...: 本地模块, 放在当前目录下
  - 使用 npm 的缺点很明显, 速度慢
- 使用 yarn
  - npm install -g yarn 安装 yarn
  - 配置 yarn 源
    - yarn config set registry https://registry.npm.taobao.org --global
    - yarn config set disturl https://npm.taobao.org/dist --global
  - 基本命令
    1. npm install === yarn
    2. - npm install taco --save === yarn add taco
    3. - npm uninstall taco --save === yarn remove taco
    4. npm install taco --save-dev === yarn add taco --dev
    5. - npm update --save === yarn upgrade

第三方库

zepto.js: 移动端的 jQuery, 与 jQuery 的思想不同, 它是分模块的

React Native 安装与简单使用

安装
1. 配置好 node 环境
2. yarn add react-native-cli
使用
1. react-native init yourproject --version 0.44.3
  - 注意: 当前的工作目录下要没有 yourproject 目录; 一定要加上 --version 0.44.3, 如果不加上去默认是生成最新版本的工程, 老的电脑可能因为报错而无法运行; 如果你使用的 zsh 安装的 node, 那么请在系统自带的 Terminal 中设置启动的 shell 为登录 shell, 因为 react-native 的一些操作需要打开 Terminal 执行 node相关命令, 主要就是执行 package.sh, 否则模拟器会出现 bundle 之类的错误; 也可以尝试一下 react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
2. cd yourproject
3. react-native run-ios

XBuilderX 打包网站成 App

一般步骤
1. 下载 XBuilder, 并注册账号
2. 打开 XBuilder, 创建一个 H+ 项目
3. 将做好的网站放进来
4. 点击 manifest.json 设置配置信息
5. 右键项目目录, 发行
提示
- 发行 iOS 时提示需要证书和私钥, 如果有个人的开发者账号, 直接填写即可, 但是如果没有的话, 可以通过 appuploader 生成证书和私钥, 参考 https://blog.csdn.net/QQ317968200/article/details/80061001
注意
1. 在平时做移动端的 H5 App 时, 不要将前端的东西放到 App 上, 而是让 App 指向一个网路链接, 否则一定会出现跨域这个坑爹的问题
2. 下面谈一谈跨域的问题
  1. 现代的浏览器都提供了安全机制(Chrome 最为严格, Firefox比较宽松), 在跨域访问的时候如果出现 Origin: null 表示你只从本地打开的, 在服务器端的 response 中 Access-Control-Allow-Origin 中设置为 null, 或者 *, 或者客户端的域名即可, 但是如果需要 Cookie 和 Session 等状态信息的话, 抱歉, 网上虽然有很多方法说 ajax 可以跨域发送 cookie, 但是并不是每一次, 每一个人都那么好运的; 如果服务器是 Django, 使用 corsheaders 组件也是没有作用的。
  2. 网上提到要发送 Cookie, 需要在服务器端设置 Access-Control-Allow-Credentials = true, 在前端的 ajax 也要使用 withCredentials = true 才行
  3. 不过我们也可以换一种思路, 在移动 APP 的登陆界面上我们放一个 form 表单, 表单的提交是没有跨域问题的

vue

下载
- yarn global add vue
- yarn global add vue-cli
指令
生命周期
路由(vue-router)
父子组件传值
过滤器
.vue 定制的模板
模板渲染
vue-resource: 发送 ajax 的 get, post, jsonp
全局配置
- 配置到 Vue 对象上, 如
  1. Vue.http.options.root = "http://localhost:8080/"
  2. Vue.http.options.emulateJSON = true
过渡动画(主要是在元素出现和消失的时候, 配合 v-if 和 v-show)
1. vue 自带的(4 个节点 enter, leave-to, enter-active, leave-active)
2. animate.css 第三方, vue 通过一些指令指定特定的 css
3. 在过渡的不同节点定义钩子函数, beforeEnter, enter, afterEnter
  - beforeEnter: 设置默认样式
  - enter: 一定是这样的结构, 定好了
```
enter(el, after){
  // 强制要求
  el.offsetWidth
  // after 就是afterEnter函数, 在enter最后调用  
  after()
},
```
  - afterEnter:
```
afterEnter(el){
  this.flag = !this.flag
}
```

打包工具

webpack

下载
- yarn global add webpack
- yarn global add webpack-cli
常用命令
- webpack entry.js output.js --mode [development|production]

webpack-dev-server

下载
- yarn global add webpack-dev-server
常用命令
- webpack-dev-server --hot --mode [development|production] --open --port 8080 --contentBase src

配置文件

在项目的根目录下创建 webpack.config.js, 例如


const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/main.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /.css/, use: ['style-loader', 'css-loader']},
            { 
                test: /.(jpg|jpeg|png|tiff|gif)/, 
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8080
                    }
                }
            }
        ]
    },
    
}

有了配置文件就可以直接使用 webpack 或者 webpack-dev-server 命令

调试配置

下载安装 ghostlab
下载 iTools 进行屏幕投影

vue 项目目录结构

dist
src
    App.vue: app 组件
    api: 请求数据
        config.js: 配置信息, 类似于 django 中的 settings.py
        goods.js: 这里只是举了一个例子, 请求什么数据创建对应的 js
    components: 存放组件
        common: 存放公共组件(比如轮播图, 进度条)等到哪里都可以用的组件, 与业务无关
        recommend: 和 search, suggest, good-list 类似, 存放项目中耦合的组件, 有些组件很大, 可能就是一个页面, 有一些是子组件, 都是与业务相关的组件
        search:
        suggest:
        good-list: 
    main.js: 入口 js
    router:
        index.js 路由
    store: vuex
    static:
        js
        css
        images
        medias
    libs: 第三方拷贝过来的
        
webpack.config.js

一个目录只有一个组件, 在该目录下存放该组件需要的资源