01 訂閱號登錄流程設計器js(買粉絲小程序怎么開發 買粉絲小程序開發教程分享)

買粉絲買粉絲中的H5頁面是怎樣煉成的

現在是自媒體時代，很多個人或者小團隊都希望能有一個買粉絲公共號平臺用來宣傳自己。公共號開通其實很簡單，推廣的方式也已經模式化，這些無需多述，這里我們從技術的角度來看看一個技術人員完成一個帶有H5頁面“會員中心”的買粉絲的流程。

買粉絲有的三個類別 如果您的買粉絲需要經常性的推送群發圖文消息，那么請注冊訂閱號，其他情況還是推薦注冊服務號。不過注冊服務號需要進行認證，這個需要有一個公司或者個體的資質。小程序是一個基于買粉絲的小app，它在制作的時候需要綁定一個位置，方便用戶查看周邊小程序能夠找到你，目前小程序在餐飲住宿零售等行業使用的不錯。

我們主要來對比認證訂閱號和認證服務號的區別 1、文章推送數量及展示 訂閱號每日可以推送一次圖文消息或者圖文消息列表，用戶查看推送的消息，需要打開買粉絲-訂閱號-你的訂閱號才能查看消息。訂閱號有數量優勢。 服務號每月可以推送四次圖文消息或者圖文消息列表，用戶查看推送的消息，可以在聊天列表中直接打開你的訂閱號查看消息。服務號有更好的查看率。 2、系統接口 由于訂閱號更適合媒體平臺，因此訂閱號沒有模板消息接口（發送業務通知-類似信用卡發送的賬單消息），不能獲取當前用戶的位置，不能使用買粉絲支付接口，不能使用網頁授權獲取用戶openid/用戶基本信息（不能在H5頁面中集成買粉絲登陸），好的一點是訂閱號支持買粉絲網頁JS-SDK（使用JS-SDK可以調用買粉絲系統接口，如語音、視頻、圖片、分享、掃一掃等功能）。具體接口說明可以查看買粉絲官方接口文檔。 服務號可以使用買粉絲提供的所有接口，如網頁授權登陸、買粉絲支付、買粉絲網頁JS-SDK（使用JS-SDK可以調用買粉絲系統接口，如語音、視頻、圖片、分享、掃一掃等功能）

注冊買粉絲過程很簡單，通過買粉絲公眾平臺右上角立即注冊，選擇您要注冊的買粉絲類型就可以進入填寫信息界面

根據要求填寫各種信息就可以了，如果需要買粉絲認證，我們就需要填寫對應的企業三證合一的證件信息、開戶行信息，并填寫一份認證公函簽字蓋章拍照上傳，三兩天就可以認證通過。 認證通過后就該技術人員出手了，現在我們回到主題，客戶需要一個帶有會員中心的買粉絲，技術人員會怎樣處理呢？ 首先客戶需要租一個云服務器或者web托管，需要申請一個域名并且備案（備案時間一周到兩周時間就可以下來），有了服務器和域名，技術人員會先去域名解析平臺綁定解析到租好的服務器，然后再服務器的管理平臺或遠程至服務器進行域名綁定，并建立一個ftp目錄保證他可以隨時將網頁源文件傳送到該目錄。

服務器和域名做好以后，技術人員還需要在買粉絲進行配置。每一項配置填寫以后都需要做測試配置是否成功，有時在配置這里因為找不到問題原因，折騰一天也是有可能的。

前面說的只是做H5會員中心的配置階段，配置好以后才真正進入開發階段 開發過程會涉及三個工種分別是美工設計、前端開發、后臺開發。 美工設計主要是用來設計頁面布局色調的人員。 前端開發是承接美工和后臺人員的橋梁，并且是用戶使用程序的直接面對著。前端人員要通過CSS+HTML代碼將美工的界面實現成網頁形式。要通過JavaScript與后臺頁面進行通信，并將通信返回的數據使用JS動態的更新當前頁面，一個會員中心前端人員可能需要些十幾二十個接口與后臺進行通信，每個接口都會實現一個對應的功能，如獲取用戶信息接口，用戶修改頭像接口，用戶短信認證接口等，每個接口都采用AJAX異步通信的方式與后臺進行交互，通過后臺返回的JSON格式數據，再對用戶中心中對應的內容進行更改。如果用戶中心涉及到用戶轉發文章統計功能，前端還需要使用買粉絲JS-SDK開發，并對URL地址的哈希值處理，并且要做本地存儲與用戶驗證登陸跳轉時的邏輯關系處理。 后臺開發人員主要是建立數據庫，通過PHP或者.買粉絲 JAVA等語言制作對數據庫操作的頁面，并預留POST接口接收前端發送過來的post信息，通過post信息對數據庫進行對應的操作，操作完成以后返回一個操作結果json串發送回前端，如果需要集成買粉絲用戶登錄就需要做買粉絲的登陸認證，認證的過程比較復雜，基本原理就是用戶授權登陸以后，該買粉絲的頁面得到用戶給予該買粉絲的唯一艾迪和用戶的昵稱頭像信息，然后將該信息放入自己的用戶庫中，每次用戶登錄的時候都要跟庫里的人員進行判斷，這樣就不會每次提示用戶授權登陸該買粉絲了。

