青铜选手带你动手撸一个博客小程序给自己
发布时间：2020-12-14 19:31:07 所属栏目：资源 来源：网络整理
导读：看掘金也又一年多了，感叹各位大佬技术6的一批，刚上学的时候也给人搞过一两个小程序，突然心血来潮想总结总结经验，给自己也搞一个爽一爽，顺便也在写一篇，让各位大佬看看还有什么问题，毕竟本屌虚心的一批 无图言鸡儿=成品图 菜鸡实践中总结的一些tip 小
|
看掘金也又一年多了，感叹各位大佬技术6的一批，刚上学的时候也给人搞过一两个小程序，突然心血来潮想总结总结经验，给自己也搞一个爽一爽，顺便也在写一篇，让各位大佬看看还有什么问题，毕竟本屌虚心的一批 无图言鸡儿=>成品图
菜鸡实践中总结的一些tip
功能需求
前期准备
3. 个人注册个小程序账号（直接去微信公众平台注册，简单的一批），注册完后登陆一下，把appid与appsecrect搞到手
，，根据各位看官的博客后台的实际情况搞，一般都有数据接口的，用来获取文章啥的。这里我用的是自己开发的后端，所以接口什么的都是按需开发的~各位看官要是如果有兴趣可以找我要后台（thinkphp+vue+element搞的管理后台） 这个项目用到的接口主要有
不瞎bb了开整基础设施
文件结构：
netUtils.js关键部分const BASEURL = "https://localhost:8888/";
const APIURL = "https://localhost:8888/api/";
/**
* 封装request
*/
const requestPromise = function ({ url,data,header,method = 'GET' }) {
return new Promise((resolve,reject) => {
wx.request({
url: url,data: data,header: header,method: method,success: (res) => { resolve(res) },fail: (err) => { reject(err) }
})
});
};
module.exports={
BASEURL:BASEURL,APIURL:APIURL,request: requestPromise
}
复制代码
dataUtils关键部分);
/**
* 获取服务器数据基本方法
*/
function getServerDataPromise(url,header=null,method='GET'){
let dataUrl = netUtils.BASEURL+url;
url: dataUrl,header:header,method:method
}).then(res => {
resolve(res);
}).catch(err => {
reject(err);
});
});
}
/**
* 获取栏目下文章
*/
getPostOfCategoryPromise(data) {
let url ='api/front/portal/getPostOfCategory';
return getServerDataPromise(url,data);
};
/**
* 获取幻灯片
*/
getSlidesPromise(data){
'api/front/portal/getSlide';
module.exports = {
getPostOfCategory: getPostOfCategoryPromise,getSlides: getSlidesPromise,checkToken: checkToken,userLogin:userLoginPromise,getContent: getContentPromise,addComment: addCommentPromise,getComment:getCommentPromise,getKindleEmail: getKindleEmailPromise,bindKindleEmail: bindKindleEmailPromise,sendBook: sendBookPromise,getNav:getNavPromise,search: searchPromise,getUser: getUserPromise,checkLogin: checkLoginPromise,getConfig: getConfigPromise
};
复制代码
先搞个首页我的个人习惯是先把页面的js获取数据的部分写好，然后再去写wxml与wxss，有了数据填充，比教容易看出来页面的效果，调试完页面后，在取js把点击事件、跳转等其他的一些代码补全。 前端代码比较简单，就不在这贴了，值得注意的一点是，首页使用了iview的组件，因此在index.json中应先把使用的组件配置一下 index.json {
"usingComponents": {
"i-row": "../../iview/row/index","i-col": "../../iview/col/index",0);">"i-spin": "../../iview/spin/index",0);">"i-icon": "../../iview/icon/index",0);">"i-message": "../../iview/message/index",0);">"i-divider": "../../iview/divider/index"
},0);">"enablePullDownRefresh":true
}
复制代码
index.js let netUtils=require('../../utils/netUtils.js');
let dataUtils=require('../../utils/dataUtils.js');
let navUtils=require('../../utils/navUtils.js');
const { $Message } = require('../../iview/base/index');
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
IMGURL: netUtils.BASEURL,// 幻灯片
slides:[],136);">// 推荐
recommends:[],recommendPage:1,recommendPageSize:5,136);">// blog
blogs: [],blogPage: 10,136);">//config
slideId: getApp().globalData.StorageDB.get('config.slideId'),recommendCategoryId: getApp().globalData.StorageDB.'config.recommendCategoryId'),blogCategoryId:getApp().globalData.StorageDB.'config.blogCategoryId'),hasMore:true
},136);">/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getSlides();
this.getRecommend();
this.getBlog();
},136);">/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
// 推荐
recommends: [],recommendPage: // blog
blogs: [],96);">true
});
this.getKindleBook();
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
//自定义方法
getSlides(){
dataUtils.getSlides({id:1})
.then(res=>{
if(res.data.status=='200'){
this.setData({
slides:res.data.data.item
});
}
});
},getRecommend(){
dataUtils.getPostOfCategory({
page:this.data.recommendPage,pageSize:data.recommendPageSize,id:data.recommendCategoryId
}).then(res=>{
if (res.data.status == '200') {
data.pageData.length==0){
return;
}
let recommendPage = data.recommendPage;
recommendPage = recommendPage + 1;
let recommends = data.recommends.concat(res.data.pageData);
this.setData({
recommends: recommends,recommendPage: recommendPage
});
}
else{
$Message({
content: '未获取到数据～',type: 'error'
});
}
});
},getBlog() {
dataUtils.getPostOfCategory({
page: data.blogPage,pageSize: data.blogPageSize,id: data.blogCategoryId
}).then(res => {
data.pageData.length == 0) {
this.setData({
hasMore:false
});
return;
}
let blogPage = data.blogPage;
blogPage = blogPage + 1;
let blogs = data.blogs.concat(res.data.pageData);
let blogLeft=blogs.filter((value,index)=>{return index%2!=0});
let blogRight = blogs.filter((value,index) => { return index % 2 == 0 });
this.setData({
blogs: res.data.pageData,blogLeft:blogLeft,blogRight:blogRight,blogPage: blogPage
});
}
else {
$Message({
content: '../blog/blog',});
}
})
复制代码
代码比较简单（毕竟技术比较菜），值得注意的是这个getBlog方法，该方法获取的是首页上，中下部分的那一坨博客，当页面触底时会会加载更多 觉得单纯的排列下来比较平庸，因此想搞个瀑布流，反正没那么多性能和外观要求，所以就搞了个假的瀑布流，具体操作就是在获取到数据后，把数据分成两半，左半边和右半边，在前端也是把这两个数组分别循环一下即可。 由于页面有下拉刷新与拉到底部会加载更多，因此，在这的逻辑就是， 当触发上拉加载时
当触发下拉刷新时
这样做能把下拉刷新与上拉加载的功能均用getBlog来做无需根据情况来判断如何处理（替换or拼接）从服务器请求来的数据 第一期结尾罗里吧嗦的有点长了，越写越感觉做的不咋地写的更不咋地，看各位看官凑合的看下把（估计没几个人会看到这个地方...），我也整理整理思路，希望写后续第二期的时候能把想表达的写出来。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
