開始
這個(gè)項(xiàng)目是一個(gè)mpvue 的demo, 沒有具體的業(yè)務(wù)實(shí)現(xiàn)方法，只有簡(jiǎn)單的頁面切換，還有常用的一些方法封裝，總體提供分開打包開發(fā)的思路
github源碼 =>?https://github.com/Aimee1608/mpvuedemo
需要看詳細(xì)版有項(xiàng)目?jī)?nèi)容的，可以看這篇文章，有詳細(xì)說明?https://blog.csdn.net/aimee1608/article/details/80757077
目錄結(jié)構(gòu)
```
.
├── README.md
├── build? ? ? ? ? ? ? ? ? ? ? 小程序運(yùn)行打包配置文件
│? ├── 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運(yùn)行打包配置文件
│? ├── 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? ? ? ? ? ? ? ? ? 小程序運(yùn)行打包配置文件? ? ? ?
│? ├── dev.env.js
│? ├── index.js
│? └── prod.env.js
├── configH5? ? ? ? ? ? ? ? H5運(yùn)行打包配置文件
│? ├── 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? ? ? ? ? ? ? ? ? ? 靜態(tài)資源文件
│? │? └── logo.png
│? ├── components? ? ? ? ? ? ? ? ? 組件
│? │? └── card.vue
│? ├── main.js? ? ? ? ? ? ? ? ? ? 小程序入口js
│? ├── mainH5.js? ? ? ? ? ? ? ? ? H5入口js
│? ├── pages? ? ? ? ? ? ? ? ? ? ? 頁面內(nèi)容
│? │? ├── counter
│? │? │? ├── index.vue
│? │? │? └── main.js
│? │? ├── index
│? │? │? ├── index.vue
│? │? │? └── main.js
│? │? └── logs
│? │? ? ? ├── index.vue
│? │? ? ? └── main.js
│? ├── router? ? ? ? ? ? ? ? ? ? ? H5路由
│? │? └── index.js
│? ├── store? ? ? ? ? ? ? ? ? ? ? vuex存儲(chǔ)
│? │? └── index.js
│? └── utils? ? ? ? ? ? ? ? ? ? ? js封裝方法
│? ? ? └── index.js
└── static? ? ? ? ? ? ? ? ? ? ? ? ? 靜態(tài)資源文件
? ? └── img
? ? ? ? └── girl.png
```
簡(jiǎn)易說明
路由跳轉(zhuǎn)
```
// 組件引用
import card from '@/components/card'
export default {
? data () {
? ? return {
? ? ? motto: 'Hello World'
? ? }
? },
? components: {
? ? card
? },
? methods: {
? ? gotoGame (path) {
? ? ? ? this.reLaunchPageTo(this.router + path)
? ? }
? }
}
去往Vuex示例頁面 去往logs頁面 // 組件引用import card from'@/components/card'exportdefault{ data () {return{ motto:'Hello World'} }, components: { card }, methods: { gotoGame (path) {this.reLaunchPageTo(this.router + path) } }}
去往Vuex示例頁面 去往logs頁面 // 組件引用import card from'@/components/card'exportdefault{ data () {return{ motto:'Hello World'} }, components: { card }, methods: { gotoGame (path) {this.reLaunchPageTo(this.router + path) } }}
```
分別封裝方法
H5 mainH5.js方法
```
Vue.mixin({
? data () {
? ? return {
? ? ? service: '', // 服務(wù)
? ? ? 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 數(shù)據(jù)存儲(chǔ)
小程序store 直接掛在 Vue原型上
```
Vue.prototype.$store = store
```
H5vue 還是和之前一樣
```
new Vue({
? el: '#app',
? router,
? components: { App },
? template: '',
? store
})
```
樣式編譯
如遇樣式錯(cuò)亂，注意.postcssrc.js
```
module.exports = {
? "plugins": {
? ? // "postcss-mpvue-wxss": {}, // 打包成H5時(shí)注釋此行
? ? "postcss-import": {},
? ? "postcss-url": {},
? // to edit target browsers: use "browserslist" field in package.json
? ? "autoprefixer": {}
? }
}
```
