欢迎光临企业官网建站网站,提供自助建设系统平台服务

企业官网建站

专业为公司品牌推广建设网站

基于uni-app编写的登录模板,request请求封装,全局路由拦截,也可作为项目基础模板使用

作者:jcmp      发布时间:2021-04-21      浏览量:0
做一个新的项目就需要常用的代码,比如为了

做一个新的项目就需要常用的代码,比如

为了提高自己的效率(说白了有点懒)决定把这些作为基础模板,下次做新项目直接用就行了。

效果图

全局路由守卫

(1) 路由拦截

uni-simple-router 路由、拦截、最优雅的解决方案。

(2) 路由配置

通过 vue.config.js 配合 uni-read-pages ,可以随心所欲的读取 pages.json 下的所有配置。

Request封装

适用于一项目多域名请求、七牛云图片上传、本地服务器图片上传、支持 Promise.

api集中管理

api集中管理; 为简化逻辑代码量整洁的原则,像调用函数一样调用api,做到代码分离,在apis目录统一创建api函数,并且封装接口返回数据类型校验的方法,挂载到vue原型中,页面通过 this.$apis.apiName() 调用。

分包

sub目录分包管理 由于微信小程序的限制,上传发布机制总包大小不能大于2m,所以项目若超出该限制,要在page.json中做分包处理,分包处理的配置与pages目录保持一致。

配置vuex

不需要引入每个子store模块

import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const files = require.context("./modules", false, /\.js$/);let modules = { state: {}, mutations: {}, actions: {}};files.keys().forEach((key) => { Object.assign(modules.state, files(key)["state"]); Object.assign(modules.mutations, files(key)["mutations"]); Object.assign(modules.actions, files(key)["actions"]);});const store = new Vuex.Store(modules);export default store;

页面使用Vuex

import { mapState,mapActions } from 'vuex';computed: { ...mapState(['userInfo']) }methods: { ...mapActions(['getUserInfo']) }

源码下载

后面持续更新。。。。

反编译获取任何微信小程序源码——看这篇就够了

抽签小程序,妈妈再也不用担心谁洗碗(分配任务)了,so easy。

5分钟实现微信云小程序支付功能(含源码)