更新记录

1.0.0(2023-08-07)

优化了已知的bug

0.0.2(2021-09-27)

ios的支持

0.0.1(2021-02-18)

查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 11.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:9 - 16

原生插件通用使用流程:

  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文件中使用。

支持的函数如下:

API 描述
shot 普通截图
listViewShot 列表截图(仅限nvue的list组件 https://uniapp.dcloud.io/component/list,如果不是这个组件,请直接使用shot方式)
scrollViewShot 仅针对 scroll-view (组件详情 https://uniapp.dcloud.io/component/scroll-view)

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

参数 默认值 说明
quailty 100 质量
base64 false 是否返回base64格式

返回值

参数 说明
success 是否成功 true or false
img 返回地址,或者base64字符串,如果是路径,可通过uni.uploadFile

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

android.permission.WRITE_EXTERNAL_STORAGE

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问