關於技術選型

之前一直做APP開發，雖然期間做過幾個簡單前端和混合開發項目，懂得一些前端的基本知識，但畢竟不是專業，所以本次選型就按照目前比較流行的或者自己感興趣的來吧
1.因爲之前使用過Vue，並且考慮到現在前端框架的流行程度，所以框架選用Vue
2.因爲是做微信公衆號開發，並且考慮到開發週期和自己的CSS水平，選擇了VUX作爲UI組件庫，VUX是基於weui進行開發的
3.網絡請求方面，因爲之前一直使用ajax所以選擇axios，坦白來說好像也只用過axios，如果大神們有什麼更好的記得推薦
4.關於css預編譯，之前一直使用less，但最近Sass貌似有點兒火，所以決定嘗試一下Sass
5.關於IDE的選擇，最近VS code比較火，所以決定嘗試一下

開發前準備

安裝和配置VS Code

去官網下載對應版本安裝官網地址

關於使用過程的問題

以下問題都在安裝完對應擴展程序後，通過文件—首選項—設置—用戶設置進行相關設置
安裝擴展程序分方式如下圖

漢化問題
- 安裝擴展程序Chinese
- 【Ctrl+Shift+p】在輸入框中輸入“configure display language”
- 重啓VS

vue ESLint語法檢測問題
安裝擴展程序 ESLint和Prettier - Code formatter，並在Setting.json 中以下配置

  "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  },
  {
    "language": "html",
    "autoFix": true
  } ]，
    // #每次保存的時候自動格式化 
"editor.formatOnSave": true,
// #每次保存的時候將代碼按eslint格式進行修復
"eslint.autoFixOnSave": true,
//  #讓prettier使用eslint的代碼格式進行校驗 
"prettier.eslintIntegration": true,
//  #去掉代碼結尾的分號 
"prettier.semi": false,
//  #使用帶引號替代雙引號 
"prettier.singleQuote": true,
//  #讓函數(名)和後面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true

修改字體大小，保存自動格式化

 {
"editor.fontSize": 16,
"window.zoomLevel": 1,
// vscode默認啓用了根據文件類型自動設置tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 2
}

html標籤換行問題

// #這個按用戶自身習慣選擇 
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進行格式化 
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
   "wrap_attributes": "auto"
   // #vue組件中html代碼格式化樣式
 }
}
"vetur.validation.template": false

開發環境搭建

安裝node.js，npm（windows環境）

node.js安裝後會自帶npm命令

去官網下載一個node.js穩定版本點擊進行安裝
安裝完成後進入cmd 輸入 path check一下node環境變量的配置
```
 C:\Program Files\nodejs\;
```
node -version檢查一下node.js的版本

全局安裝Vue腳手架

npm install vue-cli -g

利用vue-cli+webpack搭建項目

 vue init webpack   vue-cli-demo   // 初始化項目  vue-cli-demo 項目文件夾名稱
 cd vue-cli-demo   //跳轉到剛纔所創建的項目文件夾內
 npm install   
 npm run dev  //測試項目是否搭建完成

安裝Sass

項目構建完成後，要利用Sass預編譯css，所以需要在項目中進行相關配置

在項目中安裝Sass
要在項目中安裝Sass需要一下兩步

npm install node-sass --save-dev   //安裝node-sass
npm install sass-loader --save-dev  //安裝 sass-loader

修改剛纔創建好的vue項目中的webpack.base.conf.js文件
在rules下添加以下代碼

module: {
  rules: [
    {
      test: /.sass$/,
      loaders: ['style', 'css', 'sass']
    }
  ]
}

最後再給大家介紹幾個css相關的名詞

postcss：添加瀏覽器前綴
sass scss less:預處理CSS

關於axios的使用問題

安裝和配置請參考官網或Github

開發環境跨域問題

config /index.js

proxyTable: {
    '/api': {
      target: 'http://linkon.natapp4.cc/api', // 接口的域名
      // secure: false,  // 如果是https接口，需要配置這個參數
      ws: true,
      changeOrigin: true,// 如果接口跨域，需要進行這個參數配置
      pathRewrite: {
        '^/api': ''
      }
    }
  }

main.js配置

axios.defaults.baseURL = '/api'

開發中遇到的問題

關於移動端適配問題

關於移動端適配的問題，個人總的思路是利用vw+vh+rem
寬高使用vw，vh，%（vw、vh是基於視口的佈局方案，故這個meta元素的視口必須聲明）
字體和其他使用rem進行適配
rem適配採用amfe-flexible+px2rem

在vue項目中使用 amfe-flexible

安裝

 npm intsall  amfe-flexible --save-dev

在main.js中進行配置

import 'amfe-flexible'

