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

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

一. 微搭

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

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

1.1 前端

1. HTML

因?yàn)榇罅渴褂闷脚_(tái)提供的已經(jīng)封裝好的組件, 所以微搭對(duì)HTML要求較低, 但是起碼應(yīng)該了解容器(div)的概念, 所以html學(xué)習(xí)成本幾乎可以忽略.

2. CSS

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

• 盒子模型
• 彈性布局

1.2 后端

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

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

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

二. 實(shí)戰(zhàn)

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

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

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

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

上述操作如下圖所示:

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

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

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

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

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

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

• 回到"控制臺(tái)", 點(diǎn)擊"創(chuàng)建應(yīng)用";

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

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

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

2.4 定義變量

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

• openid: 全局變量, 用來(lái)保存從云平臺(tái)獲取到的openid, 每個(gè)微信用戶都有唯一的openid.
• userInfo: 頁(yè)面變量, 用來(lái)保存用戶信息.

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

點(diǎn)擊打開(kāi)后, 如下圖所示:

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

2.5 代碼編寫

1. 獲取微信用戶標(biāo)識(shí)

返回控制臺(tái), 找到"自定義連接器", 點(diǎn)擊"新建自定義連接器"按鈕, 如下圖所示:

之后彈出如下窗口:

填寫名稱, 標(biāo)識(shí), 選擇"從空白創(chuàng)建", 完成后點(diǎn)擊"開(kāi)始創(chuàng)建"按鈕. 接著顯示如下:

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

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

// 自定義連接器 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)于自定義連接器：

一般來(lái)說(shuō)， 某個(gè)自定義連接器服務(wù)于特定數(shù)據(jù)源。

也可以不依附于特定數(shù)據(jù)源， 比如我們這里建立的這個(gè)， 因?yàn)椴](méi)有訪問(wèn)特定數(shù)據(jù)源 ， 而是訪問(wèn)了云函數(shù)， 因此可以獨(dú)立于特定的數(shù)據(jù)源。

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

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

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

• 打開(kāi)低代碼編輯器后， 可以看到最上面是應(yīng)用生命周期函數(shù)， 下面的是每個(gè)頁(yè)面的生命周期函數(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就是我們定義的“自定義連接器”的標(biāo)識(shí)， getopenid()為連接器中的方法。 一定要根據(jù)自己的定義修改！

至此我們終于完成獲取用戶openid的工作， 然后我們來(lái)搭建前端頁(yè)面。

2.6 前端頁(yè)面

前端頁(yè)面大綱樹(shù)如下：

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

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

也就是說(shuō)， 在用戶沒(méi)有登錄的時(shí)候，這個(gè)容器是不會(huì)顯示的！

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

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

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

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

2.6.1 添加按鈕事件處理

• 編寫事件處理代碼

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

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

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

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

• 綁定事件
  

2.7 測(cè)試

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

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

總結(jié)

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

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