mpvue跳转页面及注意事项


Posted in Javascript onAugust 03, 2018

下面先给大家介绍下mpvue跳转页面,具体内容如下所示:

正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路。

第一步就是配置环境之类的。。。附上官网的quickstart    http://mpvue.com/mpvue/quickstart/

相信看完官网的教程之后, 你的项目应该已经搭好了。下面说2个小问题的解决办法吧

1.编译总通不过,eslint限制太严格,关闭它吧(如果你是一个严谨的人,那就..吧)

build文件夹--->webpack.base.conf.js---->module-rules {...loader:'eslint-loader'...} 这里面的都删掉吧

2.写好一个页面,该跳转页面了,一脸懵逼。

mpvue跳转页面及注意事项

mpvue跳转页面及注意事项

就这样,重点是main.js不能少,不然dist里面不会生成对应的文件,npm run dev 重启就可以啦

写完一个小程序,但是还没有做数据交互,除了跳转页面这块,其他的就是vue的问题了,我在做的时候百度了好久跳转页面的问题,最终还是在gitHub看别人的源码学到的了,希望可以帮到你!

下面看下mpvue 注意事项

  1、页面跳转,注意是普通跳转navigateTo还是底部导航跳转 switchTab

starQuestion(){
const url = '../subject/main'
// switchTab navigateTo
wx.switchTab({ url })
},

2、变量 图片 文字 引入组件

<img :src="item.ad_url" alt="">
<toast :message="msg" :visible.sync="visible" position="center"></toast>

3、模板注意 设置props 模板名称name

<template>
<div class="userinfo">
<img class="userinfo-avatar" :src='avatarUrl' background-size="cover" />
<div class="userinfo-nickname">
<p>{{nickName}}</p>
</div>
</div>
</template>
<script>
// 头像信息模板
export default {
name: 'inform',
props: {
nickName:'String',
avatarUrl:'String'
}
}
</script>

4、关于formid 按钮要把formsubmit 改为@submit 如 bindchange="eventName" 事件,需要写成 @change="eventName"

<!-- <form report-submit="true" bindsubmit="formSubmit" class="formSubmit"> -->
<form report-submit="true" @submit="formSubmit" class="formSubmit">
<button class="starButton" formType="submit">开始出题</button>
</form>

小程序组件

mpvue 可以支持小程序的原生组件,比如: picker,map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"

示例代码:

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
 <view class="picker">
  当前选择: {{date}}
 </view>
</picker>

总结

以上所述是小编给大家介绍的mpvue跳转页面及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
js播放wav文件(源码)
Apr 22 Javascript
使用js 设置url参数
Jul 08 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 #Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 #Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 #Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 #Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 #Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 #Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 #Javascript
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
关于python写入文件自动换行的问题
2018/06/23 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
应届生个人求职信模板
2013/11/26 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
党员组织关系介绍信
2014/02/13 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
Golang中channel的原理解读(推荐)
2021/10/16 Golang
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL