最近公司需要研发微信小程序，中间踩了一些坑记录下来。
利用axios发送交易
import axios from '../../node_modules/axios/dist/axios'
axios.defaults.adapter = function(config) {
let baseURL;
if (process.env.METHOD === 'proxy1') {
baseURL = 'http://localhost:3001/getMovie' // 本地代理1(100次/小时)
} else if (process.env.METHOD === 'proxy2') {
baseURL = 'http://localhost:3002' // 本地代理2(100次/小时)
} else if (process.env.METHOD === 'nginx') {
baseURL = 'https://www.daxierhao.com/v2/movie' // nginx 代理(100次/小时)
}
console.log('baseURL',baseURL)
//发交易之前显示加载中
wx.showLoading({ title: '拼命加载中...' })
//发交易调用(开发放开注释)
return new Promise((resolve, reject) => {
console.log(config);
wx.request({
...config,
url: baseURL + config.url,
data: config.params,
success: res => {
console.log(res)
if (res.statusCode < 200 || res.statusCode > 300) {
return reject(res.data || {});
}
return resolve(res.data || {});
},
complete: res => {
wx.hideLoading()
// TODO:
}
});
}）
}
export default axios
直接使用axios报错，因为微信小程序必须走wx.request发送交易。
vuex状态管理添加
store.js
import { getBoardData } from '@/utils/api'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
page: 1,
hasMore: true,
movies: [],
type: ''
},
mutations: {
listClearState: (state) => {
console.log('listClearState')
state.page = 1
state.hasMore = true
state.movies = []
},
listMovieList: (state, { data, type }) => {
state.type = type
console.log(data);
if (data.subjects.length) {
state.movies.push.apply(state.movies, data.subjects)
// state.movies=state.movies.concat(data.subjects)
console.log('movies concat end',state.movies.length)
//测试到底用的，10是后台返回的数据，判断是否还有下一页
if(state.movies.length>10){
state.hasMore = false
}
}
}
},
actions: {
async getMovies({ state, commit }, { type, search }) {
console.log('actions')
if (!state.hasMore) return
let data = await getBoardData({ board: type, page: state.page++, search })
commit('listMovieList', { data, type })
}
}
})
export default store
对应页面 调用action方法
import store from './store'
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['movies', 'hasMore', 'type'])
},
methods: {
...mapActions(['getMovies']),
...mapMutations({
clearState: 'listClearState'
}),
async getShowList () {
await this.getMovies({})
}
},
store
}
利用mapState，mapActions，mapMutations进行数据的解构，将store里面的state值和action、mutation上面的方法解构出来。可以直接写this.page获取到用到state上的值，而不用store.state.page先获取到store上的值，然后赋值给this上的变量，页面视图进行取值。同理
...mapActions(['getMovies']),
...mapMutations({
clearState: 'listClearState'
})
可以直接使用this.getMovies和this.clearState使用store上的方法。action中可以进行异步操作，mutation中不能有异步操作
页面进行dispatch一个action，actions中commit一个mutation进行数据更新。
组件
父组件
:movies是通过props传递到子组件，:是v-bind:的缩写，进行动态绑定
子组件