对于最近刚做的项目,想着用框架重新架构一遍,方便以后拓展,毕竟现在拓展方向非常大。

目前主要碰到两个略坑的问题:

1: 关于用户授权信息的按钮,原生是以下方式,使用bindgetuserinfo事件

  <button style='width:50%;border-radius:20rpx;color:#fff;' open-type="getUserInfo" bindgetuserinfo="getUserInfo">开始</button>
 
     但是在mpvue下不起作用,监视到getUserInfo事件没反应。网上查了很久才找到对应的方法,如下
 
  <button style='width:50%;border-radius:20rpx;color:#fff;' open-type="getUserInfo" @getuserinfo="bindGetUserInfo">开始</button>
  

这个事件可以写在methods里。

2: 使用axios时,正常步骤的  npm install安装后,再import 引入,使用时会报错。解决方法:

  找到build文件夹下的webpack.base.conf.js更改配置,找到resolve中的alias加入以下一行

然后在页面中使用的时候需要在外面套一层adapte,重复的话很麻烦,所以在封装请求api的时候可以做一下处理。

axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    console.log(config)
    axios.post(util.head+util.login,{
      'code':res.code
    }).then((response) => {
        console.log(response)
    })
  })
}

提示:不但新建文件要重新npm run dev,删除了原始生成的文件也要重新run,最好把dist里生成的对应的小程序类型文件夹也删掉。

总结:对于用惯了原生,开始用mpvue重新做感觉非常费劲,每新建文件夹都要重新run,也是一直在做vue项目,但是现在混合起来发现很怪。

   而且之前是直接在微信开发工具上写代码,一边写一边就能看,现在必须放在编辑器里写,导致来回切就显得麻烦(微信开发工具不支持vue文件的打开)

   建议如果是新上手小程序的朋友可以直接上原生的。

 建议新上手小程序的朋友先采用原生。 

mpvue重构小程序之坑点1的更多相关文章

  1. 关于mpvue编写小程序的坑

    在引入第三方UI时 百度了很多方法,对于第一次接触的,在我们写vue的页面需要添加main.json 同时在写文件时,要在最后不要加 “,”  !!!并且在微信小程序会出现路径报错 在微信小程序中点击 ...

  2. 使用mpvue开发小程序

    前言: 最近接到小程序的开发需求,由于之前也没开发过小程序,心情还是有点激动.先花15分钟看一遍小程序官方文档,再花10分钟看一遍mpvue官方文档,然后拿着原型图和UI图就开干.踩了不少坑,写篇博客 ...

  3. 使用mpvue开发小程序教程(四)

    在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步.今天我们将进一步来 ...

  4. 使用mpvue开发小程序教程(五)

    在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法.在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,让每个部分都保持功能简洁.条理清楚.各司 ...

  5. 学习笔记:mpvue开发小程序——入门

    接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...

  6. 使用mpvue开发小程序教程(一)

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  7. 使用mpvue开发小程序教程(二)

    在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在V ...

  8. 使用mpvue开发小程序教程(三)

    在上一篇文章中,我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构,大致了解了每一个部分的代码到底要放到何处.从本文起我们就开始涉及真正的编码部分,学习使用Vue的语法去编写小程序 ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

随机推荐

  1. jade 入门

    推荐网站: jade官网 html在线转换为jade 参考文章1 参考文章2     node的模板常用的有两个,一个是ejs,另外一个就是jade,相对来说,ejs更容易理解,像原生的html,很多 ...

  2. php fopen()和file_get_contents() 区别介绍

    本文章向码农们介绍PHP使用fopen与file_get_contents读取文件实例分享及这两个函数的区别,需要的码农可以参考一下. php中读取文件可以使用fopen和file_get_conte ...

  3. 翻String.Format源码发现的新东西:StringBuilderCache

    起因: 记不清楚今天是为毛点想F12看String.Format的实现源码了,反正就看到了下图的鸟东西: 瞬间石化有没有,StringBuilder还能这么获取? 研究StringBuilderCac ...

  4. vueHistory 模式下,布置到服务器上路由刷新会报nginx404错误

    之前写完vue项目后,布置到服务器,用nginx反向代理后,一开始进去,进各种路由都是没问题的,但是一旦f5刷新后就会出现一个nginx404的错误. 经过翻阅vue文档后,发现这是vueHistor ...

  5. 解决 Maven 项目中找不到 jdk 的 tools.jar 文件的办法(多数情况下适用)

    <dependency> <groupId>jdk.tools</groupId> <artifactId>jdk.tools</artifact ...

  6. Android's Media

    MediaService.Main #include <sys/types.h> #include <unistd.h> #include <grp.h> #inc ...

  7. 《深入理解Java 7核心技术与最佳实践》读书笔记(2) Java语言动态性引言

    Java语言是一种静态类型的编程语言.静态类型的含义是指在编译时进行类型检查.Java源代码中的每个变量的类型都要显式地进行声明.所有变量.方法的参数和方法返回值的类型在程序运行之前就必须是已知的.J ...

  8. day001-日期格式类、装拆箱

    1.Object 1.1 String类型可以不用重写toString()方法 1.2 自定义类一般都去重写toString()方法 调用时机: a)对象名调用toString() b)打印输出时,间 ...

  9. js获取及判断键盘按键的方法

    这篇文章主要介绍了js获取及判断键盘按键的方法,涉及JavaScript键盘事件的获取及键值的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下   本文实例讲述了js获取及判断键盘按键的方法.分享 ...

  10. 西门子 SINAMICS S120 Web server 用户名和默认密码

    sinamics web server可以通过浏览器查看驱动器故障等信息,是一个比较方便的辅助工具. 1. 一般用户 SINAMICS 密码 无 2. 管理员 Administrator 密码 Adm ...