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 相关文章推荐
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
详解vue v-model
Aug 31 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
PHP静态成员变量
2017/02/14 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python绘制地震散点图
2019/06/18 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python批量修改交换机密码的示例
2020/09/22 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
超市5.1促销活动
2014/01/15 职场文书
心理健康日活动总结
2014/05/08 职场文书
部队2014年终工作总结
2014/11/27 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL