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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 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基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
ArrayList类(增强版)
2007/04/04 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python如何实现数据的线性拟合
2019/07/19 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python中包的用法及安装
2020/02/11 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
教师职业道德事迹材料
2014/08/18 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
四年级作文之植物
2019/09/20 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android