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

//main.js
import uView from "uview-ui";

Vue.use(uView);

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

<stylelang="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)

<viewclass="u-flex-1">
    <viewclass="u-font-16 u-p-b-20">用户名称：{{vuex_user.fullName}}</view>
    <viewclass="u-font-12 u-p-b-20">手机号：{{vuex_user.mobilePhone}}</view>
    <viewclass="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>exportdefault{

        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>

<stylelang="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)

    }

}



exportdefault { 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，请留意这里的返回值
            returnres.result

        }else{var msg = ''
            var data =res.resultif (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}

    }