【Straw-Uniapp-uView】基于 Uniapp + uView 搭建项目基础模板

叁歲伎倆 2022-10-05 13:58 580阅读 0赞

### 文章目录 ###

*  一、项目简介
 *   *  1、项目概述
     *  2、相关链接
     *  3、基础功能
     *  4、后端搭建
 *  二、开发手册
 *   *  全局约束
     *   *  全局样式约束
         *  全局that约束
     *  代码模板
     *   *  表单
         *  消息提示
         *  确定取消
         *  http请求
         *  请求拦截器
         *  文件上传
         *  路由跳转
         *  弹出表单
         *  基础列表
 *  项目截图
 *  微信公众号

# 一、项目简介 #

## 1、项目概述 ##

基于 Uniapp + uView 搭建项目基础模板，以实际开发总结为准，非常具有实战意义

实际开发中，我们会遇到各式各样的问题，虽然网上已经有很多 UI 框架了，但是实际使用的时候，还是要不断的搭建一些基础功能和逻辑，比如登录、注册、找回密码、退出等，本项目的目的就是直接使用搭建好的模板创建企业中实际需要的项目

## 2、相关链接 ##

*  [Straw-Uniapp-uView 源码][Straw-Uniapp-uView]
 *  [Straw 系列其他项目][Straw]
 *  [Uniapp 官网][Uniapp]
 *  [uView 官网][uView]

## 3、基础功能 ##

仔细读一下 [uView 官方文档][uView]不难发现，已经提供了很多工具，代码的封装等操作，这里我就不一一阐述了，列举一下常用的功能

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>官方地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>表单验证</td> 
   <td><a href="https://www.uviewui.com/components/form.html" rel="nofollow">https://www.uviewui.com/components/form.html</a></td> 
  </tr> 
  <tr> 
   <td>内容为空</td> 
   <td><a href="https://www.uviewui.com/components/empty.html" rel="nofollow">https://www.uviewui.com/components/empty.html</a></td> 
  </tr> 
  <tr> 
   <td>加载更多</td> 
   <td><a href="https://www.uviewui.com/components/loadMore.html" rel="nofollow">https://www.uviewui.com/components/loadMore.html</a></td> 
  </tr> 
  <tr> 
   <td>Http 请求</td> 
   <td><a href="https://www.uviewui.com/js/http.html" rel="nofollow">https://www.uviewui.com/js/http.html</a></td> 
  </tr> 
  <tr> 
   <td>时间格式</td> 
   <td><a href="https://www.uviewui.com/js/time.html" rel="nofollow">https://www.uviewui.com/js/time.html</a></td> 
  </tr> 
  <tr> 
   <td>路由跳转</td> 
   <td><a href="https://www.uviewui.com/js/route.html" rel="nofollow">https://www.uviewui.com/js/route.html</a></td> 
  </tr> 
  <tr> 
   <td>规则校验</td> 
   <td><a href="https://www.uviewui.com/js/test.html" rel="nofollow">https://www.uviewui.com/js/test.html</a></td> 
  </tr> 
 </tbody> 
</table>

## 4、后端搭建 ##

很多小伙伴问这个项目有没有带后端的项目，这里我想的是实际开发中，也不可能直接使用的是我创建好的这个项目，因为很多其他因素，你不可能直接就能使用别人的模板，比如实际项目是一个嵌入到老项目的情况，就不适用整个项目直接嵌入

后端只需要满足登录逻辑即可：用户登录获取 token，然后使用 token 获取用户信息（用户基本信息、角色信息、权限信息），每次请求的头部增加 token 验证即可

所以这里我并没有直接将这个前端项目绑定一个后端项目，主要目的是方便扩展

后端的实现通常是 springboot + shiro + jwt + redis  
实现的前后端分离，这里我也是整理了一个项目，方便使用，或者集成到公司其他项目，Straw-Shiro-Jwt

# 二、开发手册 #

## 全局约束 ##

### 全局样式约束 ###

### 全局that约束 ###

由于很多方法涉及到当前内部 this 的限制，需要手动定义that来取代，所以我们直接一开始就定义 that

## 代码模板 ##

### 表单 ###

### 消息提示 ###

*  [uView 官方文档：Toast 消息提示][uView _Toast]
 *  成功提示

<template>
        <view>
            <u-button @click="openMsg">弹出消息</u-button>
            <u-toast ref="uToast" />
        </view>
    </template>
    
    <script>
        let that;
    
        export default { 
            onLoad() { 
                that = this;
                that.openMsg();
            },
            methods: { 
                openMsg() { 
                    that.$refs.uToast.show({ 
                        type: 'success',
                        title: '操作成功'
                    });
                },
            }
        }
    </script>

*  失败提示

<template>
        <view>
            <u-button @click="openMsg">弹出消息</u-button>
            <u-toast ref="uToast" />
        </view>
    </template>
    
    <script>
        let that;
    
        export default { 
            onLoad() { 
                that = this;
                that.openMsg();
            },
            methods: { 
                openMsg() { 
                    that.$refs.uToast.show({ 
                        type: 'error',
                        title: '操作失败'
                    });
                },
            }
        }
    </script>

