当前位置：网站首页>简易版微信小程序开发之for指令、上传图片及展示效果优化

简易版微信小程序开发之for指令、上传图片及展示效果优化

2022-07-03 03:23:00 【水w】

本篇是接着上一篇简易版微信小程序开发之页面跳转、数据绑定、获取用户信息、获取用户位置信息https://blog.csdn.net/qq_45956730/article/details/125252305?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125252305%22%2C%22source%22%3A%22qq_45956730%22%7D&ctrtid=UdFQC

五、for指令

编写goods页面

（1）wxml

内部相当于帮我们做了一个“for item in dataList” 循环

<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>
  <view wx:for="{
   { dataList }}">{
   {index}}-{
   {item}}</view>
</view>
<view>
  <view wx:for="{
   { UserInfo }}">{
   {index}}-{
   {item}}</view>
</view>

或

<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>
  <view wx:for="{
   { dataList }}" wx:for-index="idx" wx:for-item="x">{
   {idx}}-{
   {x}}</view>
</view>
<view>
  <view wx:for="{
   { UserInfo }}" wx:for-index="idx" wx:for-item="x">{
   {idx}}-{
   {x}}</view>
</view>

（2）js

// pages/goods/goods.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList: ["输入","色佛诞日","生日歌"],
    UserInfo: {
      name:"alex",
      age: 18,
      gender: false
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

展示效果：

六、上传图片

编写home页面：

（1）wxml

<!--pages/home/home.wxml-->

<view class="menu">
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text>精品</text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text>精品</text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text>精品</text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text>精品</text>
  </view>
</view>

<navigator url="/pages/list/list?id=566">跳转页面</navigator>


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

（2）js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: ["/images/link-01.png","/images/link-02.png","/images/默认头像.jpeg"]
  },
  uploadImage() {
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success:function(res) {
          console.log(res)
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

（3）wxss

/* pages/home/home.wxss */
image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
}

.menu {
  display: flex;
  /* 在水平方向排列 ，规定主轴方向*/
  flex-direction: row;
  /* 元素在水平方方向如何展示，规定在主轴方向如何展示：center */
  justify-content: space-around;
}

.menu .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.images {
  width: 200rpx;
  height: 200rpx;
  padding: 5rpx;
}

展示效果：

（1）点击“请选择图片”之后，会弹出一个选择页面，

（2）在弹出的选择页面，选择图片之后，console中会打印出选择的图片信息。

展示效果优化1：

（3）此时，我们修改uploadImage()函数，为了可以使我们选择的图片上传展示到页面上，

 data: {
    images: ["/images/link-01.png","/images/link-02.png","/images/默认头像.jpeg"]
  },
 
 uploadImage() {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success:function(res) {
          console.log(res)
          that.setData({images: res.tempFilePaths})
      }
    })
  },

（4）重新编译，点击“请选择图片”之后，在弹出的选择页面选择图片，

点击“打开”之后，页面的展示效果为，

展示效果优化2：

（3）此时，我们修改uploadImage()函数，为了可以使我们选择的图片可以上传展示到页面已有的图片之后，

 data: {
    images: ["/images/link-01.png","/images/link-02.png","/images/默认头像.jpeg"]
  },
  uploadImage() {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success:function(res) {
          console.log(res)
          // 设置images，页面上的图片自动修改
          // that.setData({images: res.tempFilePaths})

          // 默认图片 + 选择的图片
          that.setData({images: that.data.images.concat(res.tempFilePaths)})

      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

（4）重新编译，点击“请选择图片”之后，在弹出的选择页面选择图片，