微信小程序简单实战V2EX

这是我参考了一些网上的代码写的一个小程序。什么都不说了，直接贴代码。最下面有百度云链接。

编写样式的wxss和wxml就直接掠过。我主要说一下js的部分。首先是utils,这里一般存放调用的方法。

//util.js:这是一个自己写的request方法，不是系统的，可以进行带参数的方法请求，绑定key值
function request(url, cacheKey, success, failure) {
wx.request({
url: url,
success: function (res) {
if (res.statusCode == 200) {
wx.setStorage({//保存得到的数据
key: cacheKey + 'Datas',
data: res.data,
})
success(res.data);//成功的方法
} else {
failure("请求失败");//失败的方法
}
},
fail: function () {
failure("请求失败");
}
})
}
module.exports = {//接口外露可以被使用
request: request,
}

//index.js  调用util
var httpRequest = require("../../utils/util.js");
var app = getApp()
Page({
data: {
datas: [],
},
onLoad: function (options) {
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 1000
})
this.request();//写一个request方法
},
request: function () {
var that = this;
httpRequest.request('https://www.v2ex.com/api/topics/hot.json', "index", function (data) {//util方法的request共四个参数，url，key,两个function。
console.log("request success data", data);
that.setData({
datas: data,
})
}, function (reason) {
console.log("failure reason:", reason);
})
},
intentToDetail: function (event) {//页面跳转
console.log("intentToDetail event:", event);
var topicId = event.currentTarget.id;
wx.navigateTo({
url: '../detail/detail?id=' + topicId,
})
},
intentNode: function (event) {
console.log("intentNode event:", event);
var nodeId = event.currentTarget.id;
var nodeName = event.currentTarget.dataset.value;
console.log("nodeName=" + nodeName);
wx.navigateTo({
url: '../node_detail/node_detail?nodeId=' + nodeId + "&nodeName=" + nodeName,
})
},
intentMember: function (event) {
console.log("intentMember event:", event);
var userName = event.currentTarget.dataset.name;
wx.navigateTo({
url: '../member/member?userName=' + userName,
})
}
})

//latest.js 和上面的基本一致
var httpRequest = require("../../utils/util.js");
var app = getApp();
Page({
data: {
datas: []
},
onLoad: function (options) {
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 1000
})
this.request();
},
request: function () {
var that = this;
httpRequest.request("https://www.v2ex.com/api/topics/latest.json", "latest", function (data) {
console.log("datas:", data);
that.setData({
datas: data,
})
}, function (reason) {
console.log(reason);
})
},
intentToDetail: function (event) {
console.log("intentToDetail event:", event);
var topicId = event.currentTarget.id;
wx.navigateTo({
url: '../detail/detail?id=' + topicId,
})
},
intentNode: function (event) {
console.log("intentNode event:", event);
var nodeId = event.currentTarget.id;
var nodeName = event.currentTarget.dataset.value;
console.log("nodeName=" + nodeName);
wx.navigateTo({
url: '../node_detail/node_detail?nodeId=' + nodeId + "&nodeName=" + nodeName,
})
},
intentMember: function (event) {
console.log("intentMember event:", event);
var userName = event.currentTarget.dataset.name;
wx.navigateTo({
url: '../member/member?userName=' + userName,
})
}
})

//detail.js
var httpRequest = require("../../utils/util.js");
Page({
data: {
datas: [],
replies: [],
},
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '详情',
})
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 1000
})
console.log("options.id:", options.id);
var topicId = options.id;
this.getTopics(topicId);
this.getReplies(topicId);
},
getTopics: function (topicId) {
var that = this;
httpRequest.request("https://www.v2ex.com/api/topics/show.json?id=" + topicId, topicId + "Topics", function (data) {
console.log("getTopics data:", data);
that.setData({
datas: data[0]
})
}, function (reason) {
console.log("fail getTopics reason:", reason);
})
},
getReplies: function (topicId) {
var that = this;
httpRequest.request("https://www.v2ex.com/api/replies/show.json?topic_id=" + topicId, topicId + "Replies", function (data) {
console.log("getReplies data:", data);
that.setData({
replies: data,
})
}, function (reason) {
console.log("fail getReplies reason:", reason);
})
},
intentNode: function (event) {
console.log("intentNode event:", event);
var nodeId = event.currentTarget.id;
var nodeName = event.currentTarget.dataset.name;
wx.navigateTo({
url: '../node_detail/node_detail?nodeId=' + nodeId + "&nodeName=" + nodeName,
})
},
intentMember: function (event) {
console.log("intentMember event:", event);
var userName = event.currentTarget.dataset.name;
wx.navigateTo({
url: '../member/member?userName=' + userName,
})
}
})

//member.js
var httpRequest = require("../../utils/util.js");
Page({
data: {
membersDetail: [],
},
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '个人话题',
})
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 1000
})
console.log("options userName:",options)
if (options.userName != null && options.userName != "") {
var userName = options.userName;
this.getMemberInfo(userName);
}
},
getMemberInfo: function (userName) {
var that = this;
httpRequest.request("https://www.v2ex.com/api/topics/show.json?username=" + userName, userName + "Member", function (data) {
console.log("getMemberInfo,data:", data);
that.setData({
membersDetail: data,
})
}, function (reason) {
console.log("fail getMemberInfo,reason:", reason);
})
},
intentToDetail: function (event) {
console.log("intentToDetail event:", event);
var topicId = event.currentTarget.id;
wx.navigateTo({
url: '../detail/detail?id=' + topicId,
});
},
})

//node_detail.js
var httpRequest = require("../../utils/util.js");
Page({
data: {
nodesDetail: [],
},
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '节点详情',
})
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 1000
})
console.log("options:", options);
if (options.nodeId != null && options.nodeId != "") {
var nodeId = options.nodeId;
this.getNodeByNodeId(nodeId);
}
},
getNodeByNodeId: function (nodeId) {
var that = this;
httpRequest.request("https://www.v2ex.com/api/topics/show.json?node_id=" + nodeId, nodeId + "NodeDetail", function (data) {
console.log("getNodeByNodeId:", data);
that.setData({
nodesDetail: data,
})
}, function (reason) {
console.log("fail getNodeByNodeId reason:", reason);
})
},
intentToDetail: function (event) {
console.log("intentToDetail event:", event);
var topicId = event.currentTarget.id;
wx.navigateTo({
url: '../detail/detail?id=' + topicId,
})
},
})

写程序的时候多使用打印，看看数据的传输更有利于程序的编写。

链接：https://pan.baidu.com/s/1pLFXgPP 密码：mzmz