在根目錄的index.html 的頭部加入手機端適配的meta代碼，這段代碼可以禁止

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

在vue項目中引入px2rem

安裝

 npm install px2rem-loader --save-dev  //px轉換爲rem

在utils.js中配置

const px2remLoader = {
     loader: 'px2rem-loader',
     options: {
        remUnit: 75,
    }
 }
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

微信相關的問題

微信js授權問題

引入js-sdk
```
npm install weixin-js-sdk --save-dev
```
在需要的頁面引用
```
import wx from 'weixin-js-sdk'
```
微信授權時如果採用ajax請求會造成跨域問題，所以在授權是請採用原生的跳轉方式即
```
 window.location.href ='你的後臺授權接口地址'+'回調地址'
```

修改微信瀏覽器title

引入第三方庫vue-wechat-title

  npm install vue-wechat-title --save-dev

main.js中配置

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

在router中給每個路由添加meta

 {
   path: '/about',
   name: 'about',
   component: About,
   meta: {
    title: '關於我們'
   }
}

vue頁面中的使用

<div v-wechat-title="$route.meta.title"></div>
///也可以動態設置
<div v-wechat-title="$route.meta.title=title"></div>

iOS適配的問題

iOS下有個position:fixed失效的問題，以及因爲該問題導致的頁面滑動問題
還有iOS上取消彈簧效果問題（vue頁面爲例）

html.body採用position：fixed，寬高爲100%

html,
body {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 100%;
 overflow-y: auto;
}

給Vue主頁面入口添加以下樣式

html

<div id="app" class="container">
 <router-view  class="page"/>
</div>

css

.container {
  overflow-y: auto;
  height: 100%;
}
.page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 z-index: 1;
 box-sizing: border-box;
}
 //-webkit-overflow-scrolling: touch;是爲了讓iOS滑動體驗順暢

vue頁面的書寫，以頭尾固定，中間滾動的爲例

html

<div>
  <div class="navabar"></div> 
  <div class="scroll-cotainer"> 
    <div class="scroll-body"> </div>
  </div> 
  <div class="footer"></div>
</div>

.navabar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 12vw;
  overflow: hidden;
 z-index: 500;
} 
.footer {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 height: 12vw;
 z-index: 500;
}
.scroll-cotainer {
  position: absolute;
  top: 12vw;
  left: 0;
  right: 0;
  bottom: 12vw;
  height: auto;
}
.scroll-body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

vue刷新當前頁面不出現白屏問題

App.vue

<template>
<div id="app" class="container">
  <router-view  v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: 'App',
provide () {
  return {
    reload: this.reload
  }
},
data () {
  return {
    isRouterAlive: true
  }
},
methods: {
  reload () {
    this.isRouterAlive = false
    this.$nextTick(function () {
      this.isRouterAlive = true
    })
  }
}
}
</script>

需要刷新的頁面
```
export default { inject: ['reload']}
```
在需要刷新的地方調用this.reload()

-webkit-line-clamp vue打包後不起作用

安裝插件

npm i -S optimize-css-assets-webpack-plugin

註釋掉webpack.prod.conf.js中下面這段代碼代碼

   new OptimizeCSSPlugin({
    cssProcessorOptions: config.build.productionSourceMap
      ? { safe: true, map: { inline: false } }
      : { safe: true }
  })

移動端Video標籤的使用

Android端禁止全屏：x5-playsinline=“true”

iconfont字體引用

在https://www.iconfont.cn上下載代碼
copy到vue的assets目錄下
在main.js中引入css文件
在標籤內引用樣式即可

路由跳轉不添加history

原生

window.loaction.replace()不添加history

vue

this.router.replace()替換當前路由不添加history

介紹幾個開發過程中好用組件

滑動插件swiper
下拉刷新，上拉加載 mescroll.js 、better-scroll

（備註）第一次寫md文檔，感覺極度舒適

記一次微信公衆號開發過程

記一次微信公衆號開發過程

關於技術選型

開發前準備

安裝和配置VS Code

關於使用過程的問題

開發環境搭建

安裝node.js，npm（windows環境）

全局安裝Vue腳手架

利用vue-cli+webpack搭建項目

安裝Sass

關於axios的使用問題

開發中遇到的問題

關於移動端適配問題

微信相關的問題

微信js授權問題

修改微信瀏覽器title

iOS適配的問題

vue刷新當前頁面不出現白屏問題

-webkit-line-clamp vue打包後不起作用

移動端Video標籤的使用

iconfont字體引用

路由跳轉不添加history

介紹幾個開發過程中好用組件

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

Android EditText 顯示密碼

Android Studio 啓動時，不默認打開上一個項目

Android CheckBox自定義樣式

CSS 去掉input type files默認樣式

Android WebView（使用是需要注意的坑）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結