简单玩转微信聊天工具模式

第一步：

`"subPackages": [
		{
			"root": "packageA",
			"name": "alias",
			"pages": [
				"pages/cat/index"
			],
			"independent": true,
			"renderer": "skyline",
			"componentFramework": "glass-easel"
		}
]，
"chatTools": [
		{
			"root": "packageA",
			"entryPagePath": "pages/cat/index",
			"desc": "群签到工具",
			"scopes": [
				"scope.userLocation"
			]
		}
	],

首先在小程序的pages.json中开启独立分包并开启skyline渲染模式，
这里我将分包定义为packageA这个文件夹下面 页面在pages/cat/index 这里我暂时是使用的原生的方式来创建的这个页面路径，这里的chatTools是一个固定的配置内容，其中root指向的是分包的根目录，entryPagePath只想的是目录文件 desc必须要符合文档的规定，具体可以参考一下文档地址
聊天工具文档地址

第二步：manifest.json文件内的配置如下

 "subPackages" : [
            {									
                "root" : "packageA",			
                "name" : "alias",
                "pages" : [ "pages/cat/index" ],
                "independent" : true,
                "renderer" : "skyline",
                "componentFramework" : "glass-easel"
            }
        ],
        "chatTools" : [
            {
                "root" : "packageA",
                "entryPagePath" : "pages/cat/index",
                "desc" : "群签到工具",
                "scopes" : [ "scope.userLocation" ]
            }
        ]`

配置可能存在一些问题如果在实际运行中有问题可以及时反馈
以上配置完成后就可以在页面中调用对应的api进入聊天工具模式了
以下是api的调用方法：
这里chatType:3 是因为当前项目需要只针对群聊 所以这里只对3进行了示范
首先在需要进入的位置调用wx.openChatTool api打开微信选择 选择目标群聊后进入到pages/cat/index这个页面

  wx.openChatTool({
            url: '/packageA/pages/cat/index', 
            chatType: 3,
            success: (res) => {
              console.log('打开聊天工具成功:', res)
            },
            fail: (err) => {
              console.error('打开聊天工具失败:', err)
            }
          })

进入页面后这里需要根据具体需求完善页面内容 接着使用 wx.selectGroupMembers来选择群内的具体成员

  wx.selectGroupMembers({
      success: (res) => {
        console.log('选择的群成员:', res)
        // 更新成员列表
        this.setData({
          members: res.members
        })
      },
      fail: (error) => {
        console.log('选择群成员失败:', error)
        wx.showToast({
          title: '选择失败',
          icon: 'error',
          duration: 2000
        })
      }
    })

通过以上的方法可以拿到选择的群成员在群内的一个固定的id 这个数据是一个数据集合 可以通过下面的开放标签来渲染出对应的头像和昵称

 <open-data-list type="groupMembers" members="{{members}}">
     <view class="userinfo" slot:index>
           <open-data-item class="avatar" type="userAvatar" index="{{index}}" />
           <view class="user-detail">
           		<open-data-item class="nickname" type="userNickName" index="{{index}}" />
       	   </view>
      </view>
</open-data-list>

以上就是简单的进入工具 以及选择指定成员后拿到指定的成员的id并渲染列表处理啊

如果在进入工具时选择的是某个好友的话 在进入使用wx.selectGroupMembers的话 此时不会弹出成员选择的内容 会直接返回当前微信以及选择的好友微信的id 再通过开放标签渲染的话就会两个都渲染出来 如果只想要选择的好友的内容的话就需要使用下面的方法 先获取当前微信的id 然后在

this.setData({
   members: res.members
})

这个里面去掉当前微信的id即可
当然获取当前微信的id需要后端的配置

 wx.getGroupEnterInfo({
              allowSingleChat: false,
              needGroupOpenID: true,
              success: (res) => {
                console.log('原始加密体', res)
                wx.request({
                  url: 'https://xxxx.cn/mini/user/getGroupEnterInfo',
                  method: 'POST',
                  header: { 'content-type': 'application/json' },
                  data: { session_key: sessionKey, iv: res.iv, encryptedData: res.encryptedData },
                  success: function (res) {
                    console.log('解析后的用户id', res.data)
                  },
                })
  })

本期就到这了 后面会更新 在聊天工具中实现分享小程序卡片的内容 以及对应的完成系统消息 以及未完成的提醒内容