手记

【备战春招】第11天 UniApp项目技术栈

课程名称:SpringBoot2.X + Vue + UniAPP,全栈开发医疗小程序

课程章节:第二章 UNIAPP+Vue3.0+Springboot技术栈分析

课程讲师: 神思者

课程内容:


一、uView组件库

由于UniApp支持多种UI组件库,所以我挑选了uView组件库,集成到了项目中。在package.json文件中。

{

    "dependencies": {

        "dayjs": "^1.11.4",

        "uview-ui": "^2.0.31"

    },

    "devDependencies": {

        "sass": "^1.53.0",

        "sass-loader": "^10.3.1"

    }

}

main.js文件中,让UniApp集成该组件库。

//使用uView组件库

import uView from 'uview-ui'

Vue.use(uView)


uView组件库最大的特点就是手册文档比较齐全,每种组件的用法写的很清楚,而且版本定期迭代升级。

二、小程序分包

微信规定小程序打包后的体积不能超过2M。如果小程序页面较多,代码打包体积超过了2M,可以采用分包的形式,把主包的页面拆分到其他分包中,只要每个分包的体积不超过2M,而且小程序打包总体积不超过64M就可以。本课程的小程序项目就采用了分包加载的方式,主包是pages目录,分包是registrationuser这些目录。

二、封装Ajax请求

与前端Vue项目类似,小程序项目也定义了全局的Ajax封装函数,在`main.js`文件里面有该函数的声明。

Vue.prototype.ajax = function(url, method, data, fun, load) {

    let timer = null

    if (load == true || load == undefined) {

        uni.showLoading({

            title: "执行中"

        })

        timer = setTimeout(function() {

            uni.hideLoading()

        }, 60 * 1000)

    }

    uni.request({

        "url": url,

        "method": method,

        "header": {

            token: uni.getStorageSync("token")

        },

        "data": data,

        success: function(resp) {

            if (load == true || load == undefined) {

                clearTimeout(timer)

                uni.hideLoading()

            }

            if (resp.statusCode == 401) {

                uni.showToast({

                    icon: "error",

                    title: "请登录小程序"

                })

            } else if (resp.statusCode == 200 && resp.data.code == 200) {

                let data = resp.data

                if (data.hasOwnProperty("token")) {

                    let token = data.token

                    uni.setStorageSync("token", token)

                }

                fun(resp)

            } else {

                uni.showToast({

                    icon: "none",

                    title: "执行异常"

                })

                console.error(resp.data)

            }

        },

        fail: function(error) {

            if (load == true || load == undefined) {

                clearTimeout(timer)

                uni.hideLoading()

            }

        }

    })

}

课程收获:通过视频加文档结合的方式,熟悉了UniApp项目技术栈,期待后续学习!


0人推荐
随时随地看视频
慕课网APP