前期准备

公众号、jssdk1.6.0版本、微信开发者工具（开发调试有些地方能用到）

首先一定安装jssdk1.6.0版本，不能安装低版本。然后初始化SDK，具体配置如下

wx.config({
  debug: false,
  appId: signData.AppId, // 必填，公众号的唯一标识
  timestamp: signData.Timestamp, // 必填，生成签名的时间戳
  nonceStr: signData.NonceStr, // 必填，生成签名的随机串
  signature: signData.Signature, // 必填，签名
  jsApiList: ['onMenuShareTimeline'],// 用到什么API填什么
  openTagList: ['wx-open-launch-weapp']
})
复制代码

初始化时需要注意几个地方

timestamp需要后端生成
nonceStr 这个也需要后端生成
signature 这个也需要后端生成
SDK只能初始化一次

其次需要注意想应用微信开放能力，必须在初始化SDK的公众号后台配置安全域名，其分为多种类型且数量又限，若数据达到上限可通过转发等方式实现，具体何时需要什么配置下面会提到。

微信授权

微信授权分为两类，主动授权和静默授权。区别大致如下

对用户来说

静默授权用户无感知，偷偷拿到数据
主动授权得用户点击授权按钮，才能拿到信息

对应用者来说

静默授权只能拿到openID
主动授权能拿到用户的一切信息，比如头像

应用场景

静默授权用在区分用户的需求中
主动授权使用场景需要展示用户信息

流程

用户同意授权，获取code

{
  appid: 'xxx', //必填，公众号的唯一标识
  redirect_uri: 'xxx', // 授权后重定向的回调链接地址
  response_type: 'code', //返回类型，写成code即可
  scope: 'snsapi_base', // snsapi_base代表静默授权 snsapi_userinfo代表主动授权
  state: 'xxx', // 重定向后需要带的参数，自己想带啥带啥
  #wechat_redirect   // 这玩意必须带
}
复制代码

配置需要注意以下这个点

redirect_uri配置的url必须域名写在公众号后台接口权限的网页授权域名中，不然凉凉
如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE

通过code换取网页授权access_token

该步骤会返回用户的openID，access_token，如果是静默授权的话，流程到此为止

拉取用户信息（用到第二步返回的数据，且scope需要为snsapi_userinfo）

到此为止，整个授权流程结束，但有几个事项需要注意

第二步和第三步由于用到一些敏感数据，必须放在服务端来完成（不要尝试用客户端搞，100%失败）
access_token可能遇到过期问题，可以用refresh_token刷新
建议封装一个整个流程的SDK，方便后续使用
整个流程在微信开发者工具开发，不然整不了

详细过程及说明可参考微信开发平台（传送门）

H5跳转小程序

流程大致如下

在公众号后台配置JS接口安全域名，然后在当前域名的服务器下安置一个文件（配置域名时会给你这个文件），这个流程必须搞，不然凉凉
使用微信提供的标签

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxx"  path="pages/login/login/main.html">
    <script type="text/wxtag-template">
        <style>.btn { display: flex;align-items: center; }</style>                              
        <div> <button class="wx-btn">跳转小程序</button> </div>          
    </script>
</wx-open-launch-weapp>
复制代码

需要注意的地方如下

username填写小程序的标识
path填写小程序的路径
在React中使用时用script标签，在Vue中使用template模板，且其中嵌入的内容样式必须写成内联形式，外部css与内部是相互隔离的
调试一定要用真机不管在浏览器还是微信开发者工具都跳转不了小程序切记切记切记
如果不展示标签的内容 80%的可能是初始化SDK有问题 20%问题是域名配置和文件没导入遇到问题从这两个点出发

基于React做了一个简单的组件封装

import React, { FC, useEffect } from 'react';
interface IProps {
  styles?: { [key: string]: string };
  children?: React.ReactNode;
  key?: string | number;
  username: string;
  path: string;
  onClick?: () => void; // 跳转能力由微信支持 但这块给你提供个钩子 可以做一些埋点等工作
}
/**
 * 
 * @param props children的样式必须写成内联式
 * @returns 
 */
export const WxOpenLaunchWeapp: FC<IProps> = (props) => {
  const { children, username, path, styles = {}, onClick } = props;
  const staticClick  = () => console.log('open miniprogram')；
  return (
    <div style={{ width: '100vw', height: '100vh', ...styles, }}>
      {children}
      <wx-open-launch-weapp
        id="launch-btn"
        username={username}
        path={path}
        style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }}
      >
        <script type="text/wxtag-template">
          <div style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', opacity: 0 }} onClick={onClick || staticClick} />
        </script>
      </wx-open-launch-weapp>
    </div>
  );
};
export default WxOpenLaunchWeapp;
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端