微信公众号是html页面吗,微信公众号网页开发
基本配置
1.设置—公众号设置—功能设置—配置JS接口安全域名
安全域名配置规则如下
2.开发—基本配置
开发者密码第一次使用需要重新设置
记录 开发者ID(AppID) 开发者密码(AppSecret)后面会用到
3.IP白名单配置
推荐填写当前本地开发IP地址和服务器IP地址
本地开发地址获取方式
服务器IP地址(根据自己的服务器Ip地址自行填写)
多个IP地址填写用回车隔开
4重要的一步
在:微信公众号-开发-接口权限查看想要调用的开发接口是否可用
如果有相关接口权限无法开启,推荐使用:微信公众平台-开发-开发者工具-公众平台测试帐号开发
开始开发
1.引入JS文件
2通过config接口注入权限验证配置(最重要的一步)
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
appID(前面在微信公众号基本配置中已经拿到了)
jsApiList:['uploadImage','updateAppMessageShareData'] (例:上传图片接口,和自定义分享接口)
签名算法(微信官方提供)
jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):https://developers.weixin.qq....
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi...
2.1签名获取拆解
第一步GET请求access_token
grant_type是获取access_token填写client_credential
appid是第三方用户唯一凭证
secret是第三方用户唯一凭证密钥,即appsecret**
appid 和 secret 在前面的基本配置中其实都已经拿到。但是由于开发者密码(AppSecret)是校验公众号开发者身份的密码,具有极高的安全性。不能直接暴露在前端代码中,所以access_token的请求需在后端完成,这里签名的生成过程都在后端完成。
当前以node搭建后端服务
//获取到access_token示例
var url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
request(url, function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log("access_token值" +JSON.parse(body).access_token)
}
});
第二步GET请求jsapi_ticket
jsapi_ticket的有效期为7200秒(不必反复请求)
https://api.weixin.qq.com/cgi...
用第一步获取到的access_token的值进行请求
//
var url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`
request(url, function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log("jsapi_ticket值" + JSON.parse(body).ticket);
}
});
第三步生成算法签名
const timestamp = parseInt(Date.now() / 1000) //生成签名的时间戳
const nonceStr = Math.random().toString(36).substr(2, 15) //生成签名的随机串
let jsapi_ticket //在第二步生成
let url//签名用的url必须是调用JS接口页面的完整URL(前端请求服务端接口带入)
const sha1 = require('sha1')//这里需要引入一个插件npm install sha1
router.get('/', (req, res, next) => {
const url = decodeURIComponent(req.query.url)//这里的url采用前端加密,后端解密的形式获取
const timestamp = parseInt(Date.now() / 1000)
const nonceStr = Math.random().toString(36).substr(2, 15)
let jsapi_ticket = "在第二步拿到了"
const params = {
nonceStr,
jsapi_ticket,
timestamp,
url
}
const string = Object.keys(params).sort().map(key => `${key.toLowerCase()}=${params[key]}`).join('&')
const signature = sha1(string)//生成的签名
res.status(200).json({//将参数返回给前端
timestamp,
signature,
nonceStr
});
})
module.exports = router;
3前端静态页面实际调用
Document
分享页面
function wxFN(){
$.ajax({
type: "get",
url: `http://*************/api/wx?url=${encodeURIComponent(location.href.split('#')[0])}`,
success: function(data) {
console.log(data);
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ['updateAppMessageShareData'] // 必填,需要使用的JS接口列表
});
}
});
}
wxFN()
wx.ready(function() { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function() {
alert("成功")
// 设置成功
}
})
});
wx.error(function(res) {
console.log('err', res)
});
4常见错误及解决方法(微信提供)
调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息。以下为常见错误及解决方法:
invalid url domain当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,仅支持80(http)和443(https)两个端口,因此不需要填写端口号(一个appid可以绑定三个有效域名,见 ]目录1.1.1)。
invalid signature签名错误。建议按如下顺序检查:
确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)
微信公众号是html页面吗,微信公众号网页开发相关推荐
- 公众号里面套页面_微信公众号页面模板有什么用?开通的方法是什么?
微信公众号页面模板是微信公众号里面的功能哦,如果你开启了微信公众号文章原创功能,那么你是可以去开通页面模板功能的,很多的微信公众号管理员不知道微信公众号页面模板有什么用,接下来小编会为大家说明哦. 微 ...
- 企业实战, java、spingboot微信扫码支付,页面生成微信二维码,微信扫码付款,websocket通知,处理订单!复制粘贴代码直接开干
一 功能描述: 前端选择商品后生成二维码,用户微信扫码支付 备注: 红色为后台给前端的接口 1.前端 选择确认商品 2.调后台生成订单接口 (状态未付款) 3.返回订单的详情(订单确认页面 ...
- h5在微信自定义分享php,h5页面自定义微信分享
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 开发准备:公众号绑定好需要开发的服务器域名. ...
- 微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
- 微信公众号是html页面吗,微信公众号怎么使用页面模板功能?微信公众号页面模板功能怎么使用?...
软件大小: 56.0 MB 软件版本: 4.0.0 软件类型: 文本处理 查看详情 直接下载 yesky 标签: 微信公众号怎么使用页面模板功能?微信公众号页面模板功能怎么使用?微信公众号后台推出了& ...
- 微信自动关闭内置浏览器页面,返回公众号窗口 WeixinJSBridge.call('closeWindow')
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 微信自动关闭内置浏览器页面,返回公众号窗口
自动关闭当前浏览器内置函数:WeixinJSBridge.call('closeWindow'); <%@ page language="java" contentType= ...
- 微信公众号关闭H5页面,回到公众号首页
document.addEventListener('WeixinJSBridgeReady', function () { WeixinJSBridge.call('closeWindow'); } ...
- php微信分享带缩略图,静态页面实现微信分享带缩略图、标题和描述
在前一篇文章<微信转发或分享朋友圈带缩略图.标题和描述的实现方法>中,余斗已经教大家如何实现在自有网站上实现微信分享后自带缩略图.标题和描述,这里是在动态php页面中实现,这里有很大的局限 ...
- 微信html5网站 集成,H5页面接入微信授权
授权步骤 用户同意授权,获取code 通过code换取网页授权access_token 拉取用户信息(需scope为 snsapi_userinfo) 项目依赖 SpringBoot:2.1.4.RE ...
最新文章
- 深度学习框架的内存优化机制
- jvm五:编译期不能确定常量的值
- Cobbler Web界面提示报错 “Internal Server Error”
- oracle ogg 删除,OGG导致归档无法RMAN删除一例
- JVM调优之:垃圾收集器
- connot+connect+mysql+127.0.0.1_无法远程连接 MySQL 的解决方法
- Centos 6.8 为自己打造Linux小系统
- python基础-大杂烩
- 在Word2016公式编辑器中一招搞定等号对齐问题
- 深圳神州行今日起单向收费 零月租成套餐亮点
- 需要获取trustedinstaller权限才能删除文件,删不了
- 2018 第九届 蓝桥杯 JavaB组 摔手机(动态规划解决)
- 服务器c盘有个inetpub文件夹,Win10怎么删除c盘下的inetpub文件夹
- 苹果耳机安卓手机可以用吗_想知道安卓手机用一年会卡,苹果手机不卡,这个问题出现在那吗...
- 软件测试用例设计之Pairwise算法
- 《运筹学基础》的思维导图
- 【C++训练】 一个球从100m高度自由落下,每次落地后反跳回原来高度的一半,再落下,再反弹.求它在第N次落地时共经过多少米?
- SQL创建某一年日历表
- “笨办法”学Python3,Zed A. Shaw,习题20
- 构建神经网络模型方法,神经网络建立数学模型
热门文章
- eclipse插件windowsBuilder
- 聊天机器人的“高情商”炼成术
- 转载:真正高人的解读——《三体 读后感》【宇宙尺度的战争】
- 陈吉平的Oracle职业生涯:兴趣与思考 成败之所系
- clientHeight、offsetHeight、scrollHeight、scrollTop的区别以及上拉加载的实现
- circ2Traits:环状RNA相关疾病数据库
- Word文档编号工具,Word标题,图、表手动编号工具
- python模拟账号登录_用Python(Tornado)模拟登录小米帐号
- 老男孩linux——36期学员
- GNS3专用 Cisco IOS下载