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 相关文章推荐
Javascript中Eval函数的使用
Mar 23 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
通过js修改input、select默认字体颜色
Apr 19 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
微信用户访问小程序的登录过程详解
Sep 20 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类
2006/07/15 PHP
Oracle 常见问题解答
2006/10/09 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
如何快速上手Vuex
2017/02/14 Javascript
js实现tab切换效果
2017/02/16 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python银行系统实战源码
2019/10/25 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
python实现简单的学生管理系统
2021/02/22 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
校友会欢迎辞
2014/01/13 职场文书