文章目录

一、支付宝小程序源码运行
- 1.开发者工具下载
- 2.运行小程序
二、支付宝小程序用户授权
三、支付宝小程序获取OpenId
- 1.源码改造
- 2.服务器接口
- - (1)生成公钥和私钥
  - (2)填入公钥信息
  - (3)服务端 SDK
  - (4)Node.js 版本开发
四、支付宝小程序组件定制开发
- 1.ImageView改造
- 2.Button改造
- 3.Icon改造

支付宝小程序开发指南 | 「小慕读书」官网

一、支付宝小程序源码运行

1.开发者工具下载

下载 - 支付宝开放平台

2.运行小程序

npm run dev:my

其实mpvue兼容的所有平台的项目的运行命令都在package.json的script字段中：

"scripts": {"dev:wx": "node build/dev-server.js wx","start:wx": "npm run dev:wx","build:wx": "node build/build.js wx","dev:swan": "node build/dev-server.js swan","start:swan": "npm run dev:swan","build:swan": "node build/build.js swan","dev:tt": "node build/dev-server.js tt","start:tt": "npm run dev:tt","build:tt": "node build/build.js tt","dev:my": "node build/dev-server.js my","start:my": "npm run dev:my","build:my": "node build/build.js my","dev": "node build/dev-server.js wx","start": "npm run dev","build": "node build/build.js wx","lint": "eslint --ext .js,.vue src"},

即默认微信小程序，可指定平台：微信小程序（wx）、百度小程序（swan）、头条小程序（tt）、支付宝小程序（my）

二、支付宝小程序用户授权

