腾讯微搭小程序获取微信用户信息

无论你对低代码开发的爱与恨, 微信生态的强大毋庸置疑. 因此熟悉微搭技术还是很有必要的! 在大多数应用中, 都需要获取和跟踪用户信息. 本文就微搭中如何获取和存储用户信息进行详细演示, 因为用户信息的获取和存储是应用的基础.

一. 微搭

每个微搭平台都宣称使用微搭平台可以简单拖拽即可生成一个应用, 这种说法我认为是"夸大其词". 其实微搭优点大致来说, 前端定义了很多组件, 为开发人员封装组件节省了大量的时间,这是其一; 其二对后端开发来说, 省去了服务器的部署(并没有省去后端开发), 减少了后端编码量.

基于上面的认知, 我认为学习微搭开发应用的人员依然需要如下知识:

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,  
  }
}

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

关于自定义连接器：

1. 一般来说， 某个自定义连接器服务于特定数据源。
2. 也可以不依附于特定数据源， 比如我们这里建立的这个， 因为并没有访问特定数据源 ， 而是访问了云函数， 因此可以独立于特定的数据源。

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 测试

程序完成后， 如何才能看到效果？ 那么首先就要发布， 这里发布为“体验版”即可。待发布完成后， 会提供二维码， 微信扫码后， 即可测试。

感谢那些有共同兴趣的哥们， 也感谢那些把自己理解分享的人， 这里特别感觉“低代码布道师”。