接入官方文档接入文档

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

<!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. 火山引擎 DataTester“智能发布”:覆盖产品研发、测试、上线全流程,一站式智能管理 A/B 实验

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 A/B 测试是企业产品新老功能迭代时,进行效果监测的方法.通过 A/B 测试,可以提高功能改动给产品带来正向收益的确定性. ...

  2. Error unprotecting the session cookie.The payload was invalid.

    .Net Core 3.0 warn: Microsoft.AspNetCore.Session.SessionMiddleware[7] Error unprotecting the session ...

  3. Sublime Json 格式化

    Ctrl+Shift+P 安装  pretty json  Ctrl+Alt+J

  4. FileLock 多进程文件锁

    FileLock是文件锁,它能保证同一时间只有一个进程(程序)能够修改它,或者都只可以读,这样就解决了多进程间的同步文件,保证了安全性.但是需要注意的是,它进程级别的,不是线程级别的,他可以解决多个进 ...

  5. Java 网络编程 —— 基于 UDP 的数据报和套接字

    UDP 简介 UDP(User Datagram Protocol,用户数据报协议)是传输层的另一种协议,比 TCP 具有更快的传输速度,但是不可靠.UDP 发送的数据单元被称为 UDP 数据报,当网 ...

  6. Python | 解放双手,用Python实现自动发送邮件

    解放双手,用Python实现自动发送邮件 使用Python实现自动化邮件发送,可以让你摆脱繁琐的重复性业务,节省非常多的时间. Python有两个内置库:smtplib和email,能够实现邮件功能, ...

  7. secure boot(三)secure boot的签名和验签方案

    简介 FIT 格式支持存储镜像的hash值,并且在加载镜像时会校验hash值.这可以保护镜像免受破坏,但是,它并不能保护镜像不被替换. 而如果对hash值使用私钥签名,在加载镜像时使用公钥验签则可以保 ...

  8. P2234

    乐死我了,一道需要用平衡树的算法的题,在我忘了看标签的情况下下意识用了一个普及-难度的超简单思路解决了.当然其中加入了一些半骗分半贪心性质的剪枝. 总之这破算法竟然AC了就离谱,乐死我了 Code # ...

  9. 浅谈 Docker 网络:单节点单容器

    1.Docker 网络模型 Docker 在 1.7 版本中将容器网络部分代码抽离出来作为 Docker 的网络库,叫 libnetwork.libnetwork 中使用 CNM(Container ...

  10. ShardingSphere 使用 ShardingJdbc 与 mybatis plus实现分库分表及读写分离

    本文为博主原创,未经允许不得转载: 目录: 一. 官网及git 地址 二. Apache ShardingSphere 简介 三.spring boot + mybaits plus +shardin ...