*  消息关闭后跳转

<template>
        <view>
            <u-button @click="openMsg">弹出消息</u-button>
            <u-toast ref="uToast" />
        </view>
    </template>
    
    <script>
        let that;
    
        export default { 
            onLoad() { 
                that = this;
                that.openMsg();
            },
            methods: { 
                openMsg() { 
                    that.$refs.uToast.show({ 
                        type: 'success',
                        title: '操作成功',
                        url: '/pages/test/add'
                    });
                },
            }
        }
    </script>

*  消息关闭后回调

<template>
        <view>
            <u-button @click="openMsg">弹出消息</u-button>
            <u-toast ref="uToast" />
        </view>
    </template>
    
    <script>
        let that;
    
        export default { 
            onLoad() { 
                that = this;
                that.openMsg();
            },
            methods: { 
                openMsg() { 
                    that.$refs.uToast.show({ 
                        type: 'success',
                        title: '操作成功',
                        callback: function () { 
                            // 业务方法
                        }
                    });
                },
            }
        }
    </script>

### 确定取消 ###

### http请求 ###

*  异步请求

*  同步请求

> 说明：我们在某个地方使用await，意味着调用的函数本身或者生命周期，必须要加上async前缀，否则出错

### 请求拦截器 ###

`common/http.interceptor.js`，官方提供的方法如下，具体的可以根据项目来自定义业务处理

然后在main.js 中调用

import httpInterceptor from '@/common/http.interceptor.js';
    Vue.use(httpInterceptor, app);

### 文件上传 ###

### 路由跳转 ###

*  [uView 官方文档：路由跳转][uView 1]

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>navigateTo</td> 
   <td>false</td> 
   <td align="left"><code>navigateTo</code>或<code>to</code>对应<code>uni.navigateTo</code>，<code>redirect</code>或<code>redirectTo</code>对应<code>uni.redirectTo</code>，<code>switchTab</code>或<code>tab</code>对应<code>uni.switchTab</code>，<code>reLaunch</code>对应<code>uni.reLaunch</code>，<code>navigateBack</code>或<code>back</code>对应<code>uni.navigateBack</code></td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>String</td> 
   <td>-</td> 
   <td>false</td> 
   <td align="left"><code>type</code>为<code>navigateTo</code>，<code>redirectTo</code>，<code>switchTab</code>，<code>reLaunch</code>时为必填</td> 
  </tr> 
  <tr> 
   <td>delta</td> 
   <td>Number</td> 
   <td>1</td> 
   <td>false</td> 
   <td align="left"><code>type</code>为<code>navigateBack</code>时用到，表示返回的页面数</td> 
  </tr> 
  <tr> 
   <td>params</td> 
   <td>Object</td> 
   <td>-</td> 
   <td>false</td> 
   <td align="left">传递的对象形式的参数，如{name: ‘lisa’, age: 18}</td> 
  </tr> 
  <tr> 
   <td>animationType</td> 
   <td>String</td> 
   <td>pop-in</td> 
   <td>false</td> 
   <td align="left">只在APP生效，详见<a href="https://uniapp.dcloud.io/api/router?id=animation" rel="nofollow">窗口动画</a></td> 
  </tr> 
  <tr> 
   <td>animationDuration</td> 
   <td>Number</td> 
   <td>300</td> 
   <td>false</td> 
   <td align="left">动画持续时间，单位ms</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>接口</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigateTo</td> 
   <td align="left">保留当前页面，跳转到应用内的某个页面，使用<code>uni.navigateBack</code>可以返回到原页面navigateTo</td> 
  </tr> 
  <tr> 
   <td>redirectTo</td> 
   <td align="left">关闭当前页面，跳转到应用内的某个页面</td> 
  </tr> 
  <tr> 
   <td>switchTab</td> 
   <td align="left">跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</td> 
  </tr> 
  <tr> 
   <td>reLaunch</td> 
   <td align="left">关闭所有页面，打开到应用内的某个页面</td> 
  </tr> 
  <tr> 
   <td>navigateBack</td> 
   <td align="left">关闭当前页面，返回上一页面或多级页面。可通过 <code>getCurrentPages()</code> 获取当前的页面栈，决定需要返回几层</td> 
  </tr> 
 </tbody> 
</table>

使用示例

### 弹出表单 ###

### 基础列表 ###

下拉刷新、上拉加载、添加、编辑、删除

# 项目截图 #

# 微信公众号 #

![每天Get一个小技巧][Get]

[Straw-Uniapp-uView]: https://gitee.com/tellsea/Straw-Uniapp-uView
[Straw]: https://blog.csdn.net/qq_38762237/category_11123443.html
[Uniapp]: https://uniapp.dcloud.io/
[uView]: https://www.uviewui.com/
[uView _Toast]: https://www.uviewui.com/components/toast.html
[uView 1]: https://www.uviewui.com/js/route.html
[Get]: /images/20221005/2b03deedacec411db4cd6527b7976c19.png