騰訊微搭小程序獲取微信用戶信息

無論你對低代碼開發(fā)的愛與恨, 微信生態(tài)的強大毋庸置疑. 因此熟悉微搭技術(shù)還是很有必要的! 在大多數(shù)應(yīng)用中, 都需要獲取和跟蹤用戶信息. 本文就微搭中如何獲取和存儲用戶信息進行詳細演示, 因為用戶信息的獲取和存儲是應(yīng)用的基礎(chǔ).

一. 微搭

每個微搭平臺都宣稱使用微搭平臺可以簡單拖拽即可生成一個應(yīng)用, 這種說法我認為是"夸大其詞". 其實微搭優(yōu)點大致來說, 前端定義了很多組件, 為開發(fā)人員封裝組件節(jié)省了大量的時間,這是其一; 其二對后端開發(fā)來說, 省去了服務(wù)器的部署(并沒有省去后端開發(fā)), 減少了后端編碼量.

基于上面的認知, 我認為學(xué)習(xí)微搭開發(fā)應(yīng)用的人員依然需要如下知識:

1.1 前端

1. HTML

因為大量使用平臺提供的已經(jīng)封裝好的組件, 所以微搭對HTML要求較低, 但是起碼應(yīng)該了解容器(div)的概念, 所以html學(xué)習(xí)成本幾乎可以忽略.

2. CSS

微搭應(yīng)用對CSS的要求一點不比web開發(fā)低, 因此建議前端重點要學(xué)習(xí)CSS的知識. 其中比較重要的知識點有:

• 盒子模型
• 彈性布局

1.2 后端

大部分低代碼開發(fā)平臺都是基于nodejs, 因此掌握javascript是必須的. 如果你懼怕任何編程語言, 而又寄希望微搭來拯救你, 這是一個黃粱美夢! javascript版本迭代的挺快的, 建議真想成為程序員, 基礎(chǔ)學(xué)習(xí)后,深入一下ts, 因為ts強化了類型檢查, 它使得這個腳本語言變得更加強大, 非常類似與python, java等.

1. 騰訊微搭數(shù)據(jù)源

騰訊微搭數(shù)據(jù)源采用了文本數(shù)據(jù)庫, 當(dāng)然跟關(guān)系型數(shù)據(jù)庫的操作很多相通的地方, 而且平臺提供了基本的數(shù)據(jù)庫增刪改查的方法, 方便開發(fā)者使用. 但是復(fù)雜的邏輯依然需要使用javascript來進行云開發(fā), 這也是強調(diào)學(xué)習(xí)微搭中, 學(xué)習(xí)javascript重要的原因.

二. 實戰(zhàn)

接下來就如何獲取和存儲用戶信息進行一個小程序應(yīng)用開發(fā). 前提是你已經(jīng)注冊了騰訊低代碼開發(fā)平臺, 目前該平臺提供三個月免費使用. 注冊地址

2.1 創(chuàng)建數(shù)據(jù)源

數(shù)據(jù)源你可以理解為后臺數(shù)據(jù)庫, 用來保存信息的地方. 為了保護老系統(tǒng)數(shù)據(jù)庫資源, 微搭目前支持兩種數(shù)據(jù)源: 自建數(shù)據(jù)源和外部數(shù)據(jù)源, 外部數(shù)據(jù)源就是使用原有的數(shù)據(jù)庫, 比如老系統(tǒng)的mysql, sqlserver等關(guān)系型數(shù)據(jù)庫; 自建數(shù)據(jù)源, 就是微搭平臺提供的文本數(shù)據(jù)庫, 這里我們采用自建數(shù)據(jù)源!

• 在控制臺側(cè)面導(dǎo)航找到"數(shù)據(jù)源"
• 展開"數(shù)據(jù)源", 找到"數(shù)據(jù)模型"
• 右側(cè)內(nèi)容區(qū), 可以看到"新建數(shù)據(jù)模型"

上述操作如下圖所示:

接下來在彈出的窗口中, 輸入數(shù)據(jù)源名稱和標識, 如下圖所示:

完成后點擊"開始創(chuàng)建"按鈕, 平臺打開添加模型字段窗口, 如下圖所示:

注意, 微搭平臺會為每個數(shù)據(jù)模型定義了很多字段, 你可以暫時忽略這些, 直接點擊下面的"添加字段", 彈出如下窗口, 進行具體某個字段的定義.

設(shè)置完成后, 點擊"確定"按鈕. 繼續(xù)添加下一個字段. 所有字段添加完成后, 如下所示:

最后點擊下面的"確定"按鈕, 就完成了"用戶信息"數(shù)據(jù)源的創(chuàng)建.

2.2 創(chuàng)建應(yīng)用

• 回到"控制臺", 點擊"創(chuàng)建應(yīng)用";

• 在右側(cè)內(nèi)容區(qū), 選擇"新建自定義應(yīng)用"
  

• 填寫應(yīng)用應(yīng)用名稱, 并選擇小程序

• 為應(yīng)用添加一個頁面, 默認添加一個主頁(index)

2.4 定義變量

