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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
php+js实现倒计时功能
Jun 02 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
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
PHP的宝库目录--PEAR
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
django celery redis使用具体实践
2019/04/08 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
JPA的特点
2014/10/25 面试题
高中生校园生活自我评价
2013/09/19 职场文书
单位提档介绍信
2015/10/22 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书