接入官方文档接入文档

下面我们开始使用前端来进行接入

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>客服页面</title>

		<style>

			/* 设置页面全屏 */

			html,

			body {

				width: 100%;

				height: 100%;

				margin: 0;

				padding: 0;

				overflow: hidden;

			}

			/* 设置 iframe 元素全屏 */

			iframe {

				width: 100%;

				height: 100%;

				border: none;

			}

		</style>

		<style>

			/* 隐藏底部提供商信息 */

			div[data-v-2b354a2a] {

				display: none !important;

			}

		</style>

	</head>

	<body>

		<script>

			// 获取配置信息

			var APPID = '';

			var TOKEN = '';

			var EncodingAESKey = '';

			// 嵌入到第三方系统-匿名无鉴权

			// var urlWithoutAuth = 'https://chatbot.weixin.qq.com/webapp/' + TOKEN + '?robotName=显示在页面顶部的title信息';

			// 嵌入到第三方系统-有鉴权

			var openid = '用户的唯一标识';

			var nickname = '用户昵称';

			var avatar = '用户头像';

			var robotName = '显示在页面顶部的title信息';

			var urlWithAuth = 'https://chatbot.weixin.qq.com/webapp/auth/' + TOKEN + '?openid=' + openid + '&nickname=' +

				nickname + '&avatar=' + avatar + '&robotName=' + robotName;

			// 创建 iframe 元素

			var iframe = document.createElement('iframe');

			iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');

			// 设置 iframe 的 src 属性

			iframe.src = urlWithAuth;

			// 将 iframe 添加到页面中

			document.body.appendChild(iframe);

		</script>

	</body>

</html>

我们需要注意的就是提交API权限申请通过即可

申请通过后填写在我的前端代码配置地方即可

微信对话平台API开发的更多相关文章

  1. 微信开放平台API开发资料

    微信大概两年前开启了微信公众平台的API供开发者使用,从账号登陆.消息发送.用户账号管理.公众号菜单.客服接口.微信商店接口.用户卡券接口 以及微信支付接口.可以说是全方面覆盖了电商所需要的要素,与阿 ...

  2. 微信公众平台PHP开发

    p=932" style="color: rgb(255, 153, 0); text-decoration: none;">微信公众平台PHP开发 2013.05 ...

  3. 微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置（HTML5+jQuery）

    复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示. 图7.1  7.1节文件结构 在location.js中,封装“getLocation”接口,如下: 01 wxJSSD ...

  4. 微信公众平台应用开发：方法、技巧与案例--柳峰，Java语言版本

    他本人的博客:http://blog.csdn.net/lyq8479 作者简介: 刘运强,网名“柳峰”,资深微信公众平台应用开发工程师,国内微信公众平台应用开发的先驱之一,项目经验丰富.他还是一位资 ...

  5. 基于微信公众平台的开发（清华大学第二讲）_Alien的笔记

    基于微信公众平台的开发(清华大学第二讲)_Alien的笔记 基于微信公众平台的开发(清华大学第二讲)

  6. 【课程分享】ASP.NET MVC5&amp;微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)

    对这个课程有兴趣的,能够联系我QQ2748165793 基础知识储备 ASP.NET MVC 5基础(6讲) 第一讲-初识ASP.NET MVC并搭建整合开发环境 第二讲-深入MVC开发模式 第三讲- ...

  7. 微信公众平台开发 - 动手篇。使用weinxinFundation开始一个微信公众平台的开发

    本文主要讲解如何使用 weinxinFundation 进行二次开发. 步骤如下: 1.创建新的web项目. 在eclipse里新建一个dynamicly web project,比如本文叫weixi ...

  8. 用node.js进行微信公众平台的开发

    基本原理 用nodejs怎样来实现对微信公众平台的开发呢? 别的就不多说了,先来简单介绍微信公众平台的基本原理. 微信服务器就相当于一个转发服务器,终端(手机.Pad等)发起请求至微信服务器,微信服务 ...

  9. C#微信公众平台账号开发，从零到整，步骤详细。

    想到微信的火热,想到其他公司开发手游,如雷电,酷跑类的,都不是很火,但是弱智的“打飞机”和“天天酷跑”却是那么火热.于是乎,想做个微信营销的软件.首先想到的是手机连电脑wifi,用抓包工具抓微信的包, ...

  10. 微信公众平台java开发详解（工程代码+解析）

    原文:http://blog.csdn.net/pamchen/article/details/38718947 说明:本次的教程主要是对微信公众平台开发者模式的讲解,网络上很多类似文章,但很多都让初 ...

随机推荐

  1. django读取数据库导出excel

    路由 path(r'^export/xls/$', views.export_excel, name='export_excel'), 函数 import xlwt from django.http ...

  2. 【每日一题】23.Removal (计数DP)

    补题链接:Here 计数DP讲解:Here 这是一个计数类的dp dp[i][j]表示前i个数字中,删除j个元素的方案数 很容易得到转移方程:\(f[i][j] = f[i - 1][j - 1] + ...

  3. 全国城市地级市区县sql

    全国城市地级市区县sql CREATE TABLE `region` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar( ...

  4. vue中mixin作用

  5. C++ ——vector数组笔记

    vector 是 C++ 标准库中的一个动态数组容器(Sequence Container),它可以自动管理内存大小,可以在运行时根据需要动态增长或缩小.它是一个非常常用且强大的容器,用于存储一系列元 ...

  6. JMS微服务开发示例（四）把配置文件appsettings.json 部署在网关，共享给其他相同的微服务

    通常,多个相同的微服务器,它们的appsettings.json配置文件的内容都是一样的,如果,每次修改配置文件,都要逐个替换,那就太繁琐了,我们可以利用网关的文件共享功能,实现配置文件的统一更新. ...

  7. [转帖]NET Framework 版本和依赖关系

    https://learn.microsoft.com/zh-cn/dotnet/framework/migration-guide/versions-and-dependencies 每个版本的 . ...

  8. [转帖]MySQL运维实战（2）MySQL用户和权限管理

    https://segmentfault.com/a/1190000044514403 作者:俊达 引言 MySQL数据库系统,拥有强大的控制系统功能,可以为不同用户分配特定的权限,这对于运维来说至关 ...

  9. MySQL 8.2.0部署安装验证

    MySQL 8.2.0部署安装验证 背景 昨天捯饬了半天Oracle23c Free版本发现自己白忙活了. 然后想着继续看一下 MySQL8.2. 看看会不会又继续白忙活 下载与安装 https:// ...

  10. [转帖]从小白到精通：揭秘perf工具的全部功能与操作技巧

    https://zhuanlan.zhihu.com/p/664396453 ​ 目录 收起 一.引言 二.理解perf工具的基本概念 三.安装与配置perf工具 3.1.不同操作系统的perf工具安 ...