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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:小程序发布流程、小程序进度条组件、修改data里的局部数据、小程序api位置设置、首页瀑布流展示 - Python技术站

(0)
上一篇 2023年3月31日
下一篇 2023年3月31日

相关文章

  • drf之请求与响应、drf之视图组件

    drf之请求与响应 Request from rest_framework.request import Request def __init__(self, request, parsers=None, authenticators=None, negotiator=None, parser_context=None): # 二次封装request,将原生…

    2023年4月2日
    00
  • 个人站点页面搭建和侧边栏展示功能

    展示个人站点页面 前端代码:和首页文章展示基本一样: <div class=”col-md-8″> {% for article in article_list %} <ul class=”media-list”> <li class=”media”> <a href=””><h4 class=”medi…

    Python开发 2023年4月2日
    00
  • 修改密码弹出框搭建

    前端代码搭建 主要利用的是bootstrap3中js插件里的模态框版块 <li><a href=”” data-toggle=”modal” data-target=”.bs-example-modal-lg”>修改密码</a></li> <div class=”modal fade bs-example…

    Python开发 2023年4月2日
    00
  • 微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、for指令、获取用户上传图片

    小程序中实现页面跳转 对标签绑定点击事件 data是点击时传入的参数 <view bindtap=”clickMe” data-nid=”123″ data-name=”SD” >点我跳转</view> /** * 用户点击事件 */ clickMe(e){ console.log(e) var nid = e.currentTarg…

    Python开发 2023年4月2日
    00
  • 文章添加页(富文本编辑器的使用)

    1.文章添加页url开设 2.添加文章页面已经富文本编辑器的使用 富文本编辑器kindeditor只要到官网下载下来,放入static文件夹就行,如何在html的script处添加对应固定代码 {% extends ‘backend/base.html’ %} {% block article %} <h3>添加随笔</h3> &lt…

    2023年4月2日
    00
  • 登录功能

    思路分析 登录页面,我们还是采用ajax的方式提交用户数据 唯一需要学习的是如何制作图片验证码! 具体的登录页面效果图如下: 如何制作图片验证码 推导步骤1:在img标签的src属性里放上验证码的请求路径 补充1.img的src属性: 1.图片路径 2.url 3.图片的二进制数据 补充2:字体样式 我们计算机上之所以可以输出各种各样的字体样式,其内部其实对…

    2023年4月2日
    00
  • django中的request对象方法

    1.什么是request对象 在django中,当一个页面被请求时,Django就会创建一个包含本次请求原信息的HttpRequest对象;Django会将这个对象自动传递给响应的视图函数,一般视图函数约定俗成地使用 request 参数承接这个对象。 2.request对象的作用 request对象里面封装了请求时拿到的数据,我们可以通过request.的…

    Python开发 2023年4月2日
    00
  • IO模型

    该篇的IO模型主要针对的是网络IO的,其他IO不在本篇考虑范围之内! IO模型简介 Stevens在文章中一共比较了五种IO Model,分别为: * blocking IO 阻塞IO * nonblocking IO 非阻塞IO * IO multiplexing IO多路复用 * signal driven IO 信号驱动IO * asynchronou…

    2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部