用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

mpvue框架使用記錄

Rolan 2019-6-25 00:16

最近公司接了一個訂制小程序,是從APP改成微信小程序,考慮用mpvue框架來開發,發現還是有些坑的,下面說一下這兩天使用下來的感受。template中不支持methods中的函數,也沒有filter過濾器,數據要預先處理比較麻煩 ...

最近公司接了一個訂制小程序,是從APP改成微信小程序,考慮用 mpvue 框架來開發,發現還是有些坑的,下面說一下這兩天使用下來的感受。

template 中不支持 methods 中的函數,也沒有filter過濾器,數據要預先處理比較麻煩

突然想到可以用組件來預處理數據,比如項目中圖片url的拼接和替換域名

創建新頁面比較繁瑣

每次創建新頁面按常規流程是:

新建頁面文件夾 → 新建 index.vue , main.js , main.json 并填入頁面基本內容 → 在項目 app.json 中添加頁面信息。

最開始我的解決方法是創建了一個模板頁面,每次新建頁面的時候復制一份,重命名。

但是還是很麻煩,需要手動向 app.json 中添加頁面路徑,干脆用node寫了一個快速添加頁面的小工具

將工具文件 addpage.js 放在mpvue項目根目錄,運行 node addpage

目前有一個參數可以配置新增頁面的屬性,是設置vue文件中用到的預處理器類型

用法: node addpage wxss , node addpage sass

填入需要創建的頁面路徑和標題就會在 src/pages/ 下創建頁面,包含三個基本文件,并自動向app.json 中寫入本次創建的路徑 支持多級目錄頁面的創建,方便分類頁面,如 demo/demo1 , demo/demo2

要注意的是,輸入的路徑下有其他頁面時,會創建失敗,比如創建了 demo/demo1 后,再創建 demo 就會失敗

如果改變了目錄結構請刪除 dist 文件夾重新構建

下面是addpage.js的全部代碼

const fs = require('fs')
const readline = require('readline')
const path = require('path')
const colors = require('colors')
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
})

//獲取運行時附帶參數,目前只定義了vue文件中的css語言類型和頁面標題
let arguments = process.argv.splice(2);
let caaLang = arguments[0]

let appJson = JSON.parse(fs.readFileSync('./src/app.json', 'utf8').toString())

rl.question(' 請輸入頁面路徑: '.bgBlue, (pathStr) => {
  rl.question(' 請輸入頁面標題: '.bgBlue, (title) => {
    pageTitle = title
    pageCreate(pathStr)
  })
})

function pageCreate(pathStr){
  let jsonPush = `pages/${pathStr}/main`
  let stop = false
  appJson.pages.forEach((item) => {
    let pathArr = item.split('/')
    let pathStrArr = pathStr.split('/')
    if (pathArr.length > 3 && pathStrArr.length === 1 && pathArr.indexOf(pathStrArr[0]) !== -1) {
      stop = true
    }
  })

  if (stop) {
    console.log(' 此路徑下有其他頁面,不可直接作為頁面路徑 '.bgRed);
    rl.close()
    return
  }

  if (appJson.pages.indexOf(jsonPush) !== -1) {
    console.log(' 此頁面已存在 '.bgRed)
    rl.close()
    return
  }
  //app.json pages數組中沒有,項目結構中有,此時已有的文件夾會被刪除
  deleteFolder('./src/pages/' + pathStr)
  try {
    mkdirsSync('./src/pages/' + pathStr)
  } catch (error) {
    console.log(error);
  }

  if (writePage('./src/pages/' + pathStr)) {
    //加入本次創建的頁面路徑
    appJson.pages.push(jsonPush)
    //寫入app.json
    fs.writeFile('./src/app.json', JSON.stringify(appJson, null, "\t"), function (err) {
      if (err) {
        console.error(err)
      }
      console.log(' ----------新增成功---------- '.bgGreen)
      rl.close()
    })
  }
}

//刪除文件夾
function deleteFolder(path) {
  var files = [];
  if (fs.existsSync(path)) {
    files = fs.readdirSync(path);
    files.forEach(function (file, index) {
      var curPath = path + "/" + file;
      if (fs.statSync(curPath).isDirectory()) { // recurse
        deleteFolder(curPath);
      } else { // delete file
        fs.unlinkSync(curPath);
      }
    });
    fs.rmdirSync(path);
  }
}
//創建多級目錄
function mkdirsSync(dirname) {
  if (fs.existsSync(dirname)) {
    return true;
  } else {
    if (mkdirsSync(path.dirname(dirname))) {
      fs.mkdirSync(dirname);
      return true;
    }
  }
}

//寫入目標頁面的三個文件
function writePage(path) {
  try {
    fs.writeFileSync(path + '/index.vue', `<template>
  <div class="page-container">

  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="${caaLang?caaLang:'scss'}" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  background-image: linear-gradient(to bottom, #00d164, #00d164);
  background-repeat: no-repeat;
  background-size: 100% 170rpx;
  background-position: top center;
  padding-bottom: 65rpx;
}
</style>`, 'utf8');
    fs.writeFileSync(path + '/main.js', `import Vue from 'vue'
import App from './index'
    
const app = new Vue(App)
app.$mount()`, 'utf8')
    fs.writeFileSync(path + '/main.json', `{
  "navigationBarTitleText": "${pageTitle}"
}`, 'utf8')
    return true
  } catch (error) {
    //寫入錯誤刪除該文件夾
    deleteFolder(path)
    console.log(' 創建頁面失敗 '.bgRed);
    throw error
  }
}
復制代碼

個人博客【花喵電臺】

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: Rongle 來自: 掘金
致青春APP