微信小程序uniapp

1. 根据hubildX创建一个uniapp

2. 整理目录，增加基础目录如（components,api,store,common,utils）

3. 隐藏目录

1.项目目录下，右键打开Git Bash Here
2.输入 touch .gitignore ,生成“.gitignore”文件
3.写入需要隐藏的目录，如：unpackage/ node_modules/

4.建立配置文件 config/index.js

// 可以手动修改打包配置的域名
const ENV = process.env.NODE_ENV === 'production'?'prod':'test'
const ENV_CONFIG = {
    prod:'prod_exc',
    test:'test_exc',
    uat:'uat_exc',
}
const DOMAIN = 'https://baidu.com/';
const baseUrl = `${DOMAIN}/${ENV_CONFIG[ENV]}`

5. 建立request

参考：https://ext.dcloud.net.cn/plugin?id=561

import {
    baseUrl,
} from '@/config/index';
import Fly from 'flyio/dist/npm/wx';
import store from '@/store/index';
const request = new Fly()

// 添加请求拦截器
request.interceptors.request.use((options) => {
    // 在发送请求之前做些什么
    const { token } = store.getters.getMemberInfo;
    options.headers.authorization = token || '';
    options.baseURL = baseUrl;
    options.timeout = 8000;

    const { isLoading = true, } = options;
    if (isLoading) {
        uni.showLoading({
            title: '加载中',
            mask: true,
        });
        delete options.isLoading;
    }
    return options
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use((res) => {
    uni.hideLoading();
    // 对响应数据做些事
    // 登录过期
    // if (!res.data) {
    // return Promise.reject(res)
    // }
    return Promise.resolve(res.data);
}, (error) => {
    uni.hideLoading();
    return Promise.reject(error)
})

export default request;

6. 建立api

//index.js
import requestSomething from './requestSomething'
export default{
    requestSomething
}

//requestSomething.js
import request from '../utils/request'
export default{
    postSomething(params={}){
        return request.post('url',params)
    },
    getSomething(){
        return request.get('url')
    }
}

7. 建立store

1.安装vuex
  npm install vuex --save
  hbuilderx中，右键项目，使用命令行窗口打开所在目录，（若未安装插件会提示安装）

2.创建文件夹及文件

3.在main.js文件中引入store

main.js

  import Vue from 'vue'
  import App from './App'
  import store from './store'
  Vue.config.productionTip = false
  App.mpType = 'app'
  const app = new Vue({
      store,
      ...App
  })
  app.$mount()

index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import actions from './actions'
    import getters from './getters'
    import mutations from './mutations'
    Vue.use(Vuex)
    const store = new Vuex.store({
        state:{
            sayHello:'hello uniapp'
        },
        getters,
        actions,
        mutations
    })
    export default store
    

actions.js 异步方法（可用mutations方法）

	内容：
  actionSayHello(context,params) {
      context.commit('setSayHello',params);
      return true;
  },
——————————————————————————————————————————————————————
  方法调用： this.$store.dispatch('actionSayHello','actions改变sayhello');
  

mutations.js 设置state的数据

  内容：
  export default {
    setSayHello(state, sayHello) {
        state.sayHello = sayHello;
    }
  }
————————————————————————————————————————————————————————————————————
  方法调用： this.$store.commit('setSayHello','这是传值进去的 hello');

getters.js 类似计算属性

  内容:
  export default {
    getSayHello(state){
        return state.sayHello
    }
  }
——————————————————————————————————————————————————————————————————
  方法调用：
    computed:{
        sayHello(){
           return this.$store.getters.getSayHello
        }
    },