微信网页开发

在微信页面调用微信的功能,如:选择图片、照相、地图定位、扫一扫、分享等功能,需要调用微信的JS类。

下载JS-SDK

<?php
require_once "./jssdk.php";
$jssdk=new JSSDK("你的AppID","你的AppSecret");
$signPackage=$jssdk->GetSignPackage();
?>
<html>
  <head>
    <meta charset=‘utf-8‘/>
    <script src="./jquery1-8-0.js"></script>
  </head>
  <body>
    <input type="button" value="修改头像" id="upimg"/>
    <input type="button" value="查看地图" id="seemap"/>
    <input type="button" value="扫一扫" id="sos"/>
  </body>
   <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
   <script>
wx.config({
    debug: true,
    appId: ‘<?php echo $signPackage["appId"];?>‘,
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: ‘<?php echo $signPackage["nonceStr"];?>‘,
    signature: ‘<?php echo $signPackage["signature"];?>‘,
    jsApiList: [
    ‘chooseImage‘,  //选择图片
    ‘onMenuShareTimeline‘,  //微信朋友圈分享
    ‘onMenuShareQZone‘,  //QQ空间分享
    ‘getLocation‘,  //获取地理位置
    ‘uploadImage‘,  //上传图片
    ‘openLocation‘,  //使用微信内置地图查看位置
    ‘onMenuShareQQ‘,  //分享到QQ
    ‘scanQRCode‘  //扫一扫
    ]
});
wx.ready(function () {
//选择图片
  $(document).on("click","#upimg",function(){
    wx.chooseImage({
      count: 3,//选择图片个数,默认为9
      sizeType: [‘original‘, ‘compressed‘],// 可以指定是原图还是压缩图,默认二者都有
      sourceType: [‘album‘, ‘camera‘],// 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        var localIds = res.localIds;    // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
      }
    })
  });
//微信朋友圈分享
    wx.onMenuShareTimeline({
      title: ‘标题‘, // 分享标题
      link: ‘http://www.soso.com‘, // 分享链接
      imgUrl: ‘http://www.test.com/1.jpg‘, // 分享图标
      success: function () { 
        alert(‘分享成功‘);
      },
      cancel: function () { 
        alert(‘分享失败‘);
      }
    });
//QQ空间分享
wx.onMenuShareQZone({
    title: ‘标题‘, // 分享标题
    desc: ‘描述‘, // 分享描述
    link: ‘http://www.soso.com‘, // 分享链接
    imgUrl: ‘http://www.test.com/1.jpg‘, // 分享图标
    success: function () { 
    alert(‘分享成功‘);
    },
    cancel: function () { 
    alert(‘分享失败‘);
    }
});
//分享到QQ
wx.onMenuShareQQ({
    title: ‘标题‘, // 分享标题
    desc: ‘描述‘, // 分享描述
    link: ‘http://www.soso.com‘, // 分享链接
    imgUrl: ‘http://www.test.com/1.jpg‘, // 分享图标
    success: function () {
    alert("分享成功");
    },
    cancel: function () {
    alert("分享失败");
    }
});
//地图定位(目的地)
  $(document).on("click","#seemap",function(){
    wx.openLocation({
        latitude: 0, // 纬度,浮点数,范围为90 ~ -90
        longitude: 0, // 经度,浮点数,范围为180 ~ -180。
        name: ‘‘, // 位置名
        address: ‘‘, // 地址详情说明
        scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: ‘‘ // 在查看位置界面底部显示的超链接,可点击跳转
    });
  });
//扫一扫
  $(document).on("click","#sos",function(){
    wx.scanQRCode({
    needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
      success: function (res) {
        var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
      }
    });
  });
});
wx.error(function(res){

});
</script>
</html>

微信网页开发

上一篇:微信小程序双向绑定


下一篇:实现自己写的小程序富文本编辑以及展示,不跟PC端的兼容,但是可以在pc端显示以及修改,一旦修改,小程序不再做解析