基于uni-app的模板,支持h5,小程序，安卓，ios，request请求封装，全局路由拦截,也可作为项目基础模板使用

前言

作者利用业余时间开发，维护, 下载请给个好评或收藏

有问题给5星后加作者qq 2214904953 可得到及时的解答

插件交流QQ群 : 736073015

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

登录，注册 ,找回密码，用户协议，404页面(模板)
全局路由守卫（路由配置）
Request封装（请求封装）
api集中管理
引入依赖的UI库（color-ui,uview-ui2.0）
flex常用布局css,
小程序更新提示代码，配置分包，等必备代码
utils常用工具函数
全局过滤器filters
配置Vuex(store)
无关系组件间的通信。
使用easycom模式，让您无需引入组件即可直接使用（按需加载）
进可攻，退可守的架构
后面持续更新

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

效果图

1、全局路由守卫

(1) 路由拦截

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

(2) 路由配置

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

2、Request封装

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

3、api集中管理

api集中管理；为简化逻辑代码量整洁的原则，像调用函数一样调用api，做到代码分离，在apis目录统一创建api函数

4、小程序更新提示代码，配置分包，等必备代码

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

5、配置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'])}

通用的mutations方法，只需要写一个就行了

 //更新state数据setStateAttr(state, param) {if (param instanceof Array) {for (let item of param) {state[item.key] = item.val;}} else {state[param.key] = param.val;}}

actions调用

 async setUserData({state,commit}, data) {commit('setStateAttr', {key: 'userInfo',val: data})uni.setStorageSync('userInfo', data);},

6、全局过滤器filters

main.js引入filters，使用如下

{{shop.shopAddress|autoAddPoints}}

7、无关系组件间的通信=>事件车

事件车的基本原理就是在本项目Vue的原型对象里新生成一个Vue对象专门用来负责无关系，跨级组件间的通信

main.js声明事件bus

Vue.prototype.$bus = new Vue() // event Bus 用于无关系组件间的通信。

A组件监听($on)

// onload 里面this.$bus.$on('updateChecked', this.updateChecked)// methods 里面
updateChecked(index){console.log('这里就拿到了跨级组件的index',index)}

B组件触发($emit)

B组件触发A组件的updateChecked 传index值给A组件

 this.$bus.$emit('updateChecked', index);

github源码下载

插件市场源码

常见问题

1 运行不了，控制台报错，请安装依赖

npm install

后面持续更新。。。。

如果你导入源码或者学习过程中有任何问题，都可以加我qq：2214904953。大家一起学习，一起进步。
前端学习大佬群493671066，美女多多。老司机快上车，来不及解释了。

作者相关文章

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

零基础搭建获利的美团饿了么优惠券CPS小程序(附源码)

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