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