打开src\pages\index\index.vue，小程序的加载是从mounted中调用init方法开始的，而在init方法中调用了getSetting方法来判断是否已经具备获取用户信息权限：

   ...init() {showLoading({ title: '正在加载' })this.getSetting() // 判断是否已经具备获取用户信息权限}},mounted() {this.init()}}

getSetting方法中调用了getSetting接口函数（在src\api\wechat.js）：

      getSetting() {this.prepare = falsethis.loading = trueconst vue = this// 判断当前小程序是否具备userInfo权限getSetting('userInfo',(res) => {console.log('验证成功...', res)vue.authorized = truevue.prepare = truevue.getUserInfo()},(res) => {console.log('验证失败...', res)vue.authorized = falsevue.prepare = truehideLoading()})},

为了做兼容，getSetting接口函数修改为如下：

export function getSetting(authorize, onSuccess, onFail) {const wx = (res) => {if (res.authSetting[`scope.${authorize}`]) {onSuccess(res)} else {onFail(res)}}const my = (res) => {if (res.authSetting[authorize]) {onSuccess(res)} else {onFail(res)}}mpvue.getSetting({success: (res) => {adapter({ wx, my }, res)},fail: () => {setError('获取权限失败')}})
}

adapter 方法源码：

function adapter(fn, params) {return fn[mpvuePlatform] && fn[mpvuePlatform](params)
}

主要是因为微信和支付宝小程序接口的调用方式不同，比如有些地方的参数需要以对象的形式传入

除了这个接口其他接口调用都需要做兼容处理，由于篇幅原因这里就不再展示全部代码了

支付宝目前无法拿到用户授权的回调，所以在完成授权之后需要手动刷新页面，否则授权登录页面不会消失

通过官方文档：获取会员基础信息可知：

开发者使用 button 组件唤起授权框，请添加属性 open-type=“getAuthorize” 用于支持用户授权。这条和微信是类似的，因此做了如下兼容：

      <buttonclass="auth-btn"@getuserinfo="getUserInfo"open-type="getUserInfo"plain="true"v-if="platform === 'wx'">授权登录</button><buttonclass="auth-btn"plain="true"open-type="getAuthorize"scope='userInfo'v-else>授权登录</button>

开发者调用 my.getAuthCode 和 alipay.system.oauth.token 接口获取支付宝会员标识（user_id）——能力详情
与微信不同的一点是，支付宝允许一旦判断用户授权不存在直接弹出弹窗，因此getSetting方法改造为如下（用户未授权时：微信设置授权状态为false，而支付宝直接拉起授权面板，而不经过按钮点击的一步）：

   getSetting() {this.prepare = falsethis.loading = trueconst vue = this// 判断当前小程序是否具备userInfo权限getSetting('userInfo',(res) => {console.log('验证成功...', res)vue.authorized = truevue.prepare = truevue.getUserInfo()},(res) => {console.log('验证失败...', res)if (mpvuePlatform === 'wx'){vue.authorized = false}vue.prepare = truevue.getUserInfo()hideLoading()})},

src\api\wechat.js的getUserInfo如下：

export function getUserInfo(onSuccess, onFail) {const wx = () => {mpvue.getUserInfo({success(res) {const { userInfo } = resconsole.log('getUserInfo', userInfo)onSuccess(userInfo)},fail() {onFail ? onFail() : setError('获取用户信息失败')}})}const my = () => {mpvue.getAuthUserInfo({success(res) {console.log(res)res.avatarUrl = res.avatar || res.avatarUrldelete res.avatarconsole.log('getOpenUserInfo', res)onSuccess(res)},fail() {onFail ? onFail() : setError('获取用户信息失败')}})}adapter({ wx, my })
}

获取用户授权信息需要到支付宝小程序的后台开发管理中手动添加权限：

三、支付宝小程序获取OpenId

1.源码改造

src\pages\index\index.vue的getUserInfo方法调用src\api\wechat.js的getUserInfo方法，并将回调函数传入，成功回调函数中调用了src\api\wechat.js的getUserOpenId方法（这里在import时做了一下转换：getUserOpenId as getOpenId）

   getUserInfo() {const vue = thisconst onOpenIdComplete = (vue, openId, userInfo) => {vue.openId = openId// 获取首页数据vue.getHomeData(openId, hideLoading)// 上报用户信息，注册账号register(openId, userInfo)// 判断用户今天是否签到过vue.getSignState(openId)}console.log('getUserInfo...')getUserInfo((userInfo) => {vue.userInfo = userInfosetStorageSync('userInfo', userInfo)const openId = getStorageSync('openId')console.log('openId', openId)if (!openId || openId.length === 0) {getOpenId((openId) => {onOpenIdComplete(vue, openId, userInfo)})} else {onOpenIdComplete(vue, openId, userInfo)}},(err) => {console.log('getUserInfo failed', err)})},

src\api\wechat.js调用wx.getUserInfo或my.getAuthUserInfo

export function getUserInfo(onSuccess, onFail) {const wx = () => {mpvue.getUserInfo({success(res) {const { userInfo } = resconsole.log('getUserInfo', userInfo)onSuccess(userInfo)},fail() {onFail ? onFail() : setError('获取用户信息失败')}})}const my = () => {mpvue.getAuthUserInfo({success(res) {console.log(res)res.avatarUrl = res.avatar || res.avatarUrldelete res.avatarconsole.log('getOpenUserInfo', res)onSuccess(res)},fail() {onFail ? onFail() : setError('获取用户信息失败')}})}adapter({ wx, my })
}

这里支付宝的接口名称和微信不同，是getAuthUserInfo而不是getUserInfo
在src\api\wechat.js的getUserOpenId方法的支付宝处理模块中调用了src\api\index.js的接口请求方法getAlipayOpenId

export function getUserOpenId(cb) {const wx = () => {mpvue.login({success: function(res) {console.log(res)if (res.code) {const appid = 'wx0fad7b50f723dc46'getOpenId(appid, res.code).then(response => {if (handleError(response)) {const openId = response.data.data.openidconst sessionKey = response.data.data.session_keysetStorageSync('openId', openId)setStorageSync('session_key', sessionKey)cb && cb(openId)}})} else {console.log('获取用户登录态失败！' + res.errMsg)setError('获取用户登录态失败！')}},fail() {setError('获取openId失败！')}})}const my = () => {mpvue.getAuthCode({scopes: 'auth_user', // 主动授权（弹框）：auth_user，静默授权（不弹框）：auth_basesuccess: async (res) => {console.log('getOpenId', res)if (res.authCode) {const code = res.authCodeconst appId = '2019060665444521'const response = await getAlipayOpenId(appId, code)if (handleError(response)) {const openId = response.data.data.openidconst sessionKey = response.data.data.session_keysetStorageSync('openId', openId)setStorageSync('session_key', sessionKey)cb && cb(openId)}} else {setError('获取openId失败！')}},fail: () => {setError('获取openId失败！')}})}adapter({ wx, my })
}

src\api\index.js的接口请求方法getAlipayOpenId，这里的接口是自己服务器上的而不是官方服务器上的，接下来来看服务器端是如何处理的

export function getAlipayOpenId(appId, code) {return get(`${API_PREFIX}/openId/get/alipay`, { appId, code })
}

async和await - 简书

ES6系列文章异步神器async-await

2.服务器接口

下载好服务器端的源码后需要准备：

支付宝密钥
服务器端的数据库配置
https证书

准备完成之后将https证书引入到app.js中，并在app.js中将“获取支付宝openId”的一步中拿私钥的地方替换为自己的，然后通过node app.js运行服务器端项目

(1)生成公钥和私钥

开发 openId 获取接口需要生成公钥和私钥，查看：技术文档

(2)填入公钥信息

进入小程序开发者后台，在设置->开发设置->开发信息下填入公钥

(3)服务端 SDK

支付宝小程序获取 openId 需要通过服务端 SDK 开发进行支持，查看：开发文档

(4)Node.js 版本开发

首先需要安装依赖：

npm install alipay-sdk

下面提供核心代码：

const AlipaySdk = require('alipay-sdk').default
app.get('/openId/get/alipay', (req, res) => {const appId = req.query.appIdconst code = req.query.codeif (!appId || !code) {onFail(res, '获取openId失败')} else {const alipaySdk = new AlipaySdk({appId,privateKey: fs.readFileSync(appIdMap[appId], 'ascii')})alipaySdk.exec('alipay.system.oauth.token', {grantType: 'authorization_code',code,refreshToken: 'token'}).then(result => {console.log('alipay', result)if (result) {const { alipayUserId, userId, accessToken } = resultonSuccess(res, '获取openId成功', {openid: `${userId}|${alipayUserId}`,session_key: accessToken})} else {onFail(res, '获取openId失败')}}).catch(err => {onFail(res, '获取openId失败', err)})}
})

这里有两点需要注意：

appIdMap[appId] 为私钥地址
将 userId|alipayUserId 定义为 openId，因为支付宝中没有 openId 的概念

四、支付宝小程序组件定制开发

1.ImageView改造

<template>
<div class="image-view" @click="onClick"><img:class="round ? ' round image' : 'image'":style="{ height }":src="src":mode="mode":lazy-load="lazyLoad"@error="onError"@load="onLoad"v-show="!isLoading"><img:class="round ? ' round image' : 'image'":style="{ height }"src="/static/images/loading.jpeg":mode="mode"@error="onPreloadError"@load="onPreload"v-show="isLoading || error"v-if="mpvuePlatform === 'wx'">
</div>
</template>

2.Button改造

<template><van-button:size="size":type="type":round="round":custom-class="customClass"@click="onClick"v-if="platform === 'wx'">{{text}}</van-button><button:size="size":type="type":class="customClass":style="{borderRadius: round ? '50px' : '0'}"@click="onClick"v-else-if="platform === 'my'">{{text}}</button>
</template><script>export default {props: {customClass: String,text: String,color: String,size: String,round: {type: Boolean,default: false}},data() {return {platform: mpvuePlatform}},methods: {onClick() {this.$emit('click')}}}
</script><style lang="scss" scoped>
</style>

3.Icon改造

<template><van-icon:class="customClass":style="customStyle":name="name":color="color":size="size"v-if="platform === 'wx'"></van-icon><icon:class="customClass":style="customStyle":type="name":color="color":size="size"v-else-if="platform === 'my'"/>
</template><script>export default {props: {customStyle: Object,customClass: String,name: String,color: String,size: String},data() {return {platform: mpvuePlatform}}}
</script><style lang="scss" scoped>
</style>

需要改造的一大部分原因是支付宝小程序无法使用UI组件库：vant-weapp，建议使用支付宝自带组件库：基础组件、扩展组件。

【笔记】实战mpvue2.0多端小程序框架——原生小程序 API 调用与多端小程序发布相关推荐

小程序·云开发的HTTP API调用丨实战
小程序云开发之httpApi调用. 小程序云开发之httpApi调用(返回"47001处理") 技术栈采用 nodejs + express 搭建web服务器,采用 axios ...
【笔记】实战mpvue2.0多端小程序框架——首页开发（上）
文章目录一.首页视觉稿二.搜索组件 1.组件样式开发 2.组件功能开发三.读书卡片组件四.图片组件首页开发 | 「小慕读书」官网完成本节内容需做如下准备工作: 清理之前测试写的内容,还原 ...
微信小程序和用网易新闻api实现自己的微信小程序
每次因为看见别人写的新东西,自己就也想做一个,不知道是不是一个好习惯哎.微信小程序已经出来很久了,最近才开始学了一点皮毛,做了个小东西,用到了网易新闻接口,实现了小程序上的新闻浏览.但是很遗憾没有通过 ...
Z-Wave 700应用程序框架第七章 - 固件更新和引导加载程序
本节的目的是描述如何生成和管理固件更新映像. ZW700 SDK附带三个引导加载程序映像. 一个是FG14模块的OTW图像. 这个引导加载程序只适用于运行SerialAPI的FG14设备. 另外两个引 ...
调用系统自带的程序android,Android怎么打开和调用系统自带的程序示例(06)
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceS ...
Web内核微信小程序框架实践
作者:boxuechen,腾讯 WXG 客户端开发工程师背景在正式进入分享之前,简单介绍一下做这个小程序新框架的背景思路,主要目的有以下几点: 新框架和微信的主客户端解耦,能够独立运行,并且可以同 ...
小程序框架选型必看：Taro vs uni-app选型经历！
公司新产品要求发布到各家小程序,最近研究对比了社区主流的几家小程序开发框架,独坑不如拉人众坑,分享给各位,欢迎和我一起入坑:) 背景最近老板不知怎的很重视各种小程序平台,感觉要靠小程序完成今年大半k ...
【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】
微信小程序框架文章目录微信小程序框架一.逻辑层 1.注册程序 1.App()函数 2.onPageNotFound()函数 3.getApp()函数 2.注册页面 1.初始数据 2.生命周期回调 ...
web api接口开发实例_小程序开发如何调用 API 接口,以豆瓣电影为例
API 调用是开发者在小程序开发过程中经常会遇到的问题,本期我们以为调用豆瓣电影 API 为例具体来看 API 的调用过程以及常见的一些问题. 测试用到的小程序是「电影周周看」,内容来自清华大学软件学 ...

【笔记】实战mpvue2.0多端小程序框架——原生小程序 API 调用与多端小程序发布