微信小程序流程进度功能怎么关闭（小程序发布流程、小程序进度条组件、修改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 */ }