m8-codex-mcp 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/knowledge/index.js +1 -1
  3. package/dist/knowledge/standards-summary.js +1 -1
  4. package/dist/templates/vue2.js +1 -1
  5. package/dist/templates/vue3.js +1 -1
  6. package/dist/tools/generate_module_structure.js +1 -1
  7. package/package.json +2 -3
  8. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/000-/347/273/204/344/273/266/345/272/223/344/270/213/350/275/275/344/275/277/347/224/250.md +0 -188
  9. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/001-actionsheet/345/212/250/344/275/234/351/235/242/346/235/277.md +0 -460
  10. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/004-amap/345/234/260/345/233/276.md +0 -285
  11. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/005-button/346/214/211/351/222/256.md +0 -211
  12. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/008-cell/345/215/225/345/205/203/346/240/274.md +0 -213
  13. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/009-checkbox/345/244/215/351/200/211/346/241/206.md +0 -501
  14. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/010-circle/347/216/257/345/275/242/350/277/233/345/272/246/346/235/241.md +0 -168
  15. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/011-datepicker/346/227/245/346/234/237/351/200/211/346/213/251.md +0 -617
  16. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/013-field/350/276/223/345/205/245/346/241/206.md +0 -539
  17. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/015-form/350/241/250/345/215/225.md +0 -999
  18. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/018-header/345/244/264/351/203/250/345/257/274/350/210/252/346/240/217.md +0 -150
  19. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/019-icon/345/233/276/346/240/207.md +0 -133
  20. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/020-loading/345/212/240/350/275/275.md +0 -117
  21. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/021-noticebar/351/200/232/347/237/245/346/240/217.md +0 -152
  22. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/022-numberkeyboard/346/225/260/345/255/227/351/224/256/347/233/230.md +0 -427
  23. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/023-pagination/345/210/206/351/241/265.md +0 -212
  24. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/024-panel/351/235/242/346/235/277.md +0 -85
  25. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/025-passwordinput/345/257/206/347/240/201/350/276/223/345/205/245/346/241/206.md +0 -175
  26. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/026-picker/351/200/211/346/213/251/345/231/250.md +0 -519
  27. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/027-popup/345/274/271/345/207/272/345/261/202.md +0 -152
  28. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/028-progress/350/277/233/345/272/246/346/235/241.md +0 -103
  29. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/029-radio/345/215/225/351/200/211/346/241/206.md +0 -285
  30. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/030-rate/350/257/204/345/210/206.md +0 -189
  31. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/031-search/346/220/234/347/264/242.md +0 -217
  32. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/032-slider/346/273/221/345/235/227.md +0 -166
  33. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/033-stepper/346/255/245/350/277/233/345/231/250.md +0 -340
  34. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/035-swipecell/346/273/221/345/212/250/345/215/225/345/205/203/346/240/274.md +0 -265
  35. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/036-switch/345/274/200/345/205/263.md +0 -196
  36. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/037-switchcell/345/274/200/345/205/263/345/215/225/345/205/203/346/240/274.md +0 -115
  37. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/038-tag/346/240/207/350/256/260.md +0 -232
  38. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/039-treeselect/345/210/206/347/261/273/351/200/211/346/213/251.md +0 -631
  39. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/040-uploader/346/226/207/344/273/266/344/270/212/344/274/240.md +0 -531
  40. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/041-verifycode/351/252/214/350/257/201/347/240/201.md +0 -111
  41. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/042-minirefresh/344/270/213/346/213/211/345/210/267/346/226/260.md +0 -337
  42. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/043-layout/345/270/203/345/261/200.md +0 -150
  43. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/044-image/345/233/276/347/211/207.md +0 -144
  44. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/045-toast/350/275/273/346/217/220/347/244/272.md +0 -429
  45. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/046-calendar/346/227/245/345/216/206.md +0 -467
  46. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/047-area/347/234/201/345/270/202/345/214/272/351/200/211/346/213/251.md +0 -295
  47. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/048-tab/346/240/207/347/255/276/351/241/265.md +0 -577
  48. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/049-dialog/345/274/271/345/207/272/346/241/206.md +0 -491
  49. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/050-dropdownmenu/344/270/213/346/213/211/350/217/234/345/215/225.md +0 -265
  50. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/051-notify/346/266/210/346/201/257/351/200/232/347/237/245.md +0 -203
  51. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/052-overlay/351/201/256/347/275/251/345/261/202.md +0 -139
  52. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/053-collapse/346/212/230/345/217/240/351/235/242/346/235/277.md +0 -199
  53. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/054-grid/345/256/253/346/240/274.md +0 -183
  54. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/055-countdown/345/200/222/350/256/241/346/227/266.md +0 -289
  55. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/056-divider/345/210/206/345/211/262/347/272/277.md +0 -97
  56. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/057-empty/347/251/272/347/212/266/346/200/201.md +0 -146
  57. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/058-imagepreview/345/233/276/347/211/207/351/242/204/350/247/210.md +0 -292
  58. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/059-lazyload/346/207/222/345/212/240/350/275/275.md +0 -120
  59. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/060-skeleton/351/252/250/346/236/266/345/261/217.md +0 -114
  60. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/061-steps/346/255/245/351/252/244/346/235/241.md +0 -119
  61. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/062-sticky/347/262/230/346/200/247/345/270/203/345/261/200.md +0 -208
  62. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/063-indexbar/347/264/242/345/274/225/346/240/217.md +0 -161
  63. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/064-sidebar/344/276/247/350/276/271/345/257/274/350/210/252.md +0 -248
  64. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/065-tabbar/346/240/207/347/255/276/346/240/217.md +0 -314
  65. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/066-badge/345/276/275/346/240/207.md +0 -162
  66. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/067-popover/346/260/224/346/263/241/345/274/271/345/207/272/346/241/206.md +0 -325
  67. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/068-cascader/347/272/247/350/201/224/351/200/211/346/213/251.md +0 -360
  68. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/069-selectperson/351/200/211/344/272/272/347/273/204/344/273/266.md +0 -595
  69. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/070-swipe/350/275/256/346/222/255.md +0 -262
  70. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/071-/345/233/275/351/231/205/345/214/226.md +0 -51
  71. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/072-easycalendar/346/227/245/345/216/206.md +0 -132
  72. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/073-qrcode/344/272/214/347/273/264/347/240/201.md +0 -1538
  73. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/074-imagescale/345/233/276/347/211/207/350/243/201/345/211/252.md +0 -261
  74. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/075-dragsort/346/213/226/346/213/275/346/216/222/345/272/217.md +0 -161
  75. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/076-chart/345/233/276/350/241/250.md +0 -381
  76. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/077-rtc/351/237/263/350/247/206/351/242/221.md +0 -531
  77. package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/078-table/350/241/250/346/240/274.md +0 -849
  78. package/data/m8mpdoc//345/205/270/345/236/213/346/241/210/344/276/213/003-/345/210/227/350/241/250/350/257/246/346/203/205.md +0 -247
  79. package/data/m8mpdoc//345/205/270/345/236/213/346/241/210/344/276/213/003-/345/210/227/350/241/250/350/257/246/346/203/205vue3.md +0 -276
  80. package/data/m8mpdoc//345/205/270/345/236/213/346/241/210/344/276/213/003-/350/241/250/345/215/225/346/217/220/344/272/244.md +0 -130
  81. package/data/m8mpdoc//345/205/270/345/236/213/346/241/210/344/276/213/003-/350/241/250/345/215/225/346/217/220/344/272/244vue3.md +0 -115
  82. package/data/m8mpdoc//346/240/270/345/277/203/351/200/232/347/224/250Util/345/267/245/345/205/267/345/272/223/Ajax/344/270/216/346/226/207/344/273/266/344/270/212/344/274/240.md +0 -456
  83. package/data/m8mpdoc//346/240/270/345/277/203/351/200/232/347/224/250Util/345/267/245/345/205/267/345/272/223//345/267/245/345/205/267/345/207/275/346/225/260/345/272/223.md +0 -398
  84. package/data/standards/01-project/naming.md +0 -158
  85. package/data/standards/01-project/structure.md +0 -106
  86. package/data/standards/01-project/version-detection.md +0 -195
  87. package/data/standards/02-vue/basic.md +0 -242
  88. package/data/standards/02-vue/component.md +0 -299
  89. package/data/standards/02-vue/examples.md +0 -240
  90. package/data/standards/02-vue/performance.md +0 -74
  91. package/data/standards/02-vue/state-management.md +0 -293
  92. package/data/standards/03-css/index.md +0 -165
  93. package/data/standards/04-api/ajax.md +0 -178
  94. package/data/standards/04-api/ejs-api.md +0 -192
  95. package/data/standards/04-api/util.md +0 -166
  96. package/data/standards/05-typescript/index.md +0 -166
  97. package/data/standards/06-mock/index.md +0 -154
  98. package/data/standards/07-router/index.md +0 -141
  99. package/data/standards/README.md +0 -82
  100. package/data/standards/_index.md +0 -215
  101. package/dist/index.d.ts +0 -10
  102. package/dist/index.d.ts.map +0 -1
  103. package/dist/knowledge/index.d.ts +0 -47
  104. package/dist/knowledge/index.d.ts.map +0 -1
  105. package/dist/knowledge/standards-summary.d.ts +0 -106
  106. package/dist/knowledge/standards-summary.d.ts.map +0 -1
  107. package/dist/templates/vue2.d.ts +0 -51
  108. package/dist/templates/vue2.d.ts.map +0 -1
  109. package/dist/templates/vue3.d.ts +0 -53
  110. package/dist/templates/vue3.d.ts.map +0 -1
  111. package/dist/tools/generate_module_structure.d.ts +0 -22
  112. package/dist/tools/generate_module_structure.d.ts.map +0 -1
