mpvue实现微信小程序（欢迎踩坑）

jas0n 发布于2019-08-29 16:21 / 2831人阅读

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。

最近刚使用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

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

最后的话

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

服务器托管云服务器微信小程序技术实现微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113686.html

mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

xuexiangjys 2019-08-23 10:56 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

notebin 2019-08-02 11:13 评论0 收藏0
微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

摘要：此时正确姿势如下变成这样子不让它换行到这里，就基本如我所愿了，大概长这样二隐藏滚动条在网上搜了很多，都是说加上这段代码就可以隐藏滚动条或者有的人说这样子隐藏滚动条然而两种方法我都试过，的滚动条依然存在。。一、实践踩坑项目使用mpvue开发 1. scroll-view默认是不滚动的。。所以要先设置scroll-x=true或者scroll-y=true showImg(https...

wemall 2019-08-26 13:37 评论0 收藏0
在小程序/mpvue中使用flyio发起网络请求

摘要：上一篇文章介绍了在快应用中使用，本文主要介绍一下如何在微信小程序中使用。下面我们看看在微信小程序中和中如何使用微信小程序微信小程序采用开发技术栈，使用语言开发，但是运行时和浏览器又有所不同，导致等库无法在微信小程序中使用，而可以。 Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信...

mumumu 2019-08-22 15:49 评论0 收藏0
微信小程序mpvue框架总结

摘要：原理架构作为与之间相互通信的桥梁部分在环境中注入的实现代码，包含了协议的拼装发送参数池回调池等一些基础功能。部分在客户端中的功能映射代码，实现了拦截与解析环境信息的注入通用功能映射等功能。原理架构 JSBridge 作为native 与 JS 之间相互通信的桥梁JS部分(bridge): 在JS环境中注入 bridge 的实现代码，包含了协议的拼装/发送/参数池/回调池等一些基础功能...

microelec 2019-08-23 18:32 评论0 收藏0