mpvue实现微信小程序(欢迎踩坑)

2018-08-11 admin

最近刚使用mpvue完成了微信小程序的开发,写点东西,做个记录。

首先依旧是两个传送门:

微信小程序文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html][1]
mpvue的官网链接:[http://mpvue.com/][2]

踩坑记录:

  • 真机调试的时候,小程序的本地图片不显示; 如:页面路径为:/pages/index/index.vue,图片路径:/static/img/1.png;最初在index.vue页面里面图片的src为“…/…/…/static/img/1.png;然后发现在小程序的调试环境可显示,但是在真机上不显示;(但是放在components里面用这种方式写的图片没有这个问题)

    解决方式:把pages引用的图片地址都改为'/static/',以根目录开头
    
  • 之前设置颜色的时候,很喜欢rgba(0,0,0,.1),这样,然后真机测试的时候,我的手机是华为mate9(ios测试过没有问题,可能是安卓的问题)输入的时候是空白的但是有占位,点了回车才能显示,不能边输边显示;debug了半天,最后才发现我字体颜色设置为rgba的时候会导致错误

    解决方式:把color的rgba设置改为#设置
    
  • 使用微信小程序的picker组件实现省-城市选择;本来想直接用picker的城市mode的,但是这个数据要后台返回的而且也没有到区;picker还有一个多列选择器,感觉传入的数据实在是麻烦;最后用picker-view;清清爽爽;就设置两列,分别传入列数组就好了;这里遇到的一个坑就是,在绑定的change函数上,我无法取到当前change的是哪一列的数据;因为这里要做判断,如果是第一列的话,要替换第二列的数组内容;

    解决方式:新建变量,在change函数中赋值,在watch里面监听;
    
  • 不管用onload还是onshow方法,小程序的data里面的值始终没有被初始化;就比如我设置了一个状态变量,初值为false,我在页面操作后变为true;回退再打开时,它依然是true值;这个问题不知道是不是我哪里没有考虑到,暂时只是用了一个不是办法的办法解决

    解决办法:在onload方法内重置状态变量
    
  • 底部导航切换的时候,onshow每次都会调用,但是onload只会调用一次;

  • 对image来说,height:auto这个属性是不生效的;图片自适应的问题搞了半天;因为是一个富文本字符串,因此没有办法像官方文档设置mode;最后升级了我用的转换插件 (mpvue-wxparse)的版本;它支持富文本内设置图片的mode属性。

  • 搜索回车之前用的是@keyup.native 在小程序里面要换成@confirm

  • 还有跳转外链,小程序是有提供一个组件的<web-view :url=""></web-view>,实现的时候,只要单独做一个外链的页面只包含上面这个标签,传入url就可以了。这个标签是立即执行的,有这个的话,就会在当前页面直接跳转,所以我单独把它写成一个页面。专门用于外链跳转;但是外链跳转还是个坑,微信仅能支持跳到在它那边注册过的https的网址,其他还是不行,暂时没有找到好的方式;看了知乎,它的外链直接转成了文本,不可点击了。

最后的话

好了,暂时就写到这么多啦,第一次写小程序,虽然用了mpvue少了很多学习成本,但是转化的时候还是遇到了挺多问题,过程中都一直在网上搜索解决方式啊,也会发问题问问大家;感觉收获还挺大的;听说wepy也挺好用的,下次开发小程序的时候,可以看看试着用用。

原文链接:https://segmentfault.com/a/1190000015963897

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37711.html

文章标题:mpvue实现微信小程序(欢迎踩坑)

相关文章
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
回到顶部