精华内容
下载资源
问答
  • 微信公众号h5页面制作微信公众号H5吸粉模板源码 。源码参考链接:www.pikao.cn
  • 微信公众号H5页面开发–微信JS-SDK引用 微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时需要用到: 微信JS-SDK。以地理位置...

    微信公众号H5页面开发–微信JS-SDK引用

    微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/

    公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时需要用到: 微信JS-SDK。以地理位置接口为例进行阐述。

    写在前面 非常重要!
    • 微信公众号接口必须以http://或https://开头,分别支持80端口和443端口。
    • 由于微信7.0版本升级了对https的安全限制,在微信7.0版本及以上版本使用http协议访问定位组件会导致定位失败。尤其是安卓,所以必须升级https。

    1. 域名绑定

    微信公众号请求网页授权之前,开发者需要先登记授权回调域名。
    注意:这里填写的是域名,且为全域名。授权后该域名下的其他页面都可以授权,例如:www.qq.com为回调域名,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。
    官方:微信公众平台 >> 微信网页开发 >> 微信网页授权

    2.js文件引入

    官方:
    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
    如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。
    备注:支持使用 AMD/CMD 标准模块加载方法加载

    3.通过config接口注入权限验证配置信息

    所有引用微信JS-SDK的页面都需要提供权限验证信息,否则无法调用。同样的URL只需要配置一次即可,URL发生变化时需要重新调用配置信息进行验证。

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

    这里涉及到两类配置信息的获取,一类是appId所属的公众号标识类配置信息,另一类是签名。JS接口列表可以根据需求在微信公众平台附录中获取。这里所写的是两个地理接口的相关js接口:
    jsApiList: ['openLocation','getLocation'] // 必填,需要使用的JS接口列表

    1. 公众号标识
      微信提供了微信公众帐号测试号,绑定个人微信号即可使用。申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
      进入后,第一行就提供了appID和appsecret。不同微信号绑定的微信公众测试号提供的appID和appsecret不同,如果多人参与开发,要注意区分。

    在这里插入图片描述

    接口配置信息主要用于消息接口的配置。公众号是以微信用户的一个联系人形式存在的,消息会话是公众号与用户交互的基础。在这里填写的URL主要用于接收用户信息,进行业务操作后返回信息,没有单独的页面链接。如果不是H5开发的话这里可以空着不写。

    在这里插入图片描述

    这里填写的域名就是上面1点提到的回调域名绑定授权,具体请看上面1. 域名绑定
    在这里插入图片描述

    1. 签名配置信息获取

    生成签名之前,我们要先获取两个参数:access_token 和 jsapi_ticket 。这两个参数的有效期为7200秒,所以一般是放在全局变量中。
    官方:微信公众平台 >> 开始开发 >> 获取access_token

    接口调用请求说明:

    https请求方式: GET
    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    在这里插入图片描述

     public static String getAccessToken(String appId, String secret, String accessTokenUrl) {
            HttpClient client = HttpClients.createDefault();	
    	// 获得Http客户端(可以理解为:你得先有一个浏览器;注意:实际上HttpClient与浏览器是不一样的)
            HttpGet get = new HttpGet(MessageFormat.format(accessTokenUrl,appId,secret));
            // 创建Get请求
            try {
                String accessToken = (String) CacheUtil.get("wxCache", "accessToken");
        	    //这里把accessToken放在全局变量中,通过CacheUtil缓存工具类判断accessToken是否失效
                if (StringUtils.isBlank(accessToken) || StringUtils.isEmpty(accessToken)) {
                    HttpResponse response = client.execute(get);
        		// 由客户端执行(发送)Get请求
                    HttpEntity entity = response.getEntity();
        		// 从响应模型中获取响应实体
                    String result = EntityUtils.toString(entity, "UTF-8");
                    Map<String, Object> accessTokenMap = JSON.parseObject(result);
                    accessToken = (String)accessTokenMap.get("access_token");
        		//将响应实体进行编码转换
                    CacheUtil.put("wxCache", "accessToken", accessToken);
        		//将accessToken存入缓存变量中
                }
                return accessToken;
            } catch (ClientProtocolException e) {
                log.error(e.getMessage());
            } catch (IOException e) {
                log.error(e.getMessage());
            }
            return  null;
        }
    
    

    用同样的get请求方法,获得jsapi_ticket。与access_token性质相似,有效期为7200秒,建议放在全局变量中,便于下次请求的时候判断是否仍在有效期内。

    public static String getTicket(String accessToken,String ticketUrl) {
        HttpClient client = HttpClients.createDefault();
        HttpGet get = new HttpGet(MessageFormat.format(ticketUrl,accessToken));
        try {
            String ticket = (String) CacheUtil.get("wxCache", "jsapi_ticket");
            if (StringUtils.isBlank(ticket) || StringUtils.isEmpty(ticket)) {
                HttpResponse response = client.execute(get);
                HttpEntity entity = response.getEntity();
                String result = EntityUtils.toString(entity, "UTF-8");
    	    Map<String, Object> jsApiTicketMap = JSON.parseObject(result);
                ticket = (String)jsApiTicketMap.get("ticket");
    
                CacheUtil.put("wxCache", "jsapi_ticket", ticket);
            }
            return ticket;
        } catch (ClientProtocolException e) {
            log.error(e.getMessage());
        } catch (IOException e) {
            log.error(e.getMessage());
        }
        return null;
    }
    

    获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
    签名生成规则如下:
    参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。

    //生成时间戳和随机字符串
            String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);
            String timestamp = String.valueOf(System.currentTimeMillis() / 1000);
    

    时间戳和随机字符串都是随机生成的,但是随机生成规则不同,注意区分。

     //获取url
            String url = pathUrl;
    

    url必须与用户进入页面的url相同,从前台传入,防止因为参数不同而引起的url不同,从而获取签名失败。
    对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

     //将参数排序并拼接字符串
         String sortString = WeChatCommonUtil.sort(url, timestamp, ticket, noncestr);
      
     /**
         * @Param [signature, timestamp, ticket, echostr]
         * @Return java.lang.String
         * @Description: 对所有待签名参数按照字段名的ASCII 码从小到大排序
         */
        public static String sort(String url, String timestamp, String ticket, String noncestr) {
            return "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + url;
        }
    

    对string1进行sha1签名,得到signature:
    在这里插入图片描述
    至此,得到权限验证配置所有信息。

    4.通过ready接口处理成功验证

    以下步骤官网都有参考:

    wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作.
    // 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
    // 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    });

    这里没有写到error接口,不够严谨。

    wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    });

    5.判断当前客户端版本是否支持指定JS接口

    wx.checkJsApi({
    jsApiList: [‘chooseImage’], // 需要检测的JS接口列表
    success: function(res) {
    // 以键值对的形式返回,可用的api值true,不可用为false
    // 如:{“checkResult”:{“chooseImage”:true},“errMsg”:“checkJsApi:ok”}
    }
    });

    需要检测的JS接口与config中填写的 jsApiList 基本一致。
    config信息验证后,才会调用ready方法,所以将checkJsApi放在ready方法中执行。

    6.参考官方文档调用所需接口

    使用微信内置地图查看位置接口:用于打开导航地图,获取目的地坐标定位。

    wx.openLocation({
    latitude: , // 纬度,浮点数,范围为90 ~ -90
    longitude: , // 经度,浮点数,范围为180 ~ -180。
    name: ’ ', // 位置名
    address: ’ ', // 地址详情说明
    scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
    infoUrl: ‘’ // 在查看位置界面底部显示的超链接,可点击跳转
    });

    获取地理位置接口:主要用于获取自身坐标定位。

    wx.getLocation({
    type: ‘wgs84’, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入’gcj02’
    success: function (res) {
    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
    var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
    var speed = res.speed; // 速度,以米/每秒计
    var accuracy = res.accuracy; // 位置精度
    }
    });

    注意:两个接口的经纬度都是浮点数类型,否则无法调用。

    总结:获取微信配置信息验证的步骤比较复杂,必须没有误差,同时要考虑配置信息具有时效性,重复获取以及放在全局变量中。调用接口的代码文档官方都有提供,可以参考。

    wx.ready(function () {
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作.
        // 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
        // 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
       
        wx.checkJsApi({
            jsApiList: ['checkJsApi', 'openLocation', 'getLocation'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
            success: function (res) {
                // 以键值对的形式返回,可用的api值true,不可用为false
                // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
        });
    
        wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
            dataType: "json",
            success: function (res) {
                var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                var speed = res.speed; // 速度,以米/每秒计
                var accuracy = res.accuracy; // 位置精度
            }
        });
    
        $(".nav-to").on ('click','a',function () {
            wx.openLocation({
                latitude: parseFloat($(".nav-to").attr("lat")), // 纬度,浮点数,范围为90 ~ -90
                longitude:parseFloat($(".nav-to").attr("lng")), // 经度,浮点数,范围为180 ~ -180。
                name: $(".nav-to").attr("name"), // 位置名
                address: '', // 地址详情说明
                scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
                infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
            });
        });
    });
    

    后续补充:
    事实证明我真是too young too native = =

    背景交代 与真正的公众号进行对接(以上都是用微信提供的测试公众号)时,除了以上步骤还有其他验证是在测试公众号上所不需要的,在此remark一下。

    7.设置IP白名单

    在这里插入图片描述
    根据要求把服务器的IP加入到IP白名单中,这样就不会被拦截了。

    8.设置JS接口安全域名

    在这里插入图片描述
    注意:确保可以访问!!!
    不管是根目录还是路径目录,都要确保通过所填写的域名都可以访问到这个文件。同时微信所访问的其他路径也需要在这个路径目录下。
    踩坑记录:如果程序设置了权限认证,则要记得放开认证,否则永远也无法访问到。

    展开全文
  • 其实就是微信公众号的历史文章页面,会有个关注功能 打开任意微信公众号的任意一篇文章,在PC浏览器打开,微信浏览器不可以 打开代码调试,搜索biz关键字 它后面跟着的那串码复制到以下链接: ...

    其实就是微信公众号的历史文章页面,会有个关注功能

    打开任意微信公众号的任意一篇文章,在PC浏览器打开,微信浏览器不可以

    打开代码调试,搜索biz关键字

    它后面跟着的那串码复制到以下链接:

    https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=找到的部分替换==#wechat_redirect

    复制到biz= 后面即可使用 

    展开全文
  • 微信公众号H5开发笔记

    万次阅读 2017-03-16 17:36:37
    利用H5开发微信公众号一、 首先授权配置 公众号设置 --》功能设置 设置业务域名! 这里的MP_verify_w7tdZrafqhkK9Mcj.txt文件,需要放到你项目的根目录下,例子:你的项目war包叫 test.war ,里面包含了src,WEB-...

    利用H5开发微信公众号

    一、 首先授权配置

     公众号设置 --》功能设置
     设置业务域名!
    

    自定义菜单
    这里的MP_verify_w7tdZrafqhkK9Mcj.txt文件,需要放到你项目的根目录下,例子:你的项目war包叫 test.war ,里面包含了src,WEB-INFO两个文件夹,则把MP_verify_w7tdZrafqhkK9Mcj.txt放到这两个文件夹的同级目录下;即现在test.war下有两个文件夹一个txt文件:src,WEB-INFO,MP_verify_w7tdZrafqhkK9Mcj.txt.
    后面就需要配置JS接口安全域名和网页授权域名了,最好和业务域名配置为一样就好了。
    二、开发中的配置
    在开发目录下的基本配置中进行配置。
    基本配置–》开发者ID–》AppID(应用ID),AppSecret(应用密钥);
    基本配置–》微信开放平台账号绑定
    这里需要绑定微信开放平台,若不绑定,在获取用户信息的时候就只能获取到用户的openId,不能获取到unionId.
    自定义菜单
    注意:定义菜单的时候有讲究了,
    如果你想在用户点这个菜单的时候就拿到用户的微信基本信息(性别,昵称,openId,unionId),这里直接可以配置成为授权链接,授权链接回调url直接写成你后台的一个接口地址,然后由这个接口来跳转到其它页面.
    例子:H5授权的链接:
    http://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxxx&redirect_uri=http://xxxx.com/test/login&response_type=code&scope=snsapi_userinfo&state=xxx&connect_redirect=1#wechat_redirect
    微信回调的url是一个接口地址:http://xxxx.com/test/login,不能回调网页,因为存在跨域错误。
    state的值是可以自定义的。
    这里的scope是用的snsapi_userinfo,这样可以直接在后台拿到用户信息。
    微信回调这个接口的时候会把code和state的值返回,接口就可以通过code去拿用户的信息了。
    若要用code去拿用户的信息,又会去做一堆事情,这些事情确实麻烦;推荐直接使用第三方的jar包,一步就拿到了。
    推荐的jar包:weixin-java-mp-2.5.0.jar,weixin-java-common-2.5.0.jar;
    maven地址

        <dependency>
          <groupId>com.github.binarywang</groupId>
          <artifactId>weixin-java-mp</artifactId>
          <version>2.5.0</version>
        </dependency>
     在做微信支付的时候有可能会用到xstream的包,有需要也拿去
     xstream-1.4.7.jar,xxp3_min-1.1.4.jar,xmlpull-1.1.3.1.jar
     maven地址 
    
        <dependency>
            <groupId>com.thoughtworks.xstream</groupId>
            <artifactId>xstream</artifactId>
            <version>1.4.7</version>
        </dependency>
        <dependency>
            <groupId>xpp3</groupId>
            <artifactId>xpp3</artifactId>
            <version>1.1.4c</version>
        </dependency>
        <dependency>
            <groupId>xmlpull</groupId>
            <artifactId>xmlpull</artifactId>
            <version>1.1.3.1</version>
        </dependency>

    这里说下weixin-java-mp-2.5.0.jar的使用方法,
    1.weixin-java-mp-2.5.0.jar里面最重要的类是
    WxMpInMemoryConfigStorage和WxMpService;
    WxMpInMemoryConfigStorage是用来存微信公众号的基本信息的,
    在Spring+SpringMvc中的使用方法例子:

    @Configuration
    @PropertySource(
            value={"classpath:wxProperties.properties"},
            ignoreResourceNotFound = true)
    //@DependsOn("propertyPlaceholderConfigurer")
    public class WeixinConfig {
        //直接获取资源文件中的配置的值
        @Value("${wxProperties.appid}")
        private String appid;//appId
    
        @Value("${wxProperties.appsecret}")
        private String appsecret;//Appsecret
    
        @Value("${wxProperties.token}")
        private String token;//Token
    
        @Value("${wxProperties.aeskey}")
        private String aesKey;//aeskey,有就填,没有就不填
    
        @Value("${wxProperties.partener_id}")
        private String partenerId;//商户号
    
        @Value("${wxProperties.partener_key}")
        private String partenerKey;//商户秘钥
    
        @Value("${wxProperties.notify_url}")
        private String notifyUrl;//支付后台通知接口地址
    
        @Bean
        public static PropertySourcesPlaceholderConfigurer propertySourcesPlaceholderConfigurer() {
           PropertySourcesPlaceholderConfigurer ppc = new PropertySourcesPlaceholderConfigurer();
           ppc.setIgnoreUnresolvablePlaceholders(true);
           return ppc;
        }
    
        @Bean
        public WxMpConfigStorage wxMpConfigStorage() {
            WxMpInMemoryConfigStorage configStorage = new WxMpInMemoryConfigStorage();
            configStorage.setAppId(this.appid);
            configStorage.setSecret(this.appsecret);
            configStorage.setToken(this.token);
            configStorage.setAesKey(this.aesKey);
            configStorage.setPartnerId(this.partenerId);
            configStorage.setPartnerKey(this.partenerKey);
            configStorage.setNotifyURL(this.notifyUrl);
            return configStorage;
        }
    
        @Bean
        public WxMpService wxMpService() {
            WxMpService wxMpService = new WxMpServiceImpl();
            wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
            return wxMpService;
        }
    
    }

    这里是配置微信公众号的基本信息,其它地方要使用就直接使用:

        @Autowired
        protected WxMpService wxMpService;

    2.获取微信用户基本信息示例代码:

    WxMpOAuth2AccessToken accessToken;
    WxMpUser wxMpUser = null;
    accessToken = this.wxMpService.oauth2getAccessToken(code);
    wxMpUser = this.wxMpService.getUserService().userInfo(accessToken.getOpenId(), null);
    //用户的基本信息就在wxMpUser中了,需要的就拿去用了。(注意:微信用户的性别:0:未知,1:男 2:女)
    

    3.H5若要使用微信封装好的js,则需要一些基本的配置信息,完全可以从后天台获取然后返回,示例代码:

     public StatusResult<Map<String, Object>> createJsapiSignature(String url) {
            Map<String, Object> result = new HashMap<String, Object>();
            try {
                WxJsapiSignature  wxJsapiSignature = wxMpService.createJsapiSignature(url);
                String getJsapiTicket = wxMpService.getJsapiTicket();
                result.put("wxJsapiSignature", wxJsapiSignature);
                return StatusResult.success(result, "");
            } catch (WxErrorException e) {
                return StatusResult.failed("未知错误出现", result);
            }
        }

    这里的url是H5用js代码获取的:

    var url = location.href.split('#')[0];

    4.公众号支付
    流程:
    页面发起–>后台下单后返回前端所需要的参数–>页面发起支付–>用户输入密码付款成功–>微信回调后台通知接口–>业务处理完成
    H5页面发起支付:
    微信公众号的页面支付首先要配置微信公众号:
    微信支付–>开发配置–>支付授权目录(正式、测试的目录必须要不一样,否则有你好看的,)
    注意:设置授权目录的时候必须要精确到需要支付页面的目录文件夹;
    例子:需要支付的H5页面 http://xxxxx.com/test/html/pay/pay.html
    则授权目录配置为 http://xxxxx.com/test/html/pay/
    配置完成后就可以发起下单了,
    后台下单代码示例:

    public StatusResult<Map<String, String>> getJSSDKPayInfo(HttpServletResponse response,
                                    HttpServletRequest request) {
            StatusResult<Map<String, String>> result = null;
            String spbill_create_ip = request.getRemoteAddr();//订单生成的机器 IP
            Map<String, String> map = new HashMap<String, String>();    
            WxMpConfigStorage wx= wxMpService.getWxMpConfigStorage();
            WxPayUnifiedOrderRequest prepayInfo = new WxPayUnifiedOrderRequest();
            //TODO change all request parameters to a VO class
            prepayInfo.setOpenid("openId");        
            prepayInfo.setOutTradeNo("out_trade_no");//设置订单商户号
            int total_fee = 0.01 * 100;
            total_fee = 1;
            prepayInfo.setTotalFee(Integer.valueOf(total_fee));//设置支付金额 单位为分 
            prepayInfo.setBody("xxxxx");//支付的内容简介
            prepayInfo.setTradeType("JSAPI");//渠道:公众号支付
            prepayInfo.setSpbillCreateIp(spbill_create_ip);//终端ip 
            //TODO(user) 填写通知回调地址
            prepayInfo.setNotifyURL(wx.getNotifyURL());
            try {
                两种下单方式,如果报错请先仔细检查微信配置的各种参数
                //WxPayUnifiedOrderResult  wxPayUnifiedOrderResult= wxMpService.getPayService().unifiedOrder(prepayInfo);
                Map<String, String> payInfo = this.wxMpService.getPayService().getPayInfo(prepayInfo);
                if(payInfo != null){
                    //业务代码
                }
                result = StatusResult.success(payInfo);
                return result;
            } catch (WxErrorException e) {
                log.error(e.getError().toString());
                map.put("error", e.getError().toString());
                return StatusResult.failed("微信下单失败",map);
            }
        }

    H5页面支付js代码(需要引入微信js哈):

    function callPay(){
                if (typeof WeixinJSBridge == "undefined"){
                   if( document.addEventListener ){
                       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                   }else if (document.attachEvent){
                       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
                       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                   }
                }else{
                   onBridgeReady();
                }       
            }
            function onBridgeReady(){
                   WeixinJSBridge.invoke(
                       'getBrandWCPayRequest', {
                           "appId":appId,     //公众号名称,由商户传入     
                           "timeStamp":timeStamp,         //时间戳,自1970年以来的秒数     
                           "nonceStr":nonceStr, //随机串     
                           "package":package,     
                           "signType":"MD5",         //微信签名方式:     
                           "paySign":paySign //微信签名 
                       },
                       function(res){     
                           if (res.err_msg == "get_brand_wcpay_request:ok") {    
                                alert("微信支付成功!");
                            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {    
                                alert("用户取消支付!");
                            } else {  
                                 alert("支付失败!");
                            }     // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。 
                       }
                   ); 
            }

    微信回调后台通知接口代码示例:

     public void getJSSDKCallbackData(HttpServletRequest request,
                HttpServletResponse response) {
            try {
                synchronized (this) {
                    Map<String, String> kvm = XMLUtil.parseRequestXmlToMap(request);
                    System.out.println("微信通知返回结果:\t"+kvm.toString());
                    WxPayOrderQueryResult  wxPayOrderQueryResult = wxMpService.getPayService().queryOrder("", kvm.get("out_trade_no"));//用订单号去查询订单状态,冗余代码可看可删
    //                if (this.wxMpService.getPayService().checkSign(kvm,  kvm.get("sign"))) {
                    System.out.println("查询订单返回结果:\t"+wxPayOrderQueryResult.getTradeState());
                    if ("SUCCESS".equals(wxPayOrderQueryResult.getTradeState())) {
                        if (kvm.get("result_code").equals("SUCCESS")) {
                            //TODO(user) 微信服务器通知此回调接口支付成功后,通知给业务系统做处理
                            log.info("out_trade_no: " + kvm.get("out_trade_no") + " pay SUCCESS!");
                            String out_trade_no = kvm.get("out_trade_no"); //支付订单号,接下来写业务代码                       
                                    }
                                }
                            } 
                            log.info("已经支付的订单详情\t"+aleadyPayOrder);
                            response.getWriter().write("<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[ok]]></return_msg></xml>");
                        } else {
                            log.error("out_trade_no: "
                                + kvm.get("out_trade_no") + " result_code is FAIL");
                            response.getWriter().write(
                                "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[result_code is FAIL]]></return_msg></xml>");
                        }
                    } else {
                        response.getWriter().write(
                            "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[check signature FAIL]]></return_msg></xml>");
                        log.error("out_trade_no: " + kvm.get("out_trade_no")
                            + " check signature FAIL");
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

    到此为止公众号支付完成。

    三、微信js中接口使用
    分享等很常见的,需要初始化微信的js,需要利用到上面写的createJsapiSignature后台接口。
    公众号的分享给朋友、朋友圈、QQ空间等方法在微信js中是可以直接调用的,分享的内容可以自己改变的,但是分享出去的按钮只能是微信右上角的分享,开发者不能自定义分享按钮。。。这一点让人非常不爽。
    H5页面js的代码示例:

    引入微信的js,然后初始化,然后微信会自动执行wx.ready中的方法

    wx.config({
        debug: false,   //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
        appId: appId,   //必填,公众号的唯一标识
        timestamp: timestamp,   // 必填,生成签名的时间戳 
        nonceStr: nonceStr,   //必填,生成签名的随机串 
        signature: signature,   // 必填,签名
        jsApiList: [//需要多少接口就写多少接口
            'checkJsApi',//判断当前客户端是否支持指定JS接口
            'onMenuShareAppMessage'//获取“分享给朋友”按钮点击状态及自定义分享内容接口
        ] //必填,需要使用的JS接口列表,所有JS接口列表 
    }); 
    wx.ready(function () {  
        var title = "xxxx";
        var desc = "xxxx";
        var imgUrl = "http://xxx.com/test/picture/xxxxx.png";
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: url, // 分享链接,h5网页的地址或者其它
            imgUrl: imgUrl,
            trigger: function(res) {
                alert('用户点击发送给朋友');
            },
            success: function(res) {
                alert('已分享');
            },
            cancel: function(res) {
                alert('已取消');
            },
            fail: function(res) {
                alert(JSON.stringify(res));
            }
        });
    }); 

    调用微信js中的方法流程:
    初始化config–>执行wx.ready
    开发者需要更多的功能就依照葫芦画瓢了,或者去微信js sdk文档去copy方法了。

    让人不愉快的事情又发生了,微信在4月29日开始限制自定义分享的链接啦,必须要是安全域名下的链接才可以分享。
    详情请看:
    JSSDK自定义分享接口的策略调整
    这样导致不能直接分享自己想要的链接了,但是解决方法还是有的:
    在你的域名下新建一个H5页面,在这个H5页面的js代码中做一个跳转就好啦(但是如果你分享出去的是支付页面,那多半是支付不了地)!

    四、处理微信直接可以分享页面问题
    有时候业务需要不能把当前的页面分享出去,但是微信自带的分享、复制链接按钮是可以在任何页面拿到当前页面的地址,如果别人点击就会进入。为了避免这个情况发生,有几种处理方法:
    1.后端足够强大,页面跳转完全由后端完成,在加入了权限验证的情况下就不怕这个的,后端会拦截请求验证,验证不过就跳指定的error页面就好。
    2.前端做验证
    jsp可以用session,判断session中的一个全局参数即可。
    H5可以使用cookie,在项目的开始页写入cookie,在js中写一个验证方法,每个页面都调用这个验证方法进行验证,虽然有冗余代码,但是这个是可以实现地,简单粗暴,速度快。
    设置cookie的方法:

    jquery(function() {
        var expiresDate= new Date();
        expiresDate.setTime(expiresDate.getTime() + (30 * 60 * 1000));//半小时
        jquery.cookie("openId",'${openId}', {
              path : '/',//cookie的作用域为根目录,任何页面都是有效的
              expires : expiresDate
             });//cookie里面保存openId
    });

    然后在js中写一个方法每个页面都调用判断。

    展开全文
  • 介绍:==uni-app== 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套...前一段时间因为个人了解到这个比较nb的多端开发框架,所以有兴趣自己去尝试了一下,从开始的搭建项目到微信公众号h5的登录-->...

    介绍:==uni-app== 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS、Android、H5、以及各种小程序(微信/阿里/百度/头条/QQ)等多个平台。

    1340563-20190807214114947-1245132168.png

    uni-app官网:传送门

    uni-app插件市场:传送门

    前一段时间因为个人了解到这个比较nb的多端开发框架,所以有兴趣自己去尝试了一下,从开始的搭建项目到微信公众号h5的登录-->微信支付都尝试了一遍。第一次尝试也踩了很多的坑。相信有很多小伙伴也遇到过这样的疑惑和问题。(大神略过),所以在这里写下开发中遇到的一些问题,记录一下。有需要的童鞋可以参考一下。如若有不对的地方,望指正。如果想立即看到效果和代码的童鞋可以去uni.app的插件市场看那个总榜第一的插件,那个是一个比较完整的示例。

    1340563-20190807215529025-884462316.png

    uni.app这个框架想看详细的教程可以去官网,还有论坛看一下。同时uni.app的插件市场里面有很多比较常用的组件,急需快速开发的同学可以直接去下载,然后就复制到项目里面就可以直接用了。最基本的一些介绍我就不再累述了。可以去看看这个博客里面介绍了项目目录和生命周期。如果使用过vue.js的人上手这个是非常快的。下面讲一下我遇到的问题。

    一、使用HBuilder X直接运行调试的时候打不开微信开发者工具。(因为我是做的微信公众号h5页面)

    1340563-20190807215814504-92256051.png

    当然是h5的话直接就用微信开发者工具的调试公众号就可以了。上面这个是运行小程序到微信开发者工具。错误的原因就是,微信开发者工具没有开起调试端口。如下设置就可以了:设置-->安全设置-->开起端口

    1340563-20190807220450255-1715369972.png

    待续————————

    转载于:https://www.cnblogs.com/justyouadmin/p/11318041.html

    展开全文
  • 在公众号建立之初,没有粉丝的情况下,都需要使用到微信活动,一个成功的微信公众号营销活动,会给公众号带来很大的流量,也会带来很多的粉丝,所以会制作微信营销活动是一个合格的公众号运营者的基本要求。...
  • 通过微信公众号跳转H5页面领取现金红包 项目目的 通过公司微信公众号领取现金奖励 面向对象 公司内部员工 产品逻辑: 1.在微信公众号底部栏加一项“领取奖励”,点击“领取奖励”进入到一个H5页面,页面内容是...
  • 通过微信H5进入微信公众号 最终主要代码 <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUzOTk0MDMzNQ==#wechat_redirect">跳转到我的公众号吧</a> 体验链接 ...
  • 有了微信公众号后,就要对微信公众号进行运营,微信运营的方式就是推广文章,好的微信文章是最好的吸粉手段,那微信公众号文章怎么使用代码排版?我们一起来看看下文的例子吧。欢迎大家来阅读。需求简单介绍下西窗烛 ...
  • 原标题:微信公众号自定义菜单全攻略前言2015年2月12日,微信公众平台全面开放自定义菜单功能,所有微信公众号都可以设置自定义菜单了。主要内容:一、开启自定义菜单二、编辑自定义菜单三、玩转自定义菜单一、开启...
  • 我们经常会见到在一些微信公众号上有h5的页面链接,点击阅读给人的体验很不错,但是很少有朋友知道微信公众号添加h5页面模板的操作方法,今天小编就给大家分享一下微信公众号添加h5页面模板的操作方法是什么?...
  • 通用的企业微信公众号页面模板,科技公司手机微信网站模板html下载。
  • 于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github创建一个vue实例var app = new Vue({el: '#app-menu',//挂载到对应的DOM元素data: {weixinTitle: 'Vue.js公众号菜单',...
  • 很多人通过微信公众号浏览文章时会发现,作者的文章中会嵌入小程序,粉丝直接点击这个小程序商品图片就能快速下单;...下面就跟大家详细讲解一下微信公众号小程序怎么做:首先,你需要选择一个小程序制作工具。不懂...
  • 利用H5开发微信公众号

    万次阅读 2018-05-04 10:22:38
    利用H5开发微信公众号一、 首先授权配置 公众号设置 --》功能设置 设置业务域名! 123 这里的MP_verify_w7tdZrafqhkK9Mcj.txt文件,需要放到你项目的根目录下,例子:你的项目war包叫 test.war ,里面包含了src,WEB...
  • H5小游戏源码,结合微信公众号进行人气聚集引流,内含【天天飞车·全新超级配件版本上线】最炫科技风 3D熊出没 99%的人都被逼疯了,制作新消息头像,一起逼死强迫症!DNF爱的守护者 跳圈圈 爸爸去兜风 奔跑吧男子 别...
  • 微信公众号---H5跳转小程序、拉起微信扫一扫、扫一扫绑定关系逻辑实现微信公众号使用 wx-open-launch-weapp 开放标签跳转小程 微信公众号使用 wx-open-launch-weapp 开放标签跳转小程 注意事项: 微信开放标签有最低...
  • 前言:因为从事的公司都没机会可以接触到小程序和公众号的制作,也就对自我学习小程序和公众号一直...1、什么是微信公众号 微信公众号是开发者或商家在微信公众平台上申请的应用账号,该帐号与QQ账号互通,通过公众...
  • 微信公众号平台 2.WPS的秀堂H5 3.在线二维码解码器 二、步骤 1.登录“微信公众平台”--> 左侧“设置”中的“公众号设置” --> 下载一个公众号的二维码。 2.百度“二维码解码器”--> 打开在线...
  • 随着移动互联网的爆发,微信也以迅雷不及掩耳之势站在了移动互联网发展的顶端,现在微信公众号的数量已然达到千万级别...比如微信公众号的图文排版编辑、图片的收集制作处理,比如公众号H5页面的制作,比如公众号的一些
  • uniapp开发微信公众号也就是H5,但是微信公众号在做用户管理(需要登录,获取用户信息等需要微信号的openId),作为一个入门小白,真是困难重重。翻看微信公众号官方文档,知道微信公众号对网页授权有两种方式:一种是...
  • 微信公众号中关闭页面 一、应用场景 在微信公众号中为什么要通过JS方法关闭页面? 答:防止用户通过连接地址进入公众号,杜绝安全隐患,以及登录失效的情况。 二、具体的实现思路 在封装好的请求文件中的...
  • 文章内容:快速在微信公众号中接入自己公司的视频宣传片 大家好,我来说说企业视频宣传片、产品宣传片如何接入微信公众号,让关注公众号的用户,轻松点击观看,提升企业形象,提升产品宣传效果。 本教程实现的...
  • 结合这一需求,本期分享的内容是如何开发交互式SVG,并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学会了可以接这方面的私活了,短平快地赚小钱钱。 先看下最终SVG交互效果: (体验公众号正文页...
  • 随着移动互联网的爆发,微信也以迅雷不及掩耳之势站在了移动互联网发展的顶端,现在微信公众号的数量已然达到千万级别,这是什么概念?也就是基本上全中国每十来个人就有一个微信公众号,这个数据时非常恐怖的。   ...
  • 随着新媒体运营工作的火热,随着新媒体平台的日益增加,市面上出现了很多质量参差不齐的第三方平台微信公众号编辑器。但很多不好用,且难用,效果也不好,为此帮大家节省更多时间,同时让新手尽快上手,我们为大家...
  • 微信公众号编辑器排名

    千次阅读 2019-04-30 17:26:59
    微信公众号编辑器排名 自从走上微信运营的不归路之后,每天都离不开和微信编辑器打交道,市面上这么多款,到底哪款最好用?最美观? 今天为大家整理了几款常见的微信编辑器的排名,希望能帮助到各位! 1、小蚂蚁微信...
  • 最近在测试微信公众号(微信银行),在网上查关于iOS公众号测试的文章很少,而且很麻烦。现在发现最新版的Appium1.9.1支持微信里的H5。  测试环境:Xcode9、iOS11.2、appium1.9.1、微信6.7.3 1、下载appium1.9.1后,...
  • 对于设置微信公众号关注后自动回复多条图文链接,第三方平台微号帮提供了粉丝关注定时推送功能实现,可以设置微信公众号关注后自动回复多条图文链接,及时帮助公众号激发关注粉丝兴趣,制作需求;可以设置关注延迟推...
  • 微信公众号开发--h5定位索引列表

    千次阅读 2019-11-06 11:07:12
    直接看效果吧 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191106110645968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODY0MzIw,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,895
精华内容 758
关键字:

微信公众号h5制作