• 微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求 POST请求的时候有好几个坑.我已经为大家填好了. wx.request({ url: 'test.php', data: { x: '' , y: '' }, method: "POST", header: { '...

    CSDN微信小程序开发专栏,欢迎关注!

    微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求

    POST请求的时候有好几个坑.我已经为大家填好了.

    <img src="https://img-blog.csdn.net/20161017170933243?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" align="middle" alt="" />
    
    按照文档,肯定是这么写.那就入坑了.

    1. 'Content-Type': 'application/json'用在get请求中没问题.

    POST请求就不好使了.需要改成: "Content-Type": "application/x-www-form-urlencoded"


    2016.11.10更新:有同学在将content-type 修改为小写后,post请求成功.

    2. 加上method: "POST"

    3.data: { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" }写成json格式这样也是请求不到数据的.需要转格式.

    下面直接贴代码:

     3.1

    <span style="font-size:24px;">//index.js
    //获取应用实例
    var app = getApp()
    Page( {
      data: {
        toastHidden: true,
        city_name: '',
      },
      onLoad: function() {
        that = this;
        wx.request( {
          url: "http://op.juhe.cn/onebox/weather/query",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          method: "POST",
         //data: { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" },
          data: Util.json2Form( { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" }),
          complete: function( res ) {
            that.setData( {
              toastHidden: false,
              toastText: res.data.reason,
              city_name: res.data.result.data.realtime.city_name,
              date: res.data.result.data.realtime.date,
              info: res.data.result.data.realtime.weather.info,
            });
            if( res == null || res.data == null ) {
              console.error( '网络请求失败' );
              return;
            }
          }
        })
      },
      onToastChanged: function() {
        that.setData( { toastHidden: true });
      }
    })
    var that;
    var Util = require( '../../utils/util.js' );</span>

    3.2

    <span style="font-size:24px;"><!--index.wxml-->
    <view class="container">
       <toast hidden="{{toastHidden}}" bindchange="onToastChanged">
            {{toastText}}
        </toast>
        <view>{{city_name}}</view>
        <view>{{date}}</view>
        <view>{{info}}</view>
    </view></span>
    3.3

    <span style="font-size:24px;">//util.js
    function json2Form(json) {
        var str = [];
        for(var p in json){
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
        }
        return str.join("&");
    }
    module.exports = {
      json2Form:json2Form,
    }</span>



    希望对大家有帮助.


    http://blog.csdn.net/qq_31383345






    展开全文
  • 最近学习一下微信小程序,感觉小程序的小程序的功能还是相当强大的尤其是推出web-view标签可以直接将H5页面嵌入在微信小程序中,真是做到了一次开发,处处访问 但是由于微信小程序对个人小程序的限制,web-view标签...

    最近学习一下微信小程序,感觉小程序的小程序的功能还是相当强大的尤其是推出web-view标签可以直接将H5页面嵌入在微信小程序中,真是做到了一次开发,处处访问

    但是由于微信小程序对个人小程序的限制,web-view标签,支付等功能不对个人用户开放,微信小程序是请求的服务器必须是https协议

    现在简单说一下微信小程序如何请求数据的
    可以参考文档

    https://developers.weixin.qq.com/miniprogram/dev/api/

    我的微信小程序已经上线,会持续更新,大家可以扫下面二维码关注一波,互相学习一下,我的微信在微信小程序里面有,大家有问题可以互相讨论一下谢谢
    在这里插入图片描述
    下面提供一个请求服务端的类,大家可以直接引用

    function getSearchMusic(keyword,pageindex, callbackcount,url, callback) {
      wx.request({
        url:url,
        data: {
          g_tk: 5381,
          uin: 0,
          format: 'json',
          inCharset: 'utf-8',
          outCharset: 'utf-8',
          notice: 0,
          platform: 'h5',
          needNewCode: 1,
          w: keyword,
          zhidaqu: 1,
          catZhida: 1,
          t: 0,
          flag: 1,
          ie: 'utf-8',
          sem: 1,
          aggr: 0,
          perpage: 20,
          n: callbackcount,  //返回数据的个数
          p: pageindex,
          remoteplace: 'txt.mqq.all',
          _: Date.now(),
          key:'b083d9eabad077c4a9d655591c5a1de2'
        },
        method: 'GET',
        header: { 'content-Type': 'application/json' },
        success: function (res) {
          if (res.statusCode == 200) {
            callback(res.data);
          }
        }
      })
    }
    
    module.exports = {
      getSearchMusic: getSearchMusic
    }
    

    使用:

    var util = require('../../../../util/utilHttp.js')
    Page({
      data: {
        searchKeyword: '',  //需要搜索的字符
        searchSongList: [], //放置返回数据的数组
        isFromSearch: true,   // 用于判断searchSongList数组是不是空数组,默认true,空的数组
        searchPageNum: 1,   // 设置加载的第几次,默认是第一次
        callbackcount: 5,      //返回数据的个数
        searchLoading: false, //"上拉加载"的变量,默认false,隐藏
        searchLoadingComplete: false,  //“没有数据”的变量,默认false,隐藏
        xhTypeArr: ["文本笑话", "笑图","图文笑话"]// 笑话种类
      },
    
      // 加载的时候加载数据
      onLoad: function (e) {
        console.log("页面加载时间执行了");
        this.fetchSearchList();
      },
    
      // 点击搜索的时候触发相关的事件
    
    
      // 点击图片可以进行预览的操作
    
      preview:function(event){
        console.log("点击事件执行了");
    
        var srcs= new Array();
        var src = event.target.dataset.src;
        srcs[0] = src;
        wx.previewImage({
          current: src, // 当前显示图片的http链接 
          urls: srcs,
        })
      },
    
      // 获取开始页面的数据
      getIndexPageNum:function(e){
          this.setData({
            searchPageNum:e.detail.value
          })
    
    
      },
    
    
      // 获取结束页面的数据
    
    
      queryByPageNum:function(){
        console.log("点击事件触发了");
        this.fetchSearchList();
      },
    
      //输入框事件,每输入一个字符,就会触发一次
      bindKeywordInput: function (e) {
        console.log("输入框事件")
        this.setData({
          searchKeyword: e.detail.value
        })
      },
      //搜索,访问网络
      fetchSearchList: function () {
        let that = this;
        let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数
          searchPageNum = that.data.searchPageNum,//把第几次加载次数作为参数
          callbackcount = that.data.callbackcount; //返回数据的个数
        // 根据传参不同请求不同类型接口
          let url ;
          url = 'https://way.jd.com/showapi/dtgxt?page=' + searchPageNum + '&maxResult=5&appkey=4deac241a66f8eb3e6ccb43b79737728&key=b083d9eabad077c4a9d655591c5a1de2';
        
    
    
        //访问网络
        util.getSearchMusic(searchKeyword, searchPageNum, callbackcount,url, function (data) {
          console.log(data)
          console.log(data.code);
          console.log(data.result);
          console.log(data.result.showapi_res_body.contentlist);
          //判断是否有数据,有则取数据
          if (data.msg =='查询成功') {
            let searchList = [];
            //如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加
          
    
            searchList = data.result.showapi_res_body.contentlist;
            console.log(searchList);
            that.setData({
              searchSongList: searchList, //获取数据数组
              zhida: data.msg, //存放歌手属性的对象
              searchLoading: true   //把"上拉加载"的变量设为false,显示
            });
            //没有数据了,把“没有数据”显示,把“上拉加载”隐藏
          } else {
            that.setData({
              searchLoadingComplete: true, //把“没有数据”设为true,显示
              searchLoading: false  //把"上拉加载"的变量设为false,隐藏
            });
          }
        })
      },
     
      //点击搜索按钮,触发事件
      keywordSearch: function (e) {
        this.setData({
          searchPageNum: 1,   //第一次加载,设置1
          searchSongList: [],  //放置返回数据的数组,设为空
          isFromSearch: true,  //第一次加载,设置true
          searchLoading: true,  //把"上拉加载"的变量设为true,显示
          searchLoadingComplete: false ,//把“没有数据”设为false,隐藏
          index: e.detail.value
        })
        this.fetchSearchList(e);
      },
      //滚动到底部触发事件
      searchScrollLower: function () {
    
        console.log("加载数据的事件执行了");
        let that = this;
        if (that.data.searchLoading && !that.data.searchLoadingComplete) {
          that.setData({
            searchPageNum: that.data.searchPageNum + 1,  //每次触发上拉事件,把searchPageNum+1
            isFromSearch: false , //触发到上拉事件,把isFromSearch设为为false
          });
          that.fetchSearchList();
        }
      }
    })
    
    展开全文
  • 微信小程序:发送请求

    2017-06-28 23:17:14
    微信小程序开发请求

    习惯使用ajax的我们,在使用微信小程序的时候,必定也是会使用到小程序内部的方法的,比如请求后台的数据,使用微信小程序的request有一个特别好的方法,就是使用的时候,我们无需去考虑跨域问题,因为微信小程序的做法是由他们的后台取访问我们的后台,所以实际的“跨域问题”已经在我们的小程序与微信后台交流的时候解决了,。



    写写微信小程序的访问方法,当然是默认的get,以及最常用的post,其他的不做解释,



    这个是微信给出的官方例子,当然在实际中我们会结合自己的实际去开发的

    说到底,微信只是个框架,不懂就去看三遍文档

    展开全文
  • 微信小程序发送网络请求(request)   下边的地址是微信小程序开发平台对网络请求的介绍。 微信小程序网络请求介绍   最近公司要求开发小程序,下面是我查看微信小程序文档,写的一个demo,记录下来方便以后...

    微信小程序发送网络请求(request)

     

    下边的地址是微信小程序开发平台对网络请求的介绍。

    微信小程序网络请求介绍

     

    最近公司要求开发小程序,下面是我查看微信小程序文档,写的一个demo,记录下来方便以后使用

     

    开发环境测试:

    为了进行测试,小程序需要设置不校验业务域名以及TLS版本以及HTTPS整数。

     JS页面:

    // Js请求方法
    test:function() {
        wx.request({
          url: 'http://localhost:8080/test/login.action', //接口地址
          data: {
            x: '1',// 参数:值
            y: '2'
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success(res) {
                // 返回值
                console.log(res.data)
          }
        })
      }

    WXML页面 :

    WXML页面
    <button bindtap='test'>测试网络连接</button>

    微信请求参数:

    属性 类型 默认值 是否必填 说明 支持版本
    url string   开发者服务器接口地址  
    data string/object/ArrayBuffer   请求的参数  
    header Object   设置请求的 header,header 中不能设置 Referer。
    content-type 默认为 application/json
     
    method string GET HTTP 请求方法  
    dataType string json 返回的数据格式  
    responseType string text 响应的数据类型 >= 1.7.0
    success function   接口调用成功的回调函数  
    fail function   接口调用失败的回调函数  
    complete function   接口调用结束的回调函数(调用成功、失败都会执行)  

    回调函数:

    属性 类型 说明 支持版本
    data string/Object/Arraybuffer 开发者服务器返回的数据  
    statusCode number 开发者服务器返回的 HTTP 状态码  
    header Object 开发者服务器返回的 HTTP Response Header >= 1.2.0

    下面微信官方开发文档地址,大家可以参考官方Api。

     RequestTask wx.request(Object object)

     

    展开全文
  • 发送消息,是指用户公众号向用户发送相应形式的消息。根据微信开发文档,由以下四种形式:被动回复,群发接口,客服消息接口以及模板消息接口。本文将基于Java语言以及个人微信测试号,说明被动回复、客服消息接口...

    发送消息,是指用户公众号向用户发送相应形式的消息。根据微信开发文档,由以下四种形式:被动回复,群发接口,客服消息接口以及模板消息接口。本文将基于Java语言以及个人微信测试号,说明被动回复、客服消息接口以及模板消息接口的使用实现,群发接口并未涉及。
    1. 被动回复
    被动回复只能应用于在接收到用户的互动数据之后,才能向用户发送消息。这一部分较为简单,正式进行微信开发的第一步就是,在公众号中基本配置->服务器配置中设置URL(服务器地址)时,这时该URL链接指定的地址就是对应着Java Web下的一个Servlet,配置好对应的Token及相关参数之后,则微信服务器将会将所有的用户与公众号的互动信息都转发到该Servlet,然后开发者根据接收到的用户互动数据,再进行处理。所谓的被动回复,就是在该Servlet中判断接收到你指定的消息时(例如某个字眼),则直接将想要回复的消息打包成官方指定的XML数据格式,写回到输出流中即可。在这里不过过多解释,如下示例代码:

    response.getWriter().write( MessageUtil.MessageToXML(new TextMessage.Builder(fromUserName,toUserName,new Date().getTime(),"最新资讯请查看下方微信菜单栏,谢谢您的关注").build()));

    2.客服消息接口
    客服消息接口,应用于公众号主动向特定用户(必须满足该用户在48小时内与公众号有交互)发送特定格式的消息,应用场景例如:用户在微页面上完成了抽奖,而这时候公众号主动向用户推送中奖信息。所回复的不同消息的格式,参见开发者文档,下面以回复文本消息作为示例,需要注意的是推送的消息data必须满足json格式,请求类型为post。返回的json数据中,若errorcode为0,则代表推送成功。

     //推送中奖消息
            String data = "{"+
                    "\"touser\":\""+openid+"\","+
                    "\"msgtype\":\"text\","+
                    "\"text\":"+
                    "{"+
                    "\"content\":\""+content+"\""+
                    "}"+
                    "}";
            System.out.println(data);
            String reMsg0 = UrlReqUtil.post("https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token="+access_token,data);
            JSONObject jsonObject = JSONObject.fromObject(reMsg0);
            if(0 != (Integer) jsonObject.get("errcode")) throw new RuntimeException("通知用户失败");

    3.模板消息接口
    模板消息接口的使用场景大体与客服消息接口一致,只是不需要证明对象用户“在线”,即48小时内与当前公众号有交互记录,因而应用范围更为广泛。在具有权限的服务号中使用该接口时,需要向系统申请对应模板,并得到模板号,作为调用凭据。在测试号环境下,则需要自定义模板。例如:
    这里写图片描述
    其中模板内容需要严格遵循指定的格式,即在需要调用才填入的变量值的定义方式为:{{xxxx.DATA}},其中“xxxx”为调用时对应的字段名。
    以下是调用代码:jsonData数据部分遵循json数据格式。
    其中touser:为用户在该公众号下的openid
    template_id:为模板id
    对于每个字段,包含两个值,一是value,即填入模板的具体值;二是color,即对应的字体颜色。
    请求方式为post,判断是否成功同样是依据errcode字段,为0则成功。

            //推送模板消息
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
            String jsonData = "{" +
                    "\"touser\":\""+openid+"\"," +
                    "\"template_id\":\"maD2W1yaTvkXmh1dRjXEsMHUc9dDP8Xh1eANP***ig\"," +
                    "\"topcolor\":\"#FF0000\"," +
                    "\"data\":{" +
                    "\"title\":{\"value\":\"恭喜您中奖啦\",\"color\":\"#173177\"}," +
                    "\"nickname\":{\"value\":\""+nickname+"\",\"color\":\"#173177\"}," +
                    "\"prizeLevel\":{\"value\":\""+rewardLevel+"\",\"color\":\"#173177\"}," +
                    "\"prizeContent\":{\"value\":\""+ ConfigParamUtil.PRIZE_CONTENT.split(",")[rewardLevel]+"\",\"color\":\"#173177\"}," +
                    "\"time\":{\"value\":\""+dateFormat.format(new Date())+"\",\"color\":\"#173177\"}," +
                    "\"bonus\":{\"value\":\"10积分\",\"color\":\"#173177\"}}}";
            String reMsg1 = UrlReqUtil.post("https://api.weixin.qq.com/cgi-bin/message/template/send?access_token="+access_token,jsonData);
            JSONObject jsonObject = JSONObject.fromObject(reMsg1);
            if(0 != (Integer) jsonObject.get("errcode")) throw new RuntimeException("通知用户失败");
    展开全文
  • 开发中不可避免会与后台进行多条、多次的数据传递,那我们该如何来将这部分的数据加载进行公共方法进行调用呢,下面就直接上代码啦~ loadList: function (event) { if (hadLastPage != false) { wx.showToast({ ...
  • 对于与微信公众号的互动这块,就是你发个用户什么,需要用户响应给你什么,这里记住关键一点就是数据的传输都是通过XML,只要正确解析微信请求中的XML数据包就能知道用户发送的是什么,然后只要你返回给微信服务器...
  • 在开发者首次提交验证申请时,微信服务器将发送GET请求到填写的URL上,并且带上四个参数(signature、timestamp、nonce、echostr),开发者通过对签名(即signature)的效验,来判断此条消息的真实性。 此后,...
  • 最近开始开发小程序,遇到许多小问题,直奔主题。    wx.request()是微信封装的ajax请求方法,也是小程序中ajax唯一的一个方法,被放在了API文档的第一个位置,的确使用率是最高的。  但是wx.request()并非像...
  • 微信分享功能
  • 微信小程序开发中网络请求必不可少,今天说说最简单的请求.后续会尝试上传下载,Socket这些. 1.一个微信小程序,同时只能有5个网络请求连接。 这个规定应该是微信为了保证用户体验制定的,毕竟是小程序. 2.wx.request...
  • 微信小程序的wx.request请求,method设为POST并向后台传递数据格式如下: wx.request({ url: 'https://xcx.hymba.com/sms?token=' + app.globalData.token, data: {'mobile':tel}, method:'POST', succe
  • 问题:用post请求方式时,后端接受不到前端传回的数据,而用get方式可以。原因:微信小程序api,默认使用的get方式。前端代码按照文档,肯定是这么写.那就入坑了.header头中: 'Content-Type': 'application/json'用...
  • 上一篇《微信开发学习总结(一)——微信开发环境搭建》我们已经完成了微信开发的准备工作,准备工作完成之后,就要开始步入正题了。 一、微信公众平台的基本原理  在开始做之前,先简单介绍了微信公众平台的基本...
  • 对于微信浏览器(安卓版本)如果页面请求结束等待响应时间超过10S微信浏览器会认为没响应,并主动重发上条ajax请求 对于该问题,暂时没想到解决方案,再生产中是因为我们在一个响应过程中调用了两个接口,故响应时间...
  • 进行微信开发,后台程序需要与微信服务器进行交互,通过调用接口来完成服务,阅读微信开发文档,发现接口的调用都是通过http请求进行的,所以必须有个HttpUtil来支撑,这里总结下以javaAPI的方式和以Apach的...
  • 微信小程序向服务器发送请求及页面渲染(data的设置)参考官方文档实现功能新建页面编辑page.wxml编辑page.js闲扯淡 参考官方文档 文档地址: 微信官方文档 ...实现功能 1,向服务发送请求; 2,数据返回后的数据处理 ...
  • 微信小程序异步请求问题 微信小程序为了提高用户体验,提供的api大部分都是异步操作,除了数据缓存操作里面有一些同步操作。是提高了用户体验,但是在开发的时候, 就有点坑了,例如我要写一个公共方法,发起网络...
  • request发送请求的使用wx.request(data:{"dto.currentPage":1,"dto.pageSize":10}) ..需要xx.xx的格式才能被Struts2所接受收。但是在小程序里面如果调用this.data.dto.currentPage报错。它会认为是{dto:{currentPage...
  • java开发微信发送消息

    2020-07-06 23:31:24
    java开发微信发送消息,内含微信发送消息的请求数据模型。
1 2 3 4 5 ... 20
收藏数 33,654
精华内容 13,461