2017-01-16 15:47:38 u014783753 阅读数 2983
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27772 人正在学习 去看看 秦子恒



微信页面分享到朋友圈、分享朋友等等,默认的是有分享格式的,比如分享给朋友,默认的图标是页面的第一张图片,内容是该页面的url,这个显然有些场景是不满足的。对于挑剔的产品经理一定是会有自己的设计的,比如图片、内容等。

微信js-sdk提供了关于这部分的接口,现将过程说明如下。

文档路径,在登录公众号后路径如下:点击打开链接,在左侧“微信网页开发”--“微信JS-SDK说明文档”菜单栏中

点击“3.2 获取“分享给朋友”按钮点击状态及自定义分享内容接口”我们可以看到如下内容:

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
在以上代码片段中我们看到了我们可以定义“微信分享视图”中的这些项:标题、描述、连接、图片以及类型。为了举例,我们只说标题和描述。

看了以上代码段,问题来了,wx这个对象我们怎么定义以及怎么配置呢?
在改说明文档下的步骤一、步骤二和步骤三说明了我们怎么使用wx这个对象以及怎么配置,如下:

JSSDK使用步骤
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

以上代码段我们需要注意wx.config({})中定义的参数:

debug我们不再赘述

appId,就是公众号的Id

timestamp,暂时看就是一个时间戳文本

nonceStr,暂时看就是一个随机串,

jsApiList,需要使用的js接口列表,这个看上去也没有什么问题,应该是js接口列表中列出的接口的一个array

需要我们注意的是signature以及signature和timestamp和nonceStr的关系。根据以上代码段列出的备注,我们看附录一。

附录一描述如下

附录1-JS-SDK使用权限签名算法
jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
1.参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下JSON:
{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}
获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
通过阅读以上代码段说明的文本,我们可以看出来,要想生成signature这个参数,不许要生成ticket这个“票据”。

需要我们注意的是,生成这个“票据”又需要我们获得access_token,根据以上../15/54....这段说明我们看下怎么生成access_token这个参数。

说明如下:

获取access token
access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。

公众平台的API调用所需的access_token的使用及生成方式说明:

1、为了保密appsecrect,第三方需要一个access_token获取和刷新的中控服务器。而其他业务逻辑服务器所使用的access_token均来自于该中控服务器,不应该各自去刷新,否则会造成access_token覆盖而影响业务;
2、目前access_token的有效期通过返回的expire_in来传达,目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新新access_token。在刷新过程中,中控服务器对外输出的依然是老access_token,此时公众平台后台会保证在刷新短时间内,新老access_token都可用,这保证了第三方业务的平滑过渡;
3、access_token的有效时间可能会在未来有调整,所以中控服务器不仅需要内部定时主动刷新,还需要提供被动刷新access_token的接口,这样便于业务服务器在API调用获知access_token已超时的情况下,可以触发access_token的刷新流程。
如果第三方不使用中控服务器,而是选择各个业务逻辑点各自去刷新access_token,那么就可能会产生冲突,导致服务不稳定。

公众号可以使用AppID和AppSecret调用本接口来获取access_token。AppID和AppSecret可在微信公众平台官网-开发者中心页中获得(需要已经成为开发者,且帐号没有异常状态)。注意调用所有微信接口时均需使用https协议。

接口调用请求说明

http请求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
参数说明

参数	是否必须	说明
grant_type	是	获取access_token填写client_credential
appid	是	第三方用户唯一凭证
secret	是	第三方用户唯一凭证密钥,即appsecret
返回说明

正常情况下,微信会返回下述JSON数据包给公众号:

{"access_token":"ACCESS_TOKEN","expires_in":7200}
参数	说明
access_token	获取到的凭证
expires_in	凭证有效时间,单位:秒

错误时微信会返回错误码等信息,JSON数据包示例如下(该示例为AppID无效错误):

{"errcode":40013,"errmsg":"invalid appid"}
通过以上代码段列出的文本我们很快可以看到,只要传入appid和appsecret以及grant_type这三个参数给列出的url既可以获得返回的access_token这个参数,这里我们不再赘述。

需要注意的是我在处理这块儿的时候想当然的使用oauth认证的access_token来获取“票据”,最后证明返回一直是invalid,即参数错误是不行的。不行的方式如下:

Get:
https://api.weixin.qq.com/sns/oauth2/access_token
传入:
appid
secretid
以及code
其中code是微信回调方法传入的,这里我们不再赘述
事实证明,这种方式获得access_token不能获得“票据”

必须用以上的以上代码段描述的方式获得。谢谢。

根据文档描述,在获得代码段后我们就可以生成“签名了”,其中签名的算法如下:

签名算法
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
即signature=sha1(string1)。 示例:
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步骤2. 对string1进行sha1签名,得到signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
以上文本不难理解,认真读取后按照方法做就能获得相应的签名。

需要注意的是:

注意事项

1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2.签名用的url必须是调用JS接口页面的完整URL。

3.出于安全考虑,开发者必须在服务器端实现签名的逻辑。

以上的1步骤也就回答了signature和noncestr和timestamp的关系。

至此我们就能争取的配置wx.config,不出意外的情况下,调用“发送给朋友”的接口就能个性化配置分享的试图了。


这里附上后端生成signature的java实现

import java.util.UUID;
import java.util.Map;
import java.util.HashMap;
import java.util.Formatter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.io.UnsupportedEncodingException;  

