微信分享

网页程序迁移至微信小程序web-view详解

我怕爱的太早我们不能终老 提交于 2019-12-04 17:42:40
小程序现在越来越流行,但是公司的很多项目都是用网页写的,小程序语法不兼容原生网页,使得旧有项目迁移至小程序代价很高; 小程序之前开放了webview功能,可以说是网页应用的一大福音了,但是微信的webview有一些坑,这篇文章就是列举一下我在开发过程中遇到的一些问题以及我找到的一些解决方案。 遇到的问题 openid登录问题 webview动态src 支付功能 分享功能 扫描普通二维码跳转特定页面 返回按钮缺失问题 openid登录问题 微信webview的使用方法很简单,只要如下设置src就可以展示具体的网站了。 <!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view> 微信环境里的很多网页都是用页面要实现网站的登录功能,只要把登录的信息,比如openid或者其他信息拼接到src里就好了。 这里有个问题,公众号的账号体系一般是以openid来判断唯一性的,小程序是可以获取openid的,但是小程序的openid和原公众号之类的openid是不一样的,需要将原先的openid账号体系升级为unionid账号体系。 以下是微信对unionid的介绍 获取用户基本信息(UnionID机制) 在关注者与公众号产生消息交互后

微信JSSdk实现分享功能

戏子无情 提交于 2019-12-03 13:22:00
1. 概述 微信分享服务器的作用是为用户在微信浏览器端对来自网站以及客户端的页面进行二次分享链接时更友好的展示提供服务。为实现二次分享功能需要使用微信JS-SDK来开发. 微信 JS-SDK 是 微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。微信 JS-SDK 功能很多。 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。 2. 流程图 3. 微信二次分享功能实现的具体步骤 步骤一:绑定域名 (微信公众平台配置) 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注:登录后可在“开发者中心”查看对应的接口权限。 需要配置白名单 步骤二:引入 JS 文件 (需要分享的页面) 在需要调用 JS 接口的页面引入如下 JS 文件,(支持 https ): http://res.wx.qq.com/open/js/jweixin-1.4.0.js 如需进一步提升服务稳定性,当上述资源不可访问时,可改访问: http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持 https )。 <script src="http://res.wx.qq.com/open/js

微信公号分享样式。前端代码

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-03 04:28:53
引入weixin.js和jquery <script src="~/Content/UI/js/jquery.js"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script> wx.config({ debug: false, appId: '@ViewBag.m_sinfo.appId', timestamp: '@ViewBag.m_sinfo.timestamp', nonceStr: '@ViewBag.m_sinfo.nonceStr', signature: '@ViewBag.m_sinfo.signature', jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'checkJsApi'] }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 //自定义“分享给朋友”及“分享到QQ”按钮的分享内容 wx.updateAppMessageShareData({ title: '首页',

手把手带你使用JS-SDK自定义微信分享效果

匿名 (未验证) 提交于 2019-12-03 00:22:01
前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题,摘要),一开始真是一脸懵逼,在网上搜索了半天之后大概有了方案。值得注意的是一开始搜索到的解决方案全是调用微信的自带的JS-SDK,然而腾讯是不会让广大吃瓜群众这么轻而易举的调用他们的东西的。微信开发团队已经把调用的权限收回,现在无法直接在页面直接调用JS-SDK了。话不多说,直接上干货。 预期效果 原始的分享效果: 使用微信JS-SDK的分享效果: 可以看出缩略图,标题,摘要样式良好,给用户的体验很好。 准备工作 微信官方开发者文档地址: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 现在的思路已经很明确了,就是 通过调用微信的JS-SDK实现自定义分享效果 。但是这个调用过程比较繁琐,需要提前准备如下东西: (1)微信服务号一个,并且已经通过了实名认证;    没有实名认证的话,一些接口没有调用权限。 (2)一个ICP备案的域名; 这个域名需要设置为微信公众号后台的JS接口安全域名,否则微信仍然不允许调用它的接口。 这时大家应该就犯难了,这样的话岂不是不能在本地测试,只能部署到生产环境才能测试?不用着急,解决方案告诉大家: 花生壳的内网穿透服务 (收费,20元以内) 花生壳官网: http://hsk

微信小程序通过保存图片分享到朋友圈

