精华内容
下载资源
问答
  • 2021-01-24 13:06:43

    由于工作需要,独立开发了一套会员管理和停车系统的微信小程序,搜索武汉太和里就可以看到拙作。最近将微信小程序使用antmove工具搬到了支付宝端,又重新用起来了支付宝小程序开发工具,

    用的版本是1.15.7,和微信小程序开发工具比较起来,各有优劣,具体如下:

    1,同一套代码,同一台电脑编译,后端都是同一台服务器,微信小程序开发工具编译只需要3-5秒,支付宝小程序开发工具至少20秒以上,我问过支付宝客服技术支持,技术支持让我下载最新demo版,下载后依然奇慢无比,每次前端改个css样式,按个保存,等待重新编译一次,然后我就去写一段后端代码,后端代码写完了,发现支付宝小程序还没编译好,真的是效率不行。

    2,在微信小程序CTRL+S是全部保存所有页面然后自动编译了,支付宝是ctrl+alt+s,而且还需要点一下编译才会去编译,这一点也做得没微信好。

    3,用微信小程序做版本管理时,很容易做一个网络认证等操作就能完成,支付宝小程序的版本管理特别麻烦,到现在都还没调好。

    4,微信开发时,只需要公司认证后,微信端就开放获取会员手机号权限,支付宝小程序想获取会员手机号这个接口也是一件很头疼的事情。

    5,不过支付宝小程序也有优势,个人感觉,同一个企业账号下如果有2个应用,微信小程序的用户标识是不同的openid,唯一相同的是unionid,但是支付宝端,如果同一个企业账号下如果有2个应用,每个应用的alipay_userid是唯一的,这点对开发时还是节省了时间的。

    6,微信小程序在苹果手机上不能添加到屏幕桌面,但是支付宝小程序可以添加到屏幕桌面,不管是安卓手机还是苹果手机都支持。

     

    微信和支付宝搜索   武汉太和里  小程序就可以看到效果,后期准备再将微信小程序转换成QQ小程序,百度小程序,抖音小程序,路漫漫其修远兮,,,

     

     

    更多相关内容
  • 最新版本 v1.0 Windows 7/8/10(64-bit) MacOS 点击 changelog 查看发布详情。 历史版本 v0.50.9 Windows 7/8/10(64-bit) MacOS 前往官方下载地址 查看详细使用手册
  • VIDE介绍vide是基于vuejs框架开发的一款IDE,vide插件系统也是基于vuejs来开发,插件系统的数据和IDE的数据都是有vuex来管理,导致使整个IDE的设计非常简单和轻巧,同时开发插件也变得非常快速,插件开发效率上,完 ...
  • 目录一、创建小程序欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居...

    本篇主要记录支付宝小程序开发的整个步骤,从前端到后端,图文并茂,清晰易懂,从配置到开发,你想要的的都有。完整流程,后续追加过程问题的解决

    最终效果是:获取支付宝登录用户的userId,用它完成相关的业务处理
    主要对接技术包括:

    获取授权码
    证书配置
    页面请求编程
    获取userid


    一、创建小程序

    1、创建小程序
    登录支付宝 https://www.alipay.com/ > 产品中心 > 支付宝预授权(没开通的开通)> 自行研发接入 > 创建小程序
    在这里插入图片描述
    在这里插入图片描述
    2、记录下小程序的Id
    在这里插入图片描述

    3、开发设置
    这步的目的是为了能接入开发
    在小程序的控制台找到【开发设置】,完成 [设置加签和应用网关] 和 [设置域名白名单]
    在这里插入图片描述
    接口加签建议用证书的方式。配合【支付宝开发平台助手】生成证书,并在这个页面上传生成即可。
    密钥接入文档
    设置完成,把这三个证书下载下来备用,同时支付宝开发平台助手生成的公钥,私钥也保存好,开发时用到


    二、接入小程序

    1、前端接入-安装创建
    下载安装开发者工具:https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html在这里插入图片描述
    安装完后打开,新建小程序项目
    在这里插入图片描述
    完成后,首页是这样
    在这里插入图片描述

    2、前端接入-编程
    目的:获取授权码,然后获取授权用户id,方便业务后续调用。
    修改2个文件:

    page/API/get-auth-code/get-auth-code.axml
    page/API/get-auth-code/get-auth-code.js

    get-auth-code.axml 新增myrequest节点

    <view class="page">
      <view class="page-section">
        <view>请不要一进入小程序就弹框授权,建议先了解小程序的服务内容</view>
        <button type="primary" onTap="getAuthCode">
          获取授权码
        </button>
        <button type="primary" onTap="myrequest">
          我的请求
        </button>
      </view>
    </view>
    
    

    get-auth-code.js 加上响应请求

    Page({
      onLoad() { },
      data: {},
      getAuthCode: () => {
        my.getAuthCode({
          scopes: 'auth_user',
          success: ({ authCode }) => {
            console.log(`authCode:`, authCode);
            my.alert({
               content: authCode,
            });
          },
        });
      },
    
      myrequest: () => {
        my.getAuthCode({
          scopes: 'auth_user',
          success: ({ authCode }) => {
            console.log(`authCode:`, authCode);
            my.request({
              url: 'http://192.168.3.2:8080/myapp/aliapi/login/login.do', //服务器接口地址
              method: 'Post',
              data: {
                code: authCode //上面getAuthCode 成功获取到的code, 传入后台接口
              },
              header: {
                'content-type': 'application/json' //默认值
              },
              success: function (res) {
                console.log(res)
                 my.alert({
                    content: res,
              });
              }
            })
          },
        });
      },
    });
    
    

    完成后编译,效果如下
    在这里插入图片描述
    接下来去完成 http://192.168.3.2:8080/myapp/aliapi/login/login.do 接口编码


    3、后端接入

    
        @Override
        public String login(LoginDto loginDto, HttpServletResponse response) {
        
            String appid = "小程序id";	// 之前步骤提到的
            String appPrivateKey = "私钥";  // 之前步骤提到的
            
            CertAlipayRequest certAlipayRequest = new CertAlipayRequest();
            certAlipayRequest.setServerUrl("https://openapi.alipay.com/gateway.do");
            certAlipayRequest.setAppId(appid);
            certAlipayRequest.setPrivateKey(appPrivateKey);
            certAlipayRequest.setFormat("json");
            certAlipayRequest.setCharset("utf-8");
            certAlipayRequest.setSignType("RSA2");
    
            ClassLoader loader = Thread.currentThread().getContextClassLoader();
            certAlipayRequest.setCertPath(loader.getResource("").getPath() + "appCertPublicKey.crt");//应用公钥证书
            certAlipayRequest.setAlipayPublicCertPath(loader.getResource("").getPath() + "alipayCertPublicKey_RSA2.crt");//支付宝公钥证书
            certAlipayRequest.setRootCertPath(loader.getResource("").getPath() + "alipayRootCert.crt");//支付宝根证书
    
            try {
                AlipayClient alipayClient = new DefaultAlipayClient(certAlipayRequest);
                AlipaySystemOauthTokenRequest request = new AlipaySystemOauthTokenRequest();
                request.setGrantType(grantType);
                request.setCode(loginDto.getCode());
                AlipaySystemOauthTokenResponse alipaySystemOauthTokenResponse = alipayClient.certificateExecute(request);
                if (alipaySystemOauthTokenResponse.isSuccess()) {
                    LogUtils.info("调用成功, Response result={}", alipaySystemOauthTokenResponse.getBody());
                    // 生成UUID
                    // String tokenId = UUID.randomUUID().toString().replaceAll("-", "");
                    // 设置返回tokenid (用户id组成)
                    // response.setHeader(TOKEN, JwtUtil.sign(alipaySystemOauthTokenResponse.getUserId(), tokenId));
                    return alipaySystemOauthTokenResponse.getUserId();
                } else {
                    LogUtils.info("调用失败, {}", alipaySystemOauthTokenResponse.getSubMsg());
                }
            } catch (AlipayApiException e) {
                e.printStackTrace();
            }
        }
    

    官方开发指南文档地址:https://opendocs.alipay.com/mini/developer

    三、调试小程序

    主要是看接口是否调通

    1、在开发者工具上查看请求信息
    在这里插入图片描述

    2、查看前端日志打印
    在这里插入图片描述

    3、当然,出了问题,后端的调试更重要,这里就不举例了。

    主要问题集中在密钥不正确,参数不全


    四、错误与解决

    移步这里

    展开全文
  • 蚂蚁开发者工具是一款专为支付宝小程序制作的编程开发软件,据悉,支付宝小程序已经进入了公测阶段,目前公测主要面向企业级开发者。 小程序介绍: 支付宝小程序是手机应用嵌入支付宝客户端的一种方法,有以下特点...
  • php 微信开发组件 wechat 公众号 支付宝 小程序开发框架
  • 支付宝小程序是支付宝建立的自由开放平台。2017年1月12日,支付宝方面回应称,“支付宝从2016年9月开始研发类似小程序的应用,还在持续打磨的过程中。 2018年4月,国家市场监督管理总局在支付宝上推出“电子营业执照...
  • ATEC开发者大赛 | 支付宝小程序创新大赛,报名开始啦 主办方:蚂蚁金服
  • Taro 支付宝小程序开发

    千次阅读 2021-11-16 09:58:54
    1. 环境准备 ... # 设置淘宝镜像: ... # 全局安装 @tarojs/cli 工具包 npm i -g @tarojs/cli 2. 初始化项目 选择项目目录,在当前的项目目录下初始化 Taro 项目...3. 开发支付宝小程序 3.1 怎么运行 打开初始化后的项目,查

    1. 环境准备

    # 安装 node 环境, 从 node 官网下载: http://nodejs.cn/
    
    # 设置淘宝镜像:
    npm config set registry https://registry.npm.taobao.org
    
    # 全局安装 @tarojs/cli 工具包
    npm i -g @tarojs/cli
    

    2. 初始化项目

    选择项目目录,在当前的项目目录下初始化 Taro 项目

    taro init xxx(项目名称)
    

    3. 开发支付宝小程序

    3.1 怎么运行

    打开初始化后的项目,查看 package.json 文件,发现 scripts 脚本

      "scripts": {
        "build:weapp": "taro build --type weapp",
        "build:swan": "taro build --type swan",
        "build:alipay": "taro build --type alipay",
        "build:tt": "taro build --type tt",
        "build:h5": "taro build --type h5",
        "build:rn": "taro build --type rn",
        "build:qq": "taro build --type qq",
        "build:quickapp": "taro build --type quickapp",
        "dev:weapp": "npm run build:weapp -- --watch",
        "dev:swan": "npm run build:swan -- --watch",
        "dev:alipay": "npm run build:alipay -- --watch",
        "dev:tt": "npm run build:tt -- --watch",
        "dev:h5": "npm run build:h5 -- --watch",
        "dev:rn": "npm run build:rn -- --watch",
        "dev:qq": "npm run build:qq -- --watch",
        "dev:quickapp": "npm run build:quickapp -- --watch"
      }
    

    我们运行的是支付宝小程序,所以执行 npm run dev:alipay 但是你会发现本地是起来了,那我怎么在本地,边开发边调试呢?

    这时候你要想,如果我开发支付宝小程序是不是需要在支付宝上运行呢?那怎么模拟在支付宝上运行呢?

    这时候你有一定的开发小程序的经验,你就会知道有小程序开发者平台这个东西。

    支付宝的开放平台的地址是:https://openhome.alipay.com/platform/home.htm

    点击链接进入,注册登陆一顿操作后,你可能又不知道怎么办了,我成功登陆了和我调试小程序有什么关联吗?哈哈,这关联可大了,你要开发支付宝小程序,就需要使用官网提供的开发工具,我们的开发的代码可以在开发工具中进行调试。

    开发工具的下载地址:https://opendocs.alipay.com/mini/ide/download

    下出来之后,打开我们的项目中 dist 文件夹,接下来就能愉快的进行开发了!!!

    4. 引入 taro-ui 组件库

    4.1 安装 taro-ui

    yarn add taro-ui
    

    4.2 引入 css 样式

    进入 app.tsx,在头部引入

    import 'taro-ui/dist/style/index.scss';
    

    5. 组件写法

    我这边主要使用 HOOK 写法

    const Home = () => {
      return (
        <View className=''>
          <View className='home-title-bg'></View>
        </View>
      )
    };
    
    export default inject()(observer(Home));
    

    在小程序开发中 View 标签类似于通常 PC 开发的 div、p 标签。我们在开发的过程中最好注意一下命名的规范,在编写的时候,我比较偏向 namespace 这种 css 写法

    6. 请求封装

    不兼容 H5 的情况下,只需要配置 mini-program-axios

    yarn 用户安装: yarn add mini-program-axios

    npm 用户安装:npm i mini-program-axios -D

    同时在 tsconfig.json 文件中的 typeRoots 的末尾加上 node_modules/mini-types

    utils/request.ts 文件中加上

    // 封装统一的请求方法
    import miniAxios from 'mini-program-axios';
    
    const request = miniAxios.create({
      timeout: 30000,
    });
    
    request.interceptors.request.use((config) => config, error => {
      throw new Error('请求异常');
    });
    
    request.interceptors.responce.use(response => response, error => {
      throw new Error('响应异常');
    });
    
    export default {
      get: (url, params) => {
        return new Promise((resolve) => {
          request({
            url,
            method: 'GET',
            data: params
          }).then(resp => resolve(resp));
        });
      },
      post: (url, params) => {
        return new Promise((resolve) => {
          request({
            url,
            method: 'POST',
            data: params
          }).then(resp => resolve(resp));
        });
      }
    }
    

    7. 附加配套自定义脚手架代码

    脚手架入口

    展开全文
  • 支付宝小程序开发——学习总结

    千次阅读 2019-04-23 15:00:42
    安装所需软件,在支付宝小程序开发平台创建小程序 完成flex布局前端学习 设计天气预报前端设计 node.js实现服务端 #一、安装所需软件,创建小程序 首先我们是先创建蚂蚁金服的账号, ...

    首先我们先把过程分为几个步骤:

    1. 安装所需软件,在支付宝小程序开发平台创建小程序
    2. 完成flex布局前端学习
    3. 设计天气预报前端设计
    4. node.js实现服务端

    一、安装所需软件,创建小程序

    1.我们是先创建蚂蚁金服的账号,进入小程序创建。
    在这里插入图片描述
    2.添加自己需要的api接口,设置自己的私钥和公钥和应用网关在这里插入图片描述
    3.小在小程序开发工具
    https://docs.alipay.com/mini/ide/download
    根据操作系统选择对应的开发工具:Windows 64 位或 MacOS。
    4.vscode下载 node.js下载,npm安装,nodemon安装可以百度一下

    二,完成flex布局前端学习

    主要是跟着老师一起学习了小程序前端开发flex布局的使用
    在这里插入图片描述
    我觉得flex布局还是很方便的,提供了一个小程序开发的模板这里主要展示一下搜索框。
    index.axml

    <view class="search-box">
        <image class="logo" src="../../asset/logo.png" alt="logo" mode="aspectFit" />
    	<view class="search">
          <input onFocus="inputTest" placeholder="数码好物低至3折" />
          <image onTap="uploadImg" class="camera" src="../../asset/camera.png" mode="aspectFit" />
        </view>
    </view> 
    

    index.acss

    .search-box {
      display: flex;
      height: 72rpx;
      align-items: center;
    }
    .search-box .logo {
      width: 72rpx;
      margin: 0 38rpx 0 55rpx;
    }
    
    .search {
      width: 532rpx;
      height: 72rpx;
      font-size: 17px;
      letter-spacing: -0.82rpx;
      border-radius: 20rpx;
      position: relative;
      background: #F1F1F2 url("../../asset/search.png") 16rpx center no-repeat;
      background-size: 28rpx;
    }
    
    .search input {
      width: 400rpx;
      height: 72rpx;
      box-sizing: border-box;
      display: inline-block;
      padding-left: 58rpx;
      border-radius: 10px;
      background: transparent;
    }
    
    .camera {
      position: absolute;
      width: 48rpx;
      height: 48rpx;
      right: 14rpx;
      top: 12rpx;
    }
    

    这里注意要把app.acss的初始样式去掉,不然会出现布局问题
    展示图片:
    在这里插入图片描述

    三,天气预报前端设计

    百度天气预报小程序的模型,然后自己简单的做了一下。

    在这里插入图片描述
    这里主要是调用了和风天气的3天天气预报的api接口和支付包小程序的查找城市和定位的api来实现的。部分代码如下:
    查找城市api
    在这里插入图片描述
    城市定位api
    在这里插入图片描述
    和风天气调用api
    在这里插入图片描述

    四,node.js实现服务端

    1. 前端发送请求到目标url
      在这里插入图片描述
      2.启动npm(一个类似于maven的项目,利用js来实现后端开发)
      在这里插入图片描述
      安装axio
      node.js部分代码如下:
    router.get('/NoWeatherLL', async(req, res )=> {
      var url = 'https://free-api.heweather.net/s6/weather/now?location='+req.query.location+'&key=HE1904202258521972'
      axios.get(url)
        .then(function (response) {
          console.log("01成功");
          //console.log(response);
          
          //console.log(NoWeatherLL);
          res.json(response.data);
          
        })
        .catch(function (error) {
          console.log(error);
        });
    });
    

    启动小程序,服务端可以获得数据,并将接口发送给前端。
    在这里插入图片描述
    以上就是我这两天关于蚂蚁金服小程序开发的学习总结
    小白表示从来没写过博客,逻辑上可能很乱,写的有什么问题大家都可以提出来,谢谢啦

    展开全文
  • 不断增长的未来,万亿级市场规模。如何快速高效掌握小程序开发技能,抢占支付宝生态战略级产品的先机?《小程序开发不求人》>>电子书重磅上线!快来下载学习吧!
  • 支付宝商城小程序,首页,分类,购物车,我的,支付接口都有测试可以用。
  • 支付宝小程序封装好的轮播图列表跳转 模板 组件
  • IDEA支付宝小程序开发流程——授权登录 IDEA,支付宝小程序 grammar_cjkRuby: true 前置条件 获取APPID 添加获取会员信息服务 详情 &amp;gt; 开发管理 &amp;gt; 功能列表 &amp;gt; ...
  • 判断用户当前支付宝版本是否支持小程序中的某个组件的使用 基础库版本可以通过接口 my.SDKVersion 查看。 接口是否可用,可以通过接口 my.canIUse 查看。 if(!my.canIUse('web-view')) { my.alert({ title: '...
  • 支付宝小程序开发+java服务

    千次阅读 2019-08-20 15:57:26
    支付宝小程序是一种全新的开放模式,它运行在支付宝客户端,是手机应用嵌入支付宝客户端的一种方法。支付宝小程序开放给开发者更多的 JS API 和 OpenAPI,也可以提供给用户多样化的便捷服务。支付宝小程序可以被便捷...
  • 蚂蚁开发者工具也就是支付宝小程序开发工具,支付宝小程序已经进入公测阶段,目前公测主要面向的是企业级开发者,蚂蚁开发者工具是支付宝小程序必备的工具! 小程序介绍: 支付宝小程序是手机应用嵌入支付宝...
  • 第二步:解析授权码(SDK:) /// /// 获取支付宝用户id /// /// 小程序授权码 /// appid /// 应用私钥,和应用公钥匹配 在密钥生产器中可见 /// 支付宝公钥(区别于应用公钥),开放平台中接口加签方式中可见 /// ...
  • NetWork conditions 进行设置如下图; 输入的值是: ...Mozilla/5.0…AlipayDefined(nt:WIFI,ws:320|504|2.0) AliApp(AP/9.6.0.000001) AlipayClient/9.6.0.000001 Language/zh-Hans ProductType/dev ...
  • 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过程 ...
  • 支付宝小程序开发(Serverless) 一、在支付宝账号里面开通小程序云服务 这是地址https://www.aliyun.com/product/miniappdev 创建的话首先需要授权 这里贴出官网的地址...
  • 支付宝小程序服务商模板开发着力于解决支付宝生态体系内的小程序管理问题,一套模板,随处部署。能尽可能地减少系统服务商的开发成本,系统服务商只用开发一套小程序代码作为模板就可以快速批量的孵化出大量的商家小...
  • 基于最新的uni-app开发的跨平台商城小程序(微信小程序,头条小程序,抖音小程序),合理的代码结构和规范的编码风格,能够让你很轻松的上手并转化成为自己的作品。 与之相支持的是,我们提供了一套完整的项目代码...
  • 前言 小弟才毕业不久也是第一次写博客写请各位老哥多担待,之前只是了解一点微信小程序 支付宝的小程序更是没有接触过 最近公司有项目需要弄一个支付宝的小程序...开发支付宝小程序 先进入支付宝开放平台 https://op...
  • 支付宝小程序控制硬件①】 申请个人支付宝下程序开发的个人账户,认识支付宝小程序框架结构,做好智能控制第一步! 文章目录一、前言;二、回忆支付宝小程序移植的过程; 一、前言;     ...
  • 微信小程序开发同步动态转换为支付宝小程序,转换支付宝小程序,可以参考一下。 微信小程序开发同步动态转换为支付宝小程序,转换支付宝小程序,可以参考一下
  • 那么下面小编就来介绍一下怎么使用这款强大的支付宝小程序开发工具「即速应用」,制作自己的支付宝小程序。 1.进入支付宝小程序开放平台,使用企业支付宝登录 “蚂蚁金服开放平台”。 2.创建属于自己的支付宝小程序...
  • 支付宝小程序开发(一)

    千次阅读 2017-09-13 13:47:58
    开发小程序有三天了,一边学一边开发,在此记录,开发过程中注意事项。 map组件层级最高,需要在map上悬浮元素的同学,建议使用controls map组件全屏,需要给map加高度100vh controls中的width,height必填,不填真机...
  • 浅谈支付宝小程序与微信小程序开发的区别

    万次阅读 多人点赞 2018-11-20 13:48:25
    浅谈支付宝小程序与微信小程序开发的区别 一、app.json (1)设置小程序通用的的状态栏、导航条、标题、窗口背景色 支付宝小程序 "window": { "defaultTitle": "病案到家", //...
  • uniapp关于支付宝小程序或钉钉小程序标题栏自定义

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,377
精华内容 12,150
关键字:

支付宝小程序开发