# imooc-pay-mp

**Repository Path**: hongjunyong/imooc-pay-mp

## Basic Information

- **Project Name**: imooc-pay-mp
- **Description**: 慕课-原生小程序（分享、授权、支付）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-11-02
- **Last Updated**: 2021-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 微信小程序

## README

# 1 慕课-小程序（分享、授权、支付）
    原生小程序开发

# 2 介绍
## 2.1 小程序分享
    体验友好
    利于传播
    只能分享给好友
    不能分享第三方应用
    
## 2.2 项目启动【注意】【注意】【注意】
    需要到app.js修改env参数
    
    小程序后台页面路径：pages/index/index

## 2.2 网页开发 和 小程序开发 对比

![网页开发 和 小程序开发 对比](./assets/images/README_IMG/compare.png)

## 2.3 小程序没办法自动授权，要用户点击授权按钮才可以授权

## 2.4 H5自适应
    设置html的font-size的值，基于750，设计为100px
    1rem = 100px
    50px = 0.5rem
    300px = 3rem

## 2.5 小程序授权登录
    根据userId/openId判断当前用户是否登录
    调用wx.login获取到code
    调用服务端根据code换取openid
    通过用户授权获取用户信息，存入到后台数据库

## 2.6 open-type的合法值
    
![open-type的合法值](./assets/images/README_IMG/open-type.png)

## 2.7 小程序分享
    点击按钮分享
    点击右上角分享

## 2.8 小程序支付前沿
    微信认证
    微信支付认证
    https证书

## 2.9 订阅号微信认证特权 
    自定义菜单（可设置跳转外部链接，设置纯文本消息）
    可使用部分开发接口
    可以申请广告主功能
    可以申请卡券功能
    可以申请多客服功能
    公众号头像及详细资料会显示“V”标识
    
## 2.10 微信支付认证
    注册商户号/关联商户号
    H5-配置支付授权目录
    非H5-授权AppID
    设置API密钥


![支付设置](./assets/images/README_IMG/pay.png)

![设置API密钥](./assets/images/README_IMG/API.png)

## 2.11 前端支付接入方式对比

    JSAPI:微信打开一个浏览器，微信向浏览器注入JS对象（在前端称为桥：微信注入一个桥对象）
    
    JSADK：微信官方提供的一个SDK软件开发包，辅助我们去做分享、授权登录、支付等功能开发
   
![设置API密钥](./assets/images/README_IMG/pay-contrast.png)

    小程序端支付流程：wx.requestPayment
    
    后端支付流程：
        1、拼接常规参数
        2、生成签名
        3、拼接xml数据
        4、调用统一下单接口
        5、获取预支付ID：prepay_id
        6、生成支付SDK
        7、定义回调接口，接收微信支付消息