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

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

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. git分布式的理解----简单服务端搭建

    Git是分布式的,并没有服务端跟客户端之分,所谓的服务端安装的其实也是git.Git支持四种协议,file,ssh,git,http.ssh是使用较多的,下面使用ssh搭建一个免密码登录的服务端. 1 ...

  2. SSH密钥登录原理

    Client 发送请求 login 请求 --> Server 接受请求 --> 根据 authorized_key 文件中的对应 Client 的 ip 地址的公钥对一串随机数进行加密 ...

  3. Ubuntu上的相关问题

    一.解决Ubuntu中vi命令的编辑模式下不能正常使用方向键和退格键的问题 在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由 ...

  4. Java 之 Serializable 序列化和反序列化的概念,作用的通俗易懂的解释

    遇到这个 Java Serializable 序列化这个接口,我们可能会有如下的问题a,什么叫序列化和反序列化b,作用.为啥要实现这个 Serializable 接口,也就是为啥要序列化c,seria ...

  5. 第一个flask程序

    flask简介: flask是一款非常流行的Python Web框架,出生于2010年,作者是Armin  Ronacher,本来这个项目只是作者在愚人节的一个玩笑,后来由于非常受欢迎,进而成为一个正 ...

  6. executenonquery只对insert,delete,update有效,查询select会默认返回-1

    问题:cmd.ExecuteNonQuery() 方法总是返回-1 原因:ExecuteNonQuery() 方法 select 返回-1 解释:执行Select子句,数据库并无变化,自然返回-1同样 ...

  7. maven常用依赖

    HttpServletRequest HttpServletResponse <dependency> <groupId>javax.servlet</groupId&g ...

  8. winform文件拖入

    //view.AllowDrop = true; ---------------------------------------- private void view_DragEnter(DragEv ...

  9. Redis数据类型(字符串)

    Redis存放的字符串为二进制是安全的.字符串长度支持到512M. incr 递增数字INCR key 当存储的字符串是整数时,redis提供了一个实用的命令INCR,其作用是让当前键值递增,并返回递 ...

  10. Android OS Startup

    OS puts emphases on how to provide interfaces to user's APPs for using hardware device in the conven ...