微信前端页面开发指南

维护人:戴荔春 (6016)

说明

现阶段,在公司微信后台平台完成之前,微信网页开发采用本文的开发模式。

目录

• 前言
  • 前置要求
  • 本文适用范围
  • 微信网页开发流程
• 微信网页开发步骤
  • 页面获取网页授权信息
  • 页面使用JSSDK
  • 设置微信入口页面
    • 微信菜单配置页面地址
    • 地址制作成二维码扫一扫
  • 效果测试
    • 关注微信公众号查看效果
    • 二维码扫一扫查看效果
    • 注意
• 公司后台提供的API
  • 网页授权信息相关
    • 订阅号,服务号
    • 企业号
  • JSSDK相关
    • 获取JSSDK配置参数
  • API测试地址
    • 公网测试地址
    • 二维码

前言

前置要求

本文是基于介绍微信网页开发指南,在这之前需要对微信有所了解

• 了解微信项目前期准备

  如没有,请移步 微信项目前期准备

• 了解微信开发人员必看

  如没有,请移步 微信开发必看

本文适用范围

本文主要介绍基于公司后台的微信前端页面的开发过程,适用范围如下

• 适用于订阅号,服务号,企业号的前端微信页面开发
• 微信功能范围包括: 微信用户信息授权;微信JSSDK
• 不适用于微信后台功能开发

微信网页开发流程

介绍下基于公司后台开发微信页面的流程

请注意,如果项目中的微信页面无需用到微信API功能,可以跳过对应的步骤

微信网页开发步骤

页面获取网页授权信息

参考 网页授权用户信息流程和原理

请注意,以上流程中默认用获取openId的授权,如有其他需求,请改为对应的API。企业号只能获取userId和openId。订阅,服务号可参考 怎么判断使用哪个API?

页面使用JSSDK

参考 微信JSSDK使用流程和原理

设置微信入口页面

这一步一般是微信网页开发完毕并部署后,需要用到设置入口页面。微信入口一般有两种方式,微信公众号菜单和二维码扫一扫,如下

微信菜单配置页面地址

• 菜单配置

  登录对应公众平台 ->自定义菜单 ->创建新的菜单栏目 ->将对应页面的地址放到地址栏目

• 菜单地址获取

  具体的菜单地址获取: 将部署地址反馈给开发人员,开发人员根据对应生成对应的部署菜单地址

• 注意

  微信订阅号必须认证后才能配置菜单地址。

地址制作成二维码扫一扫

有时候有点需求是将需要用户微信扫一扫进入,所以这时候就需要将页面入口地址制作成二维码,如下

