微信小程序云开发个人博客项目实战目录
一、准备工作及引入 Vant Weapp 小程序 UI 组件库
二、专题的增删改查
三、文章的增删改查
四、云函数获取微信公众号access_token
五、云函数同步公众号文章到小程序
一、功能
- 文章列表、下拉刷新
- 文章增加、编辑（富文本编辑）
- 文章删除
 |
|
|
|---|---|---|
| 文章列表 | 增加文章 | 编辑删除 |
地址：https://github.com/itguliang/miniprogram-itguliang-cloud
二、实现
修改app.json-->pages，新增写文章及文章详情页面
"pages": [
"pages/article/articleAddorEdit",
"pages/article/articleDetail"
]
1、写文章
home.wxml 加个写文章的按钮，跳转到写文章的页面
<!--这种多个页面用的组件，可以在app.json引入，就不用在多个json分别引入了-->
<van-button type="warning" bindtap="addArticle"> + 写文章</van-button>
页面跳转
addArticle:function(){
wx.navigateTo({
url: '../article/articleAddorEdit'
})
}
修改写文章页面的title，对应的json文件中修改
{
"navigationBarTitleText": "写文章 - IT姑凉",
"usingComponents": {}
}
文章内容编辑器可以参考官方的editor --- 传送门
封面上传（不是必填项）--- 参考小程序云开发的上传图片例子来修改
2、文章列表
3、写文章按钮的显示与隐藏
向下滚动隐藏 、向上滚动显示
<button class="btn-add" wx:if="{{addArticleBtnShow}}" bindtap="addArticle"> + 写文章</button>
监听页面滚动事件
onPageScroll: function (e) {
console.log(e);
if (e.scrollTop>this.data.scrollTop){
this.setData({ addArticleBtnShow: false });
}else{
this.setData({ addArticleBtnShow: true });
}
this.setData({ scrollTop: e.scrollTop});
}
效果见文章开头
4、文章下拉刷新、上拉加载更多
下拉刷新，json中设置允许当前页面下拉刷新
{
"enablePullDownRefresh": true
}
4、文章详情
towxml解析HTML --- towxml使用-传送门
三、遇到问题
1、小程序页面跳转不同方法
wx.navigateTo
2、小程序修改单独页面title
app.json中 window 统一设置 title
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "IT姑凉",
"navigationBarTextStyle": "black"
}
如果要修改某个页面的title的话，可以在对应页面的json中修改
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTitleText": "单独页面",
"navigationBarTextStyle": "black"
也可在js中动态加载
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '当前页面' //修改title
})
},
3、小程序editor组件操作图标不全，可以中文下和英文下的两个demo结合来用
 |
 |
|---|---|
| 中文下链接预览的官方示例 | 英文下链接预览的官方示例 |
4、小程序返回上个页面刷新数据
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
wx.navigateBack({
delta: 1,
success: function() {
if (prevPage.route == 'pages/home/home') {
prevPage.loadData();
}
}
})
5、动态修改class
<view class="className1 {{num==1?'className2':'className3'}}" ></view>
