在一個和微信相關的業務管理系統，我們有時候需要和使用者的微信賬號資訊進行繫結，如對公眾號、企業微信等賬號繫結特定的系統使用者，可以進行掃碼登入、微信資訊傳送等操作，使用者的繫結主要就是記錄公眾號使用者的openid或者企業微信的userid，那樣可以通過微信API介面，傳送系統訊息或業務訊息。

1、系統使用者介面的繫結處理

1）公眾號和系統使用者繫結

我們繫結使用者，可以在系統使用者管理介面中繫結相關的資訊，也可以在檢視當前使用者介面中提供入口繫結。

在使用者管理介面中的列表介面中繫結，介面如下所示。

上面的繫結操作，我們根據條件判斷展示即可，其中公眾號的繫結操作程式碼如下所示。

  <el-table-column align="center" label="繫結公眾號" width="120">

    <template scope="scope">

      <el-row>

        <el-button-group v-if="scope.row.openId != ''">

          {{scope.row.subscribeWechat}}

          <el-tooltip effect="light" content="點選取消繫結" placement="top-start">

            <el-button icon="el-icon-remove-outline" type="warning" size="mini"

              @click="CancelBindWechat(scope.row.id)">

            </el-button>

          </el-tooltip>

        </el-button-group>

        <el-button-group v-else>

          <el-tooltip effect="light" content="點選繫結二維碼" placement="top-start">

            <el-button type="success" circle size="mini" @click="BindQRCode(scope.row.id)">

              <v-icon name="qrcode" style="color:#409EFF;" />

            </el-button>

          </el-tooltip>

          <el-tooltip effect="light" content="點選繫結公眾號" placement="top-start">

            <el-button type="primary" circle size="mini" @click="BindWechat(scope.row.id)">

              <v-icon name="user-tag" style="color:#2A3036;" />

            </el-button>

          </el-tooltip>

        </el-button-group>

      </el-row>

    </template>

  </el-table-column>

我們通過判斷 scope.row.openId 是否非空，判斷是否需要繫結還是展示取消的按鈕即可。而繫結的操作，就是展示公眾號使用者的介面操作了。

BindWechat (id) { //繫結微信賬號

  this.bindForm.id = id

  this.bindForm.type = 0

  // var param = { id: id, openid: openid, nickname: nickname }

  var tags = []

  this.$refs.tagUserSelect.show(tags)

},

企業微信繫結的處理也是類似程式碼。

  <el-table-column align="center" label="繫結企業微信" width="140">

    <template scope="scope">

      <el-row>

        <el-button-group v-if="scope.row.corpUserId != ''">

          {{scope.row.corpUserId}}

          <el-tooltip effect="light" content="點選取消繫結" placement="top-start">

            <el-button icon="el-icon-remove-outline" type="warning" size="mini"

              @click="UnBindCorpUser(scope.row.id)">

            </el-button>

          </el-tooltip>

        </el-button-group>

        <el-button-group v-else>

          <el-tooltip effect="light" content="點選繫結企業微信" placement="top-start">

            <el-button icon="el-icon-user-solid" type="primary" circle size="mini"

              @click="BindCorpUser(scope.row.id)" />

          </el-tooltip>

        </el-button-group>

      </el-row>

    </template>

  </el-table-column> 

上面提供了微信公眾號的繫結/取消繫結，或者公眾號的掃碼繫結；企業微信的繫結/取消繫結操作。

公眾號繫結介面如下所示。

以上的操作就是呼叫程式碼   this.$refs.tagUserSelect.show(tags) 實現的，由於公眾號的使用者選擇，我們需要在很多地方用到，這裡定義為使用者介面元件的方式使用的。如公眾號和企業微信，都是使用可重用的使用者元件方式處理。

上圖選擇公眾號使用者的介面是根據系統公眾號，獲取對應的訂閱使用者資訊，以便繫結到對應的系統使用者中，建立一一對應的關係。

如果選擇具體訂閱使用者並確認後，系統就記錄他們之間的關係，然後展示在列表中。

對於繫結的使用者，我們當然也可以取消一一對應關係。取消前我們需要確認一下使用者的選擇為佳。

2）系統掃碼繫結

在現今很多網站裡面，都使用了微信開放平臺的掃碼登入認證處理，這樣做相當於把身份認證交給較為權威的第三方進行認證，在應用網站裡面可以不需要儲存使用者的密碼了。