• 获取页面的完整地址

  如: http:***/***.html

• 使用在线的二维码制作器

  如 草料二维码生成

• 将地址生成二维码,并记录下二维码

  之后这个二维码即是对应的入口地址,用户微信扫一扫即可看到效果

效果测试

开发完毕,项目也正确部署后,需要测试功能是否正确。一般会用微信(关注公众号或扫一扫二维码)进行完整的流程测试

关注微信公众号查看效果

用自己的微信关注对应公众号,然后查看菜单以及点击后的效果是一种比较常用的方式,如下

• 关注微信公众号

  一般是通过微信公众号的二维码进行关注

• 查看公众号内的菜单

  这一步用来测试菜单配置是否正确(比如更新菜单后是否刷新)

• 点击菜单,查看页面效果

  这一步分别点开每一个菜单,查看最终的页面效果

二维码扫一扫查看效果

这一步一般是指扫一扫对应页面的二维码地址,进行单个页面测试

• 微信扫一扫页面二维码

  一般每一个页面地址都会单独生成一个二维码,所以每一次测试一个页面

• 查看页面效果

  这一步就跟微信菜单点击后一样,需要走位整个流程,以确保效果无误

注意

• 公众号菜单更新后如何立即查看

  微信公众号菜单更新后,一般是会在12小时内更新所有用户的菜单。这时候为了测试方便,可以取消关注,然后重新关注即可刷新菜单

• 微信页面的缓存问题

  微信的浏览器中开启了缓存的,所以当css和js更新后,会存在无法获取最新js,css情况。原因是因为缓存问题。需要一套解决方案。参考 缓存问题与解决方案

公司后台提供的API

目前微信网页开发基于公司统一后台,API如下(如果后台部署到对应项目服务器中,请更换具体地址)

网页授权信息相关

以下api是关于用户授权相关的

订阅号,服务号

• 网页授权用户信息(包含nickName等)

  地址: http://app.epoint.com.cn/Epoint_Weichat_Platform/redirectToEpointWeichatOauthSysInfo.do?identify=IDENTIFY&targetUrl=TARGETURL

  其中IDENTIFY为对应需要授权的公众号在后台的唯一标识(不填默认为新点服务号),TARGETURL为授权信息完毕后的跳转页面,会将所有信息以Get方式拼接的url后面(其中nickName先经过b64-utf8编码,然后再经过urlencode)

  注意:授权接口必须要是服务号,订阅号没有权限授权信息。订阅号开发使用公司服务号授权即可

  接口具体流程如下

• 网页授权换取code(只有code)

  地址: http://app.epoint.com.cn/Epoint_Weichat_Platform/redirectToEpointWeichatOauthCode.do?identify=IDENTIFY&targetUrl=TARGETURL

  其中IDENTIFY为对应需要授权的公众号在后台的唯一标识(不填默认为新点服务号),TARGETURL为授权信息完毕后的跳转页面,会将所有信息以Get方式拼接的url后面(只有code和identify),目标页面接收到code和identify后自行换取信息

  默认的授权scope是snsapi_userinfo,如果只需要授权openId信息,请另外传入参数"scope=snsapi_base"

  接口具体流程如下

• 通过code获取用户信息接口

  地址: http://app.epoint.com.cn/Epoint_Weichat_Platform/checkEpointWeichatOauthSysInfo.do?identify=IDENTIFY&targetUrl=TARGETURL

  使用示例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx693bb3ef365542dd&redirect_uri=http%3A%2F%2Fapp.epoint.com.cn%2FEpoint_Weichat_Platform%2FcheckEpointWeichatOauthSysInfo.do%3FtargetUrl%3DTARGET_Url%26identify%3DIDENTIFY&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

  虽然说这个接口和第一个接口的功能是一样的,但是相比起来第一个接口多经过了一次跳转, 所以如果是微信菜单上的链接,可以使用这个接口(少一次跳转),如果是二维码,可以使用第一个接口(地址更短)

  这个接口和第一个接口的区别是,进入这个页面的前提是已经拿到了微信code

  接口使用示例是一个微信授权页面并回调处理的示例,不能直接使用

  接口具体流程如下

• 网页授权openId(只有openId)

  地址: http://app.epoint.com.cn/Epoint_Weichat_Platform/redirectToEpointWeichatOauthOpenId.do?identify=IDENTIFY&targetUrl=TARGETURL

  这个接口的使用场景是当页面只需要用到openId时,并且只授权openId不会有提示,用户不会察觉到

  接口具体流程和授权用户信息一致

• 通过code获取openId

  地址: http://app.epoint.com.cn/Epoint_Weichat_Platform/checkEpointWeichatOauthOpenId.do?identify=IDENTIFY&targetUrl=TARGETURL

  使用示例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx693bb3ef365542dd&redirect_uri=http%3A%2F%2Fapp.epoint.com.cn%2FEpoint_Weichat_Platform%2FcheckEpointWeichatOauthOpenId.do%3FtargetUrl%3DTARGET_Url%26identify%3DIDENTIFY&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

  虽然说这个接口和第四个接口的功能是一样的,但是相比起来第一个接口多经过了一次跳转, 所以如果是微信菜单上的链接,可以使用这个接口(少一次跳转),如果是二维码,可以使用第一个接口(地址更短)

  这个接口和第四个接口的区别是,进入这个页面的前提是已经拿到了微信code

  接口使用示例是一个微信授权页面并回调处理的示例,不能直接使用

  接口具体流程和code换取用户基本信息一致

• 注意
  • 怎么判断使用哪个API?

    平时项目开发时,如果项目中只要求获取微信的唯一id,那么使用 网页授权openId(只有openId)即可

    如果项目中同时还要求获取用户昵称等信息,那么则使用 网页授权用户信息(包含nickName等)

    特殊情况下如有要求统计微信用户的,可以用 通过code获取openId或通过code获取用户信息接口,然后对应业务后台自行获取信息(防止造假)

企业号

企业号目前的网页授权只能拿到用户的openId与userId(已关注时)或仅openId(未关注时),然后可以通过userId获取用户其它信息

• 授权openId或userId

  地址: http://app.epoint.com.cn/Epoint_Weichat_Platform/redirectToEpointWeichatOauthEnterprise.do?identify=IDENTIFY&targetUrl=TARGETURL

  用户关注时,获取的是UserId,OpenId和DeviceId(设备号,安装微信时产生),未关注时,获取的是OpenId和DeviceId

  请注意,授权回调域名必须在企业应用设置项中的'可信域名',可以带端口

  更多参考: 企业号OAUTH认证接口

• 通过code换取openId或userId

  地址: http://app.epoint.com.cn/Epoint_Weichat_Platform/redirectToEpointWeichatOauthEnterprise.do?identify=IDENTIFY&targetUrl=TARGETURL

  使用示例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx693bb3ef365542dd&redirect_uri=http%3A%2F%2Fapp.epoint.com.cn%2FEpoint_Weichat_Platform%2FcheckEpointWeichatOauthOpenId.do%3FtargetUrl%3DTARGET_Url%26identify%3DIDENTIFY&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

  这个接口和前一个接口的区别是,进入这个页面的前提是已经拿到了微信code

  更多参考: 企业号OAUTH认证接口

JSSDK相关

目前JSSDK配置参数获取接口 企业号和订阅号,服务号是同一个接口(内部逻辑有所差异,但是外部接口合并使用)

获取JSSDK配置参数

微信页面使用JSSDK需要进行配置,配置参数由后台生成,(通过token,页面地址等参数生成)

• 获取JSSDK 配置所需参数

  地址: http://app.epoint.com.cn/Epoint_Weichat_Platform/getJssdkConfigParams.do?identify=IDENTIFY&pageUrl=PAGEURL

  其中IDENTIFY为对应需要授权的公众号在后台的唯一标识(不填默认为新点服务号),PAGEURL为需要使用JSSDK的页面的网络地址(需要公众号后台配置JSSDK地址,参数的生成算法是与地址相关联的)

  注意:PAGEURL必须在对应的公众号后台进行设置,需要设置为JSSDK安全回调域名,否则无法成功使用JSSDK

  接口具体流程如下

API测试地址

针对公司后台得API,提供了对应的测试示例(请用微信扫一扫打开页面)

公网测试地址

地址: http://app.epoint.com.cn/doc.web.crossPlatformGroup/html/weichatDevelop/test/doc_weichatDevelop_test_index.html

二维码