-
使用mpvue框架写小程序的准备--创建空mpvue
2020-06-01 09:43:09刚刚开始接触小程序,准备采用mpvue框架进行学习开发,接下来就说说如何准备一个空的mpvue吧,像极了用脚手架创建一个空的vue一样。 具体操作以及详细api我们可以点开mpvue官网查看 第一步:找好存储位置创建一个空...刚刚开始接触小程序,准备采用mpvue框架进行学习开发,接下来就说说如何准备一个空的mpvue吧,像极了用脚手架创建一个空的vue一样。
具体操作以及详细api我们可以点开mpvue官网查看
第一步:找好存储位置创建一个空mpvue文件夹
例如我想在D:\myDemo创建,那么在对应位置打开我们俗称的黑色小窗口:
输入vue init mpvue/mpvue-quickstart my-project
,然后按回车就好。(my-project是文件名,你自定义)
然后就一路回车就好:
这时我们就创建一个基于 mpvue-quickstart 模板的新项目,之后就是安装依赖:
先cd my-project
进入该文件,然后输入npm install
下载依赖
安装完之前的所有东西后,最后想运行?输入npm run dev
呃?和想象的不一样?没有出现想vue一样的链接打开浏览器预览,其实小程序是不能在浏览器预览的,所以输入npm run dev
只是会打包生成dist文件夹
那我们要如何运行预览呢?这时就要借助微信开发者工具了,也是在官网下载即可在开发者工具选择小程序打开刚创建的文件夹,打开模拟器就可以看到预览效果了。
-
学习笔记之搭建mpvue脚手架
2020-02-22 11:33:58一、安装cli-init. 当我们直接搭建脚手架时,如果没有安装cli-init会报错。因此,我们首先需要...1、基于mpvue-quickstart模板创建新项目 vue init mpvue/mpvue-quickstart my-project 在输入命令后,我们需要在...一、安装cli-init.
当我们直接搭建脚手架时,如果没有安装cli-init会报错。因此,我们首先需要安装cli-init。使用如下命令可以直接安装。
npm install -g @vue/cli-init
二、搭建脚手架
1、基于mpvue-quickstart模板创建新项目
vue init mpvue/mpvue-quickstart my-project
在输入命令后,我们需要在?行按下回车,表示同意。
2、安装依赖和运行
cd my-project npm install npm run dev
注:dev默认微信小程序
之后我们在WebStorm中进行修改源码,在微信开发者工具中进行调试
WebStorm链接:https://pan.baidu.com/s/1LSTruuV3NJ3ReMeckQSSpw
提取码:7uun
微信开发者工具链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html -
vue项目转小程序-mpvue项目创建
2020-11-03 09:15:13vue项目转小程序-mpvue项目创建前言创建mpvue项目 前言 这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。 创建...前言
这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。
创建mpvue项目
mpvue是美团开源的项目,先贴上官方地址:http://mpvue.com/
创建项目前先检查一下node和npm是否安装好,然后开始安装vue-cli脚手架,注意,这要2.x版本的,3.x版本的创建不了。$ npm install --global vue-cli@2.9
安装完之后,初始化一个基于mpvue-quickstart模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
没什么特别要求的话,基本上是一路回车就好
创建完之后就是下载依赖,启动项目拉$ cd my-project $ npm install $ npm run dev
项目启动成功之后,目录会多了一个dist文件夹,就是把vue代码转成了小程序代码,把整个项目放到微信开发者工具就可以预览拉。
项目创建的时候一般都有px2rpx-loader的,所以写项目的时候可以直接用px,然后编译的时候会转成rpx。
众所周知,vue项目是用的vue-router,怎么在mpvue中用vue-router和引入第三方ui组件呢,请看小编的其他文章! -
mpvue2.0多端小程序框架
2019-11-30 18:53:17目前mpvue框架使用的是vue2.x,所以需要使用vue2.x的脚手架 npm install -g vue-cli 搭建mpvue脚手架 基于mpvue-quickstart模板创建新项目 // my-project 为创建的项目名 vue init mpvue/mpvue-quickstart my-...mpVue2.0多端小程序框架
注意事项:
-
目前mpvue框架使用的是vue2.x,所以需要使用vue2.x的脚手架
npm install -g vue-cli
搭建mpvue脚手架
- 基于
mpvue-quickstart
模板创建新项目
// my-project 为创建的项目名 vue init mpvue/mpvue-quickstart my-project
- 安装依赖和运行
也可以使用yarn进行安装;
yarn装包成功后框架提供的readme中是使用npm dev这里是错误的
直接使用yarn dev就可以了
cd my-project npm install npm run dev
对比小程序中的特殊传参和方法
-
如何获取小程序在 page onLoad 时候传递的 options
- 在所有 页面 的组件内可以通过
this.$root.$mp.query
进行获取。
- 在所有 页面 的组件内可以通过
-
如何获取小程序在 app onLaunch/onShow 时候传递的 options
- 在所有的组件内可以通过
this.$root.$mp.appOptions
进行获取。
- 在所有的组件内可以通过
-
如何捕获 app 的 onError
-
由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:
export default { // 只有 app 才会有 onLaunch 的生命周期 onLaunch () { // ... }, // 捕获 app error onError (err) { console.log(err) } }
-
mpvue框架使用的相关建议
-
不要在选项属性或回调上使用箭头函数
-
比如
created: () => console.log(this.a)
或vm.$watch('a', newValue => this.myMethod())
。因为箭头函数是和父级上下文绑定在一起的,this
不会是如你做预期的 Vue 实例,且this.a
或this.myMethod
也会是未定义的。 -
精简 data 数据
- 冗余数据不要挂在 data 里,所有在 data/props/computed 中的数据,每次变更都会从微信小程序的 JSCore 进程,通过 setData 序列化成字符串后发送到 JSRender 进程。所以,如果你的数据量巨大的时候,会导致页面非常卡顿。
-
优化长列表性能
- 避免在 v-for 中嵌套子组件,这样可以优化大部分部分 setData 时的冗余数据。
- 通过实践发现 wx:if 和 hidden 的优化肉眼不可见,所以或许可以试试直接通过样式 display 来展示和隐藏。
- 如果列表过长,强烈建议产品思考更好的展示形态。比如只展示热门,多余的折叠等形式。
-
合理使用双向绑定
mpvue
建议使用v-model.lazy
绑定方式以优化性能,此外v-model
在老基础库下输入框输入时可能存在光标重设的问题。 -
谨慎选择直接使用小程序的 API 如果你有小程序和H5复用代码的需要,业务代码需要保持对 WEB
Vue.js
的兼容性。此时我们不建议在代码中直接调用小程序API,更好的选择是通过桥接适配层屏蔽两端差异。 -
列表渲染
- 嵌套列表渲染,必须指定不同的索引
mpvue踩坑
- 列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@
@regionchange
,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy
中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 `` - 小程序能力所致,bind 和 catch 事件同时绑定时候,只会触发 bind ,catch 不会被触发,要避免踩坑。
- 事件修饰符
.stop
的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的 catchEventName 失效!.prevent
可以直接干掉,因为小程序里没有什么默认事件,比如submit并不会跳转页面.capture
支持1.0.9
.self
没有可以判断的标识.once
也不能做,因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理,但非常的不优雅,违背了原意
-
-
mpvue基本使用
2019-10-02 14:45:00## 什么是mpvue ## -美团开发使用vue语法开发小程序的...## 创建mpvue项目 ## 1.必须安装node.js 2.安装vue脚手架npm install -g vue-cli 3.创建项目,找到项目目录运行:vue init mpvue/mpvue-quickstart mym... -
mpvue小程序
2020-09-09 22:09:591、搭建mpvue脚手架 第一步,基于mpvue-quickstart模板创建新项目 vue init mpvue/mpvue-quickstart my-project 第二步,安装依赖和运行 cd my-project npm install npm run dev 2、打开微信开发者... -
微信小程序开发-mpvue框架-学习日记
2021-01-19 22:23:32申请小程序 ...创建mpvue模板。 npm install 加载依赖, npm run dev编译运行项目, 打开微信开发者工具,导入项目,路径指向dist/wx 就是用hbuilderx,编写mpvue项目, 用微信开发者工具来调试运行。 ... -
基于vue2和mpvue开发小程序:(创建项目和less语法)
2020-06-26 13:18:31创建一个基于 mpvue-quickstart 模板的新项目 vue init mpvue/mpvue-quickstart 项目名称 然后按照提示运行: 中间会询问一下问题:前面几项直接回车 直到:询问是否安装 vuex 和 ESLint,根据需要安装即可。 其余... -
Windows下微信小程序搭建mpvue项目过程(node.js下载安装,vue-cli脚手架安装)
2020-05-30 13:21:04微信小程序搭建mpvue项目过程 第一步:安装Node环境 下载node.js安装包 下载地址:node.js中文网 ...安装vue-cli脚手架(vue-cli是vue框架的脚手架)并创建项目 cmd下输入 npm install vue-cli -g下载 -
MpVue开发之框架的搭建
2018-08-01 10:59:00npm install --global vue-cli vue脚手架 ...创建一个基于mpvue-quickstart的新摸板 在此我们需要命名我们的项目名称 我们开发小程序的appid, vux可选择性安装, ESl... -
mpvue构建小程序一
2019-03-22 10:59:482:vue init mpvue/mpvue-quickstart my-project(创建项目) 官方链接:http://mpvue.com/mpvue/#_14 3:mpvue生命周期: onLoad,监听页面加载 onShow,监听页面显示 onReady,监听页面初次渲染完成 onHide... -
1、搭建Mpvue项目
2020-02-27 12:24:37一、Mpvue介绍 ...安装脚手架 npm install --global vue-cli / cnpm install --global vue-cli 创建项目 vue init mpvue/mpvue-quickstart myvue cd到项目里面安装依赖 cd myvue npm i... -
mpvue小程序开发从零构建
2018-04-19 10:10:111、根据官方文档,用mpvue搭建脚手架。 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-... -
mpvue搭建项目,小程序
2019-10-11 14:41:061、安装脚手架 npm install --global vue-cli 2、创建项目 vue init mpvue/mpvue-quickstart YourProjectName 3、cd 到项目里面安装依赖 cd YourProjectName 4、安装依赖 cnpm install 5、安装less cnpm install... -
mpvue 从零开始 女友初成长 0
2018-10-30 20:01:30我的女友叫mpvue,为什么不选择...1、脚手架构建项目,我直接在当前项目中创建,一路Y就可以创建项目了。 vue init mpvue/mpvue-quickstart . 创建完项目yarn一下。 2、启动,将vue代码转译到dist目录下 npm run ... -
mpvue初始化项目,npm run dev后没反应
2018-09-21 17:35:39使用vue-cli脚手架创建一个新的mpvue项目后,npm i安装好包后,npm run dev会没反应,是因为官方更新了mpvue-loader。这个时候不是没反应,而是反应比较慢,等个一两分钟,dist目录就生成啦。 ... -
mpvue框架开发微信小程序步骤
2021-02-03 01:15:50一、环境需求 node环境,vue-cli脚手架,微信小程序开发工具 二、安装 node node官网 进入官网下载,直接安装即可。...三、使用脚手架创建项目 蓝色字体部分要自己填写。 四、启动项目 cd 到项目根目录 -
使用mpvue框架开发微信小程序教程
2020-06-23 22:14:35一、所需环境 node环境,vue-cli脚手架,微信小程序开发工具(用来展示页面效果) 二、安装 1. node node官网进入官网下载,直接安装即可。安装后打开cmd,运行查看版本...三、使用脚手架创建项目 项目目录如... -
使用mpvue开发小程序--学习笔记
2018-08-30 14:48:122)vue-cli vue-cli是一个vue专用的项目脚手架工具,可以用于方便的创建vue项目骨架代码,包括我们要讲到的mpvue的项目代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli,在命令行输入如下命令:npm ... -
微信小程序mpvue入门(vue-cli初始化项目并使用第三方UI组件)
2020-03-31 11:41:17首先确保node.js和vue脚手架已经全部全局配置好 cd到想要创建项目的目录下使用命令 vue init mpvue/mpvue-quickstart mpvue01 mpvue01为项目文件夹名称可以随便写,前边的命令不可以随便写 cd到项目里面安装依赖cd ... -
mpvue + iview 实现跨平台开发(App,Wap,微信小程序)
2018-09-16 19:32:001.安装 vue-cli 脚手架 npm install --g vue-cli 2.创建项目 vue init mpvue/mpvue-quickstart test-wxapp cd test-wxapp npm i npm run dev 项目就跑起来了,这个时候,我们打开微信开发者工具,... -
【笔记】实战mpvue2.0多端小程序框架——Vue入门
2020-04-22 09:19:12在桌面创建index.html文件第二步 填入如下代码第三步 使用浏览器打开index.html三、源码分析第一步,加载vue.js脚本第二步,生成div第三步,执行script脚本四、事件五、条件六、循环七、双向绑定八、组件化九、... -
MK-02(基于Vue开发的微信小程序)
2020-06-05 11:10:07之前搭建了MK-01发现还是美中不足,目前APP使用感觉没有小程序方便,在这里我想了想还是用小程序开发吧。 MK-02准备用美团开源项目mpvue。 准备环境 ...创建第一个基于mpvue的小程序项目代码 vue i -
【前端】Vue项目相关 纯干货 基础知识分享!
2020-10-17 16:03:09推荐UI组件库用脚手架vue-cli创建项目项目使用相关说明VuexVue开发出的移动端app项目如何打包成apk小程序框架 mpvue 最近忙着找工作,在这期间的复习过程中,为了方便查阅,总结了很多我常用到的基础内容和面试题。... -
anka-brush - 一款为简化小程序里canvas画图操作而创建的工具库 anka-tracker - 小程序打点库,用于统计用户行为数据 mpvue-calendar - 微信小程序/浏览器端的日历组件mpvue-calendar;基于mpvue平台 支持农历、按...
-
TL1771_V1.2_20050501.pdf
-
物联网基础篇:快速玩转MQTT
-
java正则表达式非贪婪_正则表达式之 贪婪与非贪婪模式详解(概述)
-
java每月定时任务_java定时任务
-
基于SSM实现的房屋租赁系统【附源码】(毕设)
-
java比c_Java比C更快
-
Windows系统管理
-
TL1761_Promotion R1.pdf
-
java 注入 引用传递_伪命题:Java传递的值还是引用?
-
TL1765_V0.0_20070719.pdf
-
华为1+X——网络系统建设与运维(高级)
-
2021-03-01
-
HSD015E4N2-A Product information V1.3_20050526.pdf
-
app软件测试全栈系列精品课程
-
java正确的代码_编写JAVA时,代码都是正确的,但是总是在分号出有错误提示,有大神帮我解决下吗?...
-
EMVCo 4.3 英文版本
-
Echarts图表靠右显示(轴和数据都靠右)
-
access应用的3个开发实例
-
顺序表基本代码(C++)
-
精通编译Makefile,Nina, 从底层uboot到Android