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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
js有关元素内容操作小结
Dec 20 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 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
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
php和html的区别点详细总结
2019/09/24 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
js正则相关知识点专题
2018/05/10 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
Python字典底层实现原理详解
2019/12/18 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python实现滑雪游戏
2020/02/22 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
python3的pip路径在哪
2020/06/23 Python
党员岗位承诺书
2014/03/25 职场文书
网络技术专业求职信
2014/07/13 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
防震减灾主题班会
2015/08/14 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
Nginx实现会话保持的两种方式
2022/03/18 Servers