公众号（生活号）对接

支付宝

不同于微信的openid + unionid；

支付宝和微信不同的就是user_id就是全局唯一，多个app可以互通。

微信

微信的域名允许http进行https重定向依旧拿code可以获取授权

# HTTP redirect
server {
    listen      80;
    listen      [::]:80;

    location / {
        return 301 https://www.example.com$request_uri;
    }
}

微信网页开发流程

在公众号未申请或者认证未通过时可以使用测试公众账号进行开发授权open in new window

公众号开发需要域名后，配置前端域名以及js安全域名（重定向域名）
获取授权（获取用户的code）拿code去和后端进行网页的授权
- 静默获取授权 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
- 用户授权（在关注后也会静默授权，不会弹窗） https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
如需获取用户的unionid需要公众号绑定到微信开放平台帐号（过程中可能需要付费认证，政府类的机构好像可以免费）

微信jsapi

由于微信不同于支付宝，所有的jsapi都需要进行授权先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

引入JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。建议在微信的加载时候就进行jssdk授权（项目强依赖微信的jsapi就在获取jssdk后）部分方法采用此文件，例如whatWebView

预加载jssdk的（包含微信以及支付宝）

export const isReady = function () {
  return new Promise((resolve, reject) => {
    // 根据不同客户端进行等待注入jsapi,没有则直接渲染
    if (isAli) {
      ready(function () {
        resolve()
      })
    } else if (isWeChat) {
      axios({
        method: 'get',
        url: `${baseURL}/appointment/getJSSDK`,
        params: {
          url: window.location.href.indexOf('#') > -1 ? window.location.href.split('#')[0] : window.location.href
          // 'http://81.69.44.115/zjh/html/covid/'
        }
      })
        .then((res) => {
          const { appId, timestamp, nonceStr, signature } = res.data.data
          wx.config({
            appId,
            timestamp,
            nonceStr,
            signature,
            jsApiList: ['scanQRCode', 'previewImage', 'openLocation', 'getLocation', 'hideAllNonBaseMenuItem']
          })
        })
        .catch(() => {
          // Toast({ message: JSON.stringify(err), duration: 0 })
          Toast({ message: '暂无法提供微信公众号服务!' })
          return reject(new Error('部分功能可能暂无法提供服务!'))
        })
      wx.ready(function () {
        wx.hideAllNonBaseMenuItem()
        /* config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
        所以如果需要在页面加载时就调用相关接口，
        则须把相关接口放在ready函数中调用来确保正确执行。
        对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。*/
        resolve()
      })
    } else {
      // app中
      if (window?.android?.getUserInfo) {
        resolve()
      } else {
        // Toast({ message: '请在微信中打开', forbidClick: true, duration: 0 })
        // reject(new Error('请在APP打开'))
        resolve()
      }
    }
  })
}

vite打包的配置

build: {
   rollupOptions: {
       external: ['wx','alipay','wxjs'],
       output: {
           globals: {
               wx: 'wx',
               alipay: 'AlipayJSBridge',
           },
       },
   }
}

# 公众号（生活号）对接

# 支付宝

# 微信

# 微信网页开发流程

公众号（生活号）对接

支付宝

微信

微信网页开发流程