公众号网页开发_微信网页公众号开发 未绑定网页开发者 - CSDN
精华内容
参与话题
  • 微信公众平台开发网页开发

    万次阅读 2018-07-11 14:28:43
    以前写过一篇《微信公众平台开发的一点收获》,这一篇说说微信公众平台网页开发的知识。微信公众平台应该是国内最大的开放平台,对于技术开发人员来说,不管有没有自己的公众号,应该也要有一定的了解,其实只要有一...

    以前写过一篇《微信公众平台开发的一点收获》,这一篇说说微信公众平台网页开发的知识。微信公众平台应该是国内最大的开放平台,对于技术开发人员来说,不管有没有自己的公众号,应该也要有一定的了解,其实只要有一个域名和虚拟主机,就基本上能够尝试着去开发。

    回顾上篇文章的知识点

    (1)上篇文章的内容可以理解为公众号消息开发,这里的消息可以是公众号文章或者是消息会话,用户为了有权使用公众号的功能,必须关注对应的公众号。因为用户关注公众号了,所以开发者可以间接认为有权利获取用户的基本信息,都直接能够拿到用户的 OpenID(在相关接口中)。

    (2)access_token 概念,公众号开发者为了有权调用公众号 API,必须先经过微信的授权,这个授权码就是 access_token(开发者 access_token),这个 access_token 是和开发者绑定的(而非同用户绑定)。

    什么是公众号网页开发呢?

    公众号消息开发是用户必须加入这个公众号,然后开发者利用公众号平台提供的一些 API (功能)和用户来交互。除了公众号文章这里没有网页的概念(文章虽然是网页,但开发者没有任何能力控制)。

    现在考虑这样一种场景,一个开发者要提供一个电商服务,有他自己的业务逻辑(比如页面),通过公众号消息开发是提供不了这样的服务,为了解决这个问题,开发者可以做一个网页,然后在公众号菜单中引入这个网页,这样用户点击菜单打开网页就能使用电商服务。

    还有一种场景,某个服务商提供了一个调查问卷服务(以网页的形式),然后你的微信好友通过消息发送给你,你打开链接就能使用这个服务了(不一定是在公众号中打开)。

    再举个场景,微信有很多第三方服务,比如大众点评,相当于也是打开一个网页。

    为了有效的提供这样场景的服务,微信公众号官方提供了网页开发这个概念,主要包括三部分:

    (1)在微信中打开服务,这时候微信首先相当于一个浏览器,有浏览器就有 Javascript 操作,为了安全性微信这个“浏览器”肯定要做一些限制;为了提供微信的一些本地功能(比如调用相机),微信也提供了一些 JS-SDK,这样开发者就能调用这个 SDK 提供微信的一些功能。

    (2)既然是开放平台,所有的服务都嵌入在微信中,为了让开发者提供的服务更具有一致性(就是外观),微信也提供了 UI 库,有了 UI 库,开发者开发的网页就能更好的适配,实际上这个功能有点鸡肋,很少有用这个库的,都是为了让自己的网页更个性化。

    (3)假如是在微信中嵌入一个网站的网页,由于这个网页和公众号没有任何关系,那么这个网页怎么知道是那个微信用户(OpenID)打开了这个网页呢?公众号通过授权的方式让开发者能够获取用户的信息,这个授权就是标准的 oAuth 协议,通俗的说就是开发者假如需要获取用户信息,首先要取得用户的同意,这样公众号才能让你获取信息。仔细想下为什么消息公众号开发能够直接获取用户信息?

    概括的说,网页开发包括,网页授权、JS-SDK、UI 库。

    网页授权

    由于自己申请的公众号没有微信认证(就是没交钱),所以网页授权这个服务用不了,不过个人使用过微博开放平台的授权,原理差不多,所以简单的描述下。

    (1)要使用网页授权,在后台配置下回调域名就可以,不同于微博开放平台,不用提供回调 URL ,只要域名就可以。

    (2)scope,有两种授权方式,第一种就是假如一个微信用户已经加入公众号(相当于半授权了),那么这种授权方式叫静默授权(snsapi_base),就是说用户看不到官方的授权页面,会直接进入开发者提供的网页中,这种授权方式只能拿到 OpenID(通过其他接口再获取信息)。
    另外一种授权方式可以称之为完整授权(snsapi_userinfo),就是手用户能看到完整的授权页面,经过用户确认后再进入开发者提供的网页中,这种授权方式能够直接拿到用户信息(省去一次接口调用)。

    (3)授权流程

    假如开发者明白 oAuth 协议,这个流程就非常简单了。

    • 首先开发者通过 authorize 接口(传递回调地址和 appid )获取授权地址。
    • 用户打开授权地址并授权后,微信会回调开发者的回调地址,并返回 code 值。
    • 开发者传递 code 调用 access_token 接口获取用户 access_token 和 OpenID 值,这个值的有效期一般是 7200 秒。
    • 为了避免用户频繁授权,开发者可以用即将过期的 access_token 刷新 access_token(refresh_token接口)。
    • 通过传递用户 access_token 和 OpenID 调用 userinfo 接口获取用户信息。

    这里的用户 access_token 和开发者 access_token 不是一回事,分别代表用户授权和公众号授权。

    PHP-SDK 中通过简单的几个函数调用就能实现授权。

    JS-SDK

    在 PC 网页开发中,通过 Javascript 能够调用浏览器的功能;同理微信其实就是一个浏览器,为了调用浏览器(微信)的功能,微信提供了一个 JS-SDK 包,这样就能调用相应的功能了。

    使用很简单,首先引入对应的 js 文件即可。然后在动态网页中配置 config 信息即可

    <script>
    wx.config({
        debug: true,
        appId: 'wx3505a38e6f83b187',
        timestamp: 1490782160,
        nonceStr: 'ogZFeZaYLMhCQiez',
        signature: 'c1bd73bc505840a4db142873306bf10f243444ff',
        jsApiList: [
        ]
    });
    wx.ready(function () {
        document.querySelector('#checkJsApi').onclick = function () {
        wx.checkJsApi({
            jsApiList: [
            'getNetworkType',
            'previewImage'
            ],
            success: function (res) {
            //alert(JSON.stringify(res));
            }
        });
    };
    </script>
    

    使用 JS-SDK 最关键的包括二部分:

    (1)jsapi_ticket ,使用 jsapi_ticket 也是需要微信公众号平台授权的,否则任何人都能使用了。
    jsapi_ticket 是调用相应接口生成的(传递 access_token 参数),这个 access_token 是消息公众号开发者的 access_token(不是用户的),思考下为啥 JS-SDK 不直接使用 access_token 而要使用 jsapi_ticket ?

    (2)获取到 jsapi_ticket 后,会对时间戳、随机数、jsapi_ticket、当前 URL 签名后生成 wx.config,假如微信验证签名通过后,代表能够使用对应的 JS-SDK。

    PHP-SDK 中通过简单的几个函数调用就能生成签名,非常方便。

    UI 库

    UI 库其实非常简单,就理解为一个小型的 bootstrap 库就可以了。在微信上也很少看到开发者用这个库的。思考了下原因,在 PC 网页和公众号上为了保持样式一致性,开发者会用统一的 UI 库,但是微信没有 PC 网页。

    最后说下,没有经过微信认证的开发权限越来越小了,举个例子,假如没有经过微信认证,微信公众号菜单上无法配置网页的 URL。



    作者:虞大胆
    链接:https://www.jianshu.com/p/cca418ab3a8d
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
    展开全文
  • 微信公众号网页开发——获取用户信息 自查用途,学习请至:官方文档 1.获取access_token 公众号可以使用AppID和AppSecret调用本接口来获取access_token。AppID和AppSecret可在“微信公众平台-开发-基本配置”页...

    用于自查,学习请至:官方文档


    1.获取access_token

    公众号可以使用AppIDAppSecret调用本接口来获取access_token。AppID和AppSecret可在“微信公众平台-开发-基本配置”页中获得(需要已经成为开发者,且帐号没有异常状态)。调用接口时,请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中,否则将无法调用成功。

    正常情况下会返回:{“access_token”:”ACCESS_TOKEN”,”expires_in”:7200}

    2.微信网页授权

    • 关于网页授权回调域名的说明

    如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。

    在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 -网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加http:// 等协议头。

    • 关于网页授权的两种scope的区别说明

    1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)

    2.以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。

    3.openID来获取用户基本信息。这个接口,包括其他微信接口,都是需要该用户(即openid)关注了公众号后,才能调用成功的。

    • 关于特殊场景下的静默授权

    1.上面已经提到,对于以snsapi_base为scope的网页授权,就静默授权的,用户无感知;

    2.对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知。

    3.网页授权流程:

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

    在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面,若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限:

    https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 

    尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问

    参考链接(请在微信客户端中打开此链接体验):

    scope为snsapi_base
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
    
    scope为snsapi_userinfo
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

    参数说明:

    参数 是否必须 说明
    ‘appid’ 公众号的唯一标识
    ‘redirect_uri’ 授权后重定向的回调链接地址,请使用 urlEncode 对链接进行处理
    ‘response_type’ 返回类型,请填写code
    ‘scope’ 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
    ‘state’ 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
    ‘#wechat_redirect’ 无论直接打开还是做页面302重定向时候,必须带此参数

    如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE
    code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

    返回码 说明
    10003 redirect_uri域名与后台配置不一致
    10004 此公众号被封禁
    10005 此公众号并没有这些scope的权限
    10006 必须关注此测试号
    10009 操作太频繁了,请稍后重试
    10010 scope不能为空
    10011 redirect_uri不能为空
    10012 appid不能为空
    10013 state不能为空
    10015 公众号未授权第三方平台,请检查授权状态
    10016 不支持微信开放平台的Appid,请使用公众号Appid

    2. 通过code换取网页授权access_token(与基础支持中的access_token不同)

    首先请注意,这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token(该access_token用于调用其他接口)不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止

    尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。

    获取code后,请求以下链接获取access_token:

    https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

    参数说明:

    参数 是否必须 说明
    appid 公众号的唯一标识
    secret 公众号的appsecret
    code 填写第一步获取的code参数
    grant_type 填写为authorization_code

    返回说明

    正确时返回的JSON数据包如下:

    { 
        "access_token":"ACCESS_TOKEN",
        "expires_in":7200,
        "refresh_token":"REFRESH_TOKEN",
        "openid":"OPENID",
        "scope":"SCOPE" 
    }
    参数 描述
    access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
    expires_in access_token接口调用凭证超时时间,单位(秒)
    refresh_token 用户刷新access_token
    openid 用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID
    scope 用户授权的作用域,使用逗号(,)分隔

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

    由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。

    获取第二步的refresh_token后,请求以下链接获取access_token:

    https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
    参数 是否必须 说明
    appid 公众号的唯一标识
    grant_type 填写为refresh_token
    refresh_token 填写通过access_token获取到的refresh_token参数

    正确时返回的JSON数据包如下:

    { 
        "access_token":"ACCESS_TOKEN",
        "expires_in":7200,
        "refresh_token":"REFRESH_TOKEN",
        "openid":"OPENID",
        "scope":"SCOPE" 
    }
    参数 描述
    access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
    expires_in access_token接口调用凭证超时时间,单位(秒)
    refresh_token 用户刷新access_token
    openid 用户唯一标识
    scope 用户授权的作用域,使用逗号(,)分隔

    4.拉取用户信息(需scope为 snsapi_userinfo)

    如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。
    http:GET(请使用https协议):

     https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
    参数 描述
    access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
    openid 用户的唯一标识
    lang 返回国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语

    正确时返回的JSON数据包如下:

    {    
        "openid":" OPENID",
        " nickname": NICKNAME,
        "sex":"1",
        "province":"PROVINCE"
        "city":"CITY",
        "country":"COUNTRY",
        "headimgurl":    "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
        "privilege":[ "PRIVILEGE1" "PRIVILEGE2"],
        "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
    }
    参数 描述
    openid 用户的唯一标识
    nickname 用户昵称
    sex 用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
    province 用户个人资料填写的省份
    city 普通用户个人资料填写的城市
    country 国家,如中国为CN
    headimgurl 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。
    privilege 用户特权信息,json 数组,如微信沃卡用户为(chinaunicom)
    unionid 只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。
    展开全文
  • 微信公众号网页开发jweixin.js的使用

    千次阅读 2020-03-25 09:11:59
    const timestamp = parseInt(new Date().getTime() / 1000) const str = `jsapi_ticket=HoagFKDcsGMVCIY2vOjf9txntvvkykCDEPmzHimZjoxSzowS5ie_l1iIfXdvXDe1CE92az7m0eZtkwiK8lFOSA&noncestr=Wm3WZ...

     

    首先申请测试账号

     

    获取以下信息

    使用你的appId和appsecret获取token

    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxa4cec9585a0c6&secret=4e3a25657f654f522a8201841138a

     

             使用获取的token获取ticket

    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=31_u4X7j6KLjuoO0AC6Kh60xwVDuqVN76ukk61OGRr-uvrze5fD7phVZwsTU7RlcZJgWIVQPTRrMNzTcbQTUohxX56fi_UNB_IsH-fNexzjEuygmakrSFDwbirA-jWU2mJQ6mFMaPE-U6wU-9piJYGbAGARGO&type=jsapi

     

    {"errcode":0,"errmsg":"ok","ticket":"HoagFKDcsGMVCIY2vOjf9txntvvkykCDEPmzHimZjozChuER3EQLuCCIPS2CZdam_aVJW6uQmL8Q-zO8sQ5Ynw","expires_in":7200}

    生成signature

                const timestamp = parseInt(new Date().getTime() / 1000)            const str = `jsapi_ticket=HoagFKDcsGMVCIY2vOjf9txntvvkykCDEPmzHimZjoxSzowS5ie_l1iIfXdvXDe1CE92az7m0eZtkwiK8lFOSA&noncestr=Wm3WZYTPz0wzccnC&timestamp=${timestamp}&url=http://192.168.3.116:8080/h5/pages/index/share`            const signature = this.sha1(str)            console.log(signature)            wx.config({                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。                appId: 'wxa4cec9585a0c00d6', // 必填,公众号的唯一标识                timestamp: timestamp, // 必填,生成签名的时间戳                nonceStr: 'Wm3WZYTPz0wzccnC', // 必填,生成签名的随机串                signature: signature, // 必填,签名//                jsApiList: ['hideAllNonBaseMenuItem', 'hideMenuItems']            })

    开始调用微信js的方法​

                            wx.ready(() => {                console.log(wx)                this.test()                // wx.showMenuItems({                //     menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline']                // })                // // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。                // // wx.showMenuItems({                // //     menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline']                // // })                // wx.onMenuShareAppMessage = function (e) {                //     console.log(e)                //     console.log(21213)                // }                // wx.onMenuShareTimeline({ // 朋友圈                //     title: '', // 分享标题                //     desc: '', // 分享描述                //     link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致                //     imgUrl: '', // 分享图标                //     success: function () {                //         Router.replace({name: 'index'})                //     },                //     error: function () {                //         console.log(213123)                //     }                // })                wx.hideAllNonBaseMenuItem()            })            wx.error(function (res) {                console.log(res)            })
    展开全文
  • 微信公众号网页开发

    2019-07-30 08:17:24
    1 JS 微信网页是指利用微信提供的功能,方便地让我们完成交互...这里是指公众号开发自己的网页开发时,引入微信提供的JS-SDK文件。因为是前端用的,其实也就是一个js文件,官方还提供一份在线引入的js(http://res...

    1 JS

    微信网页是指利用微信提供的功能,方便地让我们完成交互的过程。
    比如调用微信的扫一扫,录音,上传文件等等...
    而这些,都是需要微信方确认公众号方-用户之间的关系之后后允许使用的。

    1.1 自己开发的网页(JS-SDK)

    官方文档
    这里是指公众号开发自己的网页。开发时,引入微信提供的JS-SDK文件。因为是前端用的,其实也就是一个js文件,官方还提供一份在线引入的js(http://res.wx.qq.com/open/js/jweixin-1.2.0.js)。这个同时也支持amd/cmd/es6模块引入方案。

    1.1.1 前端配置

    在使用js-sdk提供的wx.getLocation等方法时,需要在当前页面使用wx.config配置一下。配置完成后,使用的方法需要在wx.ready中使用

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

    再详细写一下wx.config

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

    里面的参数基本都是由后台返回来的,后台是计算signature的过程
    比如有一个/getconfiginfo的接口
    请求参数为
    |参数 |说明|
    |:--: |:--:|
    |url |当前网页的url(不带hash)|
    返回结果
    |参数 |说明|
    |:--: |:--:|
    |appId |公众号的appid,可以在公众号里的开发-基本配置里查看|
    |timestamp |计算签名需要的时间戳,由于是后台计算的,也是后台生成的,由后台返回一下即可|
    |nonceStr |和上面的时间戳作用一样|
    |signature |经过一系列的计算,得到的签名|

    最后jsApiList是你想在网页中想要调用什么方法,比如

    {
        jsApiList: ['getLocation']
    }

    1.1.2 后端配置

    后台计算签名的方法,网上可以找到很多,其大体的思路如下:
    前台可以不看这部分,后台看了也没啥用-_-!!

    1. 获取access_token,方法,调用https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你公众号的appid&secret=你公众号的secret接口,就可以获取access_token,说明:secret是隐藏的,如果忘了需要重置;
    2. 获取jsapi_ticket,方法,调用https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步获取的access_token&type=jsapi,说明:access_tokenjsapi_ticket这两个参数都是有2个小时(7200秒)的有效期,官方建议,后台做好两个小时的缓存,快到时间时,再去获取一下这两个参数;
    3. 通过以下几个参数,通过一定的算法获取签名(signature)
      • jsapi_ticket:由上步获取
      • timestamp:时间戳,由于前台也需要,需要通过接口返回给前端
      • nonceStr:随机字符串,作用和上面的时间戳一样
      • url:当前网页的url,由前台通过接口得到
        签名生成规则如下:参与签名的字段包括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

      注意事项

    4. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
    5. 签名用的url必须是调用JS接口页面的完整URL。
    6. 出于安全考虑,开发者必须在服务器端实现签名的逻辑。

    后台算出签名后,需要通过接口将这几个参数返回给前端

    • appid
    • 签名
    • 时间戳
    • 随机字符串

    前端拿到这些参数后,通过wx.config就可以愉快地开发了。

    1.2使用第三方的网页

    如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。

    调用第三方网页的套路
    直接跳转到请求权限的页面(这个页面的路径带着一个redirect_uri的参数,这个地址就是用户确认权限后,跳转的页面,就是我们处理业务的页面了)

    然后,这个路径中还有更多的参数,先看一下列表
    |参数|是否必须|说明|
    |--|--|--|
    |appid|是|公众号唯一标识|
    |redirect_uri|是|授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理|
    |response_type|是|返回类型,请填写code,固定值,直接写code就可以了|
    |scope|是|应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )|
    |state|否|重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节|
    |#wechat_redirect|是|无论直接打开还是做页面302重定向时候,必须带此参数|

    看一下其他参数,主要就是scope,只需要openid是base就可以了,如果还需要其他信息就得使用userinfo的scope了。

    提示:使用这个必须公众号是认证的
    Alt text
    否则就会出现以下的页面
    Alt text

    2 CSS

    微信提供了套符合微信原生的UI框架

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。在微信网页或小程序中使用 WeUI,有如下优势:

    1.同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站或小程序

    2.便捷获取快速使用,降低开发和设计成本

    3.微信设计团队精心打造,清晰明确,简洁大方

    该样式库目前包含表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等内容,已经在GitHub上开源。访问这里
    或微信扫码即可预览。
    Alt text

    转载于:https://www.cnblogs.com/changzhenan/p/8384816.html

    展开全文
  • 第一步: 网页授权回调域名 网页服务内容 这个网页回调域名是非常关键的,后面会讲解这个回调的域名的使用,回调字面意思就是会跳转的。 第二步: 使用微信官方的api进行code获取 这个就是获取code进行页面跳转,...
  • 第一部分、为公众号菜单嵌入网页 一、关键参考文档  微信JS-SDK说明文档 。 二、编辑模式嵌入网页公众号平台下,自定义菜单,添加菜单,并选择菜单内容跳转到指定页面地址即可(需认证后方可添加页面地址,个人...
  • 微信公众号开发(三)前端界面

    万次阅读 热门讨论 2020-06-26 18:20:09
    由于该公众号主要的用途是用于公司售后服务,经沟通确定相关需求. 第一: 了解相关的UI框架,最终选定了Jquery-WeUI框架. 第二: 制作简单案例,在移动端进行测试,要达到移动端的自适应. 目前完成三个界面如下: ...
  • 如现在实现这样的功能,公众号下面有一个按钮,'点我绑定'。绑定页面显示当前用户的openId和微信昵称,并检测当前微信用户有没有绑定,没有则显示绑定form,如果已经绑定则提示已经绑定的userId,同时展示解绑按钮。...
  • 公众号网页发开教程

    千次阅读 2017-05-19 17:31:49
    公众网页开发教程
  • 微信公众h5页面如何在web端调试

    千次阅读 2018-03-06 16:51:24
    由于微信公众页面在手机上不好调试。所以可以选择使用微信开发者工具登录微信公众号-》开发者工具-》绑定微信账号-》下载工具-》安装-》微信扫码-》工具内输入公众号网页地址...
  • 我的理解是:原本公众号开发时只能给一家公司开发,因为配置的网页授权域名只有一个,所以基本上一个公众号只能做一件事情。举个列子,我公司有一个项目,涉及到食品,旅游,购物,我想分别外包给不同的公司来做,...
  • 教程导航:微信开放平台 公众号第三方平台开发 教程一 平台介绍微信开放平台 公众号第三方平台开发 教程二 创建公众号第三方平台微信开放平台 公众号第三方平台开发 教程三 一键登录授权给第三方平台微信开放平台 ...
  • 1、先引入入口.html文件 参见官网https://uniapp.dcloud.io/collocation/manifest?id=h5-template 2、配置manifest.json 3、运行 4、在微信开发者工具中进行公众号网页调试 ...
  • 最近着手开发了微信网页扫码登录和公众号授权登录收获颇丰,两者的开发很类似。以下是我个人摸索过程中发现的两者的异同: 两者都可以通过微信客户端扫码授权的方式,让第三方页面获得微信用户的一些基本信息(昵称...
  • 最近一个项目需要用到微信公众号网页授权登录,在研究这个公众号的时候遇到各种困难,现将自己的一些心得总结一下。  我想进行微信公众号开发遇到的第一个困难就是微信公众号必须输入一个外网可以访问的域名,在...
  • 微信公众号开发之绑定微信开发者

    万次阅读 2018-09-03 21:24:39
    第一步:登录微信公众号,绑定网页开发者   在登录后的界面中,我们向下拉在左侧会看到有一个“开发者工具”点击。 这时在开发者工具中,会看到有好几个工具,其中有一个“web开发者工具”,我们点击进入。 ...
  • 使用公众号测试账号进行公众号开发时,访问页面一直会报“非微信官方网页 转换为手机预览模式”信息。尤其是使用分享功能时,打开测试号分享的页面,不仅会出现该提示,跳转到link地址时,还会出现页面变形的问题。...
  • 公众号与公众平台 1. 微信账号类型 个人号 公众号 订阅号 服务号 企业号 2. 公众号 微信公众号主要面向名人、政府、媒体、企业等机构推出的合作推广业务。在这里可以通过微信渠道将品牌推广给上亿的微信...
  • 一、登陆微信公众服务号,配置网页授权域名 (1)获取AppID以及AppSecret ...开发 ---》接口权限 ---》网页服务 ---》网页授权 ---》网页授权获取用户基本信息 ---》修改,如下图 点击修改,设置JS接口安
  • 在微信开发中,一个页面如何跳转到公众号首页? 相当于在页面实现一个退出登陆的效果,跳转到刚进入公众号首页的样子
1 2 3 4 5 ... 20
收藏数 29,697
精华内容 11,878
关键字:

公众号网页开发