@@ -1,247 +0,0 @@
1
- # 列表详情
2
-
3
- ## 前言
4
-
5
- 我们使用 `M8.3移动前端框架` 进行下拉刷新列表、详情页面的开发
6
-
7
- 已根据 教程 章节了解 `M8` 开发的思路
8
-
9
- ## 新建模块
10
-
11
- 模块代码统一放在 `src/pages` 下,每个模块应用对应一个文件夹。
12
-
13
- 我们在此路径下新建文件夹,例如 `m8demo`。
14
-
15
- 在 `m8demo` 文件夹下新建 `router.js` 文件,如下:
16
-
17
- `src/pages/m8demo/router.js` :
18
-
19
- ```js
20
- /**
21
- * router.js无需import组件,需要path路径与vue组件名称保持匹配。
22
- * routers数组下有效参数只有path与style。
23
- * 构建时会自动将模块下的路由配置合并到pages.json内。
24
- */
25
-
26
- // 定义路由规则,url匹配path时,加载component组件页面
27
- const routes = [
28
- {
29
- path: 'pages/m8demo/list',
30
- style: {
31
- navigationBarTitleText: '列表页面',
32
- },
33
- },
34
- {
35
- path: 'pages/m8demo/detail',
36
- style: {
37
- navigationBarTitleText: '详情页面',
38
- },
39
- },
40
- ];
41
-
42
- // 导出路由文件
43
- export default routes;
44
- ```
45
-
46
- ## 列表页面
47
-
48
- 接下来我们在 `m8demo` 下新建 `list.vue` 组件页面
49
-
50
- `list.vue` :
51
-
52
- ```js
53
- <!-- template部分 -->
54
- <template>
55
- <!-- template内只能有一个根节点 -->
56
- <view class="container"></view>
57
- </template>
58
-
59
- <!-- js部分 -->
60
- <script></script>
61
-
62
- <!-- css部分 -->
63
- <style scoped></style>
64
- ```
65
-
66
- `M8`的 `easycom` 机制,将组件引用进一步优化,开发者只管使用,无需在 `JS` 里额外导入和注册。
67
-
68
- ```js
69
- <template>
70
- <view class="container">
71
- <em-minirefresh
72
- ref="scrollPull"
73
- :initPageIndex="initPageIndex"
74
- :page-size="pageSize"
75
- :url="url"
76
- :request-data="dataRequest"
77
- :change-data="dataChange"
78
- >
79
- <template v-slot:default="{ listData }">
80
- <!-- 此处template内为列表list元素,listData为dataChange处理后的接口返回数据 -->
81
- <em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
82
- </template>
83
- </em-minirefresh>
84
- </view>
85
- </template>
86
-
87
- <script>
88
- export default {
89
- // 定义用到的数据,在template中使用{{ }}包裹,自动实现绑定
90
- data() {
91
- return {
92
- // 请求的url
93
- url: `${Config.serverUrl}/rest/list`,
94
- // 接口请求的初始页面
95
- initPageIndex: 0,
96
- // 每次请求的分页大小
97
- pageSize: 10
98
- };
99
- },
100
- // 计算属性
101
- computed: {
102
-
103
- },
104
- // 侦听属性
105
- watch: {
106
-
107
- },
108
- // 实例数据创建完成后调用
109
- created() {
110
-
111
- },
112
- // 实例DOM被挂载后调用
113
- mounted() {
114
-
115
- },
116
- methods: {
117
- // 请求参数函数
118
- dataRequest(currPage, pageSize) {
119
- const data = {
120
- // 当前搜索的第几页,数字类型
121
- currentpageindex: currPage,
122
- // 每页显示记录条数,数字类型
123
- pagesize: pageSize
124
- };
125
- const requestData = {
126
- params: JSON.stringify(data)
127
- };
128
-
129
- return requestData;
130
- },
131
- // 修改数据返回参数
132
- dataChange(res) {
133
- let data;
134
-
135
- if (res && res.status && res.status.code && res.status.code === 1) {
136
- data = res.custom.infolist;
137
- } else {
138
- console.error('接口返回参数错误');
139
- }
140
-
141
- return data;
142
- },
143
- // 列表模板绑定的点击事件函数
144
- itemClick(item) {
145
- ejs.page.open({
146
- pageUrl: "./detail",
147
- pageStyle: 1,
148
- orientation: 1,
149
- data: {
150
- id: item.id,
151
- },
152
- success: function (result) {},
153
- });
154
- }
155
- }
156
- };
157
- </script>
158
-
159
- <!-- css部分 -->
160
- <style lang="scss" scoped>
161
- .container {
162
- height: 100vh;
163
- }
164
- </style>
165
-
166
- ```
167
-
168
- ## 详情页面
169
-
170
- 接下来我们在 `m8demo` 下新建 `detail.vue` 组件页面
171
-
172
- `detail.vue` :
173
-
174
- ```js
175
- <!-- html部分 -->
176
- <template>
177
- <div class="container">
178
- <h1>{{ title }}</h1>
179
- <div v-html="content"></div>
180
- </div>
181
- </template>
182
-
183
- <!-- js部分 -->
184
- <script>
185
- export default {
186
- name: "detail",
187
- components: {},
188
- // 定义用到的数据,在template中使用{{ }}包裹,自动实现绑定
189
- data() {
190
- return {
191
- title: "",
192
- content: "",
193
- };
194
- },
195
- // 计算属性
196
- computed: {
197
-
198
- },
199
- // 侦听属性
200
- watch: {
201
-
202
- },
203
- // 实例数据创建完成后调用
204
- created() {
205
- const id = Util.getExtraDataByKey("id") || ""
206
- this.getDetail(id);
207
- },
208
- // 实例DOM被挂载后调用
209
- mounted() {
210
-
211
- },
212
- methods: {
213
- getDetail(id) {
214
- let _this = this;
215
-
216
- Util.ajax({
217
- url: `${Config.serverUrl}/rest/detail`,
218
- data: {
219
- params: JSON.stringify({
220
- guid: id,
221
- }),
222
- },
223
- })
224
- .then((result) => {
225
- if (
226
- result &&
227
- result.status &&
228
- result.status.code === 1
229
- ) {
230
- _this.title = result.custom.info.title;
231
- _this.content = result.custom.info.data;
232
- }
233
- })
234
- .catch((err) => {
235
- console.error(err);
236
- });
237
- },
238
- }
239
- };
240
- </script>
241
-
242
- <!-- css部分 -->
243
- <style lang="scss" scoped></style>
244
-
245
- ```
246
-
247
- 一个简单的列表详情页面就完成了
@@ -1,276 +0,0 @@
1
- # 列表详情
2
-
3
- ## 前言
4
-
5
- 我们使用 `M8.4移动前端框架` 进行下拉刷新列表、详情页面的开发
6
-
7
- 已根据 教程 章节了解 `M8` 开发的思路
8
-
9
- ## 新建模块
10
-
11
- 模块代码统一放在 `src/pages` 下,每个模块应用对应一个文件夹。
12
-
13
- 我们在此路径下新建文件夹,例如 `m8demo`。
14
-
15
- ### 路由配置
16
-
17
- 在 `m8demo` 文件夹下新建 `router.ts` 文件,如下:
18
-
19
- `src/pages/m8demo/router.ts` :
20
-
21
- ```js
22
- /**
23
- * router.js无需import组件,需要path路径与vue组件名称保持匹配。
24
- * routers数组下有效参数只有path与style。
25
- * 构建时会自动将模块下的路由配置合并到pages.json内。
26
- */
27
-
28
- // 定义路由规则,url匹配path时,加载component组件页面
29
- const routes = [
30
- {
31
- path: 'pages/m8demo/list',
32
- style: {
33
- navigationBarTitleText: '列表页面'
34
- }
35
- }
36
- ];
37
-
38
- // 导出路由文件
39
- export default routes;
40
- ```
41
-
42
- ### Mock数据配置
43
-
44
- 在 `m8demo` 文件夹下新建 `mock.ts` 文件,定义列表请求模拟数据,如下:
45
-
46
- ```js
47
- import Mock from '@mock';
48
-
49
- const resultData = [
50
- {
51
- // 接口地址
52
- methodUrl: '/rest/mock/list',
53
- // 入参
54
- input: {
55
- keyword: '',
56
- currentpageindex: '',
57
- pagesize: ''
58
- },
59
- // 出参
60
- output: Mock.mock({
61
- 'infolist|10-20': [
62
- {
63
- title: () => Mock.Random.csentence(10),
64
- date: ()=> Mock.Random.date(),
65
- id: ()=> Mock.Random.guid(),
66
- content: '来源:综合',
67
- photo: () => Mock.Random.image('114x83', '#00405d', '#FFF', 'Mock.js')
68
- }
69
- ]
70
- })
71
- }
72
- ];
73
-
74
- export default resultData;
75
- ```
76
- mock 文件定义请求本地 `/rest/mock/list` 时响应 `output` 数据。
77
-
78
- ### 列表页面
79
-
80
- 接下来我们在 `m8demo` 下新建 `list.vue` 组件页面
81
-
82
- `list.vue` :
83
-
84
- 基础结构:
85
-
86
- ```html
87
- <!-- template部分 -->
88
- <template>
89
- <view class="container"></view>
90
- </template>
91
-
92
- <!-- script部分 -->
93
- <script lang="ts" setup></script>
94
-
95
- <!-- css部分 -->
96
- <style scoped lang="scss"></style>
97
- ```
98
-
99
- `M8`的 `easycom` 机制,将 M8-UI 组件引用进一步优化,开发者可以直接在 `template` 中使用,无需在 `script` 里额外导入和注册。
100
-
101
- 根据 下拉刷新 组件 `em-minirefresh` 进行列表数据渲染。补充:
102
- ```html
103
- <template>
104
- <view class="container">
105
- <em-minirefresh
106
- ref="scrollPull"
107
- :initPageIndex="initPageIndex"
108
- :page-size="pageSize"
109
- :url="url"
110
- :request-data="dataRequest"
111
- :change-data="dataChange"
112
- >
113
- <template v-slot:default="{ listData }">
114
- <!-- 此处template内为列表list元素,listData为dataChange处理后的接口返回数据 -->
115
- <em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
116
- </template>
117
- </em-minirefresh>
118
- </view>
119
- </template>
120
-
121
- <script lang="ts" setup>
122
- import { ref } from 'vue';
123
-
124
- const url = `${Config.serverUrl}rest/mock/list`;
125
- const initPageIndex = 0;
126
- const pageSize = 10;
127
-
128
- const dataRequest = (_currPage, _pageSize) => {
129
- const data = {
130
- // 当前搜索的第几页,数字类型
131
- currentpageindex: _currPage,
132
- // 每页显示记录条数,数字类型
133
- pagesize: _pageSize
134
- };
135
- const requestData = {
136
- params: JSON.stringify(data)
137
- };
138
-
139
- return requestData;
140
- };
141
- const dataChange = (res) => {
142
- let data;
143
-
144
- if (res && res.status && res.status.code && res.status.code === 1) {
145
- data = res.custom.infolist;
146
- } else {
147
- console.error('接口返回参数错误');
148
- }
149
-
150
- return data;
151
- };
152
- const itemClick = (item) => {
153
- ejs.page.open({
154
- pageUrl: './detail',
155
- data: {
156
- id: item.id
157
- }
158
- });
159
- };
160
- </script>
161
- <!-- css部分 -->
162
- <style lang="scss" scoped>
163
- .container {
164
- height: 100vh;
165
- }
166
- </style>
167
-
168
- ```
169
-
170
- ## 详情页面
171
-
172
- ### 页面路由配置
173
-
174
- 在 `m8demo` 文件夹下的 `router.ts` 文件中补充 `detail` 页面路由配置:
175
-
176
- ```js
177
- /**
178
- * router.js无需import组件,需要path路径与vue组件名称保持匹配。
179
- * routers数组下有效参数只有path与style。
180
- * 构建时会自动将模块下的路由配置合并到pages.json内。
181
- */
182
-
183
- // 定义路由规则,url匹配path时,加载component组件页面
184
- const routes = [
185
- {
186
- // ...
187
- },
188
- {
189
- path: 'pages/m8demo/detail',
190
- style: {
191
- navigationBarTitleText: '详情页面'
192
- }
193
- }
194
- ];
195
-
196
- // 导出路由文件
197
- export default routes;
198
- ```
199
-
200
- ### mock数据配置
201
-
202
- 在 `m8demo` 文件夹中的 `mock.ts` 文件中补充 `detail` 页面的 mock 数据:
203
-
204
- ```js
205
- import Mock from '@mock';
206
-
207
- const resultData = [
208
- {
209
- // ...
210
- },
211
- {
212
- // 接口地址
213
- methodUrl: '/rest/mock/detail',
214
- // 入参
215
- input: {
216
- guid: ''
217
- },
218
- // 出参
219
- output: Mock.mock({
220
- info: {
221
- title: Mock.Random.csentence(5, 10), // 随机生成一段中文文本。
222
- data: Mock.Random.csentence(25, 30)
223
- }
224
- })
225
- }
226
- ];
227
-
228
- export default resultData;
229
- ```
230
-
231
- 接下来我们在 `m8demo` 下新建 `detail.vue` 组件页面
232
-
233
- `detail.vue` :
234
-
235
- ```js
236
- <template>
237
- <div class="container">
238
- <h1>{{ title }}</h1>
239
- <div v-html="content"></div>
240
- </div>
241
- </template>
242
-
243
- <script lang="ts" setup>
244
- import { ref } from 'vue';
245
- import { onLoad } from '@dcloudio/uni-app';
246
-
247
- const title = ref('');
248
- const content = ref('');
249
- const getDetail = (id) => {
250
- Util.ajax({
251
- url: `${Config.serverUrl}rest/mock/detail`,
252
- data: {
253
- params: JSON.stringify({
254
- guid: id
255
- })
256
- }
257
- })
258
- .then((result) => {
259
- if (result && result.status && result.status.code === 1) {
260
- title.value = result.custom.info.title;
261
- content.value = result.custom.info.data;
262
- }
263
- })
264
- .catch((err) => {
265
- console.error(err);
266
- });
267
- };
268
-
269
- onLoad(({ id }) => {
270
- getDetail(id);
271
- });
272
- </script>
273
-
274
- ```
275
-
276
- 一个简单的列表详情页面就完成了
@@ -1,130 +0,0 @@
1
- # 表单提交
2
-
3
- ## 前言
4
-
5
- 我们使用 `M8.3移动前端框架` 进行表单提交页面的开发
6
-
7
- 已根据 教程 章节了解 `M8` 开发的思路
8
-
9
- ## 新建模块
10
-
11
- 模块代码统一放在 `src/pages` 下,每个模块应用对应一个文件夹。
12
-
13
- 我们在此路径下新建文件夹,例如 `m8form`。
14
-
15
- 在 `m8form` 文件夹下新建 `router.js` 文件,如下:
16
-
17
- `src/pages/m8form/router.js` :
18
-
19
- ```js
20
- /**
21
- * router.js无需import组件,需要path路径与vue组件名称保持匹配。
22
- * routers数组下有效参数只有path与style。
23
- * 构建时会自动将模块下的路由配置合并到pages.json内。
24
- */
25
-
26
- // 定义路由规则,url匹配path时,加载component组件页面
27
- const routes = [
28
- {
29
- path: 'pages/m8form/form-sub',
30
- style: {
31
- navigationBarTitleText: '表单提交',
32
- },
33
- },
34
- ];
35
-
36
- // 导出路由文件
37
- export default routes;
38
- ```
39
-
40
- ## 表单页面
41
-
42
- 接下来我们新建 `form-sub.vue` 组件页面
43
-
44
- `form-sub.vue` :
45
-
46
- ```html
47
- <template>
48
- <em-form @submit="onSubmit" @failed="onFailed">
49
- <em-field
50
- v-model="form.username"
51
- label="用户名"
52
- placeholder="用户名"
53
- :rules="[{ required: true, message: '请填写用户名' }]"
54
- />
55
- <em-field
56
- v-model="form.password"
57
- type="password"
58
- label="密码"
59
- placeholder="密码"
60
- :rules="[{ required: true, message: '请填写密码' }]"
61
- />
62
- <em-field label="滑动开关" input-align="right">
63
- <template #input>
64
- <em-switch v-model="form.switchChecked" />
65
- </template>
66
- </em-field>
67
- <em-field label="单选框">
68
- <template #input>
69
- <em-radio-group v-model="form.radio" direction="horizontal">
70
- <em-radio name="1">单选框 1</em-radio>
71
- <em-radio name="2">单选框 2</em-radio>
72
- </em-radio-group>
73
- </template>
74
- </em-field>
75
- <em-field label="数字步进器">
76
- <template #input>
77
- <em-stepper v-model="form.stepper" />
78
- </template>
79
- </em-field>
80
- <em-field label="评分">
81
- <template #input>
82
- <em-rate v-model="form.rate" />
83
- </template>
84
- </em-field>
85
- <div style="margin: 16px;">
86
- <em-button round block type="info" native-type="submit">提交</em-button>
87
- </div>
88
- </em-form>
89
- </template>
90
- ```
91
-
92
- `M8`的 `easycom` 机制,将组件引用进一步优化,开发者只管使用,无需在 `JS` 里额外导入和注册。
93
-
94
- ```js
95
- // script部分
96
- export default {
97
- data() {
98
- return {
99
- form: {
100
- username: '', // 用户名
101
- password: '', // 用户密码
102
- switchChecked: false, // 默认滑动开关为false
103
- radio: '1', // 默认radio置1
104
- stepper: 1, // 默认步进器为1
105
- rate: 3, // 默认评分3
106
- },
107
- };
108
- },
109
- // 计算属性
110
- computed: {},
111
- // 侦听属性
112
- watch: {},
113
- // 实例数据创建完成后调用
114
- created() {},
115
- // 实例DOM被挂载后调用
116
- mounted() {},
117
- methods: {
118
- // 验证通过后触发
119
- onSubmit() {
120
- console.log('submit', this.form);
121
- },
122
- // 验证不通过后触发
123
- onFailed(errorInfo) {
124
- console.log('error', errorInfo);
125
- },
126
- },
127
- };
128
- ```
129
-
130
- 一个简单的表单提交页面就完成了