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 相关文章推荐
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
jQuery 选择器详解
Jan 19 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
vue动态设置页面title的方法实例
Aug 23 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python几种常用功能实现代码实例
2019/12/25 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
转预备党员政审材料
2014/02/06 职场文书
岗位职责风险防控
2014/02/18 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
捐书仪式主持词
2015/07/04 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python