使用uView UI+UniApp开发微信小程序

// main.js
import uView from "uview-ui";
Vue.use(uView);

/* uni.scss */
@import 'uview-ui/theme.scss';

<style lang="scss">
    @import "uview-ui/index.scss";
    @import "common/demo.scss";
</style>

// 引入uView提供的对vuex的简写法文件
let vuexStore = require('@/store/$u.mixin.js')
Vue.mixin(vuexStore) //引入后自动将Vuex里面的键作为Computed的属性

// 引入uView对小程序分享的mixin封装
let mpShare = require('uview-ui/libs/mixin/mpShare.js')
Vue.mixin(mpShare)

<view class="u-flex-1">
    <view class="u-font-16 u-p-b-20">用户名称：{{vuex_user.fullName}}</view>
    <view class="u-font-12 u-p-b-20">手机号：{{vuex_user.mobilePhone}}</view>
    <view class="u-font-12 ">邮箱：{{vuex_user.email}}</view>
</view>

    //缓存其他信息
    vm.$u.vuex('vuex_user.name', name)
    vm.$u.vuex('vuex_user.fullName', fullName)
    vm.$u.vuex('vuex_user.mobilePhone', mobilePhone)
    vm.$u.vuex('vuex_user.email', email)
    vm.$u.vuex('vuex_user.roles', roles)
    vm.$u.vuex('vuex_user.roles', roleNames)

this.$u.vuex('vuex_user.name', name)

<script>
    export default {
        globalData: {
            username: ''
        },
        onLaunch() {
            //如果用户没有登录或令牌失效，跳转到登录界面
            // console.log(this.vuex_token)
            if(!this.vuex_token) {
                this.$u.route({
                    url: 'pages/template/login/password'
                });
            } else {
                uni.switchTab({
                    url: '/pages/example/myinfo'
                });
            }
        },
    }
</script>

<style lang="scss">
    @import "uview-ui/index.scss";
    @import "common/demo.scss";
</style>

submit() {
    this.$refs.uForm.validate(valid => {
        if (valid) {
            this.$u.api.User.login(this.model).then(data => {
                // 登陆成功跳转到Tab页面                
                uni.switchTab({
                    url: '/pages/example/myinfo'
                });
            });
        } else {
            console.log('验证失败');
        }
    });
},

// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js'
Vue.use(httpInterceptor, app)

// http接口API抽离，免于写url或者一些固定的参数
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)

import User from '../api/user.js'

// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {

    // 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
    vm.$u.api = { // 将 vm 对象传递到模块中
        User: User(vm)
    }
}

export default { install }

const install = (Vue, vm) => {
    Vue.prototype.$u.http.setConfig({
        baseUrl: 'http://localhost:27206/', //接口访问基础路径
        showLoading: true, // 是否显示请求中的loading
        loadingText: '请求中...', // 请求loading中的文字提示
        loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms

        // 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
        // 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
        // originalData: true, 
        // 设置自定义头部content-type
        // header: {
        //     'content-type': 'application/json;charset=UTF-8'
        // }
    })

    // 响应拦截，判断状态码是否通过
    Vue.prototype.$u.http.interceptor.response = res => {
        // console.log(res)
        // 如果把originalData设置为了true，这里得到将会是服务器返回的所有的原始数据
        // 判断可能变成了res.statueCode，或者res.data.code之类的，请打印查看结果
        if (!vm.$u.test.isEmpty(res.success)) {
            // res为服务端返回值，可能有code，result等字段
            // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
            // 如果配置了originalData为true，请留意这里的返回值
            return res.result
        } else {
            var msg = ''
            var data =res.result
            if (data && data.error && data.error.message) {
                msg = data.error.message
                vm.$u.toast(msg)
            }
            // 如果返回false，则会调用Promise的reject回调，
            // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
            return false            
        }
    }