移动端
移动端 Web 开发
自动轮播效果
- HTML
- 轮播使用的标签是 ul, ul 中的 li 默认是竖起来排列的, 通过 CSS 设置为左浮动将他们横向排列
- JS
- 为了实现左右的循环轮播, 将第 1 张复制到最后, 将原来的最后复制到第 1 个之前, 这样总的轮播是从第 2 个开始的
- 使用 zepto 库, 使用 setInterval 定时器每个一段时间使用 zepto 的 fx 动画库将 ul 平移(这是 left 属性, 需要先将 ul 的 position 设置为 relative), 最后的回调判断是否是最后一张或者是第一张, 重置索引实现循环轮播
- 标识的设置
- 将所有标签的 class 去掉, 在将当前的设置为激活
node 安装与配置
- 安装 nvm (类似于 pyenv 管理多版本 node)
- nvm 命令
nvm install node
: 安装最新版本的 nodejsnvm install stable
: 安装最新稳定的 nodejsnvm 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
- 基本命令
npm install === yarn
-
npm install taco --save === yarn add taco
-
npm uninstall taco --save === yarn remove taco
npm install taco --save-dev === yarn add taco --dev
-
npm update --save === yarn upgrade
第三方库
- zepto.js: 移动端的 jQuery, 与 jQuery 的思想不同, 它是分模块的
React Native 安装与简单使用
- 安装
- 配置好 node 环境
yarn add react-native-cli
- 使用
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
cd yourproject
react-native run-ios
XBuilderX 打包网站成 App
- 一般步骤
- 下载 XBuilder, 并注册账号
- 打开 XBuilder, 创建一个 H+ 项目
- 将做好的网站放进来
- 点击 manifest.json 设置配置信息
- 右键项目目录, 发行
- 提示
- 注意
- 在平时做移动端的 H5 App 时, 不要将前端的东西放到 App 上, 而是让 App 指向一个网路链接, 否则一定会出现跨域这个坑爹的问题
- 下面谈一谈跨域的问题
- 现代的浏览器都提供了安全机制(Chrome 最为严格, Firefox比较宽松), 在跨域访问的时候如果出现 Origin: null 表示你只从本地打开的, 在服务器端的 response 中 Access-Control-Allow-Origin 中设置为 null, 或者 *, 或者客户端的域名即可, 但是如果需要 Cookie 和 Session 等状态信息的话, 抱歉, 网上虽然有很多方法说 ajax 可以跨域发送 cookie, 但是并不是每一次, 每一个人都那么好运的; 如果服务器是 Django, 使用 corsheaders 组件也是没有作用的。
- 网上提到要发送 Cookie, 需要在服务器端设置 Access-Control-Allow-Credentials = true, 在前端的 ajax 也要使用 withCredentials = true 才行
- 不过我们也可以换一种思路, 在移动 APP 的登陆界面上我们放一个 form 表单, 表单的提交是没有跨域问题的
vue
- 下载
yarn global add vue
yarn global add vue-cli
- 指令
- 生命周期
- 路由(vue-router)
- 父子组件传值
- 过滤器
- .vue 定制的模板
- 模板渲染
- vue-resource: 发送 ajax 的 get, post, jsonp
- 全局配置
- 配置到 Vue 对象上, 如
Vue.http.options.root = "http://localhost:8080/"
Vue.http.options.emulateJSON = true
- 过渡动画(主要是在元素出现和消失的时候, 配合 v-if 和 v-show)
- vue 自带的(4 个节点 enter, leave-to, enter-active, leave-active)
- animate.css 第三方, vue 通过一些指令指定特定的 css
- 在过渡的不同节点定义钩子函数, beforeEnter, enter, afterEnter
- beforeEnter: 设置默认样式
- enter: 一定是这样的结构, 定好了
enter(el, after){
// 强制要求
el.offsetWidth
// after 就是afterEnter函数, 在enter最后调用
after()
},
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
- 一个目录只有一个组件, 在该目录下存放该组件需要的资源