h5分享微信 QQ——Hbuilder app_前端微信分享下面显示hbuilder

作者：weixin_40725706 | 2024-07-07 21:29:05

踩

前端微信分享下面显示hbuilder

H5 分享微信 QQ

因为客户项目需要做分享微信和QQ进行投票，自己学习了一下，在网上查了好多大神写的代码，自己总结了一下。

开始真机模拟测试的时候，分享微信和QQ都是没有问题的，后面打包app使用的时候，才发现一直分享不出去，找了原因，是因为Hbuilder中需要配置模块权限配置，所以我们需要在微信公众号平台和腾讯平台申请appID和appsecret配置好Hbuilder的SDK配置才可以在app中进行分享，所以第一步是需要去申请微信的appID和appsecret。

第一步：申请微信appID和appsecret

微信开发平台链接:https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN

1、先申请一个账号。

2、点击首页的移动应用开发，进入到管理中心中创建移动应用，填写您要申请分享的app基本信息，然后再填写平台信息。

我打包时，用的是云端打包，应用签名统一公用的。

云端打包应用签名：59201CF6589202CB2CDAB26752472112

应用包名要和你发行安装包时显示的包名要一致。

要是有自有证书，那就用自己的应用签名就可以了。

填写完平台信息后，需要等待微信开发平台审核，需要7个工作日，在开发功能前就需要提前准备申请了。

第二步：分享功能

准备工作完了，我们就需要在页面添加分享功能了。

<--代码开始-->

<!doctype html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link href="css/mui.min.css" rel="stylesheet" />
   </head>
   <body>
<button οnclick="share()">分享</button>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript">
var Share={};
Share.info = {
id: 'https://www.baidu.com/',//链接跳转路径
title: '兴趣比赛', //活动标题名称
name: '快来啊，我在这儿等着你！',//标题名称
head_image: "image/100474391_wx.jpg",//自定义图片
introduce: '唱歌跳舞打豆豆'
};
   /**
   * 更新分享服务
   */
var shares = null;
function getSerivces() {
plus.share.getServices(function(s) {
shares = {};
for (var i in s) {
var t = s[i];
shares[t.id] = t;
}
}, function(e) {
console.log("获取分享服务列表失败：" + e.message);
});
};

/**
* 初始化分享权限
*/
mui.plusReady(function() {
getSerivces();
});

</script>
</body>

</html>

<--代码结束-->

将上面这一段代码直接粘贴到一个页面就可以直接运行了，我是用的Hbuilder，大家粘贴到Hbuilder中真机模拟运行就可以。

我分享是用H5做的分享, API文档上对分享这块讲的还是蛮清楚的，大家可以看一看

HTML5 API链接：http://www.html5plus.org/doc/zh_cn/push.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/796843

h5分享微信 QQ——Hbuilder app_前端 微信分享下面显示hbuilder

h5分享微信 QQ——Hbuilder app_前端微信分享下面显示hbuilder