技术标签: html5 微信 javascript uni-app
!!!!注:
微信打开h5网页右上角分享功能需要前端和后台配合实现功能
后台工作: 根据微信网页开发文档撰写一个接口返回一个对象给前端, 以下为返回结果
{
appId: '', // 公众号的唯一标识,需要注册公众号提供appid
timestamp: '', // 生成签名的时间戳
nonceStr: '', // 生成签名的随机串
signature: '' // 签名
}
前端工作:
1. 获取微信网页SDK
npm install jweixin-module -S
2. 引入SDK,并进行相关配置
import wx from 'jweixin-module';
wxShareConfig({title, desc, link, imgUrl}){
// 从后台异步获取的数据对象
let data = {
appId: '',
timestamp: '',
nonceStr: '',
signature: ''
}
wx.config({
debug: true, // true 为测试版 可查看配置成功或失败的信息 正式使用时需要改为false
appId: data.appId, // 必填,公众号的唯一标识,需要注册公众号提供appid
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见附录1
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 updateAppMessageShareData
});
wx.ready(()=>{
// 分享到微信好友内容设置
wx.updateAppMessageShareData({
title, // 分享标题
desc, // 分享内容的摘要
link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl, // 分享图标
success: function () {
alert('设置成功, 设置成功之后, 在当前网页点击微信右上角分享时就是你设置的内容')
},
fail: function (reject) {
alert(JSON.stringify(reject))
}
})
// 分享到微信朋友圈的内容设置
wx.updateTimelineShareData({
title, // 分享标题
link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl, // 分享图标
success: function () {
alert('设置成功, 设置成功之后, 在当前网页点击微信右上角分享时就是你设置的内容')
},
fail: function (reject) {
alert(JSON.stringify(reject))
}
})
})
}
文章浏览阅读5.4w次,点赞64次,收藏262次。使用Echarts绘制中国地图,其中地图点信息由JSON文件编写,前端html直接从JSON文件中读取地区数据,渲染到前端即可。详细介绍用到的各个功能!代码直接复制运行即可!_echarts中国地图
文章浏览阅读343次,点赞9次,收藏10次。使用函数tolist()之后数据发生变化,从小数点后4位变成小数点后16位,如何才能让数据不变化?list:包含3608个[128,100]的张量。使用for循环将张量都转化成二维数组列表。
文章浏览阅读5.9k次。提示信息被遮盖解决方法 可以给form-item加一个特定的class,不影响其他的提示框,然后设定width,可以把所有内容显示。代码vue的template代码<el-form-item label="用户微信" prop="userWeChat" class="weixinError"> <el-input v-model="userInfo.userWeChat" maxlength="20"></el_el-form-item_error文字过长
文章浏览阅读1.7k次。sqlmap是一个开源的渗透测试工具,它可以自动化检测sql注入漏洞利用sql注入缺陷 接管数据库服务器。_kali安装sqlmap
文章浏览阅读598次,点赞19次,收藏4次。本题来自第六届蓝桥杯省赛C++ B组 /JAVA A组C组《移动距离》_移动距离 蓝桥杯 c++
文章浏览阅读3.4k次。zram disksize 设置小内存项目:1G,2G,3G RAMzram disksize设置.高通:高通的设置比较简单:相关代码:init.qcom.post_boot.shif [ -f /sys/block/zram0/disksize ]; thenif [ -f /sys/block/zram0/use_dedup ]; thenecho 1 > /sys/block/zram0/use_dedupfiif [ $MemTotal -le5242_use_dedup
文章浏览阅读492次。unix环境高级编程笔记_标准io创建空头文件
文章浏览阅读1.3k次。环境:ubuntu 16.04在执行apt-get update时直接报错了,错误信息如下:从返回的错误信息可以看出,问题出在“appstreamcli”上。通过以下命令可以解决:sudo apt install appstream/xenial-backportssudo appstreamcli refresh –force亲测可行。..._sudo apt-get update error in appstreamcli
文章浏览阅读9.5k次,点赞3次,收藏20次。很多时候我们需要把代码发给别人,而运行的代码可能包含路径。例如,你在你的电脑上需要加载一个mat文件,你的代码中包含了这个mat文件的具体的路径。例如,load('C:\Users\ncf\Desktop\计算机视觉大作业\program\xixi.mat'),当你把这个代码文件夹压缩发给别人时,别人一运行就会报错,这时我们需要自动识别,mat文件的路径。mfilename函数可以返回当前..._matlab里面打开文件找不到main
文章浏览阅读22次。Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。2. 前端:L ayui+css+javascript+jQuery+ElemenUI+highcharts。SSM + mybatis + Maven + JSP 等等组成,B/S模式 + Maven管理等等。2. 使用IDEA/Eclipse/MyEclipse导入项目,修改配置,运行项目;
文章浏览阅读733次,点赞3次,收藏8次。Windows命令行下载文件的方法_windows 命令提示符下载网页文件命令
文章浏览阅读1.5k次。渗透测试-安服面试点总结_安服题