mpvue完成微信小顺序(迎接踩坑)

近来刚运用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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