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

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

hmoban主题是根据ripro二开的主题,极致后台体验,无插件,集成会员系统
自学咖网 » 小程序发布流程、小程序进度条组件、修改data里的局部数据、小程序api位置设置、首页瀑布流展示