微信web开发自定义分享

php后台部分-微信类

/**************************************************************************微信自定义分享 开始************************************************************/

/**
* 获取微信自定已分享配置参数包
* @author ganyuanjiang <[email protected]>
* @createtime 2017-08-05 14:21:04
* @return array 配置参数包
*/
public function getSignPackage() {
　　$jsapiTicket = $this->getJsApiTicket();

　　// 注意 URL 一定要动态获取，不能 hardcode.
　　$protocol = (!empty($_SERVER[‘HTTPS‘]) && $_SERVER[‘HTTPS‘] !== ‘off‘ || $_SERVER[‘SERVER_PORT‘] == 443) ? "https://" : "http://";
　　$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

　　$timestamp = time();
　　$nonceStr = $this->createNonceStr();

　　// 这里参数的顺序要按照 key 值 ASCII 码升序排序
　　$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

　　$signature = sha1($string);

　　$signPackage = array(
　　　　"appId" => $this->appid,
　　　　"nonceStr" => $nonceStr,
　　　　"timestamp" => $timestamp,
　　　　"url" => $url,
　　　　"signature" => $signature,
　　　　"rawString" => $string
　　);
　　return $signPackage;
}

/**
* 微信自定义分享随机字符串
* @author ganyuanjiang <[email protected]>
* @createtime 2017-08-05 14:22:15
* @param length int 随机字符串长度
* @return str string 随机字符串
*/
private function createNonceStr($length = 16) {
　　$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
　　$str = "";
for ($i = 0; $i < $length; $i++) {
　　$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
　　return $str;
}

/**
* 微信自定义分享获取jsapiticket
* @author ganyuanjiang <[email protected]>
* @createtime 2017-08-05 14:23:30
* @return jsapi_ticket string 微信jsapi调用凭证
*/
private function getJsApiTicket() {
　　// jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例

　　$data = json_decode(file_get_contents("jsapi_ticket.json"));
if ($data->expire_time < time()) {
　　$access_token = $this->access_token(false);
　　// 如果是企业号用以下 URL 获取 ticket
　　// $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=".$access_token[‘data‘];
　　$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=".$access_token[‘data‘];
　　$res = json_decode(https_get($url));
　　$ticket = $res->ticket;
if ($ticket) {
　　$data->expire_time = time() + 7200;
　　$data->jsapi_ticket = $ticket;
　　$fp = fopen("jsapi_ticket.json", "w");
　　fwrite($fp, json_encode($data));
　　fclose($fp);
}
} else {
　　$ticket = $data->jsapi_ticket;
}

　　return $ticket;
}
/**************************************************************************微信自定义分享 结束************************************************************/


php后台部分-控制器

use util\WeChat as WeChatModel;
use app\admin\model\Attachment as AttachmentModel;
use app\crm\model\Help as HelpModel;

/**
* 初始化方法
* @author ganyuanjiang <[email protected]>
* @time 2017-07-26 11:04:56
*
*/
protected function _initialize()
{

　　$this->WeChat = new WeChatModel();
　　//微信统一分享
　　$this->shareInfo();

}

/**
* 客分享注册信息
* @author ganyuanjiang <[email protected]>
* @createtime 2017-07-29 13:28:35
*/
private function shareInfo(){
　　//查询推荐规则介绍
　　$map[‘key‘] = ‘share_intro‘;
　　$share_intro = HelpModel::where($map)->find();
　　if(!$share_intro){
　　　　return $this->error("分享规则介绍不存在");
　　}
　　//通过图片编号查询图片地址
　　$map_img[‘id‘] = $share_intro[‘image‘];
　　$path = AttachmentModel::where($map_img)->value(‘path‘);
　　$share_intro[‘image‘] = empty($path)?‘‘:$this->request->domain().PUBLIC_PATH.$path;
　　//分享页　　
　　$share_intro[‘url‘] = $this->request->root(true).‘/‘.$this->request->module().‘/publics/welcome.html‘;
　　//微信分享自定义参数

　　$signPackage = $this->WeChat->getSignPackage();
　　$signPackage[‘redirect_uri‘] = urlencode(config(‘crm_config.user_accesstoken_uri‘));
　　$signPackage[‘encrypt_key‘] = config(‘crm_config.encrypt_key‘);
　　//模板渲染
　　$this->assign(‘signPackage‘,$signPackage);
　　$this->assign(‘share_intro‘,$share_intro);//分享规则介绍
}

html页面部分

首先引入微信js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">

var uid= $.cookie("uid") == "undefined"?0:$.cookie("uid");

/**分享信息初始化 开始**/
if(uid!=undefined && uid!=0){
wx.config({
　　debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
　　appId: ‘{$signPackage.appId}‘, // 必填，公众号的唯一标识
　　timestamp: {$signPackage.timestamp}, // 必填，生成签名的时间戳
　　nonceStr: ‘{$signPackage.nonceStr}‘, // 必填，生成签名的随机串
　　signature: ‘{$signPackage.signature}‘,// 必填，签名，见附录1
jsApiList: [
　　‘checkJsApi‘, //判断当前客户端版本是否支持指定JS接口
　　‘onMenuShareTimeline‘, //分享给好友
　　‘onMenuShareAppMessage‘, //分享到朋友圈
　　‘onMenuShareQQ‘, //分享到QQ
　　‘onMenuShareQZone‘, //分享到QQ
　　] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
　　//处理成功验证
wx.ready(function(){
　　//处理失败验证
wx.error(function(res){
　　alert(res.errMsg); //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
});
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
　　title: ‘{$share_intro.name}‘, // 分享标题
　　link: ‘{$share_intro.url}?state=‘+uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 //
　　imgUrl: ‘{$share_intro.image}‘, // 分享图标
　　trigger: function (res) {
　　// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
　　//alert(‘click shared‘);
},
success: function () {
　　// 用户确认分享后执行的回调函数
},
cancel: function () {
　　// 用户取消分享后执行的回调函数
},fail: function (res) {
　　//alert(JSON.stringify(res));
}
});
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
　　title: ‘{$share_intro.name}‘, // 分享标题
　　desc: ‘{$share_intro.intro}‘, // 分享描述
　　link: ‘{$share_intro.url}?state=‘+uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
　　imgUrl: ‘{$share_intro.image}‘, // 分享图标
　　type: ‘‘, // 分享类型,music、video或link，不填默认为link
　　dataUrl: ‘‘, // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
　　// 用户确认分享后执行的回调函数
},
cancel: function () {
　　// 用户取消分享后执行的回调函数
}
});
//获取“分享到QQ”按钮点击状态及自定义分享内容接口
wx.onMenuShareQQ({
　　title: ‘{$share_intro.name}‘, // 分享标题
　　desc: ‘{$share_intro.intro}‘, // 分享描述
　　link: ‘{$share_intro.url}?state=‘+uid, // 分享链接
　　imgUrl: ‘{$share_intro.image}‘, // 分享图标
　　success: function () {
　　　　// 用户确认分享后执行的回调函数
　　},
　　cancel: function () {
　　// 用户取消分享后执行的回调函数
　　}
});
　　//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
wx.onMenuShareQZone({
　　title: ‘{$share_intro.name}‘, // 分享标题
　　desc: ‘{$share_intro.intro}‘, // 分享描述
　　link: ‘{$share_intro.url}?state=‘+uid, // 分享链接
　　imgUrl: ‘{$share_intro.image}‘, // 分享图标
　　success: function () {
　　// 用户确认分享后执行的回调函数
　　},
　　cancel: function () {
　　// 用户取消分享后执行的回调函数　　
　　}
});
wx.error(function (res) {
　　alert(res.errMsg);
　});
});

}
/**分享信息初始化 结束**/
</script>

