摘要：本文主要是從前端的角度，使用搭建一個簡易的測試項目，在自己搭建的代理服務(wù)的下實現(xiàn)簡單的微信分享。在微信測試工具中調(diào)試接口，點擊發(fā)送即可會出現(xiàn)比較漂亮的分享鏈接。

一、背景簡介：

目前流行的前后端分離項目，一般都處于不同的域名下，前后端開發(fā)過程中，是分別部署在不同服
務(wù)器上，在做接口聯(lián)調(diào)時，會出現(xiàn)跨域的情況，部署上線時，基本不存在這種需要，因此搭建一個
前端代理服務(wù)，方便開發(fā)。
作為一個后端，需要了解下前端服務(wù)結(jié)構(gòu)和基本操作流程。
本文主要是從前端的角度，使用React搭建一個簡易的測試項目，在自己搭建的代理服務(wù)的下實
現(xiàn)簡單的微信分享 demo。

二、項目基本結(jié)構(gòu)

   前端測試項目 `wechat-app`
   node代理服務(wù) `proxy—server`
   后端接口服務(wù) `wechat-server` 

三、搭建步驟：

3.1、創(chuàng)建一個React項目

 創(chuàng)建步驟：（默認機器已經(jīng)裝好node環(huán)境和npm包管理工具）

      1、安裝React項目創(chuàng)建工具： 
            npm install -g create-react-app         
      2、創(chuàng)建項目： 
            create-react-app wechat-share
      3、切換到項目：
            cd wechat-share
      4、刪除src目錄下所有文件，新建一個index.js文件
      5、安裝開發(fā)必要工具包
            初始化：
            npm init
            安裝react、react-dom：
            npm install --save react react-dom
            安裝axios(http請求工具)
            npm install -—save axios 
            安裝微信jssdk
            npm install -—save weixin-js-sdk
            安裝es6環(huán)境
            npm install --save-dev babel-cli
            npm install babel-core --save
            npm install --save babel-polyfill

   

3.2 在index.js中編寫前端代碼：
分享基本流程：
1、配置微信公眾號
2、編寫后端服務(wù)，前端從后端接口獲取微信配置參數(shù)（后端邏輯參考文檔實現(xiàn)）
3、初始化配置
4、檢驗js分享接口權(quán)限
5、從后端微信分享配置，初始化微信分享事件

    import React from "react";
    import ReactDOM from "react-dom";
    import wx from "weixin-js-sdk";
    import axios from "axios";

    let wxConfig={};
    let shareConfig={};
    function getData(response){
        if(response.status===200){
            var resData=response.data;
            return  resData;
        }else{
            console.log("response is error:",response);
            return {};
        }

    }
function getWxConfig(){
    return axios.post("share/mobile/getWXConfig",{"url":window.location.href})
        .then(function (response) {
            var resData=getData(response);
            if(resData.status&&resData.status===1){
                return resData.data;
            }else if(resData.data&&resData.data.message){
                alert(resData.data.message);
                return {};
            }
        }).catch(function(err){
            console.log(err);
        });
}

function getShareConfig(){
    return  axios.post(
        "/share/mobile/getShareInfo", {}).then( function (response) {
        var resData=getData(response);
        if(resData.status&&resData.status===1){
            return resData.data;
        }else if(resData.data&&resData.data.message){
            alert(resData.data.message);
            return {};
        }
    }).catch(function(err){
        console.log(err);
    });

}

async function init() {
wxConfig= await getWxConfig();
shareConfig =await getShareConfig();
wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
    appId: wxConfig.appId, // 必填，公眾號的唯一標識
    timestamp:wxConfig.timestamp , // 必填，生成簽名的時間戳
    nonceStr: wxConfig.noncestr, // 必填，生成簽名的隨機串
    signature: wxConfig.signature,// 必填，簽名，見附錄1
    jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
wx.checkJsApi({
    jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline"], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
    success: function(res) {
        console.log("checkJsApi init success!")
    }
});
wx.ready(function(){
    wx.onMenuShareAppMessage({
        title: shareConfig.title, // 分享標題
        link: shareConfig.link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
        imgUrl: shareConfig.imgUrl, // 分享圖標
        success: function () {
            console.log("分享成功！")
        },
    });

})
}
init();

class RequestClass extends React.Component{
render () {
    return(
        
Hello,World
    )
}
};
ReactDOM.render(
    ,
    document.getElementById("root")
);
                
            
            

3.3、現(xiàn)在搭建代理服務(wù)proxy-server，在src目錄下新建proxy文件夾，編寫代理服務(wù)器代碼

1、node層代理了后端的 serverIp:serverPort/api 下的所有服務(wù)，并且對外開放了7080端口，
所有請求代理服務(wù)器7080端口的服務(wù)，都會被轉(zhuǎn)發(fā)到后端服務(wù)器上。
2、React項目的package.json文件中，配置了代理服務(wù)器地址，所有的接口請求都會通過7080端
口轉(zhuǎn)發(fā)到后端了。

   
step1、編寫代理服務(wù)  
"use strict";
const express = require("express");
const path = require("path");
const app = express();
const request = require("request");

// 配置靜態(tài)文件服務(wù)中間件
let serverUrl="http://serverIp:serverPort/api/";//server地址
app.use(express.static(path.join(__dirname, "./")));//靜態(tài)資源index.html和node代碼在一個目錄下
app.use("/", function(req, res) {
    let url = serverUrl + req.url;
    console.log("request url==>",url);
    req.pipe(request(url)).pipe(res);
});

//本地服務(wù)代理在7080端口
app.listen(7080,"127.0.0.1", function () {
    console.log("proxy server is running at port 7080");
});
step2、啟動代理服務(wù)：
    node start proxy-server.js
step3、配置wechat-app代理：
    打開項目package.json文件，在配置的最后一行，加上 
    "proxy": "http://127.0.0.1:7080"
step4、啟動wechat-app項目
     npm start 
 
 
 

四、開發(fā)效果圖

 配置React項目的代理：

微信測試公眾號配置：
  appID和appsecret是生成好的，再調(diào)用接口時需要使用。
  URL和Token是接口調(diào)用時，需要配置的,URL的域名需要在公網(wǎng)可以訪問，以方便微信接口回調(diào)，
  Token作為消息驗證
  JS接口安全域名：在微信分享時，需要校驗安全域名是否符合，不匹配的域名，分享的鏈接會顯示不正常。
  一般測試環(huán)境只能配置一個安全域名，線上環(huán)境最多可以配置三個。

在微信測試工具中調(diào)試接口 ，點擊發(fā)送即可會出現(xiàn)比較漂亮的分享鏈接。  

五、遇到的一些坑

react項目啟動報錯：react-scripts: command not found ，
解決方法：執(zhí)行 npm install
如果還不行，則執(zhí)行 rm  -rf node_mdules 然后執(zhí)行 npm install
         
域名代理時，啟動項目，通過本地代理域名訪問報錯：Invalid Host header
解決方法：在項目根目錄下，新建一個隱藏文件  .env.development.local 
        設(shè)置不校驗域名 DANGEROUSLY_DISABLE_HOST_CHECK=true
 
     

六、參考文檔和工具鏈接

   文檔：
   
   微信開發(fā)文檔：
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
   微信測試公眾號：
   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
   微信簽名驗簽工具：  
   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
   微信分享的SDK：   
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
   axios文檔：
   https://www.kancloud.cn/yunye/axios/234845
   es6入門：
   http://es6.ruanyifeng.com/#docs/async
   
   工具：
   
   webstorm下載：
   http://www.jetbrains.com/webstorm/
   微信開發(fā)者工具下載：
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140