更新记录

1.0.1（2025-04-13）

1、增加图形验证功能 2、增加短信验证登陆功能

1.0.0（2025-04-13）

上传插件

平台兼容性

hjy-topvpn

插件说明

本插件支持 uni-app 和 uni-app x 项目，uni-app x 的uts语法上有细微的区别。请先下载示例(uni-app)项目进行学习、试用，使用 HBuilderX 导入示例项目后，点击插件页面“试用”按钮引入插件,打包自定义基座就可以进行使用了。天融信SDK支持CPU的指令集包括arm、arm-v7a，arm64-v8a，其他CPU架构 不支持，其中arm64-v8a只支持国际协议国际算法，不支持国密,建议在真机环境下运行调试。

插件示例使用

1、通过插件市场“使用 HBuilderX 导入示例项目”下载插件示例项目(uniapp-vue2)

2、通过插件市场“试用”导入插件到示例项目中

3、打包并运行自定义基座（真机调试）

4、uni-app x (vue3)示例项目请联系作者提供

5、运行时提示“VPN实例初始化失败！可能是权限问题导致。”请先到 【 设置->应用管理 】 页面找到本程序，并在其 【 应用权限 】 中授权电话、存储和网络等权限然后再试（本示例程序未加入动态权限申请的功能）；

获取插件对象

import * as topvpn from "@/uni_modules/hjy-topvpn";

演示界面

<template>
    <view style="padding: 5px 10px;">
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-form-item uni-column">
                <view class="row-item"><text class="title">服务器IP:</text>
                <uni-easyinput v-model="mVpnAddress" placeholder="请输入服务器IP" />
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="row-item"><text class="title">端口:</text>
                <uni-easyinput type="digit"  v-model="mVpnPort" placeholder="请输入服务器端口" />
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="row-item"><text class="title">账  号:</text>
                <uni-easyinput  v-model="mUserName" placeholder="请输入账号" />
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="row-item"><text class="title">密   码:</text>
                <uni-easyinput type="password" v-model="mUserPassword" placeholder="请输入密码" />
                </view>
            </view>
            <view v-if="showRand">
                <view class="uni-form-item uni-column">
                    <view class="row-item"><text class="title">校验码:</text>
                    <uni-easyinput  v-model="randCode" placeholder="请输入图形校验码" />
                        <view @click="getRandCode()" style="width: 80px; background-color: black; height: 38px; border: solid 1 px red;"><image :src="randCodeBase64" style="width: 80px; height: 38px; "></image></view>
                    </view>
                </view>
                <view class="uni-btn-v">
                    <button type="default" @click="doRandAuth()" plain="true">图形辅助认证</button>
                </view>
            </view>
            <view class="uni-form-item uni-column" v-if="loginType==3">
                <view class="row-item"><text class="title">验证码:</text>
                <uni-easyinput  v-model="smsCode" placeholder="请输入短信验证码" />
                    <csr-button :count-down="true" :count-down-num="99" count-down-text="重新获取" class="btn" width="200rpx" height="70rpx" type="hollow" @click="regetSmsCode()" >获取验证码</csr-button>
                </view>
            </view>
            <view class="uni-btn-v">
                <button style="margin: 20rpx 0;" type="default" @click="doConfigVpn()" plain="true">配置VPN</button>
                <button style="margin-bottom: 20rpx;" type="default" @click="loginVPN()" :disabled="isDisabled" plain="true">登陆</button>
                <button style="margin-bottom: 20rpx;" type="default" @click="logoutVPN()" :disabled="isDisabled" plain="true">登出</button>
                <button style="margin-bottom: 20rpx;" type="default" @click="getVPNState()" plain="true">获取VPN状态</button>
                <button style="margin-bottom: 20rpx;" type="default" @click="getResource()" :disabled="isDisabled" plain="true">获取资源</button>
                <button style="margin-bottom: 20rpx;" type="default" @click="startService()" :disabled="isDisabled" plain="true">开启服务</button>
                <button style="margin-bottom: 20rpx;" type="default" @click="closeService()" :disabled="isDisabled" plain="true">关闭服务</button>
            </view>
        </view>
    </view>
</template>

初始化

export default {
    data() {
        return {
            isDisabled: true,
            showRand:false,
            loginType:0,//0-用户名口令认证,1-软证书认证,2-软证书双因子认证,3-短信认证
            mVpnAddress: '10.7.100.96',
            mVpnPort:443,
            mUserName: '',
            mUserPassword: '1',
            randCode:'',
            smsCode:'',
            randCodeBase64:''
        }
    },
    onLoad() {

    },
    created() {
        this.initSDK()
    },
    methods: {
        initSDK(){
            let res= topvpn.initSDK();
            if(!res){
                uni.showModal({
                    title: '提示',
                    content: 'VPN实例初始化失败！可能是权限问题导致。',
                    showCancel:false
                });
            }
            // this.getRandCode();
        }
    }
}

配置VPN

doConfigVpn(){
    uni.showLoading({
        title:'正在配置VPN...'
    })
    topvpn.doConfigurationVPN(this.mVpnAddress,this.mVpnPort,this.mUserName,this.mUserPassword,result => {
        uni.hideLoading()
        if(result.data.resId>-1){
            this.isDisabled=false;
            if(result.data.type=='OPERATION_GET_SIM'){
                //短信验证码登陆
                this.loginType=3;
            }else if(result.data.type=='OPERATION_GET_CAPTCHA'){
                console.log('验证码',result);
                //图形验证码验证
                this.showRand=true;
                if(result.data.extral){
                    that.randCodeBase64="data:image/png;base64," + result.result.data.extral;
                }else{
                     uni.showModal({title:"requestCaptcha-fail",content:'获取图形验证码失败',showCancel:false});
                }
            }
        }else{
            uni.showModal({
                title: '提示',
                content: result.message,
                showCancel:false
            });
        }
        console.log(result)
    })
}

登陆VPN

loginVPN(){
    if(this.loginType==3){
        //短信登陆
        topvpn.loginSMS(this.mUserName,this.smsCode,result => {
            uni.showModal({
                title: '提示',
                content: result.message,
                showCancel:false
            });
            console.log(result)
        })
    }else{
        topvpn.loginVPN(this.mUserName,this.mUserPassword,this.randCode,result => {
            uni.showModal({
                title: '提示',
                content: result.message,
                showCancel:false
            });
            console.log(result)
        })
    }
}

获取短信验证码

regetSmsCode(){
    topvpn.requestSim(this.mUserName,result => {
        uni.showModal({
            title: '提示',
            content: result.message,
            showCancel:false
        });
        console.log(result)
    })
}

获取图形验证码

getRandCode(){
    const that=this;
    topvpn.requestCaptcha(function(result){
        console.log('验证码',result);
        if(result.data.extral){
            that.randCodeBase64="data:image/png;base64," + result.result.data.extral;
        }else{
             uni.showModal({title:"requestCaptcha-fail",content:'获取图形验证码失败',showCancel:false});
        }
    });
}

登陆

logoutVPN(){
    topvpn.logoutVPN();
}

获取VPN状态

getVPNState(){
    let res = topvpn.getVPNState();
    console.log(res);
}

获取资源

getResource(){
    topvpn.getResource();
}

开启服务

startService(){
    topvpn.startService();
}

关闭服务

closeService(){
    topvpn.closeService();
}

常见问题原因排查