内容简介:最近公司接了一个订制小程序,是从APP改成微信小程序,考虑用突然想到可以用组件来预处理数据,比如项目中图片url的拼接和替换域名
最近公司接了一个订制小程序,是从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 } } 复制代码
个人博客【花喵电台】
以上所述就是小编给大家介绍的《mpvue框架使用记录》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- hapi框架搭建记录(一):初始化项目
- hapi框架搭建记录(二):路由改造和生成接口文档
- 微信小程序框架wepy踩坑记录(与vue对比)
- Flask框架从入门到精通之消息闪现和日志记录(二十一)
- Netty框架问题记录1--多线程下批量发送消息导致消息被覆盖
- hapi框架搭建记录(三):Joi数据校验和Sequelize(数据迁移、填充数据)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数学与泛型编程
[美]亚历山大 A. 斯捷潘诺夫(Alexander A. Stepanov)、[美]丹尼尔 E. 罗斯(Daniel E. Rose) / 爱飞翔 / 机械工业出版社 / 2017-8 / 79
这是一本内容丰富而又通俗易懂的书籍,由优秀的软件设计师 Alexander A. Stepanov 与其同事 Daniel E. Rose 所撰写。作者在书中解释泛型编程的原则及其所依据的抽象数学概念,以帮助你写出简洁而强大的代码。 只要你对编程相当熟悉,并且擅长逻辑思考,那么就可以顺利阅读本书。Stepanov 与 Rose 会清晰地讲解相关的抽象代数及数论知识。他们首先解释数学家想要解决......一起来看看 《数学与泛型编程》 这本书的介绍吧!