移動端

時間 2019-11-10

標籤移動欄目無線简体版

原文原文鏈接

移動端

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

一個目錄只有一個組件, 在該目錄下存放該組件須要的資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。