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

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

一. 微搭

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

基于上面的認知, 我認為學習微搭開發應用的人員依然需要如下知識:

1.1 前端

1. HTML

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

2. CSS

微搭應用對CSS的要求一點不比web開發低, 因此建議前端重點要學習CSS的知識. 其中比較重要的知識點有:

• 盒子模型
• 彈性布局

1.2 后端

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

1. 騰訊微搭數據源

騰訊微搭數據源采用了文本數據庫, 當然跟關系型數據庫的操作很多相通的地方, 而且平臺提供了基本的數據庫增刪改查的方法, 方便開發者使用. 但是復雜的邏輯依然需要使用javascript來進行云開發, 這也是強調學習微搭中, 學習javascript重要的原因.

二. 實戰

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

2.1 創建數據源

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

• 在控制臺側面導航找到"數據源"
• 展開"數據源", 找到"數據模型"
• 右側內容區, 可以看到"新建數據模型"

上述操作如下圖所示:

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

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

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

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

最后點擊下面的"確定"按鈕, 就完成了"用戶信息"數據源的創建.

2.2 創建應用

• 回到"控制臺", 點擊"創建應用";

• 在右側內容區, 選擇"新建自定義應用"
  

• 填寫應用應用名稱, 并選擇小程序

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

2.4 定義變量

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

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

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

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

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

2.5 代碼編寫

1. 獲取微信用戶標識

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

之后彈出如下窗口:

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

點擊"立即創建", 顯示如下:

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

// 自定義連接器 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, } }

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

關于自定義連接器：

一般來說， 某個自定義連接器服務于特定數據源。

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

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

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

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

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

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

  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()為連接器中的方法。 一定要根據自己的定義修改！

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

2.6 前端頁面

前端頁面大綱樹如下：

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

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

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

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

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

這個條件的意思是， 當沒有登錄時顯示。也就是上圖最右側的效果。

那么如何獲取用戶的信息？我們為“登錄”按鈕添加事件處理代碼， 在其中獲取微信用戶的信息。

2.6.1 添加按鈕事件處理

• 編寫事件處理代碼

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

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

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

userInfo_lb6ln7w是你創建的用戶信息數據源的標識符， 一定要根據自己的修改。

• 綁定事件
  

2.7 測試

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。