1, h5 after the second sharing, the summary and pictures are lost

The title was truncated, the description became a link, and there were no pictures. The operators were still yelling in the middle of the night, so they had to go to Baidu and google. Unfortunately, there was no detailed solution, so they had to study it by themselves. Fortunately, they finally got it out and decided to share it to help those in need.

2, Online pit

At the beginning, I found some information on the Internet and said that it was OK to add a picture under the body and hide it. Wechat will select the first picture in the web page as a small icon by default. I tried several times and found that it couldn't work. It's the logic to share it in QQ. It's estimated to be the logic a long time ago.

3, Solution

1. First configure the js interface security domain

In the official account, the -JS interface security domain name is bound to share the domain name of the web page.

After that, introduce the wechat JS file on the page: http://res.wx.qq.com/open/js/jweixin-1.2.0.js

For authentication, the code is as follows:

wx.config({
    debug: true, // When the debugging mode is enabled, the return values of all APIs called will be alert ed on the client. To view the incoming parameters, you can open them on the pc side. The parameter information will be printed through the log and will only be printed on the pc side.
    appId: '', // Required, the only sign of official account.
    timestamp: , // Required, time stamp to generate signature
    nonceStr: '', // Required, generate random string of signature
    signature: '',// Required, signature
    jsApiList: [] // Required, list of JS interfaces to be used
});

How do you get these values from the server interface

2. Server interface logic

    public function action() {
        $config = (new \Dao\Db\Applet\Common\Openid())->getConfigInfo();
        $ticket = $this->getTicket($config);
        $url = 'https://proof.hn-qingjin.com/';
        if ($this->params['wechaturl']) {
            $url = $this->params['wechaturl'];
        }

        $ret['timestamp'] = (string)time();
        $ret['noncestr'] = \S\Util\Rand::human(16);
        $ret['jsapi_ticket'] = $ticket;
        $ret['url'] = $url;
        $ret['signature'] = $this->getSign($ret);
        $ret['appid'] = $config['appid'];
        $this->response['data'] = $ret;
    }

getConfigInfo is to obtain the configuration, which returns appid and secret

    protected function getTicket($config) {
        $biz = new \Dao\Db\Applet\Common\Ticket();
        $one = $biz->getOne(['appid' => $config['appid']]);
        if ($one) {
            if ($one['expires'] > time()) {
                return $one['ticket'];
            } else {
                $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$config['appid'].'&secret='.$config['secret'];
                $curl = new \S\Util\Curl($url);
                $ret = $curl->get();
                $ret = json_decode($ret, true);
                $data = [];
                $query['appid'] = $config['appid'];
                $data['accessToken'] = $ret['access_token'];
                $data['ticket'] = $this->getTicketInfo($data['accessToken'], $config);
                $data['expires'] = time()+7000;
                $biz->update($query, $data);
                return $data['ticket'];
            }
        } else {
            $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$config['appid'].'&secret='.$config['secret'];
            $curl = new \S\Util\Curl($url);
            $ret = $curl->get();
            $ret = json_decode($ret, true);
            $data['accessToken'] = $ret['access_token'];
            if (!$data['accessToken']) {
                throw new Exception('token Build failed');
            }
            $data['ticket'] = $this->getTicketInfo($data['accessToken'], $config);
            $data['expires'] = time()+7000;
            $data['appid'] = $config['appid'];
            $biz->add($data);
            return $data['ticket'];
        }
    }

getTicket function is to obtain token and ticket information and save the database. jsapi_ticket is the official account used to invoke the WeChat JS interface. Normally, the jsapi_ The validity period of the ticket is 7200 seconds, which can be accessed through access_token. Due to getting the jsapi_ The api calls of ticket are very limited, and the jsapi is refreshed frequently_ Ticket will lead to restricted api calls and affect their own business

    protected function getTicketInfo($token, $config) {
        $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$token.'&type=jsapi';
        $curl = new \S\Util\Curl($url);
        $ret = $curl->get();
        $ret = json_decode($ret, true);
        return $ret['ticket'];
    }

getTicketInfo obtains a ticket through a token

    protected function getSign($ret) {
        $biz = new Dao\Db\Applet\Common\Sign();
        return $biz->getSign($ret);
    }

getSign is used for encryption. The following is the logic in Dao

    public function getSign($param) {
        ksort($param);
        foreach ($param as $key=>$value){
            $str .= $key.'='.$value.'&';
        }   
        return sha1(trim($str, '&'));
    }  

4, Pay special attention to link: location href

1. as like as two peas, the most important thing is that the icon is always out of the way. The reason is that the address of the address is exactly the same as the signature address in the background. http://cxytiandi.com/article/ The article ID is obtained in this way. As mentioned above, wechat will add parameters later, resulting in inconsistency between the two sides. Therefore, location is directly used here That's all.

2. If the error is invalid IP 222.128.31.228, IPv6:: ffff: 222.128.31.228, not in whitelist rid: 5fb61946-2d7f6c4f-457f4818

Please configure the IP white list of token in the background of WeChat official account.