m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/004-amap/345/234/260/345/233/276.md

@@ -0,0 +1,285 @@
+# 组件使用
+
+## map 定位
+
+### 介绍
+
+-   定位组件，本组件仅提供定位及获取周边 POI 信息函数，不再封装地图展示组件。
+
+-   请使用 uniapp 框架内置的[map 组件](https://uniapp.dcloud.io/component/map.html)进行地图展示。本文档介绍组件功能及 map 组件使用示例。
+
+### 引入
+
+手动引入时的引入路径：
+
+```js
+import EmMap from '@components/em-map/index.js';
+```
+
+emMap 作为全局函数，跨端框架为其提供了全局注入的功能，使用该函数时，框架会自动引入上述路径，所以在跨端框架中使用时，不必再手动引入。
+
+### 代码演示
+
+#### 基础用法
+
+**注意**
+
+1. uniapp 的 map 组件，在不同平台的底层引擎是不同的：在小程序中，使用的都是小程序的原生地图组件，而在 H5 中，默认使用的是腾讯或谷歌三方地图，所以在 H5 端，需要在`manifest.json`中配置腾讯或谷歌等三方地图服务商申请的秘钥（key）：
+
+```json
+{
+    "name": "",
+    "appid": "",
+    "h5": {
+        "sdkConfigs": {
+            "maps": {
+                "qqmap": {
+                    "key": "76FBZ-4C76F-733J7-NFVFX-5O6A6-VRFSW"
+                },
+                "google": {
+                    "key": ""
+                }
+            }
+        }
+    }
+}
+```
+
+2. 在微信小程序中，使用地图定位，首先需要在 “小程序管理后台 -「开发」-「开发管理」-「接口设置」” 中完成权限申请，然后在`manifest.json`中配置接口权限及规则：
+
+```json
+{
+    "name": "",
+    "appid": "",
+    "mp-weixin": {
+        "permission": {
+            // 配置接口权限
+            "scope.userLocation": {
+                "desc": "你的位置信息将用于小程序位置接口的效果展示"
+            }
+        },
+        // 声明规则
+        "requiredPrivateInfos": ["getLocation"]
+    }
+}
+```
+
+具体请查看[微信小程序官方公告](https://developers.weixin.qq.com/community/develop/doc/000a02f2c5026891650e7f40351c01)
+
+使用 map 组件代码示例：
+
+```html
+<map
+    id="map"
+    style="width: 100vw;height: 300px;"
+    :longitude="longitude"
+    :latitude="latitude"
+    show-location
+    :circles="circles"
+    :controls="controls"
+    @controltap="updateLocation"
+></map>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            // 周边POI信息数组
+            pois: [],
+            // 正在定位标识
+            loading: true,
+            // 当前位置经纬度
+            longitude: 0,
+            latitude: 0,
+            // 在地图上的圆数组
+            circles: []
+        };
+    },
+    computed: {
+        // 地图控件使用的图片
+        iconPath() {
+            return `/static/images/map-icon-${this.loading ? 'waite' : 'locate'}.png`;
+        },
+        // 自定义控件数组，本示例自定义的控件为定位控件
+        controls() {
+            return [
+                {
+                    id: 1,
+                    position: {
+                        width: 32,
+                        height: 32,
+                        left: 10,
+                        top: 300 - 42
+                    },
+                    iconPath: this.iconPath,
+                    clickable: true
+                }
+            ];
+        }
+    },
+    methods: {
+        // 刷新定位
+        update() {
+            this.loading = true;
+
+            EmMap({
+                // 获取POI信息需要传腾讯地图的key
+                qqMapKey: '76FBZ-4C76F-733J7-NFVFX-5O6A6-VRFSW',
+                // 获取周边信息
+                poicallback: (res) => {
+                    this.pois = res.pois.slice(0);
+                },
+                error: (err) => {
+                    this.loading = false;
+                    console.error('定位失败：', err);
+                },
+                success: (position) => {
+                    this.loading = false;
+                    this.longitude = position[0];
+                    this.latitude = position[1];
+
+                    this.circles = [
+                        {
+                            longitude: this.longitude,
+                            latitude: this.latitude,
+                            radius: 100,
+                            strokeWidth: 2,
+                            color: '#2e6be5' + '9A',
+                            fillColor: '#d8e4ff' + '6A'
+                        }
+                    ];
+                }
+            });
+        }
+    },
+    mounted() {
+        this.update();
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref, computed, onMounted } from 'vue';
+
+// 周边POI信息数组
+const pois = ref([]);
+// 正在定位标识
+const loading = ref(true);
+// 当前位置经纬度
+const longitude = ref(0);
+const latitude = ref(0);
+// 在地图上的圆数组
+const circles = ref([]);
+
+// 地图控件使用的图片
+const iconPath = computed(() => {
+    return `/static/images/map-icon-${loading.value ? 'waite' : 'locate'}.png`;
+});
+
+// 自定义控件数组，本示例自定义的控件为定位控件
+const controls = computed(() => {
+    return [
+        {
+            id: 1,
+            position: {
+                width: 32,
+                height: 32,
+                left: 10,
+                top: 300 - 42
+            },
+            iconPath: iconPath.value,
+            clickable: true
+        }
+    ];
+});
+
+// 刷新定位
+const update = () => {
+    loading.value = true;
+
+    EmMap({
+        // 获取POI信息需要传腾讯地图的key
+        qqMapKey: '76FBZ-4C76F-733J7-NFVFX-5O6A6-VRFSW',
+        // 获取周边信息
+        poicallback: (res) => {
+            pois.value = res.pois.slice(0);
+        },
+        error: (err) => {
+            loading.value = false;
+            console.error('定位失败：', err);
+        },
+        success: (position) => {
+            loading.value = false;
+            longitude.value = position[0];
+            latitude.value = position[1];
+
+            circles.value = [
+                {
+                    longitude: longitude.value,
+                    latitude: latitude.value,
+                    radius: 100,
+                    strokeWidth: 2,
+                    color: '#2e6be5' + '9A',
+                    fillColor: '#d8e4ff' + '6A'
+                }
+            ];
+        }
+    });
+};
+
+onMounted(() => {
+    update();
+});
+```
+
+::: endif
+
+### API
+
+#### Options
+
+| 参数        |                                   说明                                    | 类型     | 默认值  |
+| :---------- | :-----------------------------------------------------------------------: | :------- | :------ |
+| qqMapKey    |  组件函数获取周边信息时，使用的是腾讯地图的 API，所以需要腾讯地图的 key   | string   | -       |
+| isForceDD   | 是否强制使用`dd.device.geolocation.get`方法获取当前定位（钉钉环境中有效） | boolean  | `false` |
+| isForceEJS  |        是否强制使用 ejs 原生地图方法获取当前定位（ejs 环境中有效）        | boolean  | `false` |
+| poicallback |               获取周边信息的回调函数，回调参数为 `res: obj`               | function | -       |
+| success     |    定位成功后的回调函数，回调参数为 `position: [longitude, latitude]`     | function | -       |
+| error       |                定位失败后的回调函数，回调参数为 `err: obj`                | function | -       |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-map"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+  </iframe>
+::: endif
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-map"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+  </iframe>
+::: endif
+
+ <style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/005-button/346/214/211/351/222/256.md

@@ -0,0 +1,211 @@
+# 组件使用
+
+## button 按钮
+
+### 介绍
+
+-   按钮组件。
+
+::: ifdef M83
+
+-   `v8.3.11`开始支持 weex 端使用，注意 weex 端组件不能根据内容宽度自适应，最好手动给 button 组件添加 width 样式
+
+::: endif
+
+### 代码演示
+
+#### 按钮类型
+
+按钮支持 `default`、`primary`、`info`、`warning`、`danger` 五种类型，默认为 `info`。
+
+```html
+<em-button type="primary">主要按钮</em-button>
+<em-button type="info">信息按钮</em-button>
+<em-button type="default">默认按钮</em-button>
+<em-button type="warning">警告按钮</em-button>
+<em-button type="danger">危险按钮</em-button>
+```
+
+#### 朴素按钮
+
+通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+
+```html
+<em-button plain type="primary">朴素按钮</em-button>
+<em-button plain type="info">朴素按钮</em-button>
+```
+
+#### 细边框
+
+设置 `hairline` 属性可以展示 0.5px 的细边框。
+
+```html
+<em-button plain hairline type="primary">细边框按钮</em-button>
+<em-button plain hairline type="info">细边框按钮</em-button>
+```
+
+#### 禁用状态
+
+通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
+
+```html
+<em-button disabled type="primary">禁用状态</em-button>
+<em-button disabled type="info">禁用状态</em-button>
+```
+
+#### 加载状态
+
+通过 `loading` 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 `loading-text` 设置加载状态下的文字。
+
+```html
+<em-button loading type="primary" />
+<em-button loading type="primary" loading-type="spinner" />
+<em-button loading type="info" loading-text="加载中..." />
+```
+
+#### 按钮形状
+
+通过 `square` 设置方形按钮，通过 `round` 设置圆形按钮。
+
+```html
+<em-button square type="primary">方形按钮</em-button>
+<em-button round type="info">圆形按钮</em-button>
+```
+
+#### 图标按钮
+
+通过 `icon` 属性设置按钮图标，支持 `Icon` 组件里的所有图标，也可以传入图标 `URL`。
+
+```html
+<em-button icon="plus" type="primary" />
+<em-button icon="plus" type="primary">按钮</em-button>
+<em-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">按钮</em-button>
+```
+
+#### 按钮尺寸
+
+支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
+
+```html
+<em-button type="primary" size="large">大号按钮</em-button>
+<em-button type="primary" size="normal">普通按钮</em-button>
+<em-button type="primary" size="small">小型按钮</em-button>
+<em-button type="primary" size="mini">迷你按钮</em-button>
+```
+
+#### 块级元素
+
+按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素。
+
+```html
+<em-button type="primary" block>块级元素</em-button>
+```
+
+#### 页面导航
+
+可以通过 `url` 属性进行 `URL` 跳转，或通过 `to` 属性进行路由跳转。
+
+```html
+<em-button type="primary" url="./default">URL 跳转</em-button>
+<em-button type="primary" to="index">路由跳转</em-button>
+```
+
+#### 自定义颜色
+
+通过 `color` 属性可以自定义按钮的颜色。
+
+```html
+<em-button color="#7232dd">单色按钮</em-button>
+<em-button color="#7232dd" plain>单色按钮</em-button>
+<em-button color="linear-gradient(to right, #ff6034, #ee0a24)">渐变色按钮</em-button>
+```
+
+### API
+
+#### Props
+
+| 参数                |                                             说明                                              | 类型           | 默认值     | ::: ifdef M83 weex 端支持 ::: endif                 |
+| :------------------ | :-------------------------------------------------------------------------------------------: | :------------- | :--------- | :-------------------------- |
+| type                |                     类型，可选值为 `primary` `default` `warning` `danger`                     | string         | `info`     | 是                          |
+| size                |                             尺寸，可选值为 `large` `small` `mini`                             | string         | `normal`   | 是                          |
+| text                |                                           按钮文字                                            | string         | -          | 是                          |
+| color               |             按钮颜色，支持传入`linear-gradient`渐变色，weex 端只支持两种颜色渐变              | string         | -          | 是                          |
+| icon                |                                    左侧图标名称或图片链接                                     | string         | -          | 是                          |
+| icon-size `v8.3.11` |                                   图标大小，默认单位是`px`                                    | string/number  | -          | 是                          |
+| icon-prefix         |                      图标类名前缀，同 `Icon` 组件的 `class-prefix` 属性                       | string         | `van-icon` | 否                          |
+| icon-position       |                                图标展示位置，可选值为 `right`                                 | string         | `left`     | 是                          |
+| native-type         |                  原生 `button` 标签的 `type` 属性, 可选值有`submit` `reset`                   | string         | -          | 否                          |
+| block               |                                        是否为块级元素                                         | boolean        | `false`    | 否（weex 端只有 flex 布局） |
+| plain               |                                        是否为朴素按钮                                         | boolean        | `false`    | 是                          |
+| square              |                                        是否为方形按钮                                         | boolean        | `false`    | 是                          |
+| round               |                                        是否为圆形按钮                                         | boolean        | `true`     | 是                          |
+| disabled            |                                         是否禁用按钮                                          | boolean        | `false`    | 是                          |
+| hairline            |                                      是否使用 0.5px 边框                                      | boolean        | `false`    | 是                          |
+| loading             |                                      是否显示为加载状态                                       | boolean        | `false`    | 是                          |
+| loading-text        |                                       加载状态提示文字                                        | string         | -          | 是                          |
+| loading-type        |                      加载图标类型，可选值为`spinner` `ball` `operation`                       | string         | `circular` | 是                          |
+| loading-size        |                                         加载图标大小                                          | string         | `20px`     | 是                          |
+| url                 |                                     点击后跳转的链接地址                                      | string         | -          | 是                          |
+| to                  | 点击后跳转的目标路由对象，同 `vue-router` 的 `to` 属性，仅支持`path` `query` `replace` `hash` | string /object | -          | 是                          |
+| replace             |                                 是否在跳转时替换当前页面历史                                  | boolean        | `false`    | 是                          |
+| open-type           |                                   不同小程序平台的开放能力                                    | string         | -          | 否                          |
+| app-parameter       |          打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效， 微信小程序支持          | string         | -          | 否                          |
+
+#### open-type 开放能力说明
+
+| 值               |                                                                                              说明                                                                                               | 平台差异说明                                                                            |
+| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------- |
+| feedback         |                                                                        打开“意见反馈”页面，用户可提交反馈内容并上传日志                                                                         | 微信小程序、QQ 小程序                                                                   |
+| share            |                                                                                          触发用户转发                                                                                           | 微信小程序、百度小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ 小程序、快手小程序 |
+| getUserInfo      |                                                                    获取用户信息，可以从@getuserinfo 事件回调中获取到用户信息                                                                    | 微信小程序、百度小程序、QQ 小程序、快手小程序                                           |
+| contact          |                                                  打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 事件回调中获得具体信息                                                   | 微信小程序、百度小程序                                                                  |
+| getPhoneNumber   |                                                                 获取用户手机号，可以从@getphonenumber 事件回调中获取到用户信息                                                                  | 微信小程序、百度小程序、字节跳动小程序、支付宝小程序、快手小程序。                      |
+| launchApp        | 小程序中打开 APP，可以通过 app-parameter 属性设定向 APP 传的参数，需要调起的 APP 接入微信 OpenSDK[详见](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html) | 微信小程序 (opens new window)、QQ 小程序(opens new window)                              |
+| openSetting      |                                                                                         打开授权设置页                                                                                          | 微信小程序、百度小程序                                                                  |
+| getAuthorize     |                                                                                         支持小程序授权                                                                                          | 支付宝小程序                                                                            |
+| contactShare     |                                                                                        分享到通讯录好友                                                                                         | 支付宝小程序                                                                            |
+| lifestyle        |                                                                                           关注生活号                                                                                            | 支付宝小程序                                                                            |
+| openGroupProfile |                                         呼起 QQ 群资料卡页面，可以通过 group-id 属性设定需要打开的群资料卡的群号，同时 manifest 中必须配置 groupIdList                                          | QQ 小程序基础库 1.4.7 版本+                                                             |
+
+#### Events
+
+| 事件名         |                                                          说明                                                           | 回调参数          | 平台差异说明 |
+| :------------- | :---------------------------------------------------------------------------------------------------------------------: | :---------------- | :----------- |
+| click          |                                        点击按钮，且按钮状态不为加载或禁用时触发                                         | event: Event      |              |
+| touchstart     |                                                   开始触摸按钮时触发                                                    | event: TouchEvent |              |
+| getphonenumber |         open-type="getPhoneNumber"时，获取加密的用户手机号回调，[详见](https://ask.dcloud.net.cn/article/37452)         | info: object      | 微信小程序   |
+| getuserinfo    | open-type="getUserInfo"时，用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 uni.getUserInfo | info: object      | 微信小程序   |
+| error          |                                     当使用 open-type="launchApp"时，发生错误的回调                                      | info: object      | 微信小程序   |
+| opensetting    |                                 open-type="openSetting"时，在打开授权设置页并关闭后回调                                 | info: object      | 微信小程序   |
+| launchapp      |                                  open-type="launchApp"时，从小程序打开 App 成功的回调                                   | info: object      | 微信小程序   |
+
+::: ifdef M83
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-button"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+  </iframe>
+::: endif
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-button"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+  </iframe>
+::: endif
+
+ <style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>