最近学习一下微信小程序,感觉小程序的小程序的功能还是相当强大的尤其是推出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(); } } })