mpvue 采坑

这是第一次用mpvue写项目啊,虽然项目难度不大,但是碰到的问题不小,而且项目还没上线,估计到时候还会碰到问题,所以这篇应该还会更新。

小程序,跟浏览器的环境是有挺多差异的,比如没有window对象,页面也不是在body元素里,而是page元素里,div变成了view,而图片的引入,小程序是没有img标签的,mpvue会自动把img转成小程序的image,有一点比较坑的就是小程序的这个标签的宽高会有预设

width: 320px; height: 240px;

所以你像普通的浏览器里那样,设置一个图片的宽,然后高度会自适应是不现实的,解决办法的话,要不然就是宽高你的设定好,但是这样比较局限,好在image 有个属性

mode="widthFix"

设置了这个属性后,image 就 可以像img标签一样了。

mpvue里能使用npm 装部分的插件,但有些东西装不了,例如vue全家桶里的vue-router,据官网说,是因为小程序原生的路由已经很完善了,所以直接使用小程序路由就好,还有表单组件啊,ajax啊,网上都有推荐用小程序原生的,但是我项目里ajax使用了flyio,因为要考虑这个项目可以移植到H5上。

还有微信里经常的拖动页面导致出现空白部分的,可以想要禁止的页面建一个main.json  然后设置

{
    "disableScroll": true
}

我项目由于是个重构项目 之前这个项目的用到了canvas,小程序里也有,但是就是和浏览器有些许差异,比如  canvas.getContext(‘2d‘)  在mpvue 也就是小程序里是这样的 wx.createCanvasContext(canvas)  然后需要一个draw() 方法才会绘制,这些查文档都有,但是有个比较坑的,在web是  fillStyle 在小程序里是  setFillStyle,不知道是不是我粗心大意,我没在文档里查到, 卡了有段时间,自己网上找例子找到了。

总结 mpvue 不能完全模拟vue来写小程序,但我感觉比直接学原生要更快接受一点,好些vue的东西都可以使用,比如slot v-html(官网还说不能使用...我去问了人才知道可以使用),但也可能是我这个项目不复杂,如果大型项目,应该还是要斟酌一下,是直接原生,还是学习这种流行库转小程序或者说是用流行库语法来写小程序的。目前市面上有很多这种,截止今天18/09/04,我知道的就有小程序官方wepy、美团mpvue,这是vue方面的,react的有taro、anujs(在正美群里天天看正美发...),五花八门,选都选不过来,当然最后这些都是会转为小程序的,所以如果继续做小程序下去,学习原生语法是一定不会亏的,就怕微信经常改API就完蛋了!

原文地址:https://www.cnblogs.com/cutpicmanxx/p/9589268.html

时间: 2024-10-21 03:50:58

mpvue 采坑的相关文章

mpvue采坑记(同一个页面或者组件反复进入动态数据被覆盖)

该问题出现的issue:https://github.com/Meituan-Dianping/mpvue/issues/140 使用场景: 在使用mpvue开发小程序中,出现同路由复用,使用不同页面的情况. 例如: 进入:首页->商品详情页1(id=1)->(商品详情页的推荐商品列表进入)商品详情页2(id=2)->(商品详情页的推荐商品列表进入)商品详情页3(id=3) 退回:商品详情页3(id=3)<-商品详情页2(id=2)<-商品详情页1(id=1)<-首页

phoenegap3.5 采坑

上周5晚上在家看Node.js视频的时候,老大来一条短信让研究下 phoengap打包一个web网站. 遂 陷入了phonegap的深渊中. phoengap很早开始使用 cli模式安装开发环境 ,借助node npm来管理 环境要求: JAVA Android SDK Ant Node.js 以上几个的下载地址就不提供. 主要是这中间一些坑,装好上面的环境 需要自己手动配置环境变量, 痛苦由此开始啊!!!! 多次操作修改环境变量 都没能成功.多次卸载,遇到各种BUG. 在修改环境变量的时候 往

oracle rac 扩展磁盘采坑记录

oracle rac 磁盘扩展采坑记录: 系统环境:VMware esxi oracle rac 11.2.0.4 昨天扩展了asm的磁盘组,FRA磁盘组和DATA磁盘组,我添加了一块硬盘320g,200g扩展到了DATA组,120g扩展到了FRA组.因为oracle使用的是raw裸设备,扩展第一个磁盘的时候,正常进行,不用关机. 坑1:但是扩展FRA组的时候,需要关机才能找得到第二个设备.重启之后扩展正常,建议扩展磁盘一次扩展到一个组. 坑二:今天我看见系统盘空间不够了,就扩展了一下系统盘空间

采坑:python base64

需求:  读取文本内容,对字符串进行base64加密 >>> str = 'aaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbbbbbbbbbb\ncccccccccccccccccccccccccc' >>> encodeStr = base64.encodestring(str) >>> encodeStr 'YWFhYWFhYWFhYWFhYWFhYWFhYQpiYmJiYmJiYmJiYmJiYmJiYmJiYmJi

websocket采坑记

项目中想用做个实时统计,像是110警情大屏那种,所以用到了websocket,结果踩了不少坑,再次记录下. 环境:spring,springMVC(4.2.4.RELEASE),tomcat7 问题1:session对象是不一样的 http的时候,是javax.servlet.http.HttpSession 而websocket的时候javax.websocket.Session http的session一般用于保存用户信息,根据用户,http请求的时候携带Cookie:JSESSIONID,

VS2015+MySql+EF6采坑经验总结

背景:VS2015+MySql+EF6(DB First) 采坑顺序:按照以前的记忆,操作依次如下: 1,安装 MySQL Connector/NET(不用想,装最新的,8.0.12) 2.安装 MySQL for Visual Studio (最新1.2.8) 3.在VS2015创建WEB项目 4.nuget 安装MySql.Data.Entity (最新6.10.8,会自动安装依赖包MySql.Data 6.10.8 和 EF 6.2.0) 雷区:下来,当然的要创建[ADO.NET实体数据模

github 采坑记 —— 项目提交到github后部分文件缺失

在使用git push到GitHub上后,发现部分文件缺失,如下图所示: 可以看到dist文件夹为 运行 npm run build 之后打包生成的文件,node_modules 文件也是缺失的 导致文件没有提交的原因是在项目根目录下有个文件: 打开文件: 可以看再提交时有些文件被忽略了,可以将相应代码删除,然后重新push到GitHub上 想要的文件就提交上去了! 多多采坑,多多总结,多多练习~~~ 原文地址:https://www.cnblogs.com/amy2017/p/10087455

Laravel Homestead 安装与采坑

1.安装链接 教程https://laravel-china.org/docs/laravel-development-environment/5.5/development-environment-windows/938 2.采坑https://laravel-china.org/articles/4082/a-wonderful-problem-encountered-in-the-use-of-vagrant 解决方法:这个解决方法可以,我改成了 GBK,在 Windows 10 下. 

Axios采坑之路

Axios采坑之路 POST请求设置Content-Type 由于后端采用的是form表单形式上送参数,需要设置Content-Type axios设置如下 const _axios = axios.create(config); _axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;'; api调用 import { request } from '@plugin/axios' exp