热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

mpvue跳转页面及注意事项

下面先给大家介绍下mpvue跳转页面,具体内容如下所示:正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路。第一步就是配置环境之类的。。。附上官网的quickstarthttp:mpvue.com

下面先给大家介绍下mpvue跳转页面,具体内容如下所示:

正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路。

第一步就是配置环境之类的。。。附上官网的quickstart http://mpvue.com/mpvue/quickstart/

相信看完官网的教程之后, 你的项目应该已经搭好了。下面说2个小问题的解决办法吧

1.编译总通不过,eslint限制太严格,关闭它吧(如果你是一个严谨的人,那就..吧)

build文件夹--->webpack.base.conf.js---->module-rules {...loader:'eslint-loader'...} 这里面的都删掉吧

2.写好一个页面,该跳转页面了,一脸懵逼。

就这样,重点是main.js不能少,不然dist里面不会生成对应的文件,npm run dev 重启就可以啦

写完一个小程序,但是还没有做数据交互,除了跳转页面这块,其他的就是vue的问题了,我在做的时候百度了好久跳转页面的问题,最终还是在gitHub看别人的源码学到的了,希望可以帮到你!

下面看下mpvue 注意事项

1、页面跳转,注意是普通跳转navigateTo还是底部导航跳转 switchTab

starQuestion(){
const url = '../subject/main'
// switchTab navigateTo
wx.switchTab({ url })
},

2、变量 图片 文字 引入组件


3、模板注意 设置props 模板名称name


4、关于formid 按钮要把formsubmit 改为@submit 如 bindchange="eventName" 事件,需要写成 @change="eventName"




小程序组件

mpvue 可以支持小程序的原生组件,比如: picker,map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"

示例代码:


 
  当前选择: {{date}}
 

总结

以上所述是小编给大家介绍的mpvue跳转页面及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • 如何在Vue项目中安装和使用VUX组件?
    vux2模板fork自webpack模板,基本和官方同步。1、默认为webpack2模板npminstallvue-cli-g如果还没安装vueinitairyla ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 1.移除consol.log()的babel插件安装:npmibabel-plugin-transform-remove-console-D配置:babel.config.js:这 ... [详细]
  • Vue cli2.0 项目中使用Monaco Editor编辑器
    monaco-editor是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与VisualStudioCode功能几乎相同。在项目中可能会用带代码编 ... [详细]
  • uniapp开发H5解决跨域问题的两种代理方法
    本文介绍了uniapp开发H5解决跨域问题的两种代理方法,分别是在manifest.json文件和vue.config.js文件中设置代理。通过设置代理根域名和配置路径别名,可以实现H5页面的跨域访问。同时还介绍了如何开启内网穿透,让外网的人可以访问到本地调试的H5页面。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • 一、路由首先需要配置路由,就是点击good组件进入goodDetail组件配置路由如下{path:goodDetail,component:goodDetail}同时在good组件中写入如下点击事件,路由中加入 ... [详细]
  • npmrunbuild后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。放到跟目录下就正常了,iis上同样只能在根目录下。我项目的目录如下: ... [详细]
  • ReactJSUIAnt设计空组件原文:https://w ... [详细]
  • npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ... [详细]
  • .babelrc是用来设置转码规则和插件的,这种文件在window上无法直接创建,也无法在HBuilder中创建,甚至无法查看,但可以在sublimetext中创建、查看并编辑。当 ... [详细]
  • Node.js详细安装及环境配置
    1、下载安装根据自己电脑系统及位数选择,我这里选择windows64位.msi格式安装包(官网:https:odejs.orgzh-cndownload).msi和.zip格式区别 ... [详细]
  • 技术周报·2021-05-07-小编推荐向现代Javascript转型原文标题:Publish,ship,andinstallmodernJavaScriptforfaste ... [详细]
author-avatar
鸳鸯520_205
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有