微信h5网页开发流程微信公众号微信公众账号分为订阅号、服务号、企业号，开发者针对不同账号类型开发订阅号：主要用于提供

微信公众号

微信公众账号分为订阅号、服务号、企业号，开发者针对不同账号类型开发

订阅号：主要用于提供信息和资讯，为媒体和个人提供一种新的信息传播方式。功能类似于报纸杂志，提供新闻信息和娱乐趣事。（深圳卫健委....）

服务号：为用户提供服务交互。功能类似12315，银行...

企业号(企业微信)：为企业或组织提供移动应用入口,供企业内部员工使用。

公众号.png

开发工具

工具.png

开发准备

添加开发者权限，没有权限微信sdk权限校验会失败
配置安全域名，域名不需要添加协议头，只有在指定域名下微信的sdk能力才能被唤起

js配置 (2).jpg

js配置.jpg

微信网页应用

传播能力很强，有非常好的传播效果，是企业商家做品牌推广、产品宣传的利器；微信H5在做页面推广时，只有一个URL连接，二维码以及流量占比很小的安装包就可以推广了。 comrate.heka4.tech/will/index.…

网页开发

网页授权

静默授权: 用户在网速慢的时候可以感知到进入回调页，即页面进行重定向。以 snsapi_base为scope发起的网页授权，用于获取用户openid。

主动授权: 用于获取用户信息，需要用户手动同意。以snsapi_userinfo为scope发起的网页授权。
授权流程: 引导用户进入授权页面同意授权，获取code;通过code换取网页授权access_token（与基础支持中的access_token不同）；如果需要，开发者可以刷新网页授权access_token，避免过期；通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）。

unionId机制：如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。即同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。
openId机制：用户在某一应用下的唯一标识，例如：用户在小程序和在公众号的openid是不一样的。
jsapi授权（sdk权限校验）: 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包，可使用微信支付，分享等开放功能。
jssdk的使用步骤：引入JS文件，支持网络链接；通过config接口注入权限验证配置，同一个url仅需调用一次，一般页面加载时调用；通过ready接口处理成功验证，接口调用都必须在config接口获得结果之后；调用接口。
jsapi接口调用说明：

success：接口调用成功时执行的回调函数。

fail：接口调用失败时执行的回调函数。

complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。

cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。

trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

经验总结

网址被微信拦截解决方案：采用域名批量解析生成N个二级域名，域名无限替换跳转，并且网页入口，落地页，转发到朋友圈的点域名都不相同；仿举报页面。（页面被封，封的是h5的落地页面）
字体调整：阻止ios和安卓调整字体大小时候的事件， ios通过添加css属性，安卓通过微信属性去阻止。

if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
  handleFontSize();
} else {
  document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
}
function handleFontSize () {
  // 设置网页字体为默认大小
  WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
  // 重写设置网页字体大小的事件
  WeixinJSBridge.on('menu:setfont', function () {
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
  });
}

软键盘弹出页面被压缩，强制让页面回归。

if (isIOS) {
//页面初次加载时就添加历史记录主动调出微信的底部栏,这样就解决了布局错乱问题
  window.history.pushState({}, "title", "#"); 
  document.body.addEventListener('focusin', () => {
    //软键盘弹出的事件处理
    isReset = false;
  });
  document.body.addEventListener('focusout', () => {
    //软键盘收起的事件处理
    isReset = true;
    setTimeout(() => {
      //当焦点在弹出层的输入框之间切换时先不归位
      if (isReset) {
        window.scroll(0, 0);//失焦后强制让页面归位
      }
    }, 300);
  })
}