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

}