注意：另外说明一点微信分享的链接的域名必须与js安全域名一致 不能将微信授权或其它域名当做分享链接,若这样做微信内分享到朋友圈和分享到朋友无法读取自定义内容 仅qq和qq空间可以读取 
解决办法 定义一个中转链接,此链接在js安全域名下 或者自定义一个js安全域名下的页面 然后跳转到授权链接

时间： 2024-11-10 01:17:42

微信web开发自定义分享的相关文章

使用微信JS-SDK 实现 自定义 分享 功能

微信PC端点击页面,转发给朋友. 开发前 ,分享之后 ,链接 样式如下: 格式化之后,样式如下: 页面代码: <!DOCTYPE html> <vt:function var="source" method="GetBySingle" args="$Company" type="Business.BLL.Sys.CompanyService" /> <html class="um lan

微信web开发ui框架制作网页实例教程

框架:微信ui开发框架 范围:开发所有的微信web页面 下载地址:http://www.chtml.cn/topic/show/49 实例一.Button 按钮可以使用a或者button标签.wap上要触发按钮的active态,必须触发ontouchstart事件,可以在body上加上ontouchstart=""全局触发. 按钮常见的操作场景:确定.取消.警示,分别对应class:weui_btn_primary.weui_btn_default.weui_btn_warn,每种场景

