微信小程序实现类似append

1、wxml

<view class='item' >
    //显示已存在的图片列表,点击删除删除前一个view
    <view wx:for="{{imgList}}">
      <view class='imgList'>{{item.pictureurl}}</view>
      <button class='bgBtn' data-index="{{index}}" bindtap='hanlderdelBtn'>删除</button>
    </view>
  </view>
<view class='item'>
    <text class='txt'>资料上传</text>
    <view class='photoes'>
      <view class='uplist' wx:for="{{array}}" wx:for-index="idx" wx:for-item="item">
        <view class='fileList'>
          <image src="{{item.src}}"></image>
        </view>
        <button class='bgBtn' data-id='{{idx}}' bindtap='uploadImg'>上传照片</button>
      </view>
      <view class='addMore' bindtap='addMorePhoto'>添加多张</view>
    </view>
</view>

2、wxss

.photoes .uplist{
  border: 2px dashed #FFCC99;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.photoes .uplist .fileList image{
  height: 360rpx;
}
.photoes .uplist .fileList image{
  display: block;
  width: 100%;
}
.photoes .uplist .bgBtn,.photoes .addMore{
  background: #ff6600 !important;
  color: #fff !important;
  font-size: 28rpx;
  line-height: 100rpx;
  display: block;
  text-align: center;
  border-radius: 0;
}
.photoes .addMore{
  margin-top: 20rpx;
}

3、js

var saveimgurl1 = '';
var delstr1 = [];
Page({
 data:{
  array: [{
      id: 0,
      src: ''
    }],
  saveimgurl: '' 
 },
/*点击删除事件*/
hanlderdelBtn: function(event) {
    console.log(event);
    var index = event.currentTarget.dataset.index;
    /*删除下标为index的imgList里的图片和删除按钮*/
    delstr1 = this.data.imgList.splice(index, 1);
    
    console.log(delstr1);
    this.setData({
      imgList: this.data.imgList, //删除后的图片列表
      delStr: this.data.delStr.concat(delstr1) //已删除的图片列表
    });
    
  },
    /*上传图片 */
  uploadImg: function(event) {
    console.log(event);
    this.addImg(event.currentTarget.dataset.id);
  },
/*点击添加更多图片 */
  addMorePhoto: function(event) {
    const length = this.data.array.length;

    /*增加图片列表*/
    this.data.array = this.data.array.concat([{ id: length, src: ''}]);
    this.setData({
      array: this.data.array
    });
    console.log(this.data.array);
  },
/*点击上传照片 */
  addImg: function(id) {
    console.log(id);
    var that = this;   
    wx.chooseImage({
      count: 1, // 默认9
      // sizeType: ['compressed'],
      sourceType: ['camera'],
      compressed: false,
      success: function (res) {
        console.log(res)
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);
        that.data.array[id].src = tempFilePaths[0];
        
        that.setData({
          array: that.data.array
        })
        console.log(that.data.array);
        
        wx.uploadFile({
          url: '/upload', //开发者服务器的 url
          filePath: res.tempFilePaths[0], // 要上传文件资源的路径 String类型!!!
          name: 'file', // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
          header: {
            'content-type': 'multipart/form-data'
          }, // 设置请求的 header
          formData: {

          }, // HTTP 请求中其他额外的参数
          success: function (res) {
            console.log(res);

            var me = JSON.parse(res.data);
            console.log(me);
            
            saveimgurl1 += me[0].fileurl + ',';
            console.log(saveimgurl1);
            that.setData({
              saveimgurl: saveimgurl1
            })
          },
          fail: function (res) {
            console.log("图片上传失败" + res);
          }
        })

      }
    });
  },
/**
   * 生命周期函数--监听页面加载,显示已存在的图片列表
   */
  onLoad: function (options) {
    console.log(options);
    var that = this;
    wx.request({
      url: "Info",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: "POST",
      data: {
        
      },
      success: function (res) {
        console.log(res);
        var res = res.data;
        that.setData({
          imgList: res[0].picList
        });
      }
    });
  },
})

 

### 微信小程序源码或开发服务求购指南 #### 了解需求 在决定购买微信小程序源码或开发服务之前,明确具体的需求至关重要。考虑到微信小程序的独特性和优势,如无需下载安装即可使用、简化了应用程序的复杂度以及拥有庞大的用户群体[^1],选择合适的服务提供商显得尤为重要。 #### 寻找可靠的供应商 为了找到合适的微信小程序源码或开发服务商,可以通过多种渠道进行调研: - **在线市场**:许多电商平台提供现成的小程序模板出售,这些平台通常会有详细的评价体系帮助评估产品质量和服务水平。 - **专业技术论坛和社区**:加入开发者交流群组可以获得一手资讯并与其他潜在买家分享经验。 - **官方认证合作伙伴**:腾讯云等官方推荐的合作企业往往具备更高的信誉保障和技术实力。 #### 考虑定制化程度 如果计划构建一个类似于校园二手交易这样的特定应用场景,则可能需要考虑更专业的定制化解决方案。Spring Boot作为一种流行的微服务架构框架,在快速搭建稳定高效的后台方面表现出色,非常适合用于此类项目的后端建设[^2]。 #### 预算规划 根据项目规模和个人预算来挑选适合的产品非常重要。市场上既有免费的基础版也有收费的专业版本可供选择。对于初学者来说,可以从简单的案例入手逐步积累经验;而对于有一定资金投入的企业级客户而言,则建议寻找更具扩展性的商业方案。 #### 法律合规性审查 确保所选产品符合当地法律法规的要求也是不可忽视的一环。特别是在涉及个人信息保护等方面要格外谨慎,以免日后带来不必要的麻烦。 ```python # 示例代码片段展示如何通过API获取当前最新发布的优质小程序列表 import requests def get_top_miniprograms(): url = 'https://api.weixin.qq.com/cgi-bin/gettopminiprogram?access_token=YOUR_ACCESS_TOKEN' response = requests.get(url) data = response.json() top_programs = [] for item in data['list']: program_info = { 'title': item['title'], 'description': item['desc'] } top_programs.append(program_info) return top_programs[:5] print(get_top_miniprograms()) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值