01

微信H5

介绍

介绍一个.NET Mvc下开发微信H5的案例，这个是2年前找了一个封装比较简洁友好的一个Demo,开发环境是Razor+mvc+盛派接口，当然前提是你首先要熟悉微信开放平台以及微信支付平台以及它的相关设置

02

微信H5

Code认证机制

例如微信获取openid的机制，微信的所有认证是严格按照oauth2.0的机制来进行的，获取openid是采用code的方式，简单来讲就是通过appid来获取code,在通过code，密钥来获取用户信息。

03

微信H5

客户端认证机制

例如调用微信接口的机制，是通过appid和密钥换取token，在进行接口的调用，这在oauth2.0里是客户端模式。

04

微信H5

H5主要接口

1：获取用户信息：openid,昵称，图片等信息

2：前端jssdk的使用签名，赋予前端js调用微信接口的能力，

例如分析，位置，上传图片等功能

3：支付能力：发送红包，企业支付等功能

4：消息模板

05

微信H5

H5母版页

说明：制作一个模板_JWeixinConfig.cshtml

@{
    var appid = Config.SenparcWeixinSetting.WeixinAppId; ;
    var secret = Config.SenparcWeixinSetting.WeixinAppSecret;
    var jssdkInfo = JSSDKHelper.GetJsSdkUiPackage(appid, secret, Request.Url.AbsoluteUri);
    var friend = "感谢分享";
    var isshare =true;
}

06

微信H5

盛派接口

说明：引入Senparc.Weixin包，在Global.asax.cs下

#region 配置微信环境-注册公共服务组件配置信息，注册日志(按需，建议)
                //设置全局 Debug 状态
                var isGLobalDebug = true;
                //全局设置参数，将被储存到 Senparc.CO2NET.Config.SenparcSetting
                var senparcSetting = SenparcSetting.BuildFromWebConfig(isGLobalDebug);
                //CO2NET 全局注册，必须！！
                IRegisterService register = RegisterService.Start(senparcSetting).UseSenparcGlobal();
                register.RegisterTraceLog(ConfigWeixinTraceLog);//配置TraceLog
                #endregion
                #region 配置微信环境- 注册配置文件，注册功能：模块公众号(按需)注册微信支付(按需)
                //设置微信 Debug 状态
                var isWeixinDebug = true;
                //全局设置参数，将被储存到 Senparc.Weixin.Config.SenparcWeixinSetting
                var senparcWeixinSetting = SenparcWeixinSetting.BuildFromWebConfig(isWeixinDebug);
                //微信全局注册，必须！！
                register.UseSenparcWeixin(senparcWeixinSetting, senparcSetting)
                //注册公众号(可注册多个)
                .RegisterMpAccount(senparcWeixinSetting, "【xxxx】公众号")
                //注册最新微信支付版本(V3)(可注册多个)
                .RegisterTenpayV3(senparcWeixinSetting, "【xxxx】公众号");//记录到同一个 SenparcWeixinSettingItem 对象中
                #endregion

07

微信H5

配置信息

说明：在web.config下配置信息

08

微信H5

H5页面

说明：在需要微信环境的H5页面加入母版页

  @Html.Partial("_JWeixinConfig", new WechatModel { ShareContent= "快来参加吧!" })

09

微信H5

授权认证

说明：在control上加入以上代码：主要是为了获取code授权码

[CustomSenparcOAuth(null, "/OAuth/Callback")]
    public class H5SCodeController : H5SCodeBaseController

10

微信H5

获取用户信息

说明：通过以上的url地址会跳转至Oauth/Callback下进行获取授权

/// 
  /// 公众号oauth认证获取用户信息根据code
  /// 
    public class OAuthController : Controller
    {
        //下面换成账号对应的信息，也可以放入web.config等地方方便配置和更换
        private string appId = Config.SenparcWeixinSetting.WeixinAppId;
        private string secret = Config.SenparcWeixinSetting.WeixinAppSecret;
        /// 
        /// 通过code获取用户信息并跳回返回URL地址
        /// 
        /// 
        /// 
        /// 
        /// 
        public ActionResult Callback(string code, string state, string returnUrl)
        {
            LogTxt.WriteLog("获取认证：" + returnUrl, 8);
            if (string.IsNullOrEmpty(code))
            {
                throw new TpoBaseException("用户拒绝了授权");
            }
            OAuthAccessTokenResult oauthResult = null;
            try
            {
                oauthResult = OAuthApi.GetAccessToken(appId, secret, code);
            }
            catch (ErrorJsonResultException ex)
            {
                throw new TpoBaseException("用户拒绝了授权");
            }
            var oauthAccessToken = oauthResult.access_token;
            var openId = oauthResult.openid;
            OAuthUserInfo userInfo = OAuthApi.GetUserInfo(oauthAccessToken, openId);
            //Session认证进行登录
            H5SMLoginUserInfo userinfo = new H5SMLoginUserInfo();
            userinfo.OpenId = userInfo.openid;
            userinfo.Code = code;
            userinfo.Nickname = userInfo.nickname;
            userinfo.HeadImgurl = userInfo.headimgurl;
            UserContext.SetSessionH5SMUserInfo(userinfo);
            //更多的业务逻辑
            //cookie认证进行登录
            //System.Web.Security.FormsAuthentication.SetAuthCookie(openId, false);
            return Redirect(returnUrl);
        }
    }

11

微信H5

其他接口

其他接口直接调用盛派封装好的接口即可

12

微信H5

微信公众号设置

1:设置白名单：通过开发者ID及密码调用获取access_token接口时，需要设置访问来源IP为白名单

2：设置业务域名:在微信浏览器中点击文本框，会弹出下面的提示，很不爽，通过配置业务域名可以将该提示去掉

3：设置JS安全域名:分享到朋友圈(js-sdk)时用上，此接口要求将当前的界面url加密后，才可以分享到朋友圈。

4:网页授权域名：用于获取用户针对于公众号的唯一标识openid

13

微信H5

支付平台设置

支付平台

以上便是整个微信开发H5的工作原理及相关配置，如需详细了解或者了解源码可关注公众号留言。

联系我

联系我

一、GitHub:https://github.com/luoyesong102

二、微信号：larchjiang

三、公众号:NET技术交流圈

四、抖音号：jgl105

end