介绍

抽象定义一个业务对象, 减少前端代码耦合, 数据维护更方便。
推荐更新到最新版本

下载地址

github: https://github.com/2460392754/uniapp-tools/tree/master/model
dcloud: http://ext.dcloud.net.cn/plugin?id=655

更新日志

https://ext.dcloud.net.cn/plugin?id=655&update_log

1.兼容性测试

✅微信小程序
✅h5
✅android
❓其他平台(没测试)

2.目录结构

示例项目目录结构

  1. hBuilderX\plugins\model
  2. ├── mock            模拟后端数据
  3. │   ├── data
  4. │   │   └── index.js
  5. │   └── index.js
  6. ├── model           model模型生成
  7. │   └── index.model.js
  8. ├── node_modules
  9. ├── pages 
  10. │   └── index
  11. │       └── index.vue
  12. ├── plugins         插件
  13. │   └── model.js
  14. ├── static
  15. │   └── logo.png
  16. ├── xhr             数据请求
  17. │   └── index.xhr.js
  18. ├── App.vue
  19. ├── main.js
  20. ├── manifest.json
  21. ├── package-lock.json
  22. ├── pages.json
  23. └── uni.scss

3.如何创建model模型

后端接口的数据定义

  • type: 数据类型
  • property: 对象的属性路径
  • value: 默认值，不填写则以type数据类型设置为默认值, 默认为否值
    • 例如: type: String, 则默认值为 “” ```javascript // index.model.js

import Model from ‘../plugins/model’

let model = new Model({ id: { type: Number, property: “uuid”, value: 0 }, name: { type: String, property: “author.nickname”, }, age: { type: Number, property: ‘author.age’, value: 18 }, birthday: { type: String, property: ‘author.birthday’, value: ‘01-01(default)’ }, email: { type: String, property: ‘author.email.qq’, }, });

export default model;

  3. <a name="nbDiX"></a>
  4. # 4.业务接口文件
  5. ```javascript
  6. // index.xhr.js
  8. import Model from '../model/index.model'
  10. function request (config) {
  11.     return new Promise((resolve, reject) => {
  12.         uni.request({
  13.             ...config,
  14.             success: resolve,
  15.             fail: reject
  16.         })
  17.     })
  18. }
  20. export default {
  21.     async getMockData () {
  22.         const res = await request({ url: '/api/index/mock' })
  24.         return Model.parse(res.data);
  25.     }
  26. }

5.如何使用

  1. <template>
  2.     <view class="content">
  3.         <view class='id'>id: {{res.id}}</view>
  4.         <view class='name'>name: {{res.name}}</view>
  5.         <view class='age'>age: {{res.age}}</view>
  6.         <view class='birthday'>birthday: {{res.birthday}}</view>
  7.         <view class='email'>email: {{res.email}}</view>
  8.     </view>
  9. </template>
  11. <script>
  12. import request from '../../xhr/index.xhr.js'
  14. export default {
  15.     data () {
  16.         return {
  17.             res: {},
  18.         }
  19.     },
  21.     methods: {
  22.         async get () {
  23.             this.res = await request.getMockData()
  24.         }
  25.     },
  27.     created () {
  28.         this.get();
  29.     }
  30. }
  31. </script>
  33. <style>
  34. </style>

最后

出现bug了？
遇到无法解决的问题？
直接加我q或者发邮件也行

email: 2460392754@qq.com
qq: 2460392754

欢迎交流或探讨问题！