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

    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)); //返回文件名
} 

你可能感兴趣的:(前端,微信,php,开发语言)