微信小程序云开发个人博客项目实战（3）-- 文章的增删改查

2019-12-12 本文已影响0人 IT姑凉

微信小程序云开发个人博客项目实战目录
一、准备工作及引入 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>