小程序实践项目

Posted 2020-10-20 ankle

首先要根据产品需求画出原型图，需要实现的功能点，模块划分，大致的文件结构大概构思好，不至于踩深坑

1.配置全局 文件 app.json 、app.js 、app.wxss 基本的配置或是函数封装，可参考已封装好的库  xcx-base

 

调用api接口 实现列表数据渲染，实现上拉加载下拉刷新功能

注：小程序中下拉刷新不能和 scroll-view 一起使用，会产生冲突，使用 scroll-view 滚动组件 则放弃上拉刷新功能

 

*  在首次调用加载时显示loading 组件会有良好的用户体验， 根据页数参数判断是第一页的时候将数据直接赋值，否则数据追加赋值，如果当前页数大于等于总页数，则加载完毕

var app = getApp();
var requestUrl = "https://route.showapi.com/255-1";
var page_num = 1;
var page_size =10

getList(){
    if(page_num>=allPage){
      return
    }
    wx.showNavigationBarLoading();    // 顶部栏显示加载
    var that = this;
    wx.request({
      url: requestUrl,
      data: {
        ‘showapi_appid‘:app.globalData.appid,
        ‘showapi_sign‘:app.globalData.apiKey,
        ‘page‘:page_num,
        ‘type‘:app.globalData.tText
      },
      method: ‘GET‘,
      success: function(res){
        // 判断如果是第一页，显示数据，否则追加显示
        if(page_num == 1)
          that.setData({ listData:res.data.showapi_res_body.pagebean.contentlist });
        else
          that.setData({ listData: that.data.jokes.concat(res.data.showapi_res_body.pagebean.contentlist) });
        // 页数加一页
        page_num += 1;
        wx.hideNavigationBarLoading();
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
}    

 

如果列表加载的是图片的话，而且需要点击放大预览的话。可以将数据的src 绑定到容器的 data-imgUrl 自定义属性，绑定点击事件，调用图片预览api 传入当前图片的src

previewImg:function(e){
    console.log(e);
    wx.previewImage({
      // current: ‘String‘, // 当前显示图片的链接，不填则默认为 urls 的第一张
      urls: [e.currentTarget.dataset.imgurl],
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }