For instruction, uploading pictures and display effect optimization of simple wechat applet development

This is a continuation of the previous one Simple version of Page Jump of wechat applet development 、 Data binding 、 Get user information 、 Get user location information 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

Catalog

5、 ... and 、for Instructions

To write goods page

Show the effect ：

  6、 ... and 、 To upload pictures

To write home page ：

Show the effect ：

Display effect optimization 1： 

Display effect optimization 2： 

---

5、 ... and 、for Instructions

To write goods page

（1）wxml

The interior is equivalent to helping us make a “for item in dataList”  loop

<!--pages/goods/goods.wxml-->
<text> List of goods </text>
<view>
  <view wx:for="{
   { dataList }}">{
   {index}}-{
   {item}}</view>
</view>
<view>
  <view wx:for="{
   { UserInfo }}">{
   {index}}-{
   {item}}</view>
</view>

 or 

<!--pages/goods/goods.wxml-->
<text> List of goods </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({

  /**
   *  Initial data of the page 
   */
  data: {
    dataList: [" Input "," Buddha's birthday "," Birthday song "],
    UserInfo: {
      name:"alex",
      age: 18,
      gender: false
    }
  },
  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad(options) {

  },

  /**
   *  Life cycle function -- Listening page first rendering completed 
   */
  onReady() {

  },

  /**
   *  Life cycle function -- Monitor page display 
   */
  onShow() {

  },

  /**
   *  Life cycle function -- Monitor page hidden 
   */
  onHide() {

  },

  /**
   *  Life cycle function -- Monitor page uninstall 
   */
  onUnload() {

  },

  /**
   *  Page related event handler -- Monitor user pull-down action 
   */
  onPullDownRefresh() {

  },

  /**
   *  Handling function of page pull bottom event 
   */
  onReachBottom() {

  },

  /**
   *  Users click the upper right corner to share 
   */
  onShareAppMessage() {

  }
})

Show the effect ：

  6、 ... and 、 To upload pictures

To write home page ：

（1）wxml

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

<view class="menu">
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text> The high-quality goods </text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text> The high-quality goods </text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text> The high-quality goods </text>
  </view>
  <view class="item">
    <image src="/static/link-01.png"></image>
    <text> The high-quality goods </text>
  </view>
</view>

<navigator url="/pages/list/list?id=566"> Jump to the page </navigator>


<view bindtap="uploadImage"> Please upload the picture ：</view>
<view class="images">
  <image wx:for="{
   {images}}" src="{
   {item}}"></image>
</view>

（2）js

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

  /**
   *  Initial data of the page 
   */
  data: {
    images: ["/images/link-01.png","/images/link-02.png","/images/ Default Avatar .jpeg"]
  },
  uploadImage() {
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success:function(res) {
          console.log(res)
      }
    })
  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad(options) {

  },



  /**
   *  Life cycle function -- Listening page first rendering completed 
   */
  onReady() {

  },

  /**
   *  Life cycle function -- Monitor page display 
   */
  onShow() {

  },

  /**
   *  Life cycle function -- Monitor page hidden 
   */
  onHide() {

  },

  /**
   *  Life cycle function -- Monitor page uninstall 
   */
  onUnload() {

  },

  /**
   *  Page related event handler -- Monitor user pull-down action 
   */
  onPullDownRefresh() {

  },

  /**
   *  Handling function of page pull bottom event 
   */
  onReachBottom() {

  },

  /**
   *  Users click the upper right corner to share 
   */
  onShareAppMessage() {

  }
})

（3）wxss

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

.menu {
  display: flex;
  /*  Arrange horizontally  , Specify the spindle direction */
  flex-direction: row;
  /*  How elements are displayed horizontally , Specify how to display in the spindle direction ：center */
  justify-content: space-around;
}

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

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

Show the effect ：

（1） Click on “ Please choose a picture ” after , A selection page will pop up ,

 （2） On the pop-up selection page , After selecting the picture ,console The selected picture information will be printed in .

Display effect optimization 1： 

（3） here , We modify uploadImage() function , In order to upload and display the pictures we choose on the page ,

 data: {
    images: ["/images/link-01.png","/images/link-02.png","/images/ Default Avatar .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） recompile , Click on “ Please choose a picture ” after , Select a picture on the pop-up selection page ,

Click on “ open ” after , The display effect of the page is ,

Display effect optimization 2： 

（3） here , We modify uploadImage() function , In order to make the pictures we choose can be uploaded and displayed on the page existing After the picture of ,

 data: {
    images: ["/images/link-01.png","/images/link-02.png","/images/ Default Avatar .jpeg"]
  },
  uploadImage() {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success:function(res) {
          console.log(res)
          //  Set up images, The picture on the page is automatically modified 
          // that.setData({images: res.tempFilePaths})

          //  The default image  +  Selected pictures 
          that.setData({images: that.data.images.concat(res.tempFilePaths)})

      }
    })
  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad(options) {

  },

（4） recompile , Click on “ Please choose a picture ” after , Select a picture on the pop-up selection page ,

Click on “ open ” after , The display effect of the page is ,