uniapp 转H5 实现微信浏览器自定义分享样式
uniapp 转H5后 实现微信浏览器自定义分享样式
uniapp 项目转 h5
1.在manifest.json文件中,找到H5配置一下路径,需要注意这个名字需要和布到线上的文件夹名字一致
2.就是运行打包了 选择网站pc就是h5打包了,之后.，网站域名，例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX，（这个地址是你将项目打包之后存放放静态文件的地址）
3.剩下的就需要后端给你的包布到线上就可以了
h5实现微信浏览器自定义分享样式( 就是改变右上角分享时候的样式,)
之前的
改变后
微信官方文档.
一 绑定域名(这里建议看官方文档)
二 引入官方js文件
uniapp引入的话,直接在官方下载引入会报错,
直接npm i weixin-js-sdk
三 代码
新建一个js文件,注入wx.config进行相关的初始化等操作，
var wx = require("weixin-js-sdk/index.js") //引入刚下载的js文件
import $H from '@/api/request.js' //封装好的接口请求export default {//初始化initJssdkShare: function(callback, url) {var url = urlconsole.log(url);//这一步需要调用后台接口,返回需要的签名 签名时间戳 随机串 和公众号appid//注意url:window.location.href.split('#')[0] //$H.post("/users/weixin/getsignature", {url // url是当前页面的url}).then(res => {console.log(res);wx.config({// debug: true,//调试的时候需要 在app上回弹出errmg:config ok 的时候就证明没问题了 这时候就可以改为falseappId: res.appId,//appidtimestamp: res.timestamp,//时间戳nonceStr: res.nonceStr,//随机串 signature: res.signature,//签名jsApiList: ["updateAppMessageShareData", "updateTimelineShareData","onMenuShareAppMessage"]//必填 是下面需要用到的方法集合})if(callback){callback()}})},// data是穿的参数 url是当前页面的链接share:function(data,url){this.initJssdkShare(function(){wx.ready(function(){console.log("llllllllllll");console.log(data);var sharedata={title: data.title, //标题desc: data.desc, //描述link: data.link ,//分享链接imgUrl:data.imgUrl, //图片success:(res=>{})};wx.updateAppMessageShareData(sharedata)//自定义微信分享给朋友wx.updateTimelineShareData(sharedata);//自定义微信分享给朋友wx.onMenuShareAppMessage(sharedata);//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）})},url)}
}注意:(如果遇到essMsg:config fail 或者报出无效的签名 的话很有可能是url出问题)
1.调用后端接口传的url是当前页面的地址
2.调用wx.config时候的参数大小写要注意
3.自定义的时候 wx.updateAppMessageShareData()传的参数
四 在main.js中应用
然后就是在相应的页面调用
最后的最后 config fail 的问题找了好久 问题出在了传给后端的的页面地址url上
超级感谢百度
贴上原文文档.
uniapp 转H5 实现微信浏览器自定义分享样式相关推荐
- H5页面微信自动登录，和微信页面自定义分享样式
#1.首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名. 备注:登录后可在"开发者中心"查看对应的接口权限. 2 ...
- 解决H5在微信浏览器或QQ浏览器修改title的问题
解决H5在微信浏览器或QQ浏览器修改title的问题 参考文章: (1)解决H5在微信浏览器或QQ浏览器修改title的问题 (2)https://www.cnblogs.com/CyLee/p/77 ...
- VUE H5页面微信/QQ/微博 分享连接设置
VUE H5页面微信/QQ/微博 分享连接设置 问题 想改变分享的标题.副标题.图片以及重定向打开的地址? 解决 第一步:在项目控制台里面 npm i -S weixin-js-sdk ( 然后视情况 ...
- 一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
DIY官网一站式婚庆案例实战,可视化设计导出微擎.UNIAPP.H5.微信小程序源码. 这里将给大家展示演示出来的所有不同类型演示. DIY官网一站式婚庆案例实战官网在线演示例子 一站式婚庆服务公司后 ...
- uniapp中h5网页微信公众号授权
uniapp微信网页授权 uniapp中h5网页微信公众号授权 主要代码 获取code返回的code截取代码 uniapp中h5网页微信公众号授权 微信官方文档–>网页授权 uniapp中h5网 ...
- 微信H5网页链接如何自定义分享标题，简介和图片
微信H5网页链接怎么才能自定义分享标题,简介和图片? 需求概述 微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,QQ等.但直接这样分享的话,用 ...
- h5 修改title 微信_H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）...
最近开发h5网页,在分享网页到微信好友时,发现我的分享链接只有标题和链接地址: 图一 却不像自定义微信分享链接一样,分享的链接像生成一张卡片,有对应的标题,内容和图片: 图二 要达到上图自定义文案与图 ...
- H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）
自定义分享链接是什么? 自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片,并且该卡片的标题,内容和图片都可以自己编辑.如下图效果 ● 自定义网页链接示例(带标题,内容简介,缩略图) ● 未 ...
- h5微信js-sdk分享接口php,H5 微信JSSDK自定义分享代码模板
HTML 导入代码模板: var base_url = ""; var shareTitle = "H5 animations with global vision!&q ...
最新文章
- 有道精品课python-有道精品课-Python小咖养成计划
- ASP.NET中网站访问量统计方法
- java中valueof_Java中String.valueOf()方法的解释
- PWN-PRACTICE-BUUCTF-2
- Redis概述_使用命令对redis的数据进行增删改查_Jedis连接redis进行数据操作_redis进行数据缓存案例
- python sqlite3
- asp.net Framework 与 asp.net core 知识
- 多磁盘自动分区自动挂载脚本
- php扩展intl安装不成功,phpstudy开启php_intl扩展启动弹出错误的解决方法
- 海南移动IPTV——使用的小Tips
- QQ聊天记录统计可视化分析
- QScrollArea的简单使用
- 你未必知的拼音打字快打十招
- 我用这个小程序，副业赚钱轻松日入300+
- jQuery 删除HTML元素
- PEP 8 – Style Guide for Python Code
- 关于BPSK的调制解调——matlab实现
- C++_五子棋（注释版）
- 关于W25QXX系列以及AT24CXX系列容量大小
- Rive在Flutter开发中的基本用法