變量是用來保存信息的,分為全局變量和頁面變量, 全局變量就是可以供所有頁面訪問的變量, 而頁面變量只有中定義的頁面內(nèi)使用, 這里定義兩個變量:

• openid: 全局變量, 用來保存從云平臺獲取到的openid, 每個微信用戶都有唯一的openid.
• userInfo: 頁面變量, 用來保存用戶信息.

具體操作, 在主應(yīng)用頂部菜單中有一個變量定義按鈕

點擊打開后, 如下圖所示:

注意, 上圖呈現(xiàn)的是定義好后的效果, 開始定義的時候, 點擊"全局"后的"+", 就會彈出全局變量的定義, 把openid定義為一個空字符串就可以了, userInfo要定義在首頁中, 這里的初始值稍微復(fù)雜了點, 是一個對象類型.

2.5 代碼編寫

1. 獲取微信用戶標識

返回控制臺, 找到"自定義連接器", 點擊"新建自定義連接器"按鈕, 如下圖所示:

之后彈出如下窗口:

填寫名稱, 標識, 選擇"從空白創(chuàng)建", 完成后點擊"開始創(chuàng)建"按鈕. 接著顯示如下:

點擊"立即創(chuàng)建", 顯示如下:

根據(jù)上面圖示, 最后點擊"查看詳情", 這個方法的代碼就顯示出來. 將里面代碼全部刪除, 然后將下面代碼寫入:

// 自定義連接器 const cloud = require('wx-server-sdk') cloud.init({env: cloud.DYNAMIC_CURRENT_ENV })module.exports = async function(params, context){const wxContext = cloud.getWXContext()return {openid: wxContext.OPENID,appid: wxContext.APPID, } }

另外一定要注意為該方法添加"出參", 也就是返回值. 如下:

關(guān)于自定義連接器：

一般來說， 某個自定義連接器服務(wù)于特定數(shù)據(jù)源。

也可以不依附于特定數(shù)據(jù)源， 比如我們這里建立的這個， 因為并沒有訪問特定數(shù)據(jù)源 ， 而是訪問了云函數(shù)， 因此可以獨立于特定的數(shù)據(jù)源。

2. 使用“自定義連接器”

使用上面定義的“自定義連接器”， 獲取用戶的openid， 并保存到全局變量openid中，合理位置是在全局生命周期， 也就是在應(yīng)用程序裝載中調(diào)用它。

• 在主應(yīng)用的頂部折疊菜單中，找到“低代碼編輯器”菜單

• 打開低代碼編輯器后， 可以看到最上面是應(yīng)用生命周期函數(shù)， 下面的是每個頁面的生命周期函數(shù)。
  

• 在應(yīng)用生命周期（全局生命周期中）輸入下面的代碼：

  async onAppLaunch(launchOpts) {//console.log('---------> LifeCycle onAppLaunch', launchOpts)const objData = await app.cloud.dataSources.getopenid_a6gatyp.getopenid();console.log(objData)app.dataset.state.openid=objData.openid; //賦給全局變量},

  其中的getopenid_a6gatyp就是我們定義的“自定義連接器”的標識， getopenid()為連接器中的方法。 一定要根據(jù)自己的定義修改！

至此我們終于完成獲取用戶openid的工作， 然后我們來搭建前端頁面。

2.6 前端頁面

前端頁面大綱樹如下：

前面兩個容器結(jié)果完全一樣，但是用途是完全不同的。 但是第一個容器中的圖片和文本都綁定了數(shù)據(jù)，但是是有條件的顯示， 這是關(guān)鍵。下面是顯示的條件：

$page.dataset.state.userInfo.openid!=''

也就是說， 在用戶沒有登錄的時候，這個容器是不會顯示的！

第二個容器， 也是條件顯示的， 只是條件不同了， 如下：

$page.dataset.state.userInfo.openid==''

這個條件的意思是， 當(dāng)沒有登錄時顯示。也就是上圖最右側(cè)的效果。

那么如何獲取用戶的信息？我們?yōu)椤暗卿洝卑粹o添加事件處理代碼， 在其中獲取微信用戶的信息。

2.6.1 添加按鈕事件處理

• 編寫事件處理代碼

  需要再次回到“低代碼編輯器”， 選擇“index”頁面中的“handler”， 添加事件處理方法
  

上述代碼中， 下面的一行將獲取的數(shù)據(jù)存入了用戶信息數(shù)據(jù)庫：

let ret =await app.dataSources.userInfo_lb6ln7w.wedaCreate($page.dataset.state.userInfo);

userInfo_lb6ln7w是你創(chuàng)建的用戶信息數(shù)據(jù)源的標識符， 一定要根據(jù)自己的修改。

• 綁定事件
  

2.7 測試

程序完成后， 如何才能看到效果？ 那么首先就要發(fā)布， 這里發(fā)布為“體驗版”即可。待發(fā)布完成后， 會提供二維碼， 微信掃碼后， 即可測試。

感謝那些有共同興趣的哥們， 也感謝那些把自己理解分享的人， 這里特別感覺“低代碼布道師”。

總結(jié)

以上是生活随笔為你收集整理的腾讯微搭小程序获取微信用户信息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。