更新记录

1.0.0(2024-10-12)

支持Android、iOS


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.8,Android:4.4,iOS:9,HarmonyOS:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

openVPN支持Android、iOS

跑通demo

  1. 拷贝demo里的nativeplugins、nativeResources、Info.plist、AndroidManifest.xml文件到项目根目录
  2. iOS苹果账号里创建包名的时候在Capabilities里勾选Network Extensions、Personal VPN
  3. 修改nativeplugins/wrs-openvpn的文件:

ios的vpn以ios extension方式集成,可参考uniapp官方集成文档https://nativesupport.dcloud.net.cn/NativePlugin/course/package.html#ios-extension

  • manifest.json app原生插件配置勾选WRSOpenVPN插件
  • ios-extension.json里的identifier改为打包包名+自定义后缀(${包名}.${自定义后缀}),如:

包名为com.wrs.project.VPNProject
后缀为VPNPacketTunnel
则identifier为com.wrs.project.VPNProject.VPNPacketTunnel
  • ios-extension.json里的profile替换为iOS的extension签名文件名,文件名要以ios-为前缀
  • ios-com_wrs_project_VPNProject_VPNPacketTunnel.mobileprovision替换为ios-extension.json里profile的签名文件
  1. 集成插件步骤请参考 https://www.cnblogs.com/wenrisheng/p/18323027

接口


import {
    UTSOpenVPN
} from "@/uni_modules/wrs-uts-openvpn"
let vpn = new UTSOpenVPN()
  • 设置回调,仅支持Android

vpn.setCallback((resp) => {
    let opt = resp.opt
    switch (opt) {
        case "onUpdateState":
            let state = resp.state
            let logmessage = resp.logmessage
            let level = resp.level
            switch (level) {
                case "LEVEL_CONNECTED":
                    this.showMsg("连接成功!!!!")
                    break;
                case "LEVEL_NOTCONNECTED":
                    this.showMsg("还没有连接或断开连接!!!!")
                    break;
                case "LEVEL_AUTH_FAILED":
                    this.showMsg("认证失败!!!!")
                    break;
                default:
                    break;
            }
            this.showMsg("state:" + state + " level:" + level + " log:" + logmessage)
            break;
        default:
            break;
    }
})
  • 开启VPN

if (this.isAndroid) {
    let params = {}
    // config可以是本地配置文件,也可以是配置文件的字符串
    params.config = plus.io.convertLocalFileSystemURL("_www/static/256_cbc.conf")
    // params.config = this.androidConfig
    params.name = "UTS openVPN"
    params.userName = "xx" // 可选
    params.password = "xx" // 可选
    params.privateKeyPassword = "sFTKwpIYR60g03EBWVAWeQ=="
    // 开启结果以setCallback的onUpdateState为准
    vpn.startVPN(params, (resp) => {

    })
} else {
    let params = {}
    params.userName = ""
    params.serverAddress = "47.112.185.22" // 服务器地址
    params.disconnectOnSleep = false
    params.localizedDescription = "OpenVPN UTS Client" // ios设置vpn里有多个vpn,以localizedDescription作为ID,表示开启哪个vpn,如果找不到则创建一个新的vpn
    // providerBundleIdentifier 为ios-extension.json里的identifier
    params.providerBundleIdentifier = "com.wrs.project.VPNProject.VPNPacketTunnel"

    // params.providerConfiguration = {
    //  config: plus.io.convertLocalFileSystemURL("_www/static/AES_2562.ovpn"),
    //  privateKeyPassword: "sFTKwpIYR60g03EBWVAWeQ=="
    // }

    params.providerConfiguration = {
        config: this.ovpn,  // config可以是本地配置文件,也可以是配置文件的字符串,ios open的配置不支持fragment、dh、askpass
        privateKeyPassword: "sFTKwpIYR60g03EBWVAWeQ==",
        userName: "xx", // 可选
        password: "xx" // 可选
    }

    vpn.startVPN(params, (resp) => {
        let flag = resp.flag
        if (flag) {
            // 如果配置文件没问题的话,这里flag为true就是开启成功了
            this.showMsg("vpn启动完成")
        } else {
            this.showMsg("vpn启动失败:" + JSON.stringify(resp))
        }

    })
}
  • 停止vpn

vpn.stopVPN()
  • 初始化多语言和创建通知channel,一般放到App.vue的onLaunch里,仅支持Android

if(isAndroid) { 
    // 初始化多语言
    UTSOpenVPN.setDesiredLocale()
    let sdkVersion = UTSOpenVPN.getBuildVersionSDK()
    if(sdkVersion >= 26 ) { // android 8以后,创建通知channel
        UTSOpenVPN.createNotificationChannel({
            id: "openvpn_bg", // 固定
            name: "连接统计",
            description: "已建立的OpenVPN连接的实时统计数据",
            enableLights: false
        }) 
        UTSOpenVPN.createNotificationChannel({
            id: "openvpn_newstat", // 固定
            name: "连接状态改变",
            description: "OpenVPN连接的状态更改(连接,身份验证...)",
            enableLights: true
        })
        UTSOpenVPN.createNotificationChannel({
            id: "openvpn_userreq", // 固定
            name: "需要用户交互",
            description: "OpenVPN连接需要一个用户输入,例如:双因子验证认证",
            enableVibration: true
        })
    }

    UTSOpenVPN.checkRestrictions()
}
  • 获取vpn所有日志,仅支持Android

let array = UTSOpenVPN.getAllLogStr()
  • 清空日志,仅支持Android

UTSOpenVPN.clearLog()

隐私、权限声明

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

vpn权限

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

插件不采集任何数据

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

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