class Sign {
    public static void main(String[] args) {
        String jsapi_ticket = "jsapi_ticket";

        // 注意 URL 一定要动态获取,不能 hardcode
        String url = "http://example.com";
        Map<String, String> ret = sign(jsapi_ticket, url);
        for (Map.Entry entry : ret.entrySet()) {
            System.out.println(entry.getKey() + ", " + entry.getValue());
        }
    };

    public static Map<String, String> sign(String jsapi_ticket, String url) {
        Map<String, String> ret = new HashMap<String, String>();
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";

        //注意这里参数名必须全部小写,且必须有序
        string1 = "jsapi_ticket=" + jsapi_ticket +
                  "&noncestr=" + nonce_str +
                  "×tamp=" + timestamp +
                  "&url=" + url;
        System.out.println(string1);

        try
        {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        }
        catch (NoSuchAlgorithmException e)
        {
            e.printStackTrace();
        }
        catch (UnsupportedEncodingException e)
        {
            e.printStackTrace();
        }

        ret.put("url", url);
        ret.put("jsapi_ticket", jsapi_ticket);
        ret.put("nonceStr", nonce_str);
        ret.put("timestamp", timestamp);
        ret.put("signature", signature);

        return ret;
    }

    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash)
        {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }

    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }

    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
}





2017-12-01 17:06:53 lining1041204250 阅读数 3764
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27772 人正在学习 去看看 秦子恒

这里写图片描述

问题:实现过微信分享的小伙伴们,应该都在微信的开发平台上修改过上图中的小图标和文字,但是当我们对小图标和文字进行修改后,发现有些设备分享出来的小图标和文字依旧没有改变,但是有些设备确实最新的小图标和文字。

解答:这个问题确实很难去找到答案,我甚至还给微信反馈过这个问题,没有得到回复。但是我们发现,在更改了微信开发平台的小图标之后,出现小图标未改变的设备都是之前使用过旧图标分享过的设备,这才确定到是缓存的问题。于是将显示的不是最新的小图标的设备清理了微信缓存之后,再次分享,显示出了最新的图标;但是有的设备则需要删除微信,重新下载安装微信才能正常显示最新的小图标。

2018-04-14 16:33:07 Youth_Boy 阅读数 2235
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27772 人正在学习 去看看 秦子恒

有时候安装微信web开发者工具后,会出现打不开的情况(如下图)


这时候我们在图标出点击右键,在属性、兼容性中,点击兼容模式(我的是win10的系统)选择win7

并选着以管理员身份运行此程序。点击应用,并确认更改。

然后打开就可以了

(第一次写博客,写的不好望各位指教,谢谢!!!)

2017-05-20 17:12:12 wangguoyang429883793 阅读数 42933
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27772 人正在学习 去看看 秦子恒

前期准备 :注册,填材料,验证等等:

https://mp.weixin.qq.com

1.浏览一遍简易教程,下载相应的开发工具

写一个小例子

点击左侧的 “编辑”-》点击右侧代码里的 app.json 修改为

{
  "pages":[
    "pages/fightings/home", 
    "pages/publish/home", 
    "pages/mine/home"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/fightings/home",
        "text": "挑战"
      },
      {
        "pagePath": "pages/publish/home",
        "text": "发布"
      },
      {
        "pagePath": "pages/mine/home",
        "text": "我"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "i挑战",
    "navigationBarTextStyle":"black"
  }
}

说明

pages就是我们有多少个页面
tabbar是页面底部的tab
window是页面的一些属性

这里写图片描述

这个样子太丑了 我们先来美化一下这个tab

{
  "pages":[
    "pages/home/home",    
    "pages/fightings/home", 
    "pages/mine/home"
  ],
  "tabBar": {
    "color":"#666666",
    "selectedColor":"#f10b2e",

    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "大厅",
        "iconPath": "./res/icon_tab_home.png",
        "selectedIconPath": "./res/icon_tab_home_hl.png"
        },
        {
        "pagePath": "pages/fightings/home",
        "text": "挑战",
        "iconPath":"./res/icon_tab_fighting.png",
        "selectedIconPath":"./res/icon_tab_fighting_hl.png"
      },

      {
        "pagePath": "pages/mine/home",
        "text": "我",
        "iconPath": "./res/icon_tab_me.png",
        "selectedIconPath": "./res/icon_tab_me_hl.png"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "i挑战",
    "navigationBarTextStyle":"black"
  }
}

说明

字段都比较简单就不详细说了 其中 “iconPath”: “./res/icon_tab_me.png”是图片的路径

自己在项目里创建一个res文件夹,然后放入需要的图片

tab 好看一点了吧

这里写图片描述

今天先到这里吧。。。

2019-08-11 12:21:02 m0_38051388 阅读数 174
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27772 人正在学习 去看看 秦子恒

记录一款基于微信云开发的微信小程序。

主页面样式,有两个功能,一个是前往大厅,一个是上传图片(相当于上传朋友圈九宫格那种,限制九张。不过没有设计文字功能)

接下来的是大厅的样式,分为点赞、删除、分享、还有一个加号的功能。

点赞这里这个项目只做一个简单的处理,点赞之后把点赞的文字修改为已赞,然后人数作一个更新。(后面会有一个比较全面的小程序,多了把点赞这个图标替换成其他图标,更加直观那样)。

删除功能只能删除自己所发的,分享的话是调用微信小程序的分享功能。

加号是跳转到广场首页。

 

 

下一节开始讲解环境的配置,还有开始讲解代码 。

没有更多推荐了,返回首页