微信应用js-sdk自定义分享图文

之前写过步骤 但是代码很少 这里奉献上我自己写的代码 我是用js做的 先奉上js部分的代码 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>众悦学车无忧险 免费申领</title> <meta name="description"

微信js接口自定义分享内容

最近客户有个要求,需要给网页添加微信分享功能,当然指的是用微信自带浏览器的时候,希望用户在最后一页点击分享的时候是分享的首页.曾经无意中看到过微信公众开发者平台提供了js接口,所以试着做了做,果然,跌入了一个大坑,现在就把我的经历跟大家分享一下. 首先去腾讯给的开发者文档去看,地址就不贴了,然后 第一步,绑定域名,从客户那儿拿到了备案的域名,然后登陆微信公众平台绑定域名 第二步,在页面里引入js,官方文档中都有 第三步,设置config验证, 官方文档给了个例子,直接拿过来用,否则自己写的话很麻

微信企业号开发:自定义菜单

开发微信企业号可以通过程序自定义菜单,只需要调用相关的接口就可以实现. 其实这个菜单也就是微信底部的菜单,目前自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单.一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以"..."代替.其实创建菜单也很简单. 但有一点需要说明,如果有子菜单,那么这个菜单就不会向后端发送事件.例如:我定义了三个一级菜单一个click,两个view. 如果没有子菜单,则点击click类型的菜单时,后主动向后端发送上报菜单事件,如果有则不会

微信小程序：微信web开发阶段性学习总结

小程序运行机制 前台/后台状态 小程序启动后,界面被展示给用户,此时小程序处于前台状态. 当用户点击右上角胶囊按钮关闭小程序,或者按了设备 Home 键离开微信时,小程序并没有完全终止运行,而是进入了后台状态,小程序还可以运行一小段时间. 当用户再次进入微信或再次打开小程序,小程序又会从后台进入前台.但如果用户很久没有再进入小程序,或者系统资源紧张,小程序可能被销毁,即完全终止运行. 小程序启动 这样,小程序启动可以分为两种情况,一种是冷启动,一种是热启动. 冷启动:如果用户首次打开,或小程序销

Python web开发——自定义userprofile（用户描述）

1.新建一个APP 2.查看数据库中系统给我们提供的默认的users的字段含义 ID: 是主键,用户的ID passWord:密码 last_login : 最后一次登录的时间 is_superuser:是否是超级用户(VIP) username:用户姓名 first_name:扩展字段,初始值 email:用户的邮箱 is_staff:是否是员工 is_active:是否激活 data_joined:用户的注册时间 3.自定义userprofile 由于这些字段满足不了我们的需求,我们又想继承

微信web开发的上传图片js接口

$('.chooseImage').click(function(){ wx.chooseImage({ count: pic_num, // 默认9,大于9也是显示9 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 'original', success: function (res) { images.localId = res.localIds; alert('已选择 ' + res.localIds.length + ' 张图片'); v

WeUI 为微信 Web 服务量身设计-h5前端框架

WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素. git地址: https://github.com/weui/weui