技术标签: 微信小程序 微信 jquery javascript
引入微信自带的js脚本
https://res.wx.qq.com/open/js/jweixin-1.6.0.js
配置wx.config,并且增加openTagList开放标签列表(wx-open-launch-weapp)
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: result.timestamp, // 必填,生成签名的时间戳
nonceStr: result.noncestr, // 必填,生成签名的随机串
signature: result.signature,// 必填,签名
jsApiList: ['chooseImage', 'previewImage'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表
});
wx-open-launch-weapp标签的使用
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="需要跳转小程序的路径"
>
<template>
<button class="button" style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">跳转</button>
</template>
</wx-open-launch-weapp>
使用详情请参考官方文档
后端获取签名参数详情接口请参考微信开发文档的附录1-JS-SDK使用权限签名算法
注意事项:
1、只能跳转发布的小程序,不能跳转体验版和开发版
2、公众号只能是认证的非个人主体的服务号,不能是订阅号
3、微信公众号中必须配置js安全域名,并且安全域名必须开放80端口,否则不能成功添加js安全域名,配置了js安全域名才能访问JS接口
4、如果不能正常获取accessToken,请在微信公众号官网配置白名单
<html>
<head>
<title>跳转小程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<style>
</style>
</head>
<body>
<!-- display: flex; align-items: center;" -->
<div id="wechat-web-container" style="width: 100%;height: 100vh;">
</div>
<script type="text/javascript">
$(document).ready(function(){
function dff(){
$.ajax({
url: '后端根据获取签名的接口',
dataType : "jsonp",(解决跨域的问题,后端返回callback + "("+返回的json字符串+")")
data: {url: location.href.split('#')[0]},
type: 'GET',
jsonp : "callback",
success:function(result){
console.info('result',result);
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: result.timestamp, // 必填,生成签名的时间戳
nonceStr: result.noncestr, // 必填,生成签名的随机串
signature: result.signature,// 必填,签名
jsApiList: ['chooseImage', 'previewImage'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表
});
},
error:function(e) {
console.info(e)
}});
}
dff();
//获取浏览器地址的参数
function getQueryVariable() {
let href = window.location.href
console.info('href',href)
let query = href.substring(href.indexOf('?') + 1);
console.info('query',query)
let vars = query.split("&");
let obj = {}
for (var i = 0; i < vars.length; i++) {
let pair = vars[i].split("=");
obj[pair[0]] = pair[1]
}
return obj;
}
var querys = getQueryVariable();
console.info("querys",querys)
var path = querys.path ? decodeURIComponent(querys.path) : 跳转小程序的路径,可以动态传参数
console.info("path",path)
var username = ''//username小程序原始id
// replace username
//给id=wechat-web-container增加标签
$('#wechat-web-container').append(`
<wx-open-launch-weapp
id="launch-btn"
username="${username}"
path="${path}"
>
<template>
<button class="button" style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">跳转</button>
</template>
</wx-open-launch-weapp>`)
// alert(path)
wx.ready(function () {
console.log('config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中')
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
alert('success')
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
alert('fail', e.detail)
// alert('fail', e.detail)
});
});
});
</script>
<style>
.button {
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</body>
</html>
文章浏览阅读202次。packagecode;//importjava.awt.*;//importjava.awt.Canvas;//importjava.awt.event.*;//importjavax.swing.*;importjava.util.Random;importjavax.microedition.lcdui.*;//写界面所需要的包/***//***俄罗斯方块*高雷*2007年1..._240×320java游戏
文章浏览阅读779次,点赞14次,收藏19次。然后,实现系统的数据管理和服务功能,包括用户的注册与登录、电影的分类与展示、电影信息的查询与推荐、座位的选择与预订、在线支付与电子票生成等。此外,随着在线视频平台的兴起,越来越多的人选择在线观看电影,这对传统电影院产生了巨大的冲击。研究意义: 开发在线电影院售票平台对于提升用户的观影体验、优化电影院的运营效率、促进电影产业的发展具有重要的意义。该系统旨在通过技术手段解决传统电影院售票中的问题,提供一个集成化的电影信息展示、座位选择、在线支付和用户评价平台,同时也为电影院和电影制作方提供有效的工具。
文章浏览阅读509次。保护我们剩下的人的通话信息安全,使用TOX可以让你在和家人,朋友,爱人交流时保护你的隐私不受政府无孔不入的的偷窥.关于TOX:其他牛逼的软件因为一些细化服务问你要钱的时候, TOX分文不取 . 你用了TOX, 想干嘛就干嘛.网友评论:项目源码展示:源码测试效果:最后,如果你学C/C++编程有什么不懂的,可以来问问我哦,或许我能够..._基于c++的即时聊天系统设计
文章浏览阅读584次。鱼弦:CSDN内容合伙人、CSDN新星导师、全栈领域创作新星创作者 、51CTO(Top红人+专家博主) 、github开源爱好者(go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen)当Java服务在Linux系统中运行时,可能会出现swap分区被占用的内存泄露问题,导致系统性能下降或者崩溃。下面是该问题的故障及解决方法、底层结构、架构图、工作原理、使用场景详解和实际应用方式、原理详细描述、相关命令使用示例以及文献材料链接。_linux swap占用很高
文章浏览阅读662次。Alt+F11,然后插入-模块:复制下面代码到编辑窗口:Sub 半角标点符号转换为全角标点符号()'中英互译文档中将中文段落中的英文标点符号替换为中文标点符号 Dim i As Paragraph, ChineseInterpunction() As Variant, EnglishInterpunction() As Variant Dim MyRange..._替换半角宏
文章浏览阅读2.8k次。#.简介: WebView是Android提供的用来展示展示web页面的View,内部使用webkit浏览器引擎(一个轻量级的浏览器引擎),除了展示Web页面外,还可与Web页面内的JS脚本交互调用。WebView内部的WebSetting对象负责管理WebView的参数配置; WebViewClient负责处理WebView的各种请求和通知事件,在对应事件发生时会执行WebViewClient的对应回调; ChromeWebviewClient辅助Webview处理与JS一些交互......_android webview真正加载完成
文章浏览阅读1.6k次。_bitcoin 调试环境搭建
文章浏览阅读4.3k次,点赞93次,收藏94次。为了解决贝塞尔曲线无法局部修正、控制性减弱、曲线次数过高、不易拼接的缺陷,引入B样条曲线(B-Spline)。本文介绍B样条曲线的基本概念:节点向量、支撑性、次数阶数、加权性质、节点生成算法等,为后续曲线计算打下基础。_样条曲线生成
文章浏览阅读902次。配置本地repo库下载我的阿里云盘文件文件放置#创建目录mkdir -p /opt/cloudera/parcel-repo/mkdir -p /opt/cloudera/cm/yum install createrepoCDH 6.2.0 的三个文件放到/opt/cloudera/parcel-repo/中,并且注意把sha256后缀的文件名修改为sha#执行createrepo命令生成rpm元数据 最终/opt/cloudera/parcel-repo/会多一个repodata目录_/opt/cloudera/cm-agent/service/mgmt/mgmt.sh: line 76: /usr/java/jdk1.8.0_181
文章浏览阅读943次,点赞2次,收藏2次。uni.canvasToTempFilePath_uni.canvastotempfilepath
文章浏览阅读3.1k次。SRAM :静态RAM,不用刷新,速度可以非常快,像CPU内部的cache,都是静态RAM,缺点是一个内存单元需要的晶体管数量多,因而价格昂贵,容量不大。DRAM:动态RAM,需要刷新,容量大。SDRAM:同步动态RAM,需要刷新,速度较快,容量大。DDR SDRAM:双通道同步动态RAM,需要刷新,速度快,容量大。........................_sdram 干扰
文章浏览阅读7.3k次。假设表格有A、B、C、D四列数据,希望导入到你的数据库中表格table,对应的字段分别是col1、col2、col3、col4。_excel数据怎么生成sql语句