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.
- package/dist/index.js +1 -1
- package/dist/knowledge/index.js +1 -1
- package/dist/knowledge/standards-summary.js +1 -1
- package/dist/templates/vue2.js +1 -1
- package/dist/templates/vue3.js +1 -1
- package/dist/tools/generate_module_structure.js +1 -1
- package/package.json +2 -3
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/004-amap/345/234/260/345/233/276.md +0 -285
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/005-button/346/214/211/351/222/256.md +0 -211
- 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
- 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
- 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
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/015-form/350/241/250/345/215/225.md +0 -999
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/019-icon/345/233/276/346/240/207.md +0 -133
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/020-loading/345/212/240/350/275/275.md +0 -117
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/023-pagination/345/210/206/351/241/265.md +0 -212
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/024-panel/351/235/242/346/235/277.md +0 -85
- 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
- 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
- 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
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/030-rate/350/257/204/345/210/206.md +0 -189
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/031-search/346/220/234/347/264/242.md +0 -217
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/032-slider/346/273/221/345/235/227.md +0 -166
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/036-switch/345/274/200/345/205/263.md +0 -196
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/038-tag/346/240/207/350/256/260.md +0 -232
- 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
- 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
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/043-layout/345/270/203/345/261/200.md +0 -150
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/044-image/345/233/276/347/211/207.md +0 -144
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/046-calendar/346/227/245/345/216/206.md +0 -467
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/054-grid/345/256/253/346/240/274.md +0 -183
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/066-badge/345/276/275/346/240/207.md +0 -162
- 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
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/070-swipe/350/275/256/346/222/255.md +0 -262
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/072-easycalendar/346/227/245/345/216/206.md +0 -132
- 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
- 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
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/076-chart/345/233/276/350/241/250.md +0 -381
- 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
- package/data/m8mpdoc/UI/347/273/204/344/273/266/345/272/223/078-table/350/241/250/346/240/274.md +0 -849
- 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
- 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
- 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
- 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
- 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
- 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
- package/data/standards/01-project/naming.md +0 -158
- package/data/standards/01-project/structure.md +0 -106
- package/data/standards/01-project/version-detection.md +0 -195
- package/data/standards/02-vue/basic.md +0 -242
- package/data/standards/02-vue/component.md +0 -299
- package/data/standards/02-vue/examples.md +0 -240
- package/data/standards/02-vue/performance.md +0 -74
- package/data/standards/02-vue/state-management.md +0 -293
- package/data/standards/03-css/index.md +0 -165
- package/data/standards/04-api/ajax.md +0 -178
- package/data/standards/04-api/ejs-api.md +0 -192
- package/data/standards/04-api/util.md +0 -166
- package/data/standards/05-typescript/index.md +0 -166
- package/data/standards/06-mock/index.md +0 -154
- package/data/standards/07-router/index.md +0 -141
- package/data/standards/README.md +0 -82
- package/data/standards/_index.md +0 -215
- package/dist/index.d.ts +0 -10
- package/dist/index.d.ts.map +0 -1
- package/dist/knowledge/index.d.ts +0 -47
- package/dist/knowledge/index.d.ts.map +0 -1
- package/dist/knowledge/standards-summary.d.ts +0 -106
- package/dist/knowledge/standards-summary.d.ts.map +0 -1
- package/dist/templates/vue2.d.ts +0 -51
- package/dist/templates/vue2.d.ts.map +0 -1
- package/dist/templates/vue3.d.ts +0 -53
- package/dist/templates/vue3.d.ts.map +0 -1
- package/dist/tools/generate_module_structure.d.ts +0 -22
- 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
|
-
一个简单的表单提交页面就完成了
|