更新记录

1.0.0（2023-08-07）

优化了已知的bug

0.0.2（2021-09-27）

ios的支持

0.0.1（2021-02-18）

无

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

epii-view-shot 使用方式

1、介绍

本插件更加灵活的实现页面整体截取，局部截取，组件截取，长图截取等常用截图方式。

2、使用方式

原生组件需要在nvue文件中使用。

支持的函数如下：

上述函数参数和返回值如下

返回值

1/普通组件 如：

<template>
    <div>
        <epii-view-shot ref="viewshot">
            <view>
            <button>11111111111111111111111</button>
            <button>22222222222222222222</button>
            <button>22222222222222222222</button>
            <button>1111111111111111111</button>
            <button>22222222222222222222</button>
            <button>22222222222222222222</button>
            <button>1111111111111111111</button>
            <button>22222222222222222222</button>
            <button>22222222222222222222</button>
            <button>1111111111111111111</button>
            <button>22222222222222222222</button>
            <button>22222222222222222222</button>
            <button>1111111111111111111</button>
            <button>22222222222222222222</button>
            <button>22222222222222222222</button>
            <button>1111111111111111111</button>
            <button>22222222222222222222</button>
            <button>22222222222222222222</button>
            <button>1111111111111111111</button>
            <button>22222222222222222222</button>
            <button>22222222222222222222</button>
            <button>1111111111111111111</button>
            <button>22222222222222222222</button>
            <button>22222222222222222222</button>
            <button @click="viewshot()">截图</button>
            </view>
        </epii-view-shot>

    </div>
</template>

<script>
    export default {
        data(){
            return {
                 }
        },
        methods: {

            viewshot() {
                this.$refs.viewshot.shot({
                    base64: false,
                    quailty: 100
                }, (data) => {
                    //直接打开预览
                    uni.previewImage({
                        urls: [ data.img],
                        current: 0
                    });
                })
            },
        }
    }
</script>

<style>

</style>

2 list组件（仅限nvue的list组件 https://uniapp.dcloud.io/component/list，如果不是这个组件，请直接使用第一种方式） 如：

<template>
    <div> 
        <button @click="listviewshot()">list截长图</button>
        <button @click="viewshot()">普通截图</button>
        <epii-view-shot ref="listviewshot" style="background-color:#0A98D5;">
              <list  :scrollable="true" style="height: 300rpx;background-color: #007AFF;">
                 <cell v-for="(item, index) in dataList" :key="item.id">
                   <text>{{index}}-{{item.name}}</text>
                 </cell>
               </list>
        </epii-view-shot>

    </div>
</template>

<script>
    export default {
        data(){
            return {
                 dataList: [{id: "1", name: 'A'}, {id: "2", name: 'B'}, {id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'}
                 ]
            }
        },
        methods: {
            listviewshot(){
                this.$refs.listviewshot.listViewShot({
                    base64: false,
                    quailty: 100
                }, (data) => {
                    //直接打开预览
                    uni.previewImage({
                        urls: [ data.img],
                        current: 0
                    });
                })
            },
            scrollviewshot(){
                this.$refs.scrollviewshot.scrollViewShot({
                    base64: false,
                    quailty: 100
                }, (data) => {
                    //直接打开预览
                    uni.previewImage({
                        urls: [ data.img],
                        current: 0
                    });
                })
            },
            viewshot() {
                this.$refs.listviewshot.shot({
                    base64: false,
                    quailty: 100
                }, (data) => {
                    //直接打开预览
                    uni.previewImage({
                        urls: [ data.img],
                        current: 0
                    });
                })
            },
        }
    }
</script>

<style>

</style>

3 scroll-view （组件详情 https://uniapp.dcloud.io/component/scroll-view）如：

<template>
    <div> 
        <button @click="scrollviewshot()">scroll截图</button>

        <epii-view-shot ref="scrollviewshot" style="background-color:#0A98D5;">
              <scroll-view  :scrollable="true" style="height: 400rpx;">
                 <view v-for="(item, index) in dataList" :key="item.id">
                   <text>{{index}}-{{item.name}}</text>
                 </view>
               </scroll-view>
        </epii-view-shot>

    </div>
</template>

<script>
    export default {
        data(){
            return {
                 dataList: [{id: "1", name: 'A'}, {id: "2", name: 'B'}, {id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'},{id: "3", name: 'C'} 
                 ]
            }
        },
        methods: {

            scrollviewshot(){
                this.$refs.scrollviewshot.scrollViewShot({
                    base64: false,
                    quailty: 100
                }, (data) => {
                    //直接打开预览
                    uni.previewImage({
                        urls: [ data.img],
                        current: 0
                    });
                })
            } 
        }
    }
</script>

<style>

</style>