如何将h5网页改成微信网页

news/2024/7/7 7:03:14

1、如何将h5网页改成微信网页
1、设置安全域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
2、引用一个js文件在微信开发者里面 js sdk里面
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。
3、要去写一个配置
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的唯一标识公众号开发者id
      timestamp: (new Date().getTime())/1000), // 必填，生成签名的时间戳秒 js中是毫秒需要除以1000取前面的整数
      nonceStr: '', // 必填，生成签名的随机串 asgdf
      signature: '',// 必填，签名
      jsApiList: ["onMenuShareTimeline",
      "onMenuShareAppMessage",
      "onMenuShareQQ",
      "onMenuShareWeibo",
      "onMenuShareQZone","getLocation"......
      openCard] // 必填，需要使用的JS接口列表
  });

备注如何获取 signature
  1、在http://mp.weixin.qq.com/debug里面的调试工具可以用appid和secret 换取accesstoken
get请求
  请求地址 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=xxxxxxxx&secret=xxxxx
2、用accesstoken 换取signature
  http://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=你的token&type=jsapi
  拿到signature

4、调用
<div id="info">选择一张图片</div>
<div onClick="getImg()">选择一张图片</div>
<script>
  function getImg(){
      wx.ready(function(){
      wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          //调试这样，因为手机没有console 只能这样显示然后调试错误
          var t=document.getElementById("Info");
          t.innerHTML=res.localIds
       }
      });
      });
  }

</script>