WEBAPP开发教程之webApp如何实现分享功能(微信端)
WEBAPP开发教程之webApp如何实现分享功能(微信端)
摘要：本文将带你了解WEBAPP开发教程之webApp如何实现分享功能(微信端)，希望本文对大家学WEBAPP有所帮助
本文将带你了解WEBAPP开发教程之webApp如何实现分享功能(微信端)，希望本文对大家学WEBAPP有所帮助webApp实现分享功能 & &
& & 首先，在微信的右上角公众号名称-&功能设置-&js接口安全域名 & &
& & 首先引入：微信接口js， & &
& & 其次，对分享进行一个配置： & &
& & wx.config({ & & &&&&&&& debug: true, &&&&&&& appId: 'YOUR_APPID', &&&&&&& timestamp: , &&&&&&& nonceStr: & 'CvNjcpHIUv755Pcr', &&&&&&& signature: & '02fecd2f66d05b1b988b3b5dffc9da8', &&&&&&& jsApiList: [ &&&&&&&&&&& 'checkJsApi', &&&&&&&&&&& & 'onMenuShareTimeline', &&&&&&&&&&& & 'onMenuShareAppMessage' &&&&&&& ] &&& }); &&& wx.ready(function () { &&&&&&& var shareData = { &&&&&&&&&&& title: '这里是分享标题', &&&&&&&&&&& desc: & '这里是发送给好友的时候的简介', &&&&&&&&&&& link: & 'http://baidu.com', &&&&&&&&&&& imgUrl: & 'http://baidu.com/logo.jpg' &&&&&&& }; &&&&&&& & wx.onMenuShareAppMessage(shareData); &&&&&&& & wx.onMenuShareTimeline(shareData); &&& }); &&& wx.error(function (res) { &&&&&&& alert(res.errMsg); &&& & }); & &
& & & &&本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！
看完这篇文章有何感觉？ 已经有0人表态，0%的人喜欢
大家都在看
(C)2015 www.zhizuobiao.com All Rights Reserved
点击进入频道
请先登录您的账号
您还未登录，还不能发表评论用HTML5写的页面怎么获得微信接口，来实现一键分享的功能
<a data-traceid="question_detail_above_text_l&&
现在需要我了解一下用H5做的web页面，如果想实现微信一键分享功能该怎么实现。以前没弄过啊，一点思路也没。。。
在APP中的H5就让APP开发提供接口，你提供数据。如果H5是在微信内打开的，可以调用微信的JSSDK开发，详情请参考&https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e48dd613f.html&
个人博客有写关于分享和支付的内容 可参考
--- 共有 2 条评论 ---
: 就我所知是不可以的
我想了解的是，单纯的web页面能做到吗？不在app里，也不是在微信里打开的，就是用浏览器直接访问的web页面干货教程 | WebApp添加微信分享功能
时间： 18:56:55
&&&& 阅读：116
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&饺子满屏飞的今天，柚子君就不给你们卖关子了，直接分享给你们webapp添加微信分享功能的技巧，当做饺子蘸料可好？
首先，实现微信分享需要具备的条件：
? 微信开放平台账号并且提交移动应用需要通过审核 参考官方教程：http://docs.apicloud.com/APICloud/开放平台接入指南/weChat
app微信分享需要微信开放平台的appid，而不是公众平台appid，开发小白千万别把这两个弄混了。
? 模块中添加WX模块
? 在APICloud控制台编辑应用，添加好证书
接下来，分享实现微信分享的步骤：
主要分享代码，应用管理下面一带而过！
? 首先在APICloud控制台，创建一个应用，选择类型为webapp，填入名称，描述，还有你的网址，如下图：
? 点击新创建的应用，然后，选择 云编译 编译出安卓的app
? 把app下载到电脑，将后缀名.apk 改为 .zip ，解压 ---》寻找路径\assets\widget ----》将widget 里的内容复制到你的app编辑工具下即可开始编辑了
? 打开config.xlm 在前面添加
? 打开index.html 在前面，添加
? 剩下的代码，需要在你的网站中完成，将下面的代码放入你需要分享的页面，蓝色部分，分别是标题、描述、图片、链接地址、需要根据你的网站页面，进行修改。
更多干货教程，可关注官V：柚子科技APICloud标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/apicloud/p/8087276.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！最近在做 jst
app 的商城，全部是webview 页面，商品详情页面的分享，不知道该怎么分享到微信好友和微信朋友圈。找了一下想到几种解决方案，在此分析一下各方案的利弊。
1.调用微信公开的jssdk
很多人说的调用微信公众平台卡发着文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e48dd613f.html
这个是针对于在微信浏览器里运行的页面才能用，我们APP里面内嵌的h5页面是在原生浏览器而不是在微信内置浏览器里运行的。
2.微信开发者平台的sdk 接口
这个我没找到解决方法，全是安卓和苹果的方案，java不会有木有
3.原始方案：生成二维码截屏法
就是用户点击分享——微信——页面弹出了一个二维码，用户只能截图，然后用户再自主打开微信APP然后再发给朋友这张二维码图片。收到二维码图片的用户需要长按识别二维码，才能打开页面。
知乎原话：生成一个当前页面（或者计算过的链接）的二维码，提示用户截屏转发到朋友圈（因为现在在微信生态可以长按二维码识别）
这种方案对于用户来说体验很差，太麻烦，能有这个耐心的用户值得珍惜。而且大多数的APP是直接跳转到微信去的，跟大多数APP的方式相比，这种解决方案太low。
4.诱导法。
这个方案在知乎上有人提过，点击分享，出现一个弹层，弹层上面是图片或文字，让用户自己找到浏览器自带的分享工具；
这种方案很搞笑，APP内嵌的H5页面走的是原生浏览器，让用户几乎感觉不到是h5页面，但这种方式无异于告诉用户用的是一个H5页面，用户体验差极了。
而且有的用户的手机浏览器是没有自带分享工具的。我们不能只考虑UC浏览器或者QQ浏览器。很多用户是不会下载和使用这些浏览器的。最好的方式就是考虑用原生的浏览器。
5.借用原生。
我们打算采用借用原生的方法进行微信分享。H5自身是没有微信分享功能的。之前在开发JST
APP 2.5时候也做过H5 页面通过JS调用原生的苹果和安卓方法。
用户点击分享按钮——点击“微信好友”或“微信朋友圈”，页面进行判断苹果还是安卓系统，触发JS调用安卓（或苹果）的方法比如方法名为jump，传参数过去，参数为当前页面的连接url，原生（安卓苹果）需要写jump方法，该方法让用户打开微信，分享参数（当前页面连接）以及图片。我们暂定图片为JST
app标志图。
我们的商城头部比较复杂，安卓团队觉得还是用你们H5
自己的头部比较好，姐也介意这个问题，毕竟商品详情页的头部需要有首页，购物车，分类，我的等东西，原生需要调用太多东西。
分享是H5没办法解决不了，只能调用原生啦。
APP内嵌h5页面如何分享到微信？
一个APP内嵌入H5页面，H5页面有个分享微信的按钮，点击这个按钮可以将这个H5页面分享到微信。从技术上看可行吗？...
微信端H5页面调用分享接口
最近公司做了一个给学生投票的H5页面，主要是在微信端使用，需要添加微信分享功能；
本文章主要是记录调用微信分享接口需要注意的事项；
1、前端用的angular1框架，首先需要在index页面引入微...
微信内置浏览器 用 JS 调用微信APP分享到微信朋友圈
昨天开始搞分享到微信朋友圈，要求直接调用微信APP的分享到朋友圈。。。
1：首先你需要完成微信的六大前期准备工作，这也是最烦人的。请仔细阅读微信的APP文档：
文档地址：https:/...
浅谈H5界面嵌套在APP中实现微信、QQ分享功能
在 APP中嵌套H5界面，并且H5中的界面有分享功能时可以在H5参考HTML5+中的share部分，参考：http://www.html5plus.org/doc/zh_cn/share.html，目...
h5+分享到微信、朋友圈代码示例
h5微信分享
h5 微信分享朋友和朋友圈
转自：https://www.cnblogs.com/liangzia/p/7569443.htmlh5 微信分享朋友和朋友圈生成JS-SDK权限验证签名实现发送给朋友和分享到朋友圈时内容参数自定义 ...
h5链接分享微信朋友圈，压缩图标题内容设置
前些天，接到h5动态页面分享到微信朋友圈推广的需求，之前没接触过这块，在网上查了不少资料，走了不少弯路。整理了一下，以便后续使用，对刚接触这块的有所帮助。
1. 微信公众号appid，secre...
通过页面调用APP【H5与APP互通】
http://www.cnblogs.com/carlos-guo/p/3945112.html
现在H5和App原生的内容原来越互通，所涉及的业务也越来越复杂和融合，所以如何互相之间方便的调用...
H5分享带缩略图，描述，微信内分享到好友，朋友圈等
H5分享，自定义缩略图，分享到微信好友，朋友圈等
没有更多推荐了，「微信开发」微信公众号里“JS接口域名”实现分享功能
查看: 3900| 评论: | 发布者:
简介：1.准备工作APPID公众号id、申请好友分享接口、ip白名单、js接口安全域名设置（必须是通过备案）。要先登录微信公众平台进入“公众号设置”的功能设置里填写“JS接口域名”2.引入js注意：支持使用AMD/CMD标准加载方法 ...
1.准备工作APPID公众号id、申请好友分享接口、ip白名单、js接口安全域名设置（必须是通过备案）。要先登录微信公众平台进入“公众号设置”的功能设置里填写“JS接口域名”2.引入js注意：支持使用AMD/CMD标准加载方法&script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"&&/script&3.通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需要调用一次，对于变化url的SPA的web app可在每次url变化时进行调用，目前Android微信客户端不支持pushShate的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题在Android6.2修复）wx.config({ debug: true, //开启调试模式，调用所有的api的返回值会在客户端alert出来，若要查看传入的参数，可以在PC端打印出来 appId: '', //必填，公账号的唯一标识 timestamp: '', //必填，生成签名的时间戳 nonceStr: '', //必填，生成签名的随机串 signature: '', //必填，签名 jsApiList: [ //必填，需要使用js列表，否则无法分享成功 'onMenuShareTimeline', //朋友圈 'onMenuShareAppMessage', //朋友 'onMenuShareQQ', //QQ 'onMenuShareWeibo', //QQ空间 ]})4.通过ready接口处理成功验证wx.ready(function(){ //config信息验证后会执行ready方法，所有接口调用必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中});5.通过error接口处理失败验证wx.error({ //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名});js代码var data = { title: '', summary: '', pic: '', url: '', success: function(){ getWeixin() ;//用户确认分享后执行的回调函数 }, cancel: function(){ //用户取消分享后执行的回调函数 }}wx.config({ swapTitleInWX: true, appId: "&?php echo $weixin_package['appid'];?&", timestamp: "&?php echo $weixin_package['timestamp'];?&", nonceStr: "&?php echo $weixin_package['noncestr'];?&", signature: "&?php echo $weixin_package['signature'];?&", jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', ]})wx.ready(function () { wx.onMenuShareTimeline(data); wx.onMenuShareAppMessage(data); wx.onMenuShareQQ(data) wx.onMenuShareWeibo(data)})注意点：title，建议在14个字以内图片尺寸： 300*300像素；图片格式：大小不超过10kB，不支持GIF格式；会取当前页面body内最前面的一张符合条件的图片对标题简要解读，建议20字以内link:'', //分享链接，改链接域名或路径必须与当前页面对应的公账号JS安全域名一致二、QQ分享QQ是通过head里面的标签来识别分享的图标和标题，涉及到h5微数据的一个属性itemprop，&meta itemprop="name" content="标题"/&&meta itemprop="description" name="description" content="描述"/&&meta itemprop="image" content="缩列图地址"/&本文仅代表作者个人观点，不代表SEO研究协会网官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱。更多相关资讯，请到SEO研究协会网www.seoxiehui.cn学习互联网营销技术请到巨推学院www.jutuiedu.com。
代理咨询微信：jutui10
TOP ARTICLES
常州SEO阿是
生活所需的一切不贵豪华，贵简洁；不贵富丽，贵高雅；不贵昂贵，贵合适。如果没有超强...
原标题：我在长沙it编程培训学校的日子，感谢这一次it编程培训号，这是我...
喜欢UI设计的小伙伴想要进入到UI领域中最好的办法就是参加专业的UI设计培训学习，那么...
wenjie8412768
学Java，有哪些推荐书籍可以看？很多人都会有这样的疑问。今天，千锋武汉Java培训的小...
知识点合伙股权不仅仅是考虑股东之间的股权分配，还要结合企业的项目、战略规划、发展...
呼兰河传奇
训哥儿近期收集了一批高品质的编程学习资料，迫不及待的想要分享给大家。先来一波儿价...
yishenxieyang
如今参加PHP培训学习的小伙伴越来越多，但是每一位都能学到专业实用的技能成为高薪的P...
在网络安全问题上，各方主体的义务履行十分重要。为有效促进各主体自觉主动履行义务，...
常州SEO阿是
生活所需的一切不贵豪华，贵简洁；不贵富丽，贵高雅；不贵昂贵，贵合适。如果没有超强...
原标题：我在长沙it编程培训学校的日子，感谢这一次it编程培训号，这是我...
喜欢UI设计的小伙伴想要进入到UI领域中最好的办法就是参加专业的UI设计培训学习，那么...
wenjie8412768
学Java，有哪些推荐书籍可以看？很多人都会有这样的疑问。今天，千锋武汉Java培训的小...
知识点合伙股权不仅仅是考虑股东之间的股权分配，还要结合企业的项目、战略规划、发展...
呼兰河传奇
训哥儿近期收集了一批高品质的编程学习资料，迫不及待的想要分享给大家。先来一波儿价...
yishenxieyang
如今参加PHP培训学习的小伙伴越来越多，但是每一位都能学到专业实用的技能成为高薪的P...
在网络安全问题上，各方主体的义务履行十分重要。为有效促进各主体自觉主动履行义务，...}