# imooc-pay-share

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

## Basic Information

- **Project Name**: imooc-pay-share
- **Description**: 慕课-H5前端（分享、授权、支付）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2019-10-25
- **Last Updated**: 2021-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1 微信公众号（授权、分享、支付）
## 1.1 授权、分享、支付流程
![授权、分享、支付流程](./resource/assets/README_IMG/share_pay.png)

## 1.2 服务号与订阅号差异
![分类](./resource/assets/README_IMG/gzh.png)
![订阅号与服务号的差异](./resource/assets/README_IMG/distinguish.png)

    如果注册了订阅号，不能更改成服务号（要有营业执照才能注册），反之也是

## 2 介绍
    对应后台项目：imooc-pay-server
    
    手记：
    https://www.imooc.com/t/1343480#Article
    
    启动：npm run serve
    
    版本说明：
    vue@2.6.6
    vue-cli@3.0
    大于node@8.9就可以
    
    解压 2179805133
    
### 2.1 什么场景下使用微信分享
    线下推广、线上传播
    分享渠道：H5、小程序、app
    风向方式：微信好友、朋友圈、qq好友、微博、qq空间

### 2.2 微信分享带来什么收益
    拉新
    留存
    提升用户粘性
    品牌传播

## 3 项目基本信息

![配置信息](./resource/assets/README_IMG/config.png)
![配置信息2](./resource/assets/README_IMG/config2.png)

### 3.1 接口配置信息
    当你关注的订阅号、服务号之后，向订阅号服务号发送信息，信息会转发到服务器上面，然后相应用户 
    
### 3.2 JS接口安全域名
    目的：分享、支付，必须要有微信的安全域名；如果没有设置，没办法调用微信提供出来的接口（JS-SDK）
    
    1、m.hjy.com需到公众号后台设置安全域名
       域名：http://m.hjy.com（虚拟的域名）
    2、修改本地的hosts(C:\Windows\System32\drivers\etc\HOSTS)：127.0.0.1 m.hjy.com
    3、访问：http://m.hjy.com/#/index
    4、如果是正式环境，需要到JS接口安全域名去下载文件放到服务器上
 
### 3.3 业务域名（如果设置了，就不会提示：防欺诈盗号，请勿祝福或输入qq密码）
    当前使用哪个网站
    
### 3.4 网页授权域名
    点击授权，会跳到微信授权页面（跳出我们网站），点击同意，需要回调回来（也就是回调页面）
    网页帐号：m.hjy.com
    
### 3.5 验证js-sdk
    https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
    
## 4 概念
### 4.1 网页授权access_token 和 普通access_token的区别
    网页授权access_token：
        access_token获取用户头像、昵称、年龄、openid
        
    普通access_token：
        调用非网页授权的所有接口，包括openid

### 4.2 UnionID
    公众号 与 小程序 两者之间进行绑定，微信会生成一个UnionID，起到联合的作用
    
    一个用户登录公众号会生成一个唯一openid
    一个用户登录小程序也会生成一个唯一openid
    以上两个openid不一样，UnionID是一样的
    
### 4.3 授权流程
    https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
    
    1、用户同意授权，获取code
    2、通过code换取网页授权access_token
    3、拉取用户信息（需要scope为snsapi_userinfo）
    
    授权分为：
    静默授权：无感知的，自动跳转过去，只要需要获取openid（昵称、头像、地区、性别）
    用户授权(snsapi_userinfo)：获取openid，能获取到用户的昵称、头像、地区、性别、年龄
    
### 4.4 JSSDK

#### 4.4.1 概述
    微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
    通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
    此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。

#### 4.4.2 JSSDK使用步骤
    绑定域名
    引入js文件
    通过config接口注入权限验证配置（接口签名）
    通过ready接口处理成功验证