uni-app 调用支付宝学生认证插件 获取不到实例问题

**支付宝学生认证流程 **
1、对接 支付宝 开发 添加权限
2、使用原生开发

项目根目录添加  --- 
---mycomponents
  - student-verify
  - index.axml
  - index.js
  - index.json
index.axml

<view>
    <slot></slot>
    <student-verify shopName="{{shopName}}" shopLink="{{shopLink}}" shopLogo="{{shopLogo}}" ref="onStudentVerifyRef" onSuccess="onSuccess" />
</view>

index.js
 
// const plugin = requirePlugin("myPlugin");
Component({
  props: { isVerify: false },
  options: {
    // 使用基础库内置的数据变化观测器
    observers: true,
  },

  data() {
    return {
      shopLink: `alipays://platformapi/startapp?appId=${process.env.APP_ID}&page=${encodeURIComponent(
        "/pages/index/index"
      )}`,
      shopName: "XXXX小程序",
      shopLogo:
        "xxxx.jpg",
    };
  },
  didMount() {
    this.$page.childverifyRef = this;
  },
  methods: {
    // 绑定 ref
    onStudentVerifyRef(ref) {
      console.log("ref>>>>>>>>>", ref);
      this.studentVerifyRef = ref;
    },

    onSuccess() {
      console.log("认证成功回调 :>> ");
    },
    // 商户⾃定义的触发事件,触发校验
    async onVerify() {
      const verifyInfo = await this.studentVerifyRef.verify();
      console.log("verifyInfo :>> ", verifyInfo);
      if (verifyInfo && verifyInfo.success) {
        if (
          verifyInfo.status == "passed" &&
          verifyInfo.studentInfo.collegeOnlineTag == 1
        ) {
          this.$page.data.verifySuccess && this.$page.data.verifySuccess(verifyInfo); //学生认证通过
        } else {
          this.$page.data.verifyFail && this.$page.data.verifyFail();
        }
      } else this.$page.data && this.$page.data.verifyFail();
    },
  },
});
index.json
{
    "usingComponents": {
       "student-verify": "plugin://studentVerifyPlugin/student-verify"
    }
}
pages.json
{
"path": "",
	"style": {
		"navigationBarTitleText": "",
		// #ifdef MP-ALIPAY
		,"usingComponents": {
			"custom-student-verify": "/mycomponents/student-verify/index"
		}
		// #endif
	}
}
调用方式
<template>
<!-- 学生认证 -->
<!-- #ifdef MP-ALIPAY -->
	<custom-student-verify></custom-student-verify>
<!-- #endif -->
</template>

methods:{
	// 学生认证
	verify(){
			// #ifdef MP-ALIPAY
			 this.$scope.childverifyRef.onVerify()
			// #endif
			// #ifdef MP-WEIXIN
				
			// #endif
		},
		verifySuccess(data){
			console.log('认证成功 :>> ', data);
			this.handleConfirm();
		},
		verifyFail(){
			console.log('认证失败 :>> ');
		},
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni-app是一种基于Vue.js的跨平台开发框架,允许开发者使用统一的代码编写多端应用。在uni-app调用天地图,我们可以使用天地图提供的JavaScript API来实现。 首先,我们需要在uni-app项目中引入天地图的JavaScript API。可以在uni-app的main.js文件中使用script标签或者通过npm安装天地图相关的依赖包。 在调用天地图之前,我们需要先获取天地图的开发者密钥,然后在uni-app的配置文件中配置天地图的密钥。在uni-app的manifest.json文件中添加对应的配置项,如下所示: ```json { ... "mp-weixin": { ... "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序地图展示" } }, "usingComponents": {}, "window": { "navigationBarTitleText": "uni-app天地图示例" } }, "tmapKey": "你的天地图开发者密钥", ... } ``` 接下来,我们可以在uni-app的页面组件中使用天地图的API。可以在页面的vue文件中,通过import引入天地图的API并初始化地图实例,然后使用对应的方法调用天地图功能。 ```javascript import TMap from '天地图的API路径'; export default { mounted() { const map = new TMap.Map('map-container', { center: new TMap.LatLng(39.9075, 116.3972), // 地图初始中心点 zoom: 9 // 地图初始缩放级别 }); // 添加地图控件 const ctrl = new TMap.control.ScaleControl(); map.addControl(ctrl); } } ``` 在上述代码中,我们通过引入天地图的API,创建了一个地图实例,并指定了初始的中心点和缩放级别。然后,我们实例化了一个地图控件,并将其添加到地图中。 除了添加控件,我们还可以通过地图实例调用其他天地图功能,如地图标注、路线规划等。 综上所述,通过在uni-app项目中引入天地图的JavaScript API,我们可以方便地调用天地图的各项功能,实现地图展示及相关操作。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值