H5微信自定义分享及调用相机上传图片(thinkcmf-PHP)

大恒大

已于 2022-06-13 00:35:10 修改

阅读量561

点赞数

分类专栏：前端文章标签：微信 php 开发语言

于 2022-06-12 15:52:19 首次发布

本文链接：https://blog.csdn.net/kindmb/article/details/125245786

版权

前端专栏收录该内容

32 篇文章 3 订阅

订阅专栏

1. 需要一个公众号（认证过的）
1. 在公众号后台基本配置-IP白名称中添加服务器IP白名称（accesstoken要求）
1. 在公众号后台公众号设置-功能设置中添加JS接口域名,下载认证文件
1. 后端代码下载PHP示例文件 http://demo.open.weixin.qq.com/jssdk/sample.zip
1. access_token和jsapi_ticket.php放在/public下,这是两个缓存文件
1. jssdk.php放在app的controller目录下,并为其添加命名空间

<?php
namespace app\[appname]\wxapi;

class Jssdk {  //改一下类名

1. 控制器上引用jssdk

use app\[appname]\wxapi\Jssdk;
//......
   $jssdk = new Jssdk("myappid", "mysecrit");
   $signPackage = $jssdk->GetSignPackage();          
   return $this->fetch('',['vo' => $signPackage]);

1. 模板文件:

<html>
<head>
   <script src='http://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script> 
</head>
<body>
<div class="container"></div>
<script> 
  wx.config({
    debug: false,
    appId: '{$vo["appId"]}',
    timestamp: '{$vo["timestamp"]}', 
    nonceStr: '{$vo["nonceStr"]}',  
    signature:  '{$vo["signature"]}',  
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
      "chooseImage","previewImage","uploadImage","downloadImage",
            "onMenuShareTimeline",
            "onMenuShareAppMessage"
        ]
  });
  wx.ready(function () {
      // 分享给朋友
      wx.onMenuShareAppMessage({
            title: '分享标题',
            desc: '描述', // 分享描述
            link: location.href, // 分享链接
            imgUrl: 'http://mydomainname/images/share.png', // 分享图标
            success: function () {
                 alert("成功");
            },
            cancel: function () {
                 alert("失败")
            }
        });
    });   
    
/**
* 微信上传图片（单图上传）
*/
function album() {
wx.chooseImage({
    count: 1,       // 默认9
    sizeType: ['original', 'compressed'],       // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'],       // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表字串数组，localId可以作为img标签的src属性显示图片
        wx.uploadImage({
            localId: localIds[0], //传数组第一张
            isShowProgressTips: 1, 默认为1，显示进度提示
            success: function (data) {  //上传到微信服务器后返回ID
                mediaId = data.serverId; // 返回图片的服务器端ID
                //将ID发给自己的服务器，在后台将图片从微信服务器上下载到自己服务器上，因为微信服务器只保留三天
                $.ajax({
                    "type": "post",
                    "url": "/myappcontroller/getimg", //ID发送给控制器方法
                    "dataType": "json",
                    "data": {"mediaId": mediaId},
                    "success": function (res) {
                    //图片加载到页面上，并保留上传后图片的值到input以备保存
                         $("#pics").val(res.f)
                         $("#picsadd").before('<div class="imgplace"><img src="/upload/'+res.f +'" class="upimg" /></div>')
                    }
                });
            },
            fail: function (error) {
                alert(JSON.stringify(error));
            }
        });
    }
});
}
</script>
</body>
</html>

9.如果分享是不出现链接,就先把链接添加到微信收藏,再从收藏中打开进行分享
1. 上传图片的后台PHP文件：

public function getimg(){
    $mediaid = input('post.mediaId'); //获取ajax来的media_id        
    try{
        $jssdk = new Jssdk("XXX", "XXX"); //传入appid,secrit
        $access_token = $jssdk-> getAccessToken();            
        $url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=" . $access_token . "&media_id=" . $mediaid;          
        $content = $jssdk->httpGet($url); //读取图片内容             
        $user_path = $_SERVER['DOCUMENT_ROOT'] .'/upload/' ;
        $filename = time() . rand(10, 99) . '.jpg';//文件名
        $filePath = $user_path . $filename;//本地图像绝对路径            
        file_put_contents($filePath, $content); //保存图片
     }catch(Exception $exp){
           return json(array("msg"=>$exp));
     }
        return json(array("f"=>$filename)); //返回文件名
}