mpvue跳转页面及注意事项

作者:mrr 时间:2024-05-02 16:09:57 

下面先给大家介绍下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跳转页面及注意事项网站的支持!

标签:mpvue,跳转,页面
0
投稿

猜你喜欢

  • python学习之基于Python的人脸识别技术学习

    2021-04-23 22:09:25
  • 在python中实现导入一个需要传参的模块

    2022-04-08 18:48:24
  • python+selenium+autoit实现文件上传功能

    2021-01-16 12:00:04
  • 基于Bootstrap+jQuery.validate实现Form表单验证

    2024-05-13 09:06:57
  • MySQL 基于时间点的快速恢复方案

    2024-01-28 17:27:44
  • 浅谈python requests 的put, post 请求参数的问题

    2023-05-06 14:54:47
  • Python实现滑雪小游戏

    2023-08-10 15:30:03
  • Python实现暴力破解有密码的zip文件的方法

    2023-11-22 22:48:40
  • python3.6数独问题的解决

    2022-06-21 20:40:32
  • CSS网页设计时关于字体大小的设计

    2008-10-23 13:42:00
  • MySQL数据库查询之多表查询总结

    2024-01-13 21:49:47
  • 一直闪烁变色的超级链接代码

    2008-02-27 13:08:00
  • 使用python编写简单计算器

    2023-08-27 17:07:46
  • php完全过滤HTML,JS,CSS等标签

    2023-10-09 08:07:34
  • photoshop快捷键大全及使用技巧

    2007-10-26 07:40:00
  • python基于三阶贝塞尔曲线的数据平滑算法

    2022-04-19 18:23:06
  • PHP实现根据数组某个键值大小进行排序的方法

    2023-11-15 00:35:55
  • GO语言实现简单的目录复制功能

    2024-04-26 17:21:39
  • PHP闭包定义与使用简单示例

    2023-11-23 03:12:15
  • Python可视化分析全球火山分布

    2022-01-17 05:32:10
  • asp之家 网络编程 m.aspxhome.com