Python+微信小程序开发（五）for指令和上传图片

本篇将分享如何使用for指令以及获得上传图片，这感觉在大部分小程序都比较实用！！！

一、for指令

首先还是新建pages/goods/goods的文件夹。

1.循环列表

在pages/goods/goods.js填写dataList：

data: {
   dataList:['手机','手表','耳机']
},

在pages/goods/goods.wxml中，我们用到wx:for语句。

<view>
    <view wx:for="{{dataList}}">{{item}}</view>
</view>

 还可以添加索引：

<view wx:for="{{dataList}}">{{index}}-{{item}}</view>

 

  还可以自定义索引名和item名字：

<view wx:for="{{dataList}}" wx:for-index='idx' wx:for-item='x'>自定义{{idx}}-{{x}}</view>

 

2.循环字典

 在pages/goods/goods.js填写userInfo：

data: {
    dataList:['手机','手表','耳机'],
    userInfo:{
        name:'Yunlord',
        age:24
    }
},

 在pages/goods/goods.wxml中，填写以下代码：

<view>
    {{userInfo.name}}
    {{userInfo.age}}
</view>
<view>
    <view wx:for="{{userInfo}}">{{index}} - {{item}}</view>
</view>

效果如下： 

二、获取用户上传图片

新建pages/publish/publish文件夹。

在pages/publish/publish.wxml填下以下代码：

<text bindtap="uploadImage">请上传图片</text>
<view class="container">
    <image wx:for="{{imageList}}" src="{{item}}"></image>
</view>

在pages/publish/publish.js填写imageList和uploadImage函数：

    data: {
        imageList:['/static/profile.png','/static/profile.png']
    },
    uploadImage:function(){
        var that=this
        wx.chooseImage({
          count: 9,
          sizeType:['original'],
          sourceType:['album','camera'],
          success:function(res){
                that.setData({imageList:res.tempFilePaths})
          }
        })
    },

 效果如下：

 添加新的图片，而不是覆盖。

that.setData({
   imageList: that.data.imageList.concat(res.tempFilePaths)
})

 

今天的知识点就学习完毕了！！！ 

欢迎关注『从零开始Python+微信小程序开发』系列，持续更新中。

需要详细代码和交流的小伙伴们可以关注下方链接。