用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2021-9-26 00:52

在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API、Winform端、Bootstrap-Vue的公司动态网站前端、VueElement的管理前端等内容,基本都是基于Web API基础的。完成这些基础准备和布局后,我们继续将技术的 ...

在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API、Winform端、Bootstrap-Vue的公司动态网站前端、Vue&Element的管理前端等内容,基本都是基于Web API基础的。完成这些基础准备和布局后,我们继续将技术的触角放到使用Vue语言开发小程序的场景中,本篇随笔介绍使用uView UI+UniApp开发微信小程序,介绍使用准备过程中的一些注意点和经验总结。

1、小程序的开发准备工作

我们在开发小程序之前,需要了解一些基本的知识,以及掌握一些常规的开发工具,相关知识最好能够在着手开始前有所掌握,然后在开发过程中逐步加强巩固即可。

1)Vue语言掌握

我们通过Vue官网https://cn.vuejs.org/v2/guide/index.html,了解相关的语言基础只是,这个部分我们利用Vue开发小程序的基础,必须先有所掌握相关基础知识,以及开发组件中涉及到的知识点。

Vue可以是我们后续前端开发的强力助手,如果我们掌握的好,对很多相关的处理会一目了然,否则可能不明所以,如Mixin混入、以及组件的事件属性的通讯关系、Vuex的存取处理、常用的JS模块、ES6的函数定义及Promise的处理等等。

随着我们对Vue开发的逐步熟悉,各种特性我们会一一记在脑中并能够熟练运用。

 

2)UniApp官网

我们需要了解UniApp的基础,包括它的相关理念,下面介绍的uViewUI本身也是基于它的进一步封装,使用UniApp和HbuliderX 工具可以开发各种不同的小程序,APP、H5等场景,不过我们这里着重考虑微信小程序。

 

3)uView UI官网

通过官网https://www.uviewui.com/components/intro.html,了解组件的使用,以及一些基础的知识,如easycom的约定、全局变量特别是Vuex的混入及使用过程、JS类库等处理。

我们本次开发小程序,需要利用uView UI的组件代码下载下来进行项目的整合使用,或者利用HBuilder X的工具,直接下载使用UniApp官网的uView UI插件模块。

uView UI提供了各种界面上用到的组件,几乎封装了我们常见到的各种界面元素,极大的方便了我们小程序界面的开发工作,如果有些特殊的功能界面,也可以从UniApp官网的插件列表中寻找进行整合。

 

4)官方小程序网站

通过官网https://developers.weixin.qq.com/miniprogram/dev/framework/了解微信小程序的基础知识,我们利用uView UI+UniApp开发微信小程序,本身还是对官方小程序接口的封装处理,我们有时候还是需要对其中的相关生命周期,底层函数等有一定的了解,才能更好的理解微信小程序的各种机制和处理方式。

 

5)开发工具

我们这里开发UniApp程序,推荐还是使用HBuilderX来开发,相对通用的前端开发工具VS Code来说,它的有些处理更特性化,然后熟悉配合《微信开发者工具》进行小程序的调试和部署即可。

 

2、uView UI的使用

以Web API为业务数据的接口基石,我们可以扩展很多业务管理端,包括Winform端、Vue&Element业务管理端、动态门户网站、微信小程序等等。


 我们循例介绍一下uView UI的基础使用步骤,首先在项目中main.js引入对应的组件-引入uView主JS库。

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

检查uni.scss中已经加入了uView UI的样式,引入uView的全局SCSS主题文件

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

检查app.vue中加入了对应的样式,在App.vue中首行的位置引入

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

一般来说,我们创建示例项目,都有这些基础的设置了,我这里只是循例介绍一下,让我们有所了解它的工作原理。

 

 我这里还是主要介绍uView的this.$u的相关对象处理,它是通过Vue.prototype进行挂载进去的,也就是我们使用这些,都是uView加入的,如下main.js部分内容所示。

复制代码
// 引入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)
复制代码

在项目中,我们可以找到对应项目的store实现,以及uview对象Mixin混入的部分

 

它把登录信息相关的用户和令牌信息,通过storage的方式进行存储起来,并处理好相关的逻辑,这样混入后我们可以方便的通过混入的Computed属性获取到对应的值,或者快速的设置存储起来。

这里的SaveStateKeys就是设置存储到storage中的键,只要存在这两个键的内容,都可以快速的使用Vuex的处理,如下是获取内容。

<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>

由于是页面对象的自动混入,我们甚至在JS代码里面都没有定义这两个对象,只需要记得这个键是我们的全局存储的对象即可。

例如我们在JS的模块里面,通过VM获得this的参数

即可直接调用对象存储处理,如下代码所示。

复制代码
    //缓存其他信息
    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代替vm的变量进行调用

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

storage的信息,可以通过小程序的调试工具进行查看到,如下截图所示。

  

3、小程序的登录状态判断及跳转

 在业务系统中,我们需要根据登录用户的身份获取对应的数据,如果用户没有登录,这些信息是无法获到的,那么我们可以在app.vue中判断用户是否登录,然后调准到对应的页面,如下所示。

 跳转判断在app.vue的程序启动逻辑中进行处理,如下代码所示。

复制代码
<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>
复制代码

其中 uni.switchTab 是跳转到首页的某个tab页面,如果我们的页面有tabbar页面的话。

用户登录的时候,需要输入用户名,密码,构建相关的参数后,进行登录处理

复制代码
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('验证失败');
        }
    });
},
复制代码

其中 this.$u.api.User 是用户API接口的统一调用方式

我们在main.js代码里面看到安装了两个不同的JS模块,如下代码所示。

复制代码
// 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)
复制代码

其中第一个是统一http调用的设置,第二个这是引入一个api对象,方便调用api对应的接口,如下: this.$u.api.User 

以及统一整合各个API对象

复制代码
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 }
复制代码

 

其中在http.interceptor.js里面,统一设置了api的Url的baseUrl,这样可以不用配置反向代理的转义,就可以简化API中URL的定义了。

复制代码
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'
        // }
    })
复制代码

另外我们返回的Response对象里面,有统一定义对象的,相关的数据可以参考随笔《利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理》了解。

一旦程序处理过程中,有错误抛出,都会统一到这里进行处理,有异常的返回JSON如下所示。

其中结果result是用于检查是否执行成功的标识,这里用来判断是否有错误即可,有错误,则显示自定义错误信息

复制代码
    // 响应拦截,判断状态码是否通过
    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            
        }
    }

上面的拦截默认是基于状态码200的,如果我们自定义一些异常,指定了状态码的也需要拦截,需改uview-ui/libs/request/index.js 根据状态码自己去加入,如下代码所示。

 

 用户完成登录,并成功获取身份信息后,切换到指定的页面,如下界面效果所示

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 伍华聪 来自: wuhuacong(伍华聪)的专栏