uni-app小程序开发-支付宝小程序常用API

发表于 更新于 分类于
uni-app小程序开发-选择手机联系人/智能客服/预览PDF

前言

https://open.alipay.com/api#jsapi

uni-app上只有添加

https://uniapp.dcloud.net.cn/api/system/contact.html

选择手机联系人

1
2
3
4
5
6
7
8
9
10
getContactClick() {
  my.choosePhoneContact({
    success: (res) => {
      console.log('choosePhoneContact', res);
    },
    fail: (err) => {
      console.log('choosePhoneContact fail', err);
    }
  });
}

返回格式

1
{name: '高小德', mobile: '18888888888'}

智能客服

调试的时候必须在手机上

1
2
3
4
5
6
7
8
9
<view class="z_flex_h_c_c contact_outer">
  <view class="kefu">
    <text class="iconfont icon-kefu"></text>
    <text class="z_text_base_white z_margin_left_m">
      联系客服
    </text>
  </view>
  <contact-button tnt-inst-id="xxx" scene="xxx" />
</view>

隐藏默认的图标，填充父容器

1
2
3
4
5
6
7
8
9
10
11
.contact_outer {
	position: relative;
}
contact-button {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
}

预览PDF

在小程序内尝试用webview加载PDF，发现并不能正常加载。

支付宝的方法

只能在支付宝小程序中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
my.downloadFile({
  url: 'https://www.psvmc.cn/xieyi.pdf',
  success({ apFilePath }) {
    my.hideLoading();
    my.openDocument({
      filePath: apFilePath,
      fileType: 'pdf',
      success: (res) => {
        console.log('open document success');
      }
    });
  }
});

uni-app的方法

在支付宝小程序和微信小程序都能用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
previewWechat(urlPdf) {
  uni.showLoading({
    title: '加载中..'
  });
  uni.downloadFile({
    url: urlPdf,
    success: function (res) {
      let filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        showMenu: true,
        success: function (res) {
          console.log('打开文档成功');
          uni.hideLoading();
        }
      });
    },
    complete: function (r) {
      uni.hideLoading();
    }
  });
}

小程序打开方式（场景值）

场景值获取

https://opendocs.alipay.com/mini/framework/scene?pathHash=ef58b6b0

场景值列表

https://opendocs.alipay.com/mini/08otyv?pathHash=5e710835