匿名 (未验证) 提交于 2019-12-03 00:22:01
说明 首先说明一点,小程序内是不能直接分享到朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用,基本都是这种实现方式。 准备阶段 通过服务器获取小程序码 这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码。然后调用wx.getImageInfo将后台生成的小程序码保存起来。 注意一定要仔细看下微信的文档,如果生成小程序码的路径正式服务器不存在,将会生成失败。这点也很蛋疼,很不方便调试。 wx.getImageInfo({ src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址 success: function (res) { //res.path是网络图片的本地地址 qrCodePath = res.path; }, fail: function (res) { //失败回调 } }); 1 2 3 4 5 6 7 8 9 10 11 通过canvas绘制所需信息 准备好所有的图片之后就可以通过canvas绘制了,然后再将canvas导出为图片。关于绘制这块,可以参考微信的canvas api,下面的基本都是查着api的方法走的。 其中需要注意的有几点。 是不知道绘出来的文字长度

5+API实现微信分享功能

匿名 (未验证) 提交于 2019-12-03 00:22:01
1. 在manifest.json文件的permissions节点下添加Share节点: "Share" : { "description" : "管理社交分享插件" } 2. 在manifest.json文件的 plus -> distribute -> plugins 节点下 配置平台申请应用的参数:(申请方法详见http://ask.dcloud.net.cn/article/36,另外申请前测试环境分享可用) "share" : { "weixin" : { "appid" : "" , "appsecret" : "" , "discription" : "微信分享" } } 3.基于官方总结的简化版代码(欢迎指正): <template> <div> <input type="button" value="分享至微信" @click="shareToWechat"/> </div> </template> <script> var shares = null; export default { data() { return { } }, methods: { // 分析链接 shareToWechat() { var self = this; var shareBts=[]; // 更新分享列表 var ss=shares['weixin']; ss&&ss

微信端分享接口

匿名 (未验证) 提交于 2019-12-03 00:18:01
http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script > 备注: http://leovir.com/wegas/weixin/weixin/xuanchuan.html ', //分享链接 http://leovir.com/wegas/weixin/images/banner2.png ', //分享图标 http://leovir.com/wegas/weixin/weixin/xuanchuan.html ', // 分享链接 http://leovir.com/wegas/weixin/images/banner2.png ', // 分享图标 http://leovir.com/wegas/weixin/weixin/xuanchuan.html ', //分享链接 http://leovir.com/wegas/weixin/images/banner2.png ', //分享图标 http://leovir.com/wegas/weixin/weixin/xuanchuan.html ', //分享链接 http://leovir.com/wegas/weixin/images/banner2.png ', //分享图标 http://leovir.com/wegas/weixin/weixin

微信群超100人后无法再通过扫二维码加入了,怎么办?

匿名 (未验证) 提交于 2019-12-03 00:11:01
背景: 众所周知,大部分淘客、微商或其他广告主都是通过外部广告将用户引流到微信实现变现的,要么引流到个人微信,要么引流到微信群,这也是目前较为流行的营销方式。 但大家都知道,微信群一旦满100人后,分享出去的二维码将会失效,用户扫码会提示“群人数超过100人只可通过邀请进入群聊”。 因此,有很多商家都会有一个疑问,那就是有没有办法让二维码不失效?答案是有的!今天就为大家讲解一下群超过100人无法扫码进群的最新解决方案。 方案: 一、传统的解决方式可能是,重新建一个群,然后生成一个新的群二维码,再次投入广告成本分享宣传出去,这样做确实可以解决,但是重新分享新的群二维码势必会造成广告本的极度浪费。 二、主流的解决方式是,对外分享一个固定的二维码,这个固定的二维码是永久有效的,然后这个码却可以对应多个群,例如有群1、群2、群3,当群1满100人后自动更换到群2,群2满100人自动更换到群3,当三个群都到满100人了,再在后台重新新的群二维码,利用这样的一套系统就可以完全解决这个问题了。 这就是我今天要给大家分享解决方案,这套方案是利用了 小草活码 开发的技术,让推广在外的二维码永不失效,如此一来即可完美解决群二维码失效的问题了,大家觉得好就分享给你身边的其他朋友知道吧! 来源:博客园 作者: yingfbw 链接:https://www.cnblogs.com/ytghn/p

微信公众号h5页面自定义分享

匿名 (未验证) 提交于 2019-12-02 23:56:01
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> <title></title> </head> transparent <body> <script src = "https://code.jquery.com/jquery-3.1.1.min.js" type = "text/javascript" charset = "utf-8" ></script> <script src = "https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type = "text/javascript" charset = "utf-8" ></script> <script type = "text/javascript" > // 配置公总号自定义分享 // 需要引入jauery $ . ajax ({ method : 'GET' , url : window . BASE_URL + 'api/v1/sharding/get' , contentType : 'application/x-www-form-urlencoded' , async : false , dataType :

vue 微信公众号H5分享实现过程的坑!

匿名 (未验证) 提交于 2019-12-02 23:49:02
下面记一次微信公众号H5页面分享实现的过程,重点:坑在路径!!! 先根据开发文档阅读理解: 前端需要和后端交互来得到wx.config里面的参数值。 重点就在前后端的页面路径必须要一致,所以就要前端发给后端,坑也就在这里,下面附上我封装好的分享接口,大家自己看吧! 使用时在组件中调用即可! 组件中调用方及参数的代码如下: 如遇见分享页面始终是首页的问题,可参考这篇文章: https://blog.csdn.net/weixin_42501961/article/details/96837294 文章来源: https://blog.csdn.net/weixin_42501961/article/details/96833833