開始

這個專案是一個mpvue 的demo, 沒有具體的業務實現方法，只有簡單的頁面切換，還有常用的一些方法封裝，總體提供分開打包開發的思路

目錄結構

.
├── README.md
├── build                       小程式執行打包配置檔案
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf
 
.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── buildH5                    H5執行打包配置檔案
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.baseH5.conf.js
│   ├── webpack.devH5.conf.js
│   └── webpack.prodH5.conf
 
.js
├── config                   小程式執行打包配置檔案         
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── configH5                H5執行打包配置檔案
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── dist                    小程式打包生成的檔案目錄
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── components
│   │   ├── card$79c1b934.wxml
 

│   │   ├── counter$6c3d87bf.wxml
│   │   ├── index$622cddd6.wxml
│   │   ├── logs$31942962.wxml
│   │   └── slots.wxml
│   ├── copy-asset
│   │   └── assets
│   │       └── logo.png
│   ├── pages
│   │   ├── counter
│   │   │   ├── main.js
│   │   │   ├── main.wxml
│   │   │   └── main.wxss
│   │   ├── index
│   │   │   ├── main.js
│   │   │   ├── main.wxml
│   │   │   └── main.wxss
│   │   └── logs
│   │       ├── main.js
│   │       ├── main.json
│   │       ├── main.wxml
│   │       └── main.wxss
│   └── static
│       ├── css
│       │   ├── app.wxss
│       │   ├── pages
│       │   │   ├── counter
│       │   │   │   └── main.wxss
│       │   │   ├── index
│       │   │   │   └── main.wxss
│       │   │   └── logs
│       │   │       └── main.wxss
│       │   └── vendor.wxss
│       ├── img
│       │   └── girl.png
│       └── js
│           ├── app.js
│           ├── manifest.js
│           ├── pages
│           │   ├── counter
│           │   │   └── main.js
│           │   ├── index
│           │   │   └── main.js
│           │   └── logs
│           │       └── main.js
│           └── vendor.js
├── distH5                          H5打包生成的檔案目錄
│   ├── index.html
│   └── static
│       ├── css
│       │   └── app.css
│       ├── img
│       │   ├── girl.png
│       │   └── logo.png
│       └── js
│           ├── app.js
│           ├── manifest.js
│           └── vendor.js
├── index.html                     入口index.html 頁面
├── package-lock.json
├── package.json                   安裝配置檔案
├── project.config.json
├── src                             
│   ├── App.vue                     小程式入口vue
│   ├── AppH5.vue                   H5入口vue
│   ├── api                         小程式和H5分別封裝的方法
│   │   ├── httpService.js
│   │   └── wxService.js
│   ├── assets                     靜態資原始檔
│   │   └── logo.png
│   ├── components                  元件
│   │   └── card.vue
│   ├── main.js                     小程式入口js
│   ├── mainH5.js                   H5入口js
│   ├── pages                       頁面內容
│   │   ├── counter
│   │   │   ├── index.vue
│   │   │   └── main.js
│   │   ├── index
│   │   │   ├── index.vue
│   │   │   └── main.js
│   │   └── logs
│   │       ├── index.vue
│   │       └── main.js
│   ├── router                      H5路由
│   │   └── index.js
│   ├── store                       vuex儲存
│   │   └── index.js
│   └── utils                       js封裝方法
│       └── index.js
└── static                          靜態資原始檔
    └── img
        └── girl.png

簡易說明

路由跳轉

<template>
  <div class="container">
      <!-- 圖片引用的兩種方式 -->
      <img class="girl" :src="imgSrc +'static/img/girl.png'" alt="">
      <img class="logo" src="../../assets/logo.png" alt="">
    <card :text="motto"></card>
    <form class="form-container">
      <input type="text" class="form-control" v-model="motto" placeholder="v-model" />
      <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />
    </form>
    <!-- 路由跳轉 -->
    <a @click="gotoGame('pages/counter/main')" class="counter">去往Vuex示例頁面</a>
    <a @click="gotoGame('pages/logs/main')" class="counter">去往logs頁面</a>
  </div>
</template>

<script>
// 元件引用
import card from '@/components/card'

export default {
  data () {
    return {
      motto: 'Hello World'
    }
  },
  components: {
    card
  },
  methods: {
     gotoGame (path) {
        this.reLaunchPageTo(this.router + path)
     }
  }
}
</script>

分別封裝方法

H5 mainH5.js方法

Vue.mixin({
  data () {
    return {
      service: '', // 服務
      router: '/', // 路由路徑
      imgSrc: '' // 圖片路徑
    }
  },
  methods: {
      newroot () {
          return  this.$route
      },
      navigatePageTo (url) {
          this.$router.push(url)
      },
      reLaunchPageTo (url) {
          this.$router.replace(url)
      },
      setStorageSync (name, data) {
          sessionStorage.setItem(name, JSON.stringify(data))
      },
      getStorageSync (name) {
          return JSON.parse(sessionStorage.getItem(name))
      }
  },
  created () {
      console.log('chrome')
      this.service = httpService
  }
})

小程式main.js

Vue.mixin({
  data() {
    return {
      service: '',
      router: '/',
      imgSrc: '/'
    }
  },
  methods: {
      newroot () {
          return this.$root.$mp
      },
      navigatePageTo (url) {
          wx.navigateTo({url: url})
      },
      reLaunchPageTo (url) {
          wx.reLaunch({url: url})
      },
      setStorageSync (name, data) {
          wx.setStorageSync(name, data)
      },
      getStorageSync (name) {
          return wx.getStorageSync(name)
      }
  },
  created() {
      // console.log('wx')
      this.service = wxService
  }
})

vuex 資料儲存

小程式store 直接掛在 Vue原型上

Vue.prototype.$store = store

H5vue 還是和之前一樣

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

樣式編譯

如遇樣式錯亂，注意.postcssrc.js

module.exports = {
  "plugins": {
    // "postcss-mpvue-wxss": {}, // 打包成H5時註釋此行
    "postcss-import": {},
    "postcss-url": {},
   // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}