微信小程序（组件--表单：按钮微信开放能力与客服）

短命女 2023-06-19 09:46 1阅读 0赞

【前言】  
本节主要讲解下按钮组件之open-type —微信开放能力常用属性值  
①contact客户会话  
②share分享转发  
③getPhoneNumber获取用户手机号  
④getUserInfo获取用户信息  
⑤openSetting授权设置页  
⑥feedback意见反馈页面

# 表单组件 #

按钮组件之open-type —微信开放能力常用属性值

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>contact</td> 
   <td>打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息</td> 
  </tr> 
  <tr> 
   <td>share</td> 
   <td>触发用户转发</td> 
  </tr> 
  <tr> 
   <td>getPhoneNumber</td> 
   <td>获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息</td> 
  </tr> 
  <tr> 
   <td>getUserInfo</td> 
   <td>获取用户信息，可以从bindgetuserinfo回调中获取到用户信息</td> 
  </tr> 
  <tr> 
   <td>openSetting</td> 
   <td>打开授权设置页，可以从bindopensetting回调中获取相关设置</td> 
  </tr> 
  <tr> 
   <td>feedback</td> 
   <td>打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容</td> 
  </tr> 
 </tbody> 
</table>

### 按钮组件 ###

###### open-type 微信开放能力属性值----contact客服会话 ######

<table> 
 <thead> 
  <tr> 
   <th>contact</th> 
   <th>打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息。</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]

> 注意：  
> ①开发者工具暂不支持打开客服会话，所以需要真机测试  
> ②聊天和普通对话一样，会被放置到小程序客服消息栏

开启客服消息推送需要在小程序后台配置，稍后结合客户反馈讲解  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

###### open-type 微信开放能力属性值—share转发 ######

<table> 
 <thead> 
  <tr> 
   <th>share</th> 
   <th>触发用户转发</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

> 转发注意事项：按需出现、尊重意愿。

开发者工具样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]  
真机调试：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]  
转发注意事项：

1.  按需出现：并非所有页面都适合放置转发按钮，涉及用户隐私的非公开内容，或可能打断用户完成当前操作体验的场景，并不推荐使用转发。同时，由于转发过程中，微信**将截取用户屏幕图像作为配图**，因此，需要注意帮助用户屏蔽个人信息。
2.  尊重意愿：理所当然，并非所有的用户，都喜欢与朋友分享你的小程序。因此，它不应该成为一个诱导或强制行为，如转发后才能解锁某项功能等。所以这类做法不仅不被推荐，还会违反小程序《运营规范》。

###### open-type 微信开放能力属性值—getPhoneNumber获取用户手机号 ######

<table> 
 <thead> 
  <tr> 
   <th>getPhoneNumber</th> 
   <th>获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

> **注意**：该接口目前只针对非个人开发者，且完成了认证的小程序开放

###### open-type 微信开放能力属性值—getUserInfo获取用户信息 ######

<table> 
 <thead> 
  <tr> 
   <th>getUserInfo</th> 
   <th>获取用户信息，可以从bindgetuserinfo回调中获取到用户信息</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

![在这里插入图片描述][20191205171301886.png]  
有的小程序在设计时规定了登录页面，在登录页授权后才可以登录使用。  
一般为点击按钮，在授权框中点击授权，然后才能登录使用

<button open-type="getUserInfo" bindgetuserinfo="bindgetuserinfoFn">开启小程序之旅</button>

/**获取用户回调信息 */
      bindgetuserinfoFn(option){ 
        console.log(option)
      },

授权成功后，回调函数会输出打印相关参数。  
![在这里插入图片描述][20191205171735742.png]  
getUserInfo获取用户信息成功后，便不会再次出现授权弹框。成功授权后，再次点击时不会再出现授权弹框  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]

###### open-type 微信开放能力属性值—openSetting授权设置页 ######

<table> 
 <thead> 
  <tr> 
   <th>openSetting</th> 
   <th>打开授权设置页，可以从bindopensetting回调中获取相关设置</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

<button open-type="openSetting" bindopensetting="bindopensettingFn">打开授权设置页</button>

/**获取授权页面相关数据 */
      bindopensettingFn(option){ 
        console.log(option)
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]  
openSetting打开授权设置页后发现此时为开启状态，关闭开闭后，返回上一页面，此时会在控制台输出相关配置信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]

*  open-type 微信开放能力属性值—openSetting授权设置页
 *  openSetting打开授权设置页与getUserInfo获取用户信息按钮对比  
    ![在这里插入图片描述][20191205184655211.png]
 *  开启小程序之旅授权成功后，此时再点击openSetting打开授权设置页会发现此时开关为打开状态；在设置页关闭开关后，再返回上一页面，再点击getUserInfo时会再次 弹框授权提示。
 *  两者可以互相切换

###### open-type 微信开放能力属性值—feedback意见反馈 ######

<table> 
 <thead> 
  <tr> 
   <th>feedback</th> 
   <th>打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

点击意见反馈会会跳转到意见反馈页面。  
注意：需要在真机上进行测试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 8]  
意见反馈成功后，管理员可以登录“小程序后台→用户反馈界面”查看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 9]  
点击操作即可绑定客服账号，进行沟通交流  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 10]

# 客服相关 #

### 网页端客服 ###

注意：网页端客服类似于网页版微信，但两者不会互相影响，即该模块虽然是以聊天者状态存在，但可以同时登录

### 移动端小程序客服 ###

除了网页端客服，还可以登录移动端小程序客服  
进入后选择对应的小程序即可进入客户界面

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205170212397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191205170319201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191205170711824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191205170809689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191205171301886.png]: https://img-blog.csdnimg.cn/20191205171301886.png
[20191205171735742.png]: https://img-blog.csdnimg.cn/20191205171735742.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191205171830922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191205172326800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191205172709985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191205184655211.png]: https://img-blog.csdnimg.cn/20191205184655211.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191205190122635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191205190838116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191205191553446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191205191927279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70