mpvue框架使用记录

栏目: 编程语言 · 发布时间: 5年前

内容简介:最近公司接了一个订制小程序,是从APP改成微信小程序,考虑用突然想到可以用组件来预处理数据,比如项目中图片url的拼接和替换域名

最近公司接了一个订制小程序,是从APP改成微信小程序,考虑用 mpvue 框架来开发,发现还是有些坑的,下面说一下这两天使用下来的感受。

template 中不支持 methods 中的函数,也没有filter过滤器,数据要预先处理比较麻烦

突然想到可以用组件来预处理数据,比如项目中图片url的拼接和替换域名

创建新页面比较繁琐

每次创建新页面按常规流程是:

新建页面文件夹 → 新建 index.vuemain.jsmain.json 并填入页面基本内容 → 在项目 app.json 中添加页面信息。

最开始我的解决方法是创建了一个模板页面,每次新建页面的时候复制一份,重命名。

但是还是很麻烦,需要手动向 app.json 中添加页面路径,干脆用node写了一个快速添加页面的小工具

工具 文件 addpage.js 放在mpvue项目根目录,运行 node addpage

目前有一个参数可以配置新增页面的属性,是设置vue文件中用到的预处理器类型

用法: node addpage wxssnode addpage sass

mpvue框架使用记录
mpvue框架使用记录
填入需要创建的页面路径和标题就会在 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
  }
}
复制代码

个人博客【花喵电台】


以上所述就是小编给大家介绍的《mpvue框架使用记录》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数学与泛型编程

数学与泛型编程

[美]亚历山大 A. 斯捷潘诺夫(Alexander A. Stepanov)、[美]丹尼尔 E. 罗斯(Daniel E. Rose) / 爱飞翔 / 机械工业出版社 / 2017-8 / 79

这是一本内容丰富而又通俗易懂的书籍,由优秀的软件设计师 Alexander A. Stepanov 与其同事 Daniel E. Rose 所撰写。作者在书中解释泛型编程的原则及其所依据的抽象数学概念,以帮助你写出简洁而强大的代码。 只要你对编程相当熟悉,并且擅长逻辑思考,那么就可以顺利阅读本书。Stepanov 与 Rose 会清晰地讲解相关的抽象代数及数论知识。他们首先解释数学家想要解决......一起来看看 《数学与泛型编程》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具