技術標籤：vue.js小程式

文章目錄

• 前言
• 一、app.json提示未找到
• 二、vuejs控制class
• 三、mpvue vuex的最簡單用法--僅全域性變數
• • 1.建立store.js
  • 2.讀取，修改資料
• 四、微信小程式原生元件input
• • 1.儲存狀態和資訊變數
  • 2.建立元件並繫結方法
  • 2.實現方法（從false-->true才會彈出）
• 最後留的點問題

前言

最近剛開始使用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: ‘’})
都可以很好的解決