MpVue 致力打造H5与小程序的代码共用
MpVue是什么
基于 Vue.js 的小程序开发框架
从底层支持 Vue.js 语法和构建工具体系。
使用vue开发小程序 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中 使用vue语法开发,编译为小程序语法 一套vue程序h5+小程序 Vue组件规范,熟悉vuejs即可开发小程序 比wepy工具对vue语法支持度更高
小程序的缺点
语法和html css不兼容,单独开发
学习成本
MpVue的能力
彻底的Vue组件化开发能力:提高代码复用性 完整的vue开发体验 彻底的Vue组件化开发能力:提高代码复用性 快捷的 webpack 构建机制:开发阶段 hotReload 支持npm安装依赖 使用 Vue.js 命令行工具 vue-cli 快速初始化项目 H5 代码转换编译成小程序目标代码的能力
MpVue入门
# . 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0 $ npm -v
5.6. # . 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/ # . 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9 # . 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project # . 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
MpVue目录结构与讲解
Vue生命周期+兼容小程序生命周期
Created 创建初始化 有一些vue不支持的就必须结合小程序自带的API
例如 onPullDownRefresh
模板语法
动态style和class 使用计算属性返回字符串 V-if和v-for用法不变 表单v-model全支持
事件处理
bind换成@ 使用vue的绑定语法
模板
除了动态渲染,别的都支持 (v-html) .vue单文件组件 小程序自带组件也可以用 自带组件事件绑定也使用vue的,比如@click
MpVue 致力打造H5与小程序的代码共用的更多相关文章
- 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装
WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- 前端生成分享海报兼容H5和小程序
### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果
- 打造游戏金融小程序行业测试标准腾讯WeTest携各专家共探品质未来
在获客成本不断上升的时代里,产品品质愈发是互联网应用的决胜标准.随着用户需求更加多样,开发者不仅要深挖应用功能,更需要面向业务所在领域,建立全面.专业的测试架构,掌控开发进度.提高开发效率,才能在互联 ...
- mpvue学习笔记-之微信小程序数据请求封装
简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...
- 【mpvue】使用Mpvue撸一个简单的小程序
一.快速创建一个mpvue项目 全局安装 vue-cli (如果有就不需要装了) 创建一个基于mpvue-quickstart模板的新项目,记得选择安装vuex vue init mpvue/ ...
- 小程序内嵌H5——判断小程序环境的坑
现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产 ...
- 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处
因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...
- uniapp 在h5和小程序上使用高德获取用户城市位置
开发文档 https://lbs.amap.com/api 错误状态 https://lbs.amap.com/api/webservice/guide/tools/info/ 虽然用的高德但是你还需 ...
随机推荐
- python读取数据库并把数据写入本地文件
一,介绍 上周用jmeter做性能测试时,接口B传入的参数需要依赖接口A生成的借贷申请ID,接口A运行完需要把生成的借贷申请ID导出来到一个文件,作为参数传给接口B,刚开始的时候,手动去数据库倒, 倒 ...
- (4.11)mysql备份还原——mysql闪回技术(基于binlog)
0.闪回技术与工具简介 mysql闪回工具比较流行三大类: [0.1]官方的mysqlbinlog:支持数据库在线/离线,用脚本处理binlog的输出,转化成对应SQL再执行.通用性不好,对正则.se ...
- 好的UI管理后台
1,https://www.v2ex.com/t/513539 - https://github.com/a54552239/projectManage
- Oracle查询重复数据并删除,只保留一条记录
前言 项目中,在“资源目录-在线编目”中,资源项子表存在多条重发数据,需要进行数据清理,删除重发的数据,最终只保留一条相同的数据. 操作的表名:R_RESOURCE_DETAILS 操作步骤 一.重复 ...
- jenkins 判断某个job是否正在构建
其实很简单,访问jenkins job的xml api或者 json api,里面有两个key叫"lastBuild"和"lastCompletedBuild" ...
- Mysql 5.7优化
为了达到数据库胡最佳性能 1. 普通用户通过配置软件与硬件来实现 2. 高级用户会寻求机会改善MySQL本身,开发自己的数据存储引擎,硬件应用. 在数据库层面的优化 1. 表设计,通常列有适合的数据类 ...
- Promise (2) 原型上的方法
"I'm Captain Jack Sparrow" 加勒比海盗5上映,为了表示对杰克船长的喜爱,昨天闪现了几次模仿船长的走路姿势(哈哈哈,简直妖娆). 为了周天能去看电影,要赶紧 ...
- U盘制作系统盘的方法:
1, 使用 u 盘制作 ubuntu16.04 的方法, 安装软件后,直接使用软件将 U盘制作成系统盘就好了 [1] 下载安装工具: UltraISO 官网: http://www.ezbsyst ...
- matlab——之class类(详细总结)
https://blog.csdn.net/qinze5857/article/details/80545885 开篇:搜了一下网上介绍matlab的class类,信息不全,且总结不全面,于是单独he ...
- feifeicms后台任意文件读取
前台大略看了下,本身内容比较简单,经过“洗礼”后以及没什么问题了,基本上输入都过滤了. 这次审计找到了一个后台的任意文件读取,可以读取数据库配置文件. 在DataAction.class.php文件中 ...