微信投票系統開發

2020-03-22 18:16:03

字體：大中小

來源：轉載

供稿：網友

公眾號發起投票，無疑是吸粉漲粉的一項大殺器，各類萌寶投票，最美投票總是火爆朋友圈，組織方公眾號的粉絲也是噌噌向上漲。

本文一步一步向您介紹開發公眾號投票系統的詳細過程，并在最后給出DEMO以供參考，為免廣告嫌疑，本文能不貼圖的都不貼圖了，見諒。

公眾號投票系統的原理并不復雜，用戶發布或者管理員后臺發布待投票的項目，手機端用戶在微信上瀏覽H5頁面，進行投票。

這其中幾個關鍵點在于：

1.微信端用戶鑒權識別用戶身份，以防刷票。

2.發布投票項目時，使用微信 JS SDK 進行圖片的上傳。

3.后臺管理功能的實現。

首先第一步，實現微信端用戶身份鑒權。

1)用戶同意授權，獲取code

在確保微信公眾賬號擁有授權作用域（scope參數）的權限的前提下（服務號獲得高級接口后，默認擁有scope參數中的snsapi_base和snsapi_userinfo），引導關注者打開如下頁面：

http://open.weixin.qq.com/connect/oauth4/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“該鏈接無法訪問”，請檢查參數是否填寫錯誤，是否擁有scope參數對應的授權作用域權限。

2)通過code換取網頁授權access_token

這里通過code換取的是一個特殊的網頁授權access_token,與基礎支持中的access_token（該access_token用于調用其他接口）不同。公眾號可通過下述接口來獲取網頁授權access_token。如果網頁授權的作用域為snsapi_base，則本步驟中獲取到網頁授權access_token的同時，也獲取到了openid，snsapi_base式的網頁授權流程即到此為止。
獲取code后，請求以下鏈接獲取access_token：
http://api.weixin.qq.com/sns/oauth4/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

3)拉取用戶信息(需scope為 snsapi_userinfo)
如果網頁授權作用域為snsapi_userinfo，則此時開發者可以通過access_token和openid拉取用戶信息了。

http：GET（請使用https協議）
http://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

至此，我們就可以得到用戶的詳細信息了。我們要在用戶投票時，將用戶的OpenId記錄到數據庫中，以防重復投票。

接下來第二步，我們要實現用戶發布功能，使用戶能夠在微信的H5頁面中，上傳照片，我們使用微信的JS SDK來實現。

1）引入JS文件

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

2) 通過config接口注入權限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

3）上傳圖片接口
wx.uploadImage({
localId: '', // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 1, // 默認為1，顯示進度提示
success: function (res) {
var serverId = res.serverId; // 返回圖片的服務器端ID
}
});
上傳圖片有效期3天，可用微信多媒體接口下載圖片到自己的服務器，此處獲得的 serverId 即 media_id

現在，粉絲的照片也發布了，最后就是實現后臺管理功能，這里并不復雜，只是基本的增刪改查，不作詳述。

后臺效果：