• 功能点:页面跳转 本文基于微信小程序公测版,IDE:微信开发者工具 0.11.122100

    功能点:页面跳转
    本文基于微信小程序公测版,IDE:微信开发者工具 0.11.122100

    这里记录一下小程序中页面跳转的方式。

    从跳转的方式(或说成打开新页面的方式)来说大致可分为:请求转发请求重定向TAB页跳转(有过web经验的话,应该很清楚两种方式的区别),部分出自官方文档。

    wx.navigateTo(OBJECT)

    保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

    这里写图片描述

    注意点:小程序中要求页面的层级最多只能有五层,因为这种方式保留当前页面,也就是说以这种方式跳转页面,最多只能打开5个页面。


    wx.redirectTo(OBJECT)

    关闭当前页面,跳转到应用内的某个页面。

    这里写图片描述


    wx.switchTab(OBJECT)

    跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

    这里写图片描述


    wx.navigateBack(OBJECT)

    关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

    这里写图片描述

    注意点:
    1.这里需要强调一下小程序中以堆栈形式记录页面。每一个以wx.navigateTo(OBJECT) 方式跳转的页面都会被压入堆栈,但是以wx.redirectTo(OBJECT) 打开的页面则不会。借用一下官方的例子,很清晰明了。

    // 此处是A页面
    wx.navigateTo({
      url: 'B?id=1'
    })
    
    // 此处是B页面
    wx.redirectTo({
      url: 'C?id=1'
    })
    
    // 在C页面内 navigateBack,将返回A页面
    wx.navigateBack()

    **2.**wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

    3. 跳转的url是页面的路径(非Tab页面),如需传递参数,要放在路径之后,以 分隔,参数键与参数值用=相连,不同参数用&分隔


    从写的位置来说大致可分为两种,一种是在页面wxml文件中以标签的形式,另一种是代码的形式(这种上面已经列举出来了,此处不再赘述)。

    组件navigator

    页面链接。

    这里写图片描述

    通过open-type 可以指定跳转的方式是请求转发,请求重定向还是TAB页跳转。(效果同上面js代码的效果,此处不再赘述)


    这里记录一个笔者遇到的坑,坑了我一晚上。。。也是很无语。虽然不是页面跳转的问题,但是也有一定联系,姑且记在这里。

    本来我的项目首页有两个tab,需要在其中一个列表页中点击一个item进入详情,查看地图。然而,不管我怎么尝试,文档撸了N遍,都还是没解决。

    先贴出异常

    这里写图片描述

    上面报错的aboutUs是首页的其中另一个tab,只是一个展示页,没有操作,所以虽然报错了,然而我并没有管。问题出在我跳转pages/map(详情的地图)的时候,提示我如上最后一行的错误。

    Page[pages/map/map] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.

    按照笔者以前android和后台的经验,一直把问题定位到map页的本身。撸了N久都没解决。后来心血来潮把aboutUs的异常解决了,发现问题奇迹般的解决了。

    问题出在,aboutUs页,因为只是一个静态页,并没有操作,所以aboutUs.js是空的,问题就出在这。

    在小程序中,即时不需要写js的代码,那js文件中也必须要加上Page({})

    展开全文
  • 个人github:https://github.com/qiilee 欢迎star概述原文链接:http://blog.csdn.net/u011506468/article/details/47305261 微信参考:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html ...

    个人github:https://github.com/qiilee  欢迎star

    概述

    原文链接:http://blog.csdn.net/u011506468/article/details/47305261 
    微信参考:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html 
    思路:此篇主要介绍如何在点击微信的菜单后获得用户的信息并跳转至该网页。 
    网页授权分为四步: 
    1. 引导用户进入授权页面同意授权,获取code 
    2. 通过code换取网页授权access_token(与基础支持中的access_token不同) 
    3. 如果需要,开发者可以刷新网页授权access_token,避免过期 
    4. 通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)

    配置授权回调域名

    如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。所以第一步是配置域名,在微信公众号的公众号设置中可以配置,域名是需要备案的。

    获取code

    接口请求为:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 
    redirect_uri为请求后重定向地址,也就是你要跳转至的网页地址,state为重定向后的参数。 
    scope的区别说明,有2种授权方式,根据自己的需要进行处理:

    • scope为snsapi_base,静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)
    • scope为snsapi_userinfo,这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息

    获取网页授权的access_token

    获取code后,请求以下链接获取access_token,code为上一步得到的code: 
    https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

    代码说明

    新用户进来的时候是没有cookie的,而且type=2,首先是要授权,授权的代码在下面。这个时候可以给其设置一个cookie,设置存活时间为10小时。授权完成后,还是会重定向进入这个方法来处理,只是type变化,这个时候进入测试或者正式环境,根据参数menuType进行判断是哪个目录被点击,然后进入相对应的页面。若cookie不为空,则直接跳转测试或者正式环境相对应的页面。


    /**
         * 
         * @param type 0-测试, 1-正式, 2-跳转获取CODE,3:认证过的测试号
         * @param menuType
         * @param request
         * @param wechatUserId
         * @param response
         * @return
         */
        @RequestMapping("/view")
        public ModelAndView view(Integer type,Integer menuType, Integer wechatUserId, String redirect,HttpServletRequest request, HttpServletResponse response) 
        {
            Cookie cookie = CookieUtil.getCookieByName(request, "wechatUserId");
            log.info("type:" + type + ",menuType:" + menuType + ",wechatUserId:" + wechatUserId + ",redirect:" + redirect);
    
            String url  = null;
            if(cookie == null)
            {
                log.info("Cookie已过期.....");
                if(type == 0)
                {
                    CookieUtil.addCookie(response, "wechatUserId", Randoms.getInt(1, 53)+"", 60 * 10);       /* 测试环境 */
                    url = "view?format=json&type=0&menuType=" + menuType + "&redirect=" + redirect;
                    log.info("url:" + url);
                    return new ModelAndView(new RedirectView(url));
                }
                else if(type == 1)
                {
                    CookieUtil.addCookie(response, "wechatUserId", wechatUserId+"", (60 * 60 * 10)); 
                    /* 生产环境 */
                    url = "view?format=json&type=1&menuType=" + menuType  + "&redirect=" + redirect;
                    log.info("url:" + url);
                    return new ModelAndView(new RedirectView(url));
                }
                else if(type == 2)
                {
                    String wechatRedirece = UrlUtil.encode(wechatConfig.getHOST() + "wechat/user/auth?format=json&type=1&menuType=" + menuType + "&redirect=" + redirect);
                    /**
                     * 授权的链接 
                     * 注意redirect_uri为重定向地址,/auth在下面的代码中
                     * public String getAUTHORIZE_URL() {
                     * return "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+getAPPID() +"&redirect_uri=";
        }
                     */ 
                    url = wechatConfig.getAUTHORIZE_URL() + wechatRedirece + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
                    log.info("url:" + url);
                    return new ModelAndView(new RedirectView(url));
                }
                else
                {
                    return new ModelAndView(new RedirectView(url));
                }
            }
            else
            {
                log.info("Cookie未过期.....");
                if(type == 0)
                {
                    switch (menuType) 
                    {
                        case 0:
                            url = AESCryptoSecurity.decrypt(redirect, wechatConfig.getAPPID());
                            break;
                        case 1:
                            //社区
                            url = wechatConfig.getHOST_FRONT() + "page/topicList.html";
                            break;
                        case 2:
                            //活动
                            url = wechatConfig.getHOST_FRONT() + "page/activityList.html";
                            break;
                    }
                }
                else
                {
                        switch (menuType) 
                        {
                            case 0:
                                url = AESCryptoSecurity.decrypt(redirect, wechatConfig.getAPPID());
                                break;
                            case 1:
                                //社区
                                url = wechatConfig.getHOST_FRONT() + "page/topicList.html";
                                break;
                            case 2:
                                //活动
                                url = wechatConfig.getHOST_FRONT() + "page/activityList.html";
                                break;
                        }
                }
                return new ModelAndView(new RedirectView(url));
            }
        }

    下面的代码为获取code,获取access_token,获取用户信息等,认证完跳转至对应的页面

    @RequestMapping("/auth")
        public ModelAndView auth(String code, Integer type, Integer menuType, String redirect) throws Exception
        {
            log.info("code:" + code + ",type:" + type + ",menuType:" + menuType);
            /* 向微信发请求获取access_token */
            Map<String, Object> map = wechatUserService.getPageAccessToken(code);
            /* 向微信发请求,用access_token获取用户信息并保存 */
            WechatUser pageWechatUser = wechatUserService.getPageWechatUser(map.get("access_token").toString(), map.get("openid").toString());
            String url  = null;
            if(type == 1)
            {
                /* 权限认证完成后,将type改为1或者0,重定向进入上面的方法进行页面跳转 */
                url = wechatConfig.getHOST() + "wechat/menu/view?&type=1&menuType=" + menuType + "&wechatUserId=" + pageWechatUser.getWechatId() + "&redirect=" + redirect;
                log.info("url:" + url);
            }
            return new ModelAndView(new RedirectView(url));
        }




    展开全文
  • 1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢? 2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 3.wxml 1. index.wxml (按钮页面) &lt;view class='wrapper'&...

    个人类型和海外类型的小程序不支持 web-view 标签  也就是说个人申请的小程序,就别想跳转了!!!!

    更新时间:2020-07-07

    重磅消息 小程序逐渐会支持分享链接到朋友圈 点击下方链接前往查看演示地址

    分享朋友圈文章地址:https://blog.csdn.net/qq_32113629/article/details/107177622

     

    【 -------

     

    差个话题:

    在公众号中查看演示地址:

    演示地址  : https://blog.csdn.net/qq_32113629/article/details/106711377   

    用Node、Express + Vue、 Element-ui Blog、Mysql 实现前后端分离博客管理系统  ,详情咨询下方技术群

    ---------】

     

    1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?

    2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 

    3.wxml

       1. index.wxml   (按钮页面)

    <view class='wrapper'>
        <button class='wepay' bindtap='goBaidu'>点击跳转</button>
      </view>

       2.out.wxml  (百度页面),

    <web-view src="https://www.baidu.com/"></web-view>
    //放心你没有看错就这么一行就行了//把你要跳转的界面用src 就可以了,以后要跳转到哪,src里面地址就写哪!

        3.别忘了,要在app.json中配置一下路由,

    "pages":[
        "pages/a/a",
        "pages/b/b"
      ],
    
    

        电脑上是可以跳转的,体验版的话,在手机上是不好使的,除非你已经在小程序后台完成了配置域名,但是!!!!

    注意!!这是顶级注释请看第四条


    4.需要配置业务域名并上传验证文件:

    这个是我本人的,前端技术QQ交流群,有不会的问题,可以在在群里面问

    如果文章对你有帮助  希望各位可以给我的群 冲冲人气 

    4.1校验文件需要放在你要跳转到的网站的根目录下面才可以!!!也就是说你想跳转到别人网站网页里面 需要得到别人的同意!!

    那比如这个跳转到www.baidu.com 就是行不通的了,只能是自己在开发的时候玩玩(在开发者工具中点设置-项目设置-在不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 前面打上对勾),在正式发布时候肯定是行不通的!!!

    4.2那你想跳转到自己的网站中就需要配置域名、下载校验文件了!!再次强调 个人类型与海外类型的小程序暂不支持使用web-view

    进入到小程序后台 https://developers.weixin.qq.com   设置-开发设置 -业务域名

    4.3web-view 的 src可以是可打开关联的公众号的文章地址! (打开公众号这块也是个坑)

    5.index.js

    goBaidu:function(){
        wx.navigateTo({
          url:'../out/out', //
          success:function() {
    
          },       //成功后的回调;
          fail:function() { },         //失败后的回调;
          complete:function() { }      //结束后的回调(成功,失败都会执行)
     })

    6.效果图

    这是我的微信公众号:

    不定期更新前端知识

     

    展开全文
  • 现在,我们要实现一个微信网页,通过微信访问网页时,网页会展示微信用户的个人信息。因为涉及到用户的个人信息,所以需要有用户授权才可以。当用户授权后,我们的网页服务器(开发者服务器)会...

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!

    一丶概述

    • 微信网页授权

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

    现在,我们要实现一个微信内网页,通过微信访问网页时,网页会展示微信用户的个人信息。因为涉及到用户的个人信息,所以需要有用户授权才可以。当用户授权后,我们的网页服务器(开发者服务器)会拿到用户的“授权书”(code),我们用这个code向微信服务器领取访问令牌(accecc_token)和用户的身份号码(openid),然后凭借access_token和openid向微信服务器提取用户的个人信息。

    1. 第一步:用户同意授权,获取code
    2. 第二步:通过code换取网页授权access_token
    3. 第三步:拉取用户信息(需scope为 snsapi_userinfo)

    那么,如何拿到用户的授权code呢?

    授权是由微信发起让用户进行确认,在这个过程中是微信在与用户进行交互,所以用户应该先访问微信的内容,用户确认后再由微信将用户导向到我们的网页链接地址,并携带上code参数。我们把这个过程叫做网页回调,类似于我们在程序编写时用到的回调函数,都是回调的思想。

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

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

    2、授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权

    3、如果公众号登录授权给了第三方开发者来进行管理,则不必做任何设置,由第三方代替公众号实现网页授权即可。

    第一步:用户同意授权,获取code

    在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:

    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_redirec

    尤其注意:跳转回调redirect_uri,应当使用https链接来确保授权code的安全性。

    参数说明

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

     下图为scope等于snsapi_userinfo时的授权页面:

    用户同意授权后

    如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。

    code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。 

    第二步:通过code换取网页授权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 用户授权的作用域,使用逗号(,)分隔

     

    错误时微信会返回JSON数据包如下(示例为Code无效错误):

    {"errcode":40029,"errmsg":"invalid code"}

     第三步:拉取用户信息(需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 只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。

    错误时微信会返回JSON数据包如下(示例为openid无效):

    {"errcode":40003,"errmsg":" invalid openid "}

     二丶代码实现

    • 思路分析
    • 首选在我们的flask程序中需要定义一个视图函数路由规则为/wechat8007/index,定义微信服务器重定向网址redirect_uri为服务器域名+/wechat8007/index(例如http://www.xxxx.com/wechat8007/index),通过访问微信提供的引导页面,让用户同意授权,然后重定向到我们定义的网址,此时微信服务器就会给我们的服务一个code,我们的服务器再通过code向微信服务器换取网页授权access_token(存取令牌),如果网页授权作用域为snsapi_userinfo,则此时可以通过access_token和openid拉取用户信息了。
    • step1 同意授权,这一块不需要代码实现,只需要提供授权链接即可
    • step2 定义视图函数,当用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE ,在flask程序中定义一个是视图函数接口index,让用户同意授权后,去访问的视图
    • 上一篇博客定义的wechat视图,是由微信服务器访问,现在定义的index视图为用户访问的
    @app.route("/wechat8007/index")
    def index():
        """让用户通过微信访问的网页页面视图"""
    • step3  刚开始还没拉去用户资料时,可直接返回一个模板
    return render_template("index.html")
    • step4 从微信服务器中获取用户的资料数据,将用户的资料数据填充到index.html模板中
    • 1.获取code参数
    code = request.args.get("code")
    • 2.当code不存在时,返回字符串
    if not code:
        return u"缺失code参数"
    url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code" %(WECHAT_APPID,WECHAT_APPSECRET,code)
    
    response = urllib2.urlopen(url)
    
    # 获取响应体数据,微信返回的json数据
    json_str = response.read()
    resp_dict = json.loads(json_str)
    • 4.提取access_token,首先对获取到的响应体数据进行判断,如果不存在,直接返回提示字符串,存在则通过get方式拿去字典中的access_token键的值以及用户编号openid的值
    if "errcode" in resp_dict:
        return u"获取access_token失败"
    
    access_token = resp_dict.get("access_token")
    open_id = resp_dict.get("openid")  # 用户的编号
    • step5 向微信服务器发送http请求,获取用户的资料数据 
    url = "https://api.weixin.qq.com/sns/userinfo?access_token=%s&openid=%s&lang=zh_CN" %(access_token,open_id)
    
    response = urllib2.urlopen(url)
    
    # 读取微信传回的json的响应体数据
    user_json_str = response.read()
    user_dict_data = json.loads(user_json_str)
    • step6 判断微信返回的响应体数据中是否有errorcode字段,如果存在则返回失败信息,不存在说明微信返回的json数据为正确数据,则将该数据传给index.html模板,当用户访问 http://xxx/wechat8007/index地址时,会渲染出我们定义的index.html模板
    if "errcode" in user_dict_data:
        return u"获取用户信息失败"
    else:
        # 将用户的资料数据填充到页面中
        return render_template("index.html", user=user_dict_data)
    •  step7 当前目录下创建templates模板目录,在该目录中创建index.html文件 ,代码如下
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>{{user["nickname"]}}的个人主页</title>
    </head>
    <body>
        <img alt="头像" src="{{user['headimgurl']}}" width="60">
        <table>
            <tr>
                <th>openid</th>
                <td>{{user["openid"]}}</td>
            </tr>
            <tr>
                <th>昵称</th>
                <td>{{user["nickname"]}}</td>
            </tr>
            <tr>
                <th>性别</th>
                <td>
                    {% if 1 == user["sex"] %}
                        男
                    {% elif 2 == user["sex"] %}
                        女
                    {% else %}
                        未知
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th>省份</th>
                <td>{{user["province"]}}</td>
            </tr>
            <tr>
                <th>城市</th>
                <td>{{user["city"]}}</td>
            </tr>
            <tr>
                <th>国家</th>
                <td>{{user["country"]}}</td>
            </tr>
        </table>
    </body>
    </html>

     三丶部署测试

    • step1 将代码推送到服务器上

    成功推送到服务器上

    •  step2 在服务器上进入虚拟环境,运行此程序

     

    In [1]: import urllib
    
    In [2]: urllib.quote("http://www.xxx.com/wechat8007/index")
    Out[2]: 'http%3A//www.xxx.com/wechat8007/index'
    
    
    

     

    • 拼接好的用户访问的url地址为

    • step4 可以将该网址生成二维码,使用微信扫一扫,也可以在接口公众号直接发送此链接地址
    •  使用谷歌浏览器的二维码插件,将网址生成对应的二维码(这里以百度首页网址为例)

    • 直接在浏览器中输入此地址会提示请在微信客户端打开链接

    •  step5 测试,在手机微信上打开此链接,出现授权登录提示,点击允许即可获取用户个人信息

    点击允许后,进入如下界面

    点击继续访问,则出现博主个人的微信信息了,如下图 

    此时查看服务器上程序运行日志 

    四丶完整代码

    # coding:utf-8
    from flask import Flask, request, render_template
    import json, urllib2
    
    
    WECHAT_APPID = "yourappid"
    WECHAT_APPSECRET = "yoursecret"
    
    app = Flask(__name__)
    
    
    
    @app.route("/wechat8007/index")
    def index():
    
        code = request.args.get("code")
    
        if not code:
            return u"缺失code参数"
    
        url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code" % (WECHAT_APPID, WECHAT_APPSECRET, code)
    
        response = urllib2.urlopen(url)
    
        json_str = response.read()
        resp_dict = json.loads(json_str)
    
        if "errcode" in resp_dict:
            return u"获取access_token失败"
    
        access_token = resp_dict.get("access_token")
        open_id = resp_dict.get("openid")
    
        url = "https://api.weixin.qq.com/sns/userinfo?access_token=%s&openid=%s&lang=zh_CN" % (access_token, open_id)
    
        response = urllib2.urlopen(url)
        user_json_str = response.read()
        user_dict_data = json.loads(user_json_str)
    
        if "errcode" in user_dict_data:
            return u"获取用户信息失败"
        else:
            return render_template("index.html", user=user_dict_data)
    
    
    if __name__ == '__main__':
        app.run(port=8007, debug=True)

    总结:微信公众号接口开发,根据官方提供的开发文档,进行开发,逻辑实现都很简单,多想多思考多练习,你会越来越棒的!

    展开全文
  • 微信小程序跳转第三方网页跳转第三方网页的问题微信小程序跳转第三方小程序 微信小程序跳转第三方网页 最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到携程的h5页面。查了下携程的页面为...

    微信小程序跳转第三方网页

    最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到携程的h5页面。查了下携程的页面为https://m.ctrip.com(跳转第三方h5时只能是https的根页面)。其步骤为下图所示。

    1. 跳转代码示例
      goXieCheng(){
      	 uni.navigateTo({//此处为uniapp跳转方法,原生应为wx.navigateTo
      	 	url: '/pages/tabbar/tourist/trip/railwayDetails/xiechengH5/xiechengH5'
      	 });//这里新建一个模块跳转过去,此处为该模块地址
      },
      
    2. 新模块中使用web-view标签,并配置src为目标地址。
      <web-view src="https://m.ctrip.com/html5/"></web-view> 	
      
    3. 点击开发并配置业务域名。在这里插入图片描述

    跳转第三方网页的问题

    其实这里并不能添加成功,因为小程序在跳转第三方页面配置业务域名时需要将一个校验文件放置在跳转页面服务器的根目录下。(这里也就是需要将下载好的校验文件放置在携程服务器的根目录下~ 开玩喜呢么这不是…)。所以,如果想在小程序内跳转第三方的h5页面,除非能跟第三方进行沟通将校验文件放置进去,不然就收购对方吧,tx也行吧(笑~)附上社区中的图

    在这里插入图片描述

    微信小程序跳转第三方小程序

    总之,跳转到h5页面基本是不可能实现了,现在考虑小程序跳转小程序。这个其实比较简单了,步骤为下:

    1. 先获取需要跳转的小程序的appid(我这里获取到了携程的小程序appid)获取方法如下:
      打开目标小程序 -> 点击右上角… -> 点击小程序名称进入详情页 -> 再次右上角… -> 点击更多资料 ->完成
    2. 跳转代码,示例如下
    	goXieCheng(){
    		uni.navigateToMiniProgram({ //这里用uniapp的跳转方法,原生应该是wx.navigateToMiniProgram
    		  appId: 'wx0e6ed4f51db9d078',//这里的appid为目标小程序的appid,此处为携程小程序
    		  success(res) {
    		  		// 打开成功
    			   console.log(res)
    		  },
    		  fail(err){
    		  		// 打开失败	
    			  console.log(err)
    		  }
    		})
    	},
    
    1. 配置允许跳转的小程序appid(最多好像是10个):
    	"mp-weixin" : {
            /* 小程序特有相关 */
            "navigateToMiniProgramAppIdList" : [ "wx0e6ed4f51db9d078" ],
        }, //此处为uniapp的配置。原生应在app.json中配置即可
    

    之后就能正常跳转了。

    展开全文
  • 所有微信开发的相关内容,都需要参考官方文档。 [微信公众平台|开发文档] http://mp.weixin.qq.com/wiki/home/。 一、通过网页授权,可以获取用户微信的基本信息。 二、总共有5个步骤: 1 :用户同意授权,...
  • 微信网页跳转页面常见bug处理 1.不要直接用a链接直接跳转 2.url后加上时间戳 function gohome() { window.location.href = "../home/index.html?t="+new Date().getTime(); } 转载于:...
  • 小程序有本身自带的方法能跳转到导航那么网页微信呢也有 func...
  • 第一部分、为公众号菜单嵌入网页 一、关键参考文档  微信JS-SDK说明文档 。 二、编辑模式嵌入网页 在公众号平台下,自定义菜单,添加菜单,并选择菜单内容跳转到指定页面地址即可(需认证后方可添加页面地址,个人...
  • 1.利用Tomcat服务器部署项目,本地访问可以获取路径资源 ...3.将所获取的域名和端口设置到微信页面跳转的url,就完成了该项功能配置! 转载于:https://www.cnblogs.com/siji/p/6252841.html...
  • 1. 开通开发者帐号 开通开发者帐号,需要提前准备好以下材料: 1. 公司营业执照 2. 300元 3. 公司对公帐号 具体开通流程可以自行到【微信公众号】官网查看操作...如果你是按微信官网开发文档进行操作的话,恭喜你,...
  • 作为一个苹果开发者,最头疼的两件事:上架审核和App推广开发做了这么久,一直没有找到一个替代的方法,今天听一个客户无意间提起一个工具可以实现不上架AppStore直接点击安装我问他如何实现的,他支支吾吾说不清,...
  • 微信开发——网页授权 项目需求:通过用户在微信中打开网页获取用户的openid来实现绑定消费卡的功能。 项目开发:首先我们需要配置微信的运行环境,这里请参考我的第一篇关于微信开发的日志。 第一步我们得去平台...
  • 今天来说说所谓的微信公众号开发和填坑记录; 微信公众号:运行在微信终端的应用 (对于开发者来说比较爽的你只需考虑兼容微信浏览器,因为它是在微信内置浏览器环境下运行的) 微信公众号开发分为两部分:  一...
  • 小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现在已经有超过150万的开发者加入到了小程序的开发,与我们一起共同发力推动小程序的发展,小程序应用数量超过了一百万,覆盖200多个细分...
  • 在以往的APP或网页产品中,用户使用时可以浏览多个页面,这些产品的服务器可以承载足够多的数据。而小程序的特点就是规模小,为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多...
  • 微信小游戏跳转

    2018-12-19 11:28:30
    假设我们要实现的功能是从小游戏A跳转到小游戏B 对于小游戏A: (1)在platform.ts中添加代码如下: /** * 平台数据接口。 * 由于每款游戏通常需要发布到多个平台上,所以提取出一个统一的接口用于开发者获取平台...
  • 最近很多做微信推广的朋友经常会问我为什么网页链接在微信内转发很容易被拦截,问我有没有办法解决。其实这并不难,只要我们实现微信跳转功能即可,下面给大家说说如何实现微信跳转外部浏览器的功能。 功能目的 ...
  • 一、方式一:手动实现微信授权 1、若没有微信公众号,可以用测试号来进行测试号 (1)官方链接:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 其中Token可以随便写,可能一开始配置的URL...
  • 首先要将微信网页开发配置好域名如下:接着进入自己的测试号,联通接口php代码如下:public function index(){ //公众号 $appid = 'wx3aba37a42092d4ac'; $redirect_uri = urlencode('...
1 2 3 4 5 ... 20
收藏数 12,821
精华内容 5,128