微信小程序&mpvue问题总结(1)
微信小程序进入到首页的时候,日志打印出“created”, “onlaunch”, “mounted”,具体代码如下:
那么,在小程序中 created() 和 mounted() 究竟什么时刻被调用
首页:
created () {
console.log('created')
},
mounted () {
console.log('mounted')
},
// 监听页面加载
onLoad () {
console.log('onlaunch')
}
解释:
生命周期执行顺序是vue的 created() 函数 —> 小程序的 onLoad()函数 -> vue的mounted()函数,故,小程序开始运行直到第一页出现之前,所有的 vue 实例就已经被创建,也就是说所有的 created() 都被执行。针对每一个页面,onLoad()只会调用一次。
把微信小程序的生命周期勾子和mpvue的生命周期勾子一起使用常使人陷入混乱,所以mpvue官网有这样一句话:除特殊情况外,不建议使用小程序的生命周期钩子
mpvue不支持vue-router
页面跳转常使用 navigateTo 或者 redirectTo
两者区别:navigateTo 进行页面跳转后不会关闭当前页面,此时小程序左上角会出现一个“后退”按钮,可以点击进入到上一个页面。navigateTo 进行页面跳转后会关闭当前页面,故用户无法进行后退操作。
新增了page页面,使用微信开发者工具加载不出来
解决办法:重新 npm run dev
原因:webpack编译文件是由entery决定的,新增的页面没有加入到entery
使用微信开发者工具,点击input无法获取焦点(多发生在联想电脑上,mac电脑上比较少见)
解决办法:长按。如果长按也不行的话,就在该inpu输入框的上方或者周围点击,试图获取焦点
下面点击事件无效
// Button 是自定义组件
<Button :btns="resetBtn" @click="resetPwd"></Button>
解决办法:
<div @click="resetPwd">
<Button :btns="resetBtn"></Button>
</div>
原因:不能直接在组件上绑定点击事件
利用props传值却栽了个跟头,如下
创建了一个公共组件 MbInput ,调用该组件的时候需要通过 prop 传入 maxlength 值。但是在开发过程中没有传入,则默认解析结果为 maxlength=0,所以导致无法输入信息。原代码如下:
export default {
props: ['placeholder', 'list', 'maxlength']
}
建议修改如下,设置该字段必须填写或者给出默认值
export default {
props: {
placeholder: { // 必须提供字段
required: true
},
list: { // 必须提供字段
required: true
},
maxlength: { // 可选字段,有默认值
default: 11
}
}
}
设计给出这样一个需求,要求页面展示如下
要求:
页面中的项目格式是动态变化的,需要显示的项目一般在1-4个之间
只有一个的时候,上下左右居中显示
有两个的时候并排显示,上下居中
有三个的时候,如下图
布局方法:
(1)使用左浮动
(2)使用flex布局,justfy-content: space-around。一个项目的时候,左右居中显示;两个项目的时候,并排,空隙平均分配;三个项目的时候,第三个项目将在它所在的那一行左右居中,为了解决这个问题,动态的在第三个后面添加一个一样宽度的div,设置这个div透明,这样就能达到我们想要的排列效果
关于小程序的wx.setStorage等接口我们可以设置对本地缓存进行设置、获取和清理。本地缓存最大为10MB。那么本地缓存时间是多久?
这些缓存不清理会永久的缓存
该小程序配置session配置
使用 session 的意义:安全。当客户端和服务端建立起连接后,服务端生成JSESSIONID用户标识该用户身份,这个JSESSIONID将被客户端主动存储到cookie中,每次发起连接请求的时候,将cookie携带到header里一起发送。
不选择向客户端种cookie的原因:很多时候cookie在客户端(手机端)是被禁用的;由于cookie存放在客户端,容易被恶意窃取或修改。
配置流程下:
(1)建立连接后,服务端生成JSESSIONID发送给客户端
(2)客户端将该JSESSIONID存储到本地,每次发送请求的时候将其放入header里一起传送
header: {
'content-type': 'application/x-www-form-urlencoded',
cookie: `JSESSIONID=${(getApp().globalData.userInfo && getApp().globalData.userInfo.sessionId) || ''}`
}
v-show不起作用
原因:v-show 无法用于 <template> 元素
解决办法:使用v-if
v-if通常会完整的创建/销毁组件,而v-show只是简单的进行css切换,所以v-if切换时开销更高,建议频繁切换的花使用v-show
created()里面的跳转无效
不要在created()函数里面进行页面跳转
连续点击后退会报错
小程序用navigate跳来跳去不刷新页面吗
微信小程序&mpvue问题总结(1)的更多相关文章
- 微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...
- 微信小程序 mpvue vant
Mpvue中使用Vant Weapp组件库 https://segmentfault.com/a/1190000016228410?utm_source=tag-newest 小程序采坑记 mpvue ...
- 微信小程序(mpvue)—解决视频播放bug的一种方式
// 第一页 <div @click="play(video.src, video.width, video.height)"></div> methods ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 使用mpvue开发微信小程序
更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程 ...
- mpvue学习笔记-之微信小程序数据请求封装
简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...
- 微信小程序----没有 DOM 对象,一切基于组件化 ---- mpvue
封装好用的 类库 和 组件,复用且灵活度高 抽取相同的部分放在函数内部(组件内部) 抽取不同的部分放在形参(组件 props 传参,或者插槽) new Promise 运行时 初始化实例对象的状态为 ...
- mpvue微信小程序多列选择器用法:实现省份城市选择
前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange=&qu ...
- mpvue体验微信小程序开发
微信小程序 https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114 微信小程序是一种全新的连接用 ...
随机推荐
- WinRar:你需要从上一压缩卷启动解压命令以便解压
大文件被分解成许多个小的RAR文件,并按顺序排列好,解压时只需解压第一个RAR文件即可顺利解压所有文件,如果不按顺序解压就会出现上述问题,导致解压完一个子文件候无法解压剩下的文件
- MySQL — DML语言
DML 全称 Data Manipulation Language.数据操作语言,用来对数据库表中的数据进行增删改. 1.添加数据 插入一条数据 给指定字段插入数据:insert into 表名 (字 ...
- selenium+python自动化之iframe
我们以163邮箱登录界面为例,简单讲解下如何定位iframe中元素 一开始直接定位界面上元素,我们会发现无法定位到,为什么呢,我们可以通过查看页面元素发现页面中嵌入的有iframe,需要先定位到ifr ...
- js location.href 和 php header 跳转方式
if ($result){ echo '添加成功';// header('refresh:3,url=user_nameList.php'); echo "<script> al ...
- 判断jQuery是否加载,如果未加载则加载
一般情况返回的js这么写history.go(-1) 但是如果是从别人分享过来的,就没有反应 所以就做个判断,没有上一页就返回首页 if (typeof jQuery == 'undefined') ...
- Adobe photoshop CS6 + 破解补丁
软件位置: 链接:https://pan.baidu.com/s/1KeKRS0yIMfeEbOJQ-ilo0g 破解流程 首先断开网络连接 (如果不断网安装过程中会要求登陆)打开Photoshop ...
- Guava中这些Map的骚操作,让我的代码量减少了50%
原创:微信公众号 码农参上,欢迎分享,转载请保留出处. Guava是google公司开发的一款Java类库扩展工具包,内含了丰富的API,涵盖了集合.缓存.并发.I/O等多个方面.使用这些API一方面 ...
- U8g2库的使用
一.硬件介绍: 由于笔者这里只有0.96寸的OLED屏幕,那就讲讲最常用的0.96寸OLED屏幕吧. OLED介绍: OLED,即有机发光二极管( Organic Light Emitting Dio ...
- PicGo+Typora配置gitee图床
1 .下载Typora Typora官网地址:https://www.typora.io/#windows 本文使用的Typora版本为 0.11.2 根据自己的要求进行安装即可! 2.下载PicGo ...
- 【Linux基础】ps命令详解
PS命令介绍 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动 ...