首页
APP开发
小程序开发
物联网开发
系统开发
交流论坛
资讯
百科
商家入驻

信息发布→ 登录注册退出

当前位置： 首页 > 资讯

SEO优化
技术教程
IDC资讯
网络快讯
SEO推广

微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法

发布日期： 2017-03-26 阅读量： 作者： 网络

参数

	描述
appId	公众号的唯一标识应用id
timestamp	生成签名的时间戳
nonceStr	生成签名的随机串
signature	签名

上述表格中的四个参数是初始化调用微信jsapi的凭证，咱们在前几节已经反复说明如何使用了，在这里就不在贴出如何生成上述四个参数了

完整的jsp代码如下：


nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;

  
    <base>"&gt;
    <title>微信jsapi测试-V型知识库</title>
    <meta>
   <script> </script> 
<scriptsrc>
  
  
  <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
     <p>基础接口之判断当前客户端是否支持指定的js接口</p>   
     <input><br>
      <h3>图像接口</h3>
      <span>拍照或从手机相册中选图接口</span><br>
      <button>chooseImage</button><br>
      <span>预览图片接口</span><br>
      <button>previewImage</button><br>
      <span>上传图片接口</span><br>
      <button>uploadImage</button><br>
      <span>下载图片接口</span><br>
      <button>downloadImage</button><br>
  显示图片<imgalt>
  <br>
  <script>
  wx.config({  
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
    appId: &#39;${appId}&#39;, // 必填，公众号的唯一标识  
    timestamp: &#39;${ timestamp}&#39; , // 必填，生成签名的时间戳  
    nonceStr: &#39;${ nonceStr}&#39;, // 必填，生成签名的随机串  
    signature: &#39;${ signature}&#39;,// 必填，签名，见附录1  
    jsApiList: [&#39;checkJsApi&#39;,
                &#39;chooseImage&#39;,
                &#39;previewImage&#39;,
                 &#39;uploadImage&#39;,
                 &#39;downloadImage&#39;
               ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});  
wx.ready(function(){  
    // 5 图片接口
  // 5.1 拍照、本地选图
  var images = {
    localId: [],
    serverId: []
  };
  document.querySelector(&#39;#chooseImage&#39;).onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert(&#39;已选择 &#39; + res.localIds.length + &#39; 张图片&#39;);
$("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上
      }
    });
  };
  // 5.2 图片预览
  document.querySelector(&#39;#previewImage&#39;).onclick = function () {
    wx.previewImage({
      current: &#39;//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
      urls: [
        &#39;//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
        &#39;//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
        &#39;//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;
      ]
    });
  };
  // 5.3 上传图片
  document.querySelector(&#39;#uploadImage&#39;).onclick = function () {
    if (images.localId.length == 0) {
      alert(&#39;请先使用 chooseImage 接口选择图片&#39;);
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          //alert(&#39;已上传：&#39; + i + &#39;/&#39; + length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
  };
  // 5.4 下载图片
  document.querySelector(&#39;#downloadImage&#39;).onclick = function () {
    if (images.serverId.length === 0) {
      alert(&#39;请先使用 uploadImage 上传图片&#39;);
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert(&#39;已下载：&#39; + i + &#39;/&#39; + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();
  };
});  
 //初始化jsapi接口 状态
wx.error(function (res) {
  alert("调用微信jsapi返回的状态:"+res.errMsg);
});
 </script>
  
</imgalt></scriptsrc>

相关文章：网站投放广告赚钱该怎么做？做的好的收益惊人！个人站长通过网站营销快速获取大量流量的10个方法！ 8种适合当副业的靠谱网上兼职项目介绍日赚500的项目都有哪些？这里推荐你做这2个！淘宝竞价推广怎么操作？淘宝店铺适合做竞价推广吗？ cpa广告推广的基本形式和推广特点分析社区论坛引流的5个小技巧，助你高效引流！惊掉下巴！趣头条严查广告联盟代理商，赌博广告也敢放！ app排名上不去？最新安卓应用市场app排名算法规则分享！网站推广该怎么做？适合网站运营新手的10种网站推广方法！直播app需要什么资质呢？需要具备这6个资质证件！揭秘cpa引流项目之百度贴吧诱导引流项目的玩法和思路！如何判断一个广告联盟靠不靠谱？主要看这三点！ qq引流推广怎么做？QQ裂变引流操作思路分享蜜语直播app，精彩不断，给你全新的直播乐趣！ app地推过程中需要注意的一些推广技巧以及常见问题！如何选择一个收益好的靠谱的广告联盟呢？注意这5点！全网营销运营推广怎么做？广告联盟源码下载平台有哪些，免费版的源码在哪可以下载？ 5个可以提升seo推广效果的网站运营策略分享！新手在信息流广告投放过程中最常见的7个问题及解决思路！时下热门的通过做视频网站赚钱的网赚项目干货分享! 网站没流量？教你如何通过网站外链引流让网站活起来！利用网站赚钱的10大方法，月入万元轻轻松松！这样做，能吸引更多的点击，网站推广专家专业解析广告推广怎么做最有效？需要做好这五点！广告宣传方式有哪些？目前最常见的15种广告宣传方式盘点！橡塑化工网络营销推广,橡塑化工免费信息发布品牌推广的三种方式！你知道吗？为什么网站的原创文章收录了但是无排名？主要是这几个原因！

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯9946 】【 SEO推广10016 】

上一篇: docker-compose 找不到命令怎么办

下一篇: docker env是什么意思

随便看看

SEO运营专员数字时代的信息导航者,招聘要求与职业发展,台州seo优化报名 发布日期： 2025-04-13
湛江网站优化关键词报价如何精准定位，提升网站排名,中山seo外包v1一戈seo24 发布日期： 2025-04-13
SEO表格模板制作指南助力网站优化与提升排名,黄山关键词百度搜索排名 发布日期： 2025-04-13
临安百合SEO培训助力企业互联网营销新篇章,盐城网站优化渠道 发布日期： 2025-04-13
东莞关键词SEO推广助力企业抢占网络市场高地,夏日穿搭关键词搜索排名 发布日期： 2025-04-13
樱花JSQ30智能化家居生活的新选择,淄博网站建设关键词优化 发布日期： 2025-04-13
上海SEO优化助力企业腾飞的网络营销之路,查询表格关键词排名 发布日期： 2025-04-13
武汉城市优化之路，打造高质量发展新引擎,SEO入门舞蹈图片动漫 发布日期： 2025-04-13
毕节关键词优化报价精准营销，助力企业腾飞,王卡seo 发布日期： 2025-04-13
泰安关键词优化步骤研究助力企业抢占市场先机,seo优化排名了解 发布日期： 2025-04-13
泰州网站关键词优化步骤助力企业提升网络竞争力,大连网站优化选哪家 发布日期： 2025-04-13
海外广告投放关键词优化步骤精准定位，高效触达,市区seo公司合作 发布日期： 2025-04-13
SEO运营视角下的网站流量分析之路,潍坊优化网站公司电话 发布日期： 2025-04-13
单页应用SEO优化挑战与机遇并存,陈奎 seo 发布日期： 2025-04-13
探寻高效视频素材下载软件，助力内容创作者一臂之力,泰州seo建站 发布日期： 2025-04-13
探索免费API接口平台助力创业创新，赋能企业数字化转型,seo手机长尾词排行软件 发布日期： 2025-04-13
元氏网站SEO优化多少，收获几何,出口网站优化 发布日期： 2025-04-13
亳州SEO推广哪家靠谱优质服务商的选择之路,博乐网站优化推广公司 发布日期： 2025-04-13
时尚与个的融合,女装关键词与应用,抚顺抖音seo 发布日期： 2025-04-13
无人|直播|时代的到来一台手机轻松实现|直播|梦想,中小企业seo推广 发布日期： 2025-04-13
晋中关键词优化公司电话助力企业提升网络竞争力,闪电精灵seo快速排名 发布日期： 2025-04-13
暴躁老姐的CSGO心得分享高手的成长之路,根河抖音关键词排名 发布日期： 2025-04-13
最快最全最好用的网上行情中心助力者把握市场脉搏,珠宝seo推广网站优化 发布日期： 2025-04-13
峭夭15云速捷,SEO服务公司的卓越之选,品牌宣传优选乐云seo 发布日期： 2025-04-13
唐山SEO公司16火星高效网络营销之路,徐工优化人才招聘网站 发布日期： 2025-04-13
打造高效营销团队关键词优化步骤与实战例子分析,玉溪快照seo推广 发布日期： 2025-04-13
抖音SEO获客系统回报比高的网络营销利器，价格几何,龙华网站建设方案优化 发布日期： 2025-04-13
抖涨客软件下载免费，增值服务需缴费，其背后的商业模式,南通抖音seo系统 发布日期： 2025-04-13
拼多多关键词优化助力商家在激烈竞争中脱颖而出,no16 seo赚钱 发布日期： 2025-04-13
探寻上城区的历史韵味与现代魅力,一座城市的过去与未来,宜昌seo哪家厉害 发布日期： 2025-04-13

4007654355
915688610@qq.com
深圳市南山区粤海街道高新区社区高新南七道011号高新工业村T3栋

APP开发

小程序开发

物联网开发

系统开发

APP开发网深圳APP开发楠夏潇开发平台楠夏潇开发网系统开发平台

Copyright © 2024 深圳市楠夏潇科技有限公司版权所有粤ICP备2024325405号联网备案号

深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司
深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司
深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司
深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司
深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司深圳市楠夏潇科技有限公司

友情链接：标签arclist报错：指定属性 typeid 的栏目ID不存在。
标签arclist报错：指定属性 typeid 的栏目ID不存在。