天天看點
傳回

記一次微信公衆号開發過程關于技術選型開發前準備開發中遇到的問題介紹幾個開發過程中好用元件

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

  • 關于技術選型
  • 開發前準備
    • 安裝和配置VS Code
      • 關于使用過程的問題
    • 開發環境搭建
      • 安裝node.js，npm（windows環境）
      • 全局安裝Vue腳手架
      • 利用vue-cli+webpack搭建項目
    • 安裝Sass
    • 關于axios的使用問題
  • 開發中遇到的問題
    • 關于移動端适配問題
    • 微信相關的問題
      • 微信js授權問題
      • 修改微信浏覽器title
    • iOS适配的問題
      • vue重新整理目前頁面不出現白屏問題
      • -webkit-line-clamp vue打包後不起作用
      • 移動端Video标簽的使用
      • iconfont字型引用
      • 路由跳轉不添加history
  • 介紹幾個開發過程中好用元件

關于技術選型

之前一直做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配置

開發中遇到的問題

關于移動端适配問題

關于移動端适配的問題，個人總的思路是利用vw+vh+rem

寬高使用vw，vh，%（vw、vh是基于視口的布局方案，故這個meta元素的視口必須聲明）

字型和其他使用rem進行适配

rem适配采用amfe-flexible+px2rem

  • 在vue項目中使用 amfe-flexible
    • 安裝 
      npm intsall  amfe-flexible --save-dev
      • 在main.js中進行配置
      • 在根目錄的index.html 的頭部加入手機端适配的meta代碼，這段代碼可以禁止
  • 在vue項目中引入px2rem
    • 安裝
    • 在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
  • 在需要的頁面引用
  • 微信授權時如果采用ajax請求會造成跨域問題，是以在授權是請采用原生的跳轉方式即

修改微信浏覽器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>
    • css 
    .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>
  • 需要重新整理的頁面 在需要重新整理的地方調用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文檔，感覺極度舒适

vue 微信 h5 移動端适配
上一篇: Unity和Unreal實力互怼，用我的人多VS用我的人賺得多
下一篇: h5首頁加載慢_前端性能優化之預加載和懶加載

繼續閱讀