一、信息流小程序-GET请求案例
1.1服务端接口开发
一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页、关键词查询的接口:
分页接口:http://127.0.0.1:3000/info?page=1
查询接口:http://127.0.0.1:3000/search?word=李
详情接口:http://127.0.0.1:3000/xiangqing?id=2
const express = require("express");
const app = express();
const url = require("url");
const info = require("./info.js");
app.use(express.static("www"));
//显示分页的明星信息
app.get("/info",(req,res) => {
const page = url.parse(req.url,true).query.page; //得到GET请求的page参数
//提供分页的接口
res.json({
"arr" : info.slice((page-1) * 4,page * 4)
});
});
关键字筛选查询
app.get("/search",res) => {
得到用户的查询词
var word = url.parse(req.url,true).query.word;
将字符串word变为正则表达式
var wordExp = new RegExp(word);
遍历,筛选
res.json({
"arr" : info.filter(item => wordExp.test(item.name))
});
});
某明星详情
app.get("/xiangqing",0); line-height: 1.5 !important;">得到用户的查询的明星id
var id = url.parse(req.url,255); line-height: 1.5 !important;">true).query.id;
遍历,筛选
res.json({
"xiangqing" : info.filter(item => item.id == id)[0]
});
})
app.listen(3000);
1.2小程序开发
学习scrioll-view容器(可滚动视图区域)和发起请求。
<scroll-view style="height:{{wH}}px;" scroll-y bindscrolltolower="tolower">
view>乱起八早</>
.....
scroll-view>
bindscrolltolower表示滚动到底部的事件,但这个盒子必须有高度。
如果希望这个盒子的高度和窗口的高度一样,此时调用微信API,读取设备窗口高度。
?
app.js使用微信小程序的API得到屏幕的高度:
app.js
App({
用户首次打开小程序,触发 onLaunch函数(全局只触发一次)
onLaunch(){
var self = this;
//读取设备信息的API
wx.getSystemInfo({
success: function(res){
self.globalData.gWH = res.windowHeight; //获取窗口高度赋值给全局gWH对象
}
});
},全局数据
globalData : {
gWH : 0
}
});
?
index.js中可以获取app.js的全局数据
<!--
index.wxml-->
view class="container">
="height:{{wH}}px">
<view class="mingxing">
<view class="box" wx:for="{{mingxing}}" wx:key="{{index}}">
="left">
image src="{{baseURL}}/images/{{item.pic}}"></image>
{{item.name}}
</view>
<view class="right">
{{item.b_info}}
</view>
</view>
</view>
>
?
index.wxss
?
示例代码
1.4请求分页数据-显示页面效果
index.js中加载默认数据
Page({
得到窗口的高度,是从全局来的
this.setData({
wH: appInstance.globalData.wH
});
核心语句:请求服务器的数据,参数page表示第几页,当前第几页就请求第几页
var self =
this;
wx.request({
//请求的地址
url: 'http://127.0.0.1:3000/info?page=' + this.data.page,//成功的回调
success({data}){
self.setData({
mingxing: [
...self.data.mingxing,...data.arr
]
});
}
});
},data : {
wH : 0,0); line-height: 1.5 !important;">当前屏幕的高度
mingxing: [],//信息流,现在是空的,等服务器返回
page : 1,//当前第几页,默认第一页
}
});
?
?
?
?
index.js下拉请求更多
,icon: 'loading'
,duration: 2000000
持续时间,非常长,因为靠回调函数给它隐藏。
});
this;
核心语句,请求服务器的数据,分页请求,当前第几页就请求第几页
wx.request({
请求的地址
url: this.data.baseURL + '/info?page=' + page,0); line-height: 1.5 !important;">成功的回调
success({ data }){
隐藏Toast
wx.hideToast();
看一下请求的数组长度是不是0,如果是0此时就改变信号量
if(data.arr.length == 0){
self.setData({
isMore : false
});
return;
}
如果不是0,改变值,追加数据
self.setData({
mingxing: [
...self.data.mingxing,...data.arr
]
});
}
});
}
Page({
onLoad(){
指定queryServer函数的上下文,绑定好后,调用时上下文自动就是这里的this了
//不需要queryServer.call(this)了。
queryServer = queryServer.bind(this);
this.setData({
wH: app.globalData.wH
});
请求第1页的数据
queryServer(1);
},data : {
wH : 0
,mingxing: [],page : 1
,baseURL:"http://127.0.0.1/3000",//基路径
isMore : true //是否还有更多?
},tolower(){
if(this.data.isMore){
//页面数加1
this.setData({
page : this.data.page + 1
});
//下拉到底部请求更多
queryServer(this.data.page);
}
}
});
1.5关键字查询
>×
button
chooseImg(){
选择图片或者进行拍照
wx.chooseImage({
count : 1,0); line-height: 1.5 !important;">只能选择1张
选择图片成功之后做的事情
success({tempFilePaths}){
wx.uploadFile({
url : "http://127.0.0.1:3000/tijiao",0); line-height: 1.5 !important;">上传地址
filePath: tempFilePaths[0],//要上传的文件,只有1张图片也是数组,所以[0]
name: "tupian",//key
success({data}){
wx.showToast({
title: "上传成功!"
});
}
});
}
});
}
});
const express = require("express"
);
const app =
express();
const formidable = require("formidable"
);
app.post("/tijiao",res)=>
{
var form =
new formidable.IncomingForm();
form.uploadDir = "./uploads"; //设置图片的保存路径
form.keepExtensions = true; //保留拓展名
form.parse(req,(err,fileds,file)=>
{
res.json({result: "ok"
});
});
});
app.listen(3000);
{
"enablePullDownRefresh" : true
}