在使用者列表的二維碼連線上，單擊可以對使用者進行微信掃碼繫結，這樣使用者可以在掃碼登入處直接掃碼登入，不需要輸入賬號密碼。掃碼繫結如下介面所示。

掃碼繫結的處理程式碼如下所示，就是展示二維碼，二維碼是一個URL連線的

<el-dialog title="微信掃碼繫結" :visible="isBindCode" width="400px" :modal-append-to-body="false" @close="closeDialog">

  <div>

    <!-- <el-image style="width: 100px; height: 100px" :src="url" fit="fill"></el-image> -->

    <!-- <barcode v-if="viewForm.BarCode" :value="viewForm.BarCode"

      :options="{ width:100,height:50,background:'rgba(255,255,255,.0)'}" /> -->

    <qrcode v-if="qrcode" :value="qrcode" :options="{ width:300,background:'rgba(255,255,255,.0)'}" />

  </div>

  <div slot="footer" class="dialog-footer">

    <el-button type="success" @click="closeDialog">關閉</el-button>

  </div>

</el-dialog>

如對於條碼和二維碼，我使用 @chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode，一般在Github上搜索下關鍵字，總能找到一些很受歡迎的第三方元件。

安裝這些元件都有具體的說明，如下所示(如果解除安裝，直接修改install為uninstall即可）。

npm install @chenfengyuan/vue-barcode vue

以及

npm install @chenfengyuan/vue-qrcode vue

條碼和二維碼的展示效果如下所示

因此，展示二維碼對話方塊的操作，只需要複製給對應屬性，並展示對話方塊即可。

    BindQRCode (id) { //繫結二維碼，用於掃碼登陸

      this.qrcode = `http://www.iqidi.com/h5/BindWechat?id=${id}`

      this.isBindCode = true

    },

一旦成功繫結使用者微信，在微信端會定位到一個繫結成功的頁面（自定義的H5頁面），如下所示。

如果使用者已經綁定了其中的一個使用者而再去掃碼繫結其他使用者，那麼會提示使用者避免無法重複繫結賬號即可。

如果使用者已經進行了二維碼繫結，則可以在管理介面進行取消繫結，這樣可以解綁使用者賬號和微信之間的關聯。

取消繫結的Vue指令碼處理程式碼如下所示，就是呼叫後端API進行資料處理即可。

    CancelBindWechat (id) {//取消繫結微信賬號

      var tips = "您確認取消繫結微信賬號嗎？"

      this.msgConfirm(tips).then(() => {

        var param = {

          id: id

        }

        user.CancelBindWechat(param).then(data => { //公眾號繫結

          // console.log(data.result)

          if (data.success) {

            // 提示資訊

            this.msgSuccess('操作成功!')

            this.getlist()

          } else {

            this.msgError('取消繫結失敗：' + data.error)

          }

        })

      })

    },

3）企業微信繫結

有時候，我們可以通過企業微信進行訊息傳送，或者處理相關的業務資訊，如之前隨筆《在微信框架模組中，基於Vue&Element前端，通過動態構建投票選項，實現單選、複選的投票操作》中說到的傳送投票資訊，就可以同時向公眾號、企業微信傳送投票資訊，推送到具體的使用者。

那麼同時記錄企業微信賬號的資訊就很有必要。

在系統使用者列表介面中，我們同時也提供了繫結企業微信賬戶的操作。

和前面公眾號繫結一樣，我們這個彈出對話方塊也是作為一個使用者元件的方式來實現的

呼叫展示的時候處理一下即可。

    BindCorpUser (id) {//繫結企業微信

      this.bindForm.id = id

      this.bindForm.type = 1

      var tags = []

      this.$refs.corpTagUserSelect.show(tags)

    },

如果繫結後，需要取消繫結，確認一下使用者選擇即可。

操作程式碼如下所示。

    UnBindCorpUser (id) { //取消繫結企業微信

      var tips = "您確認取消繫結企業微信嗎?"

      this.msgConfirm(tips).then(() => {

        var param = {

          id: id,

          corpUserId: ''

        }

        user.BindCorpUser(param).then(data => {

          // console.log(data.result)

          if (data.success) {

            // 提示資訊

            this.msgSuccess('操作成功!')

            this.getlist()

          } else {

            this.msgError('取消繫結失敗：' + data.error)

          }

        })

      })

    },

以上就是我們在後端管理介面中，基於Vue&Element前端的微信公眾號和企業微信的使用者繫結操作過程。