關於今日頭條小程序（字節跳動小程序）相關問題

上週忽然遇到讓開發今日頭條小程序（字節跳動小程序）的需求，而後看了下文檔發現真的簡陋。並且文檔有錯別字。槽點有點多。可是和老版本的小程序相差很少，而後我就抱着試一試的心態，真的是試一試把微信小程序換了個id,而後打包上傳，發現居然跑的通！跑的通！跑的通！再說一次跑的通。當時個人心裏是崩潰的，說好的tt.標籤那，這樣照搬真的好嗎，好歹稍微改下啊。

先說下遇到的提審不經過的幾個緣由：

　　一、在部分頁面有微信分享或者微信二維碼等和微信有關的東西（由於是直接把微信小程序扔過去的全部清楚有點麻煩）

　　二、要求頁面不能有空白，沒東西最少要有文字提示，這個算是一開始沒想到的用戶體驗性

　　三、視頻要求可以下拉頁面跳過的時候自動暫停或者懸浮窗顯示（由於文檔不詳細，網上資料不多，社區資料 也沒有，特別吐槽，社區的官方人員迴應速度慢，基本都是扔個文檔連接或者示例，感受對開發者很不友好，特別是在文檔不是太清晰的問題）

遇到的坑，主要在支付這邊，其餘地方有問題的能夠參考微信小程序，文檔基本通用。頭條由於沒有本身的支付渠道，因此使用的是支付寶，利用tt.requestPayment()調起支付寶APP支付：

支付具體流程爲：後端經過openid和本身這邊的訂單號生成一個頭條的訂單號，具體操做能夠看文檔流程，而後生成調用支付寶的一個字符串，這裏須要使用支付寶文檔，我使用的支付寶SDK，這邊支付寶文檔很好的，網上資料不少。最後就是組裝後返回給前端調用支付寶。特別注意的是這裏使用的全部appid等參數都是頭條分配給商戶的appid等。

　　一、簽名，在官方文檔中，支付接入文檔中，有簽名說明和簽名不經過說明，這裏有個坑就是，簽名說明是下單的簽名的說明，簽名不經過說明與示例是前端調用支付寶APP的簽名。

　　個人代碼，這裏爲了方便展現，用的拼接：

$biz_content = array(

            'out_order_no' => $ordersn,

            'uid' => $openid,

            'merchant_id' => $ttshcode[$appid],

            'total_amount' =>$order['orderAmount'] ? $order['orderAmount'] * 100 : 0,

            'currency' => 'CNY',

            'subject' => $order['goodsName'] ? $order['goodsName'] :'名稱' ,

            'body' => $ordersn.','.$order['orderAmount'],

            'trade_time' => $time,

            'valid_time' => '60',

            'notify_url' => 'http://www.******.com',

            'risk_info' => '127.0.0.1',

        );


        $biz_content = json_encode($biz_content);

        $data['app_id'] = $ttapppay[$appid];

        $data['biz_content'] = $biz_content;

        $data['charset'] = 'utf-8';

        $data['method'] = 'tp.trade.create';

        $data['sign_type'] = 'MD5';

        $data['timestamp'] = $time;

        $data['version'] = '1.0';

        ksort($data);

        $var = '';

        foreach($data as $key => $value){

            $var .= $key.'='.$value.'&';

        }
        $var = trim($var,'&');


        $c = $var.$secret;

        $data['sign'] = MD5($c);
  
        ksort($data);

        $vars = '';
        $vars = 'app_id='.$data['app_id'].'&biz_content='.$data['biz_content'].'&charset='.$data['charset'].'&method='.$data['method'].'&sign='.$data['sign'].'&sign_type='.$data['sign_type'].'&timestamp='.$data['timestamp'].'&version='.$data['version'];
        $url = 'https://tp-pay.snssdk.com/gateway';
　　　　　//進行post請求

2.支付寶這邊支付的字符串參考支付寶文檔生成

3.前端調用支付寶app，這邊示例有個坑就是在支付寶字符串外面有一個花括號，這裏有就提示簽名錯誤，

代碼示例：

 　　　　$goodsName = $order['goodsName'] ? $order['goodsName'] :'名稱';
        $urls = $this->alipay_get($goodsName,$datas['response']['trade_no'] , $order['orderAmount']); //這裏是我寫了個方法調用支付寶SDK的簽名函數

        $list['app_id'] = $ttapppay[$appid]; // test
        $list['method'] = 'tp.trade.confirm';
        $list['sign_type'] = MD5;
        $list["uid"]=$openid;
        $list["total_amount"]=$order['orderAmount'] ? $order['orderAmount']*100 : 0;
        $list['timestamp'] = time();
        $list['pay_channel'] = "ALIPAY_NO_SIGN";
        $list["pay_type"] = "ALIPAY_APP";
        $list["trade_no"]= $datas['response']['trade_no'];
        $list["merchant_id"]= $ttshcode[$appid];
        $list["risk_info"]= $this->input->ip_address();
        $list["uid"]=$openid;
        $arrParam=array("url" =>  $urls);
        $strParam=json_encode($arrParam);
        $list["params"]=$strParam;
        $list['url'] =$urls;
        $signKeys=array("app_id","sign_type","timestamp","trade_no","merchant_id","uid","total_amount","params");
        $signData=array();
        foreach ($signKeys as $v) {
            $signData[$v] = $list[$v];
        }

        ksort($signData);
        $var = '';
        foreach($signData as $key => $value){
            $var .= $key.'='.$value.'&';
        }
        $var = trim($var,'&');
        $list['sign'] = MD5($var . $secret);

$datas['response']['trade_no']爲生成的單號。
4.前端代碼:

var obj = JSON.parse(res.data.data);//

                tt.requestPayment({
                    data: {
                        app_id: obj.app_id,
                        method: 'tp.trade.confirm',
                        sign: obj.sign,
                        sign_type: 'MD5',
                        timestamp: obj.timestamp.toString(),
                        trade_no: obj.trade_no,
                        merchant_id: obj.merchant_id,
                        uid: obj.uid,
                        total_amount: obj.total_amount,
                        pay_channel: 'ALIPAY_NO_SIGN',
                        pay_type: 'ALIPAY_APP',
                        risk_info: "{'ip':'"+obj.risk_info+"'}",
                        params: JSON.stringify({
                                url:obj.url
                           }),
                        return_url: 'https://***********/',
                        show_url: 'https://*********/',
                    },
                    success (res) {
                        succ(res);
                        console.log(res);
                    },
                    fail (res) {
                        console.log(res);
                        wx.showModal({
                            title: '支付失敗',
                            content: '',
                            complete (res) {
                                return tt.navigateTo({
                                    url: '/pages/user/orders/orders'
                                });
                            }
                        });
                        fail(res);
                    }
                })

我這邊後端返回的是json格式，前端轉換爲對象。

 

補充一下最近遇到的問題，上線的小程序更新被打回好幾回，最後發現是字節跳動那邊開通了抖音小程序，在抖音能夠打開原先頭條的小程序，然而以前的接口在抖音有部分不能使用（好比調用地址接口），並且文檔未說明，也沒有給通知，這樣真的不太好