小程序发布流程、小程序进度条组件、修改data里的局部数据、小程序api位置设置、首页瀑布流展示

发布

发布流程的问题

• 方式一

  1. 打开图片进行本地预览
  2. 输入文字 & 选择相应的信息
  3. 点击发布按钮
  	3.1 将本地图片上传到 腾讯云对象存储中COS（oss），并将COS中的图片地址返回。
  	3.2 将COS中的图片URL和文字等信息一起提交到后台。
  BUG：
  	在3.2步骤时可能拿不到COS中的图片。
  

  function onClickSubmit(){
      // 耗时1分钟，不会阻塞。
      wx.request({
          url:\"...\",
          success:function(res){
              console.log(res)
          }
      })
      console.log(123);
  }
  

• 方式二（推荐）

  1. 打开图片进行本地预览
  2. 将本地图片上传到 腾讯云对象存储中COS
  3. 输入文字 & 选择相应的信息
  4. 发布：
  	必须上传完毕之后，才允许点击发布按钮。
  

组件：进度条

<progress percent=\"{{percent1}}\"  ></progress>

<progress percent=\"{{percent2}}\" activeColor=\"#DC143C\" ></progress>

修改data里的局部数据

<view>-----案例------</view>
<view>点击按钮完成，将图片1的进度条更新为80%</view>
<view wx:for=\"{{imageList}}\">
  <view>{{item.title}}</view>
  <progress percent=\"{{item.percent}}\"  ></progress>
</view>

<button bindtap=\"changePercent\" >点击</button>

  data: {
    percent1:20,
    percent2:50,
    imageList:[
      {id:1,title:\"图片1\",percent:20},
      { id: 1, title: \"图片2\", percent: 30 },
      { id: 1, title: \"图片3\", percent: 60 },
    ]
  },
  changePercent:function(){
    // 方式1：错误
    /*
    this.setData({
      imageList[0].person: 80
    });
    */
    
    // 方式2：可以，由于需要全部修改，所以性能差。
    /*
    var dataList = this.data.imageList;
    dataList[0].percent = 80;
    this.setData({
      imageList: dataList
    });
    */
    
    // 方式3：推荐
    var num = 2;
    this.setData({
      [\"imageList[0].percent\"]:80,
      [\"imageList[\" + num + \"].percent\"]: 90,
      [\"imageList[1].title\"]:\"突突突突突\"
    })

  },

小程序内的闭包函数

var dataList = [\"alex\", \"changxin\", \"cck\"]
for (var i in dataList) {
  // （）() 第一个括号里放函数，第二个括号里是函数的参数，data就是外面的参数
  (function(data){
    wx.request({
      url: \'xxxxx\',
      success: function (res) {
        console.log(data);
      }
    })
  })(dataList[i])
}

小程序api位置设置

在小程序中很多地方涉及到需要用到api，我们可以吧api统一在一个config文件夹里，该文件夹里新建一个api.js文件，专门放api路由

api.js

var rootURL = \'http://127.0.0.1:8000/api/\'

// 声明可以暴露给外界的变量或者函数
module.exports = {
  indexURL:rootURL+\'news/\',
}

在外界使用

var AAA = require(\'../config/api.js\')

AAA.indexURL

首页瀑布流展示

• 方式一：

wxml

<view class=\'container\'>
  <view class=\"item\">
    <image src=\"https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236\" mode=\"widthFix\" ></image>
    <image src=\"https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236\" mode=\"widthFix\" ></image>
  </view>
  <view class=\"item\">
    <image src=\"https://hbimg.huabanimg.com/1143ded46f1808fd460de68bb81d1513d7578d88543aa-cvwFGk_fw236\" mode=\"widthFix\" ></image>
    <image src=\"https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236\" mode=\"widthFix\" ></image>
  </view>
</view>

css

.container{
  display: flex;
  flex-direction: row;
}

.container .item{
  width: 50%;
  overflow: hidden;
}

.container .item image{
  width: 100%;
}

• 方式二(推荐）：

wxml

<view class=\"container\">
  <view class=\"item\">
    <image src=\"https://hbimg.huabanimg.com/1143ded46f1808fd460de68bb81d1513d7578d88543aa-cvwFGk_fw236\" mode=\"widthFix\" ></image>
  </view>
  <view class=\"item\">
    <image src=\"https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236\" mode=\"widthFix\" ></image>
  </view>
</view>

css

.container
{
  /* 把页面分成两列 */
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;

    -moz-column-gap:20rpx; /* Firefox */
    -webkit-column-gap:20rpx; /* Safari and Chrome */
    column-gap:20rpx;
}

.container .item{
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid; /* Safari and Chrome */
}

来源：https://www.cnblogs.com/suncolor/p/17025474.html
本站部分图文来源于网络，如有侵权请联系删除。