公众号的入门

公众号的入门-LMLPHP

微信已经成为了我们生活中不可缺少的一个app，借助微信这个平台，微信公众号也成为了一种主流的线上线下的互动营销方式。公众号的开发也成为前端er不可或缺的技能之一。

公众号主要分为订阅号和服务号两种，前者以推送消息，为媒体和个人提供交流沟通为主，后者可以通过微信授权的形式，在微信内为用户提供服务，为企业提供业务服务和强大的用户管理能力。前者基本不涉及到前端，所以后者就是我们今天主要介绍的。

注册账号

这一步是最开始的一步，先要去申请一个服务号，这一步就不多说，可以直接到官网去申请一个账号，这中间会有一些审核的过程，这里就不具体说。在这个等待的过程中，如果你想马上动手开发，可以去微信公众号测试平台去申请一个测试号。当然你如果只想体验一下，也是可以去申请一下测试账号体验一下的。

配置环境

在开发之前，我们要先做好准备的工作，包括微信公众号的配置和本地开发环境的配置,因为不方便使用公司的账户，下面所有图片示例来自微信测试公众号。测试号均在一个页面内很容易就找到，所以就不多说，说一下正式的配置

公众号配置

本地环境配置

在测试公众号中IP和域名地址都可以授权成功，但是在正式的公众号中，想要实现本地测试，则需要外网能访问本地内网，即需要实现内网穿透，即我们可以将内网的服务器映射到外网给别人访问。也有很多的工具如

natapp
花生壳
utools本人用的就是utools，一个工具集，所以下文以utools 为例子点击下载安装，然后点击配置你本地的服务和外网就可以开始使用，这样就是直接只用外网地址访问。

微信公众号调试环境

回调授权需要微信的环境，所以我们无法在我们最喜爱的chrome中进行调试，无疑为我们的找出可恶的bug们增加了难度。所以我们需要一个微信开发的神器，微信开发这工具在做这一步的时候需要注意绑定为该公众号的开发者

开发配置

1.业务开发

写我们的业务代码。这一点和普通的页面没有太大的区别所以就不具体说

2.授权

微信网页授权的话，主要分为两种

除了使用snsapi_base能够静默授权以外，还有一些也能够做到静默授权

1、引导用户进入授权页面同意授权，获取code

2、通过code换取网页授权access_token（与基础支持中的access_token不同）

3、如果需要，开发者可以刷新网页授权access_token，避免过期

4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

前端需要做什么

1、引导用户进入授权页面同意授权，获取codehttps://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect这就是授权页面的链接，把appId，redirect_uri，scope 换成自己所需要的，scope 就是上文所说到的两种不同的授权。
!!!需要注意的是由于state 是因为使用了Hash路由，有#，而前端部分框架默认hash路由，会产生冲突，所以需要encode处理
如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。下图为scope等于snsapi_userinfo时的授权页面：

这时候只需要将我们的code 传给后台，后面的几步不就不需要前端做了。

JSSDK使用步骤

有的时候我们也需要用到SSDK，所以需要进行配置

绑定域名

也就是上文的JS接口安全域名设置，

引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）。

通过config接口注入权限验证配置

wx.config({  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表});复制代码

登录后复制

jsApiList 写入你需要的功能，可以看官方的JS接口列表,appId, timestamp ,nonceStr, signature则需要你的后端伙伴返回给你。

需要注意的是：

调取微信接口

然后在ready调取微信的接口就可以了。下面以检测js接口为例。

wx.ready(function(){  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  wx.checkJsApi({    jsApiList: ['chooseImage'], // 需要检测的JS接口列表
    success: function(res) {    // 以键值对的形式返回，可用的api值true，不可用为false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
  });
});复制代码

登录后复制

其实只要前端授权好了，后面的jssdk 将会很简单。

以上就是公众号的入门的详细内容，更多请关注Work网其它相关文章！