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

发布时间：2023-07-16 12:00

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目录下,并为其添加命名空间


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(\'+res.f +\'\" class=\"upimg\" />
\')
                    }
                });
            },
            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)); //返回文件名
}

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

相关推荐