一個會員中心功能雖然看上去功能不多，但是麻雀雖小五臟俱全，他包含了用戶基礎買粉絲登陸，買粉絲JS-SDK開發，以及H5頁面制作開發，后臺開發等開發過程。 在開發過程中前端會使用到買粉絲的web開發者工具進行頁面測試，在這里會測試iphone各個版本，安卓版本的多種測試，測試無誤以后會正式部署到服務器上，部署到服務器上還要再進行一輪測試，確保交付到用戶手中的功能有盡量少的BUG。 買粉絲買粉絲中只要是需要用戶授權登陸的頁面基本都是按照這個流程做下來的，在我們使用這些功能的同時，也系統能夠為我們的工程師們點個贊，感謝他們的付出。

買粉絲小程序怎么開發 買粉絲小程序開發教程分享

買粉絲應用號（小程序，「應用號」的新稱呼）終于來了！

目前還處于內測階段，買粉絲只邀請了部分企業參與封測。想必大家都關心應用號的最終形態到底是什么樣子？怎樣將一個「服務號」改造成為「小程序」？

我們暫時以一款簡單的第三方工具的實例，來演示一下開發過程吧。

序言

開始開發應用號之前，先看看官方公布的「小程序」教程吧！（以下內容來自買粉絲官方公布的「小程序」開發指南）

本文檔將帶你一步步創建完成一個買粉絲小程序，并可以在手機上體驗該小程序的實際效果。這個小程序的首頁將會顯示歡迎語以及當前用戶的買粉絲頭像，點擊頭像，可以在新開的頁面中查看當前小程序的啟動日志。

1. 獲取買粉絲小程序的 AppID

首先，我們需要擁有一個帳號，如果你能看到該文檔，我們應當已經邀請并為你創建好一個帳號。注意不可直接使用服務號或訂閱號的 AppID。 利用提供的帳號，登錄 買粉絲s://mp.weixin.qq.買粉絲 ，就可以在網站的「設置」-「開發者設置」中，查看到買粉絲小程序的 AppID 了。

注意：如果我們不是用注冊時綁定的管理員買粉絲號，在手機上體驗該小程序。那么我們還需要操作「綁定開發者」。即在「用戶身份-開發者」模塊，綁定上需要體驗該小程序的買粉絲號。本教程默認注冊帳號、體驗都是使用管理員買粉絲號。

2. 創建項目

我們需要通過開發者工具，來完成小程序創建和代碼編輯。

開發者工具安裝完成后，打開并使用買粉絲掃碼登錄。選擇創建「項目」，填入上文獲取到的 AppID，設置一個本地項目的名稱（非小程序名稱），比如「我的第一個項目」，并選擇一個本地的文件夾作為代碼存儲的目錄，點擊「新建項目」就可以了。

為方便初學者了解買粉絲小程序的基本代碼結構，在創建過程中，如果選擇的本地文件夾是個空文件夾，開發者工具會提示，是否需要創建一個 quick start 項目。選擇「是」，開發者工具會幫助我們在開發目錄里生成一個簡單的 demo。

項目創建成功后，我們就可以點擊該項目，進入并看到完整的開發者工具界面，點擊左側導航，在「編輯」里可以查看和編輯我們的代碼，在「調試」里可以測試代碼并模擬小程序在買粉絲客戶端效果，在「項目」里可以發送到手機里預覽實際效果。

3. 編寫代碼

點擊開發者工具左側導航的「編輯」，我們可以看到這個項目，已經初始化并包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js 后綴的是腳本文件，.json 后綴的文件是配置文件，.wxss 后綴的是樣式表文件。買粉絲小程序會讀取這些文件，并生成小程序實例。

下面我們簡單了解這三個文件的功能，方便修改以及從頭開發自己的買粉絲小程序。

app.js 是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用 MINA 提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。

//app.js App({

onLaunch: function () { //調用API從本地緩存中獲取數據 var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

},

getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo)

}else{ //調用登錄接口 wx.login({

success: function () {

wx.getUserInfo({

success: function (res) {

that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo)

}

})

}

});

}

},

globalData:{

userInfo:null }

})

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口 背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }

}

app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規則。

/**app.wxss**/ .買粉絲ntainer { height: 100%; display: flex; flex-direction: 買粉絲lumn; align-items: center; justify-買粉絲ntent:

很赞哦!（74）