小程序发布流程、小程序进度条组件、修改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 */
}