移动端

移动端

移动端 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

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