mpvue的踩坑经历（1）

---

前言

最近刚开始使用mpvue来开发微信小程序，特此来记录我的菜鸟生活。

---

一、app.json提示未找到

这个很好解决，修改project.config.json里的miniprogramRoot为dist/wx/即可,也就是mpvue构建的文件夹

二、vuejs控制class

我觉得这种方式比较简单好用，其实是style我没有操作成功，后面查了一下，官方也不推荐，就算修改了也渲染不出来。

三、mpvue vuex的最简单用法–仅全局变量

1.创建store.js

代码如下（示例）：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    str1:'hello,world',
    num:521
  },
  mutations: {
    increment: (state) => {
      const obj = state
      obj.num += 1
    },
    decrement: (state) => {
      const obj = state
      obj.num -= 1
    }
  }
});
export default store

2.读取，修改数据

代码如下（示例）：

//修改数据
methods:{
	decrease(){
	      store.commit("increment")
	}
}
//读取数据，可作为属性渲染至界面，没有computed属性则无法渲染上去
  computed:{
	str1 (){
	  return store.state.str1;
	},
	num1(){
	  return store.state.num;
	}
	}
  

四、微信小程序原生组件input

为什么说他呢，为了使单手能点击到输入框，新增一按钮，使其能打开软键盘，输入数据。但是微信小程序没有DOM，瞬间mmp了有木有，无法直接操作input元素并为其分发click事件，接下来请看我的思路。

1.存储状态和信息变量

	focus: false,
    in_value: 'hello' //搜索输入框的值

2.创建组件并绑定方法

<input @input="autoinput" @blur="onHideInput" :value="in_value" 
 placeholder="户外背包" :focus="focus"  confirm-type="search"/>

2.实现方法（从false–>true才会弹出）

methods:{
    //点击图标弹出键盘
    autoFocus(){
      this.focus = true
    },
    //input输入完后自动同步vue---手动双向绑定
    autoinput(e){
      this.in_value = e.mp.detail.value
    },
    //input失去焦点后修改focus值
    onHideInput(){
      this.focus = false
    }
  }

---

最后留的点问题

微信小程序和vue有很大的不同，但微信能不能直接获得原生组件对象并为其分发事件呢？欢迎大家下方交流

最最后还有一个界面跳转切换，v-if/v-show ; mpvue.navigateTo/reLaunch({url: ‘’})
都可以很好的解决