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也挺好用的,下次开发小程序的时候,可以看看试着用用。
mpvue实现微信小程序(欢迎踩坑)的更多相关文章
- 我的微信小程序入门踩坑之旅
前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...
- mpvue微信小程序项目踩坑记录
1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...
- 微信小程序开发踩坑日记
2017.12.29 踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录 微信小程序设置元素满屏,横向直接w ...
- 微信小程序开发踩坑记
前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...
- 微信小程序开发踩坑与总结 -
原文链接:https://segmentfault.com/a/1190000008516296 前段时间把公司小程序项目开发完成了,所以来写写自己开发过程中碰到的问题和解决方法,以及用到的提高效率的 ...
- 微信小程序开发-踩坑
异步请求处理 详情描述: 微信小程序的wx.request({})请求时异步处理,以下代码 wx.reuest({ url:"https://XXXA", method:" ...
- 【微信小程序】踩坑指南(持续更新)
前言 说明: 基于mpvue框架:mpvue官方文档 语法同vue框架:vue官方文档 小程序中会有一些坑点,这里会就工作中遇到的坑一一列举出来 无说明时请直接看代码注释 v-show无法使用在小程序 ...
- [转]微信小程序开发踩坑记录
本文转自:http://www.cnblogs.com/NKnife/p/6283605.html 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app. ...
- 微信小程序开发踩坑记录
1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function() ...
- 微信小程序开发踩坑之旅
项目之始: 一.搭建新项目时出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app ...
随机推荐
- wap开发tips
1.overflow-x 这真的是一个大坑,一旦你在body或者html上用了这个属性,对不起,如果你的页面出现滚动条的话,那就会出现莫名其妙的bug,滑动页面的时候fix在顶部或者底部的会挡住. 解 ...
- Fabric基础架构原理(二)
Fabric 的网络节点本质上是互相复制的状态机,节点之间需要保持相同的账本状态.为了实现这个目的,各个节点需要通过共识( consensus )过程,对账本状态的变化达成一致性的认同. Fabric ...
- CentOS yum 安装历史版本 java
1.以1.6为例,找到对应版本 $ yum --showduplicate list java* |grep 1.6 java--openjdk.x86_64 :1.6.0.41-1.13.13.1. ...
- sshd使用
sshd服务 1.sshd介绍 sshd为secure shell的简称:可以通过网络在主机中开机shell的服务 连接方式(在客户端):ssh username@ip #文本模式 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_14-ArrayList集合的常用方法和循环
常用的方法记下来 刚创建好,什么都不放的 add添加方法肯定是成功的. 加了这么多的值都没有用返回值,输出的结果可以看到都是添加成功的 获取索引值 ALT+回车键,推荐使用本地变量去接收 这样左边就会 ...
- 【EWM系列】SAP EWM创建warehouse task的函数
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP EWM创建warehouse ...
- docker--docker版本以及安装
3 docker 版本以及安装 3.1 docker 版本介绍 https://www.docker.com/ Docker CE 在 17.03 版本之前叫 Docker Engine, Docke ...
- PyTorch笔记之 Dataset 和 Dataloader
一.简介 在 PyTorch 中,我们的数据集往往会用一个类去表示,在训练时用 Dataloader 产生一个 batch 的数据 https://pytorch.org/tutorials/begi ...
- iBatis框架之配置文件之注意点之总结
1.配置文件sqlMap.xml中需要注意的点 比如: <?xml version="1.0" encoding="UTF-8" ?> <!D ...
- Git-第三篇廖雪峰Git教程学习笔记(2)回退修改,恢复文件
1.工作区 C:\fyliu\lfyTemp\gitLocalRepository\yangjie 2.版本库 我们使用git init命令创建的.git就是我们的版本库.Git的版本库里存了很多东西 ...