微信小程序打开微信公众号中的文章实战教程

情景

微信小程序中有一块功能是需要从关联的微信公众平台中获取最新的一篇文章进行展示，看了微信公众号的官方文档与微信小程序的文档，好像都没有找到类似的接口，所以想了一个办法，那就是拿自己的服务器做一个中转站，先调用微信公众平台的接口，获取文章数据(在微信公众平台控制台，他们叫素材，所以下面统一叫做素材)。获取素材数据后再发送给微信小程序。这样可能不是最有效的办法，但是好歹实现了。接着就等微信团队将微信公众号与小程序更加结合起来吧。

实际操作

确定是否有权限

拥有调用微信公众平台的素材资源的权限。

这个是最开始的要求，权限一览表，可以参考这个看看，自己是否有相应的权限进行调用。如果没有那就别折腾了。

域名白名单设置

其实第一步应该是开启微信公众平台的开发者功能，接着就是为你的接下来的请求开启ip白名单，开发阶段其实你自己的电脑就是服务器，把当前的ip添加进去就可以了，上线后接着添加你的服务器地址。

获取AccessToken

要调用微信公众号的后端接口，这个是一切的开始，要调用这个只能用你的AppID和AppSecret，调用微信公众平台的获取AccessToken接口接口来实现，我后端使用的是PHP的语言。

对了，从哪里获取AppID和AppSecret这个在这里就不赘述了，感觉有点多余。

<?php
  // 获取AccessToken
  function getAccessToken(){
        // 这里我把Access_Token缓存起来，并设置了7200秒的过期时间，防止每次都要重新调用get请求获取
        $access_token=session("access_token");
        if($access_token){
            return $access_token;
        }
        $appid=C("APPID");// 你自己的AppID
        $appSecret=C("APPSECRET");// 你自己的AppSecret
        $url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$appSecret}";
        // 这个函数下面展示
        $result=curl_get_contents($url);
        $returnData=json_decode($result,true);
        if(in_array("errcode",$returnData)){
              // 发生错误
              return false;
        }else{
            $access_token=$returnData["access_token"];
            session("access_token",$access_token);
            return $access_token;
        }        
  }
  // curl做get请求
  function curl_get_contents($durl) {
      if (function_exists("curl_init")) {
          $ch = curl_init();
          curl_setopt($ch, CURLOPT_URL, $durl);
          curl_setopt($ch, CURLOPT_TIMEOUT, 5);
          curl_setopt($ch, CURLOPT_USERAGENT, _USERAGENT_);
          curl_setopt($ch, CURLOPT_REFERER, _REFERER_);
          curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
          $result = curl_exec($ch);
          curl_close($ch);
      } else {
          $result = @file_get_contents($durl);
      }
      return $result;
  }

获取素材信息

调用的微信公众平台的接口，以及其返回值的含义，可以看这篇文档：获取素材列表

<?php
  protected function getArtical(){
        // 跟上面一样，我把最终结果缓存起来了，因为关联的微信公众号的更新频率没那么频繁，所以没有及时性方面的要求
        $article=session("article");
        if($article){
            return $article;
        }
        // 调用上面的接口获取AccessToken
        $access_token=getAccessToken();
        $url="https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token={$access_token}";
        // 这里只需要获取一篇，所以offset为0，count为1
        $postData=array(
            "type"=>"news",
            "offset"=>0,
            "count"=>1
        );
        // 这个函数在下面展示
        $article=curl_post($url,json_encode($postData));
        $result=json_decode($article,true);
        // 从返回的结果中拿取自己需要的数据
        $returnData=array(
            "title"=>$result["item"][0]["content"]["news_item"][0]["title"], // 素材标题
            "introduce"=>$result["item"][0]["content"]["news_item"][0]["digest"],// 素材内容简介
            "url"=>$result["item"][0]["content"]["news_item"][0]["url"],// 素材链接地址
            "picture"=>$result["item"][0]["content"]["news_item"][0]["thumb_url"] // 素材缩略图地址
        );
        session("article",$returnData);
        return $returnData;
    }
// curl做http的post请求
function curl_post($curlHttp, $postdata) {
      $curl = curl_init();
      curl_setopt($curl, CURLOPT_URL, $curlHttp);
      curl_setopt($curl, CURLOPT_HEADER, false);
      curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); //不显示
      curl_setopt($curl, CURLOPT_TIMEOUT, 60); //60秒，超时
      curl_setopt($curl, CURLOPT_POST, true);
      curl_setopt($curl, CURLOPT_POSTFIELDS, $postdata);
      $data = curl_exec($curl);
      curl_close($curl);
      return $data;
  }

微信小程序web-view域名配置

这个我现在还在开发阶段，所以模拟器没有进行限制，正式上线之后应该是要进行设置的，设置的地点应该是这里：

这里设置这个是因为使用web-view组件打开外部地址时会进行安全方面的限制，所以一定要提前设置好，防止上线后跳转失败。

web-view组件调用

这里就是最简单的了：

<web-view src="{{url}}"></web-view>

这里的url 就是我们上面保存的url。点开后会跟直接在微信公众号中打开一样。