斑马斑马-15-微信小程序-基础语法

一、简介

源码地址：https://github.com/1692134188/HelloWechat_Flex.git

接上篇 斑马斑马-11-微信小程序-布局谋篇 中主要讲了flex布局，并用该布局完成了几个静态页面，本篇目标

• 数据绑定
• 列表渲染
• 条件判断
• 点击事件
• 微信常用API接口

二、数据绑定

我们前端的页面都是在wxml中固定的， 现在我们通过Mustache 语法来实现数据绑定

1、简单绑定

　　WXML 中的动态数据均来自对应 Page 的 data。

        <view class="guobaoDet">
            <view class="guobaoPic">
                <image src="/static/index/1.jpg">
                </image>
            </view>
            <view class="guobaoOwner">
                <view class="OwnerName">
                    <image src="/static/index/owner.png"></image>
                    <text >{{ownerName}}</text>
                </view>
                <view class="OwnerFans">
                    <image src="/static/index/fans.png"></image>
                    <text >{{ownerFansNums}}万</text>
                </view>
            </view>
            <view class="guobaoForm">
                <text>{{ownerForm}}</text>
            </view>
        </view>

  data: {
    ownerName:"盖聂",
    ownerFansNums: '500',
    ownerForm:'秦时明月'     
  },

2、对象绑定

　　我们开发过程都是以一种面向对象的思想，类似这种情况，每一个国宝下都有一个守护者（姓名、粉丝数、来源），可以将其分装成一个object对象整体

    <view class="guobao">
        <view class="guobaoDet">
            <view class="guobaoPic">
                <image src="/static/index/1.jpg">
                </image>
            </view>
            <view class="guobaoOwner">
                <view class="OwnerName">
                    <image src="/static/index/owner.png"></image>
                    <text >{{genie.ownerName}}</text>
                </view>
                <view class="OwnerFans">
                    <image src="/static/index/fans.png"></image>
                    <text >{{genie.ownerFansNums}}万</text>
                </view>
            </view>
            <view class="guobaoForm">
                <text>{{genie.ownerForm}}</text>
            </view>
        </view>
     <view class="guobaoDet">
            <view class="guobaoPic">
                <image src="/static/index/2.jpg">
                </image>
            </view>
            <view class="guobaoOwner">
                <view class="OwnerName">
                    <image src="/static/index/owner.png"></image>
                    <text >{{qiaofeng.ownerName}}</text>
                </view>
                <view class="OwnerFans">
                    <image src="/static/index/fans.png"></image>
                    <text >{{qiaofeng.ownerFansNums}}万</text>
                </view>
            </view>
            <view class="guobaoForm">
                <text>{{qiaofeng.ownerForm}}</text>
            </view>
        </view>
    </view>

  data: {
    genie: {
      ownerName:"盖聂",
      ownerFansNums: '500',
      ownerForm:'秦时明月'   
    },
    qiaofeng: {
      ownerName:"乔峰",
      ownerFansNums: '600',
      ownerForm:'天龙八部'   
    } 
      
  }

 

三、列表渲染

　　上面我们通过Mustache 语法实现了数据驱动页面，其实这种双向绑定的思想无论是在AngularJS、Vue、等前端框架，还是在python中如django的前端模糊、jinjia2语言中都是非常常用的。 

　　我们虽然实现了html和js的数据分离，把一些可变的数据通过data从html中分离出来，但是html页面中还是存在大量重复代码，由于其结构高度相似，我们可以通过列表循环来优化

1、for循环重复渲染　　wx:for

　　在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

　　数组当前项的变量名默认为 item

/**index.wxss**/
.header{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.header .icon image {
   100rpx;
  height: 100rpx;
}
.header .icon{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.content image {
   350rpx;
  height: 400rpx;
  margin: 10rpx 15rpx 10rpx 10rpx; 
}
/* .content {
  display:flex;
  flex-direction: row;
  align-items: center;
} */
.content{
  display: flex;
  flex-flow: row wrap;  
 align-content: space-around;
}

.content  .guobaoOwner{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  /* 设置view相关的 */
  background-color: rgba(0, 0, 0, 0.618);
  position:absolute;
   350rpx;
  height: 80rpx;
  margin: -80rpx 10rpx 10rpx 10rpx;
  /* 设置字体相关的 */
  color: white;
  font-size:medium;
  line-height:80rpx ;  /*字体居中*/
}
.content  .guobaoOwner image{
   40rpx;
  height: 40rpx;
  vertical-align: middle; /*图片居中*/
}
.content  .guobaoForm{
  margin-left: 10rpx;
}

<!--index.wxml-->
<view class="header">
    <view class="icon">
        <image src="/static/index/icon_01.png"></image>
        <text>奇思妙想</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_03.png"></image>
        <text>合作共赢</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_05.png"></image>
        <text>集思广益</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_07.png"></image>
        <text>云上生活</text>
    </view>
</view>

<view class="content" >
    <view class="guobaoDet" wx:for="{{guobaoList}}">
        <view class="guobaoPic">
            <image src="{{item.pic_url}}">
            </image>
        </view>
        <view class="guobaoOwner">
            <view class="OwnerName">
                <image src="/static/index/owner.png"></image>
                <text >{{item.ownerName}}</text>
            </view>
            <view class="OwnerFans">
                <image src="/static/index/fans.png"></image>
                <text >{{item.ownerFansNums}}万</text>
            </view>
        </view>
        <view class="guobaoForm">
            <text>{{item.ownerForm}}</text>
        </view>
    </view>
</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    guobaoList: [
      {
        pic_url: "/static/index/1.jpg",
        ownerName: "盖聂",
        ownerFansNums: '500',
        ownerForm: '秦时明月'
      },
      {
        pic_url: "/static/index/2.jpg",
        ownerName: "乔峰",
        ownerFansNums: '600',
        ownerForm: '天龙八部'
      },
      {
        pic_url: "/static/index/3.jpg",
        ownerName: "Harry Petter",
        ownerFansNums: '500',
        ownerForm: '哈利 波特'
      },
      {
        pic_url: "/static/index/4.jpg",
        ownerName: "伏地魔",
        ownerFansNums: '600',
        ownerForm: '哈利 波特'
      },
      {
        pic_url: "/static/index/5.jpg",
        ownerName: "琼恩 雪诺",
        ownerFansNums: '50',
        ownerForm: '冰与火'
      },
      {
        pic_url: "/static/index/6.jpg",
        ownerName: "夜王",
        ownerFansNums: '600',
        ownerForm: '权力的游戏'
      },
      {
        pic_url: "/static/index/7.jpg",
        ownerName: "苏轼",
        ownerFansNums: '50',
        ownerForm: '宋'
      },
      {
        pic_url: "/static/index/8.jpg",
        ownerName: "李白",
        ownerFansNums: '600',
        ownerForm: '唐'
      },
      {
        pic_url: "/static/index/9.jpg",
        ownerName: "秦始皇",
        ownerFansNums: '50',
        ownerForm: '秦'
      },
      {
        pic_url: "/static/index/10.jpg",
        ownerName: "汉武帝",
        ownerFansNums: '600',
        ownerForm: '汉'
      }
    ]
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

　　　

　　至此我们前端index.html代码由原来的200多行，优化到了不到40行

 四、条件判断

　　如果喜欢一个国宝，那么它的星星是黄色的，反之则为白色

1、if判断　wx:if

<!--index.wxml-->
<view class="header">
    <view class="icon">
        <image src="/static/index/icon_01.png"></image>
        <text>奇思妙想</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_03.png"></image>
        <text>合作共赢</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_05.png"></image>
        <text>集思广益</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_07.png"></image>
        <text>云上生活</text>
    </view>
</view>
<view class="content">
    <view class="guobaoDet" wx:for="{{guobaoList}}">
        <view class="guobaoPic">
            <image src="{{item.pic_url}}"> </image>
        </view>
        <view class="guobaoOwner">
            <view class="OwnerName">
                <image wx:if="{{item.isLike}}" src="/static/index/ownerfill.png"></image>
                <image wx:if="{{!item.isLike}}" src="/static/index/owner.png"></image>
                <text class="Owner_text">{{item.ownerName}}</text>
            </view>
            <view class="OwnerFans">
                <image src="/static/index/fans.png"></image>
                <text class="Owner_text">{{item.ownerFansNums}}</text>
            </view>
        </view>
        <view class="guobaoForm">
            <text>{{item.ownerForm}}</text>
        </view>
    </view>
</view>

  data: {
    guobaoList: [
      {
        pic_url: "/static/index/1.jpg",
        isLike:true,
        ownerName: "盖聂",
        ownerFansNums: 500,
        ownerForm: '秦时明月'
      },
      {
        pic_url: "/static/index/2.jpg",
        isLike:true,
        ownerName: "乔峰",
        ownerFansNums: 600,
        ownerForm: '天龙八部'
      },
      {
        pic_url: "/static/index/3.jpg",
        isLike:true,
        ownerName: "Harry Petter",
        ownerFansNums: 500,
        ownerForm: '哈利 波特'
      },
      {
        pic_url: "/static/index/4.jpg",
        isLike:false,
        ownerName: "伏地魔",
        ownerFansNums: 600,
        ownerForm: '哈利 波特'
      },
      {
        pic_url: "/static/index/5.jpg",
        isLike:true,
        ownerName: "琼恩 雪诺",
        ownerFansNums: 50,
        ownerForm: '冰与火'
      },
      {
        pic_url: "/static/index/6.jpg",
        isLike:false,
        ownerName: "夜王",
        ownerFansNums: 600,
        ownerForm: '权力的游戏'
      },
      {
        pic_url: "/static/index/7.jpg",
        isLike:true,
        ownerName: "苏轼",
        ownerFansNums: 50,
        ownerForm: '宋'
      },
      {
        pic_url: "/static/index/8.jpg",
        isLike:true,
        ownerName: "李白",
        ownerFansNums: 600,
        ownerForm: '唐'
      },
      {
        pic_url: "/static/index/9.jpg",
        isLike:true,
        ownerName: "秦始皇",
        ownerFansNums: 50,
        ownerForm: '秦'
      },
      {
        pic_url: "/static/index/10.jpg",
        isLike:true,
        ownerName: "汉武帝",
        ownerFansNums: '',
        ownerForm: '汉'
      }
    ]
  },

 

当然也可以用 wx:else

五、点击事件

1、点亮小星星

 　　点击国宝下的星星图标，表示喜欢，再点一下，表示取消

　　1.1 给wxml中的元素通过bindtap设置点击事件，并通过data-参数名传递参数

 　　

 　　1.2 在js中获取参数，并处理响应的逻辑

　　

2、点赞

　　 点击国宝下的手指图标，没点一次后面的值＋1

　　2.1 给wxml中的元素通过bindtap设置点击事件，并通过data-参数名传递参数

 

 　　2.2 在js中获取参数，并处理响应的逻辑

　　

效果展示：

 

3、页面跳转

我们给来源加一个详情页面

3.1 给wxml中的元素添加navigator类似于a标签，可传递参数。注意路径是相对路径

 3.2 添加navigate的Page页面

3.3 在js中拿到数据进行拼接

 3.4 效果图

4、代码

<!--index.wxml-->
<view class="header">
    <view class="icon">
        <image src="/static/index/icon_01.png"></image>
        <text>奇思妙想</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_03.png"></image>
        <text>合作共赢</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_05.png"></image>
        <text>集思广益</text>
    </view>
    <view class="icon">
        <image src="/static/index/icon_07.png"></image>
        <text>云上生活</text>
    </view>
</view>
<view class="content">
    <view class="guobaoDet" wx:for="{{guobaoList}}">
        <view class="guobaoPic">
            <image src="{{item.pic_url}}"> </image>
        </view>
        <view class="guobaoOwner">
            <view class="OwnerName">
                <image wx:if="{{item.isLike}}" src="/static/index/ownerfill.png" bindtap="likeClick" data-index="{{index}}"></image>
                <image wx:else src="/static/index/owner.png" bindtap="likeClick" data-index="{{index}}"></image>
                <text class="Owner_text">{{item.ownerName}}</text>
            </view>
            <view class="OwnerFans">
                <image src="/static/index/fans.png" bindtap="fansClick" data-index="{{index}}"></image>
                <text class="Owner_text">{{item.ownerFansNums}}</text>
            </view>
        </view>
        <view class="guobaoForm">
            <navigator url="../navigate/navigate?fromName={{item.ownerFrom}}&userName={{item.ownerName}}" hover-class="navigator-hover">{{item.ownerFrom}}</navigator>
        </view>
    </view>
</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    guobaoList: [
      {
        pic_url: "/static/index/1.jpg",
        isLike: true,
        ownerName: "盖聂",
        ownerFansNums: 500,
        ownerFrom: '秦时明月'
      },
      {
        pic_url: "/static/index/2.jpg",
        isLike: true,
        ownerName: "乔峰",
        ownerFansNums: 600,
        ownerFrom: '天龙八部'
      },
      {
        pic_url: "/static/index/3.jpg",
        isLike: true,
        ownerName: "Harry Petter",
        ownerFansNums: 50,
        ownerFrom: '哈利 波特'
      },
      {
        pic_url: "/static/index/4.jpg",
        isLike: false,
        ownerName: "伏地魔",
        ownerFansNums: 600,
        ownerFrom: '哈利 波特'
      },
      {
        pic_url: "/static/index/5.jpg",
        isLike: true,
        ownerName: "琼恩 雪诺",
        ownerFansNums: 50,
        ownerFrom: '冰与火'
      },
      {
        pic_url: "/static/index/6.jpg",
        isLike: false,
        ownerName: "夜王",
        ownerFansNums: 600,
        ownerFrom: '权力的游戏'
      },
      {
        pic_url: "/static/index/7.jpg",
        isLike: true,
        ownerName: "苏轼",
        ownerFansNums: 50,
        ownerFrom: '宋'
      },
      {
        pic_url: "/static/index/8.jpg",
        isLike: true,
        ownerName: "李白",
        ownerFansNums: 600,
        ownerFrom: '唐'
      },
      {
        pic_url: "/static/index/9.jpg",
        isLike: true,
        ownerName: "秦始皇",
        ownerFansNums: 50,
        ownerFrom: '秦'
      },
      {
        pic_url: "/static/index/10.jpg",
        isLike: true,
        ownerName: "汉武帝",
        ownerFansNums: 60,
        ownerFrom: '汉'
      }
    ]
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  // onLoad: function () {
  //   if (app.globalData.userInfo) {
  //     this.setData({
  //       userInfo: app.globalData.userInfo,
  //       hasUserInfo: true
  //     })
  //   } else if (this.data.canIUse) {
  //     // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
  //     // 所以此处加入 callback 以防止这种情况
  //     app.userInfoReadyCallback = res => {
  //       this.setData({
  //         userInfo: res.userInfo,
  //         hasUserInfo: true
  //       })
  //     }
  //   } else {
  //     // 在没有 open-type=getUserInfo 版本的兼容处理
  //     wx.getUserInfo({
  //       success: res => {
  //         app.globalData.userInfo = res.userInfo
  //         this.setData({
  //           userInfo: res.userInfo,
  //           hasUserInfo: true
  //         })
  //       }
  //     })
  //   }
  // },
  onLoad: function (options) {

  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  fansClick: function (e) {
    // 提前准备好对象
    let index = e.currentTarget.dataset['index'];
    var item = this.data.guobaoList[index]
    item.ownerFansNums++;
    // 依旧是根据index获取数组中的对象
    var key = "guobaoList[" + index + "]"
    this.setData({
      // 这里使用键值对方式赋值
      key: item
    }, function () { this.onReady() })
    this.setData({
      guobaoList: this.data.guobaoList
    })
  },
  likeClick: function (e) {
    // 提前准备好对象
    let index = e.currentTarget.dataset['index'];
    var item = this.data.guobaoList[index]
    item.isLike = !item.isLike;
    // 依旧是根据index获取数组中的对象
    var key = "guobaoList[" + index + "]"
    this.setData({
      // 这里使用键值对方式赋值
      key: item
    }, function () { })
    this.setData({ guobaoList: this.data.guobaoList })
  }
})

<text>{{content}}</text>

// pages/navigate.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    content:"",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData (
      {
        content:"在"+options.fromName+" "+options.userName+"很厲害"
      }
    )
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

六、微信常用API接口

1、获取用户信息

1.1 我们给“我的”页面设置头像和昵称的显示

1.2 通过wx的API。getUserInfo()来获取数据

 

 1.3 展示。

 

2、获取用户信息（官方推荐）

1.1 我们给“我的”页面设置头像和昵称的显示

 1.2 添加bindGetUserInfo方法

 1.3 效果展示

<!--pages/myInfo/myInfo.wxml-->
<view class="header">
    <view class="top">
        <view class="user_pic">
            <image src="{{userinfo.avatarUrl}}"></image>
            <!-- <text>登录</text>
            <text>|</text>
            <text>注册</text> -->
            <text>{{userinfo.nickName}}</text>
        </view>
        <view class="seeme">
            <text>查看个人主页</text>
        </view>
    </view>
    <view class="showUserInfo" > <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">用户授权</button></view>
    <view class="bottom">
        <view class="item">
            <text>0</text>
            <text>关注</text>
        </view>
        <view class="item">
            <text>1</text>
            <text>粉丝</text>
        </view>
        <view class="item">
            <text>2</text>
            <text>赞与收藏</text>
        </view>
        <view class="item">
            <text>3</text>
            <text>好友动态</text>
        </view>
    </view>
</view>
<view class="content">
    <view class="contentList">
        <view class="item">
            <image src="/static/myinfo/orders_icon.png"></image>
            <text>全部订单</text>
        </view>
        <view class="item">
            <image src="/static/myinfo/cash_coupon_icon.png"></image>
            <text>待支付</text>
        </view>
        <view class="item">
            <image src="/static/myinfo/discount_icon.png"></image>
            <text>待评价</text>
        </view>
        <view class="item">
            <image src="/static/myinfo/collect_icon.png"></image>
            <text>收藏</text>
        </view>
        <view class="item">
            <image src="/static/myinfo/address_icon.png"></image>
            <text>地址管理</text>
        </view>
    </view>
    <view class="mycontent">
        <view class="item">
            <text class="my_content_title">我的钱包</text>
            <view class="my_content_detail">
                <text>￥200</text>
                <text> > </text>
            </view>
        </view>
        <view class="item">
            <text class="my_content_title">我的优惠券</text>
            <view class="my_content_detail">
                <text>暂无可用</text>
                <text> > </text>
            </view>
        </view>
        <view class="item">
            <text class="my_content_title">领券中心</text>
            <view class="my_content_detail">
                <text>您的福利都在这里</text>
                <text> > </text>
            </view>
        </view>
    </view>
</view>
<view class="footer">
    <view class="item">
        <image src="/static/myinfo/wechat.png"></image>
        <text class="footer_item_text">微信客服</text>
    </view>
    <view class="item">
        <image src="/static/myinfo/alipay.png"></image>
        <text  class="footer_item_text"F>支付宝客服</text>
    </view>
</view>

/* pages/myInfo/myInfo.wxss */
.header{
  background-color: turquoise;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  color: white;
  margin-bottom: 20rpx;
}
.header .top{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header .top image{
   100rpx;
  height: 100rpx;
  vertical-align: middle;
}
.header .top .user_pic{
    margin:20rpx 10rpx 20rpx 30rpx;
    align-items: center;
    justify-content: center;
}
.header .top .user_pic image{
  border-radius: 100rpx;
}
.header .top .seeme{  
  background-color: teal;
  height: 80rpx;
   300rpx;
  margin: 50rpx 20rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 30rpx 0rpx 0rpx 30rpx ;
}
.header .top .user_pic text{
  line-height: 150rpx;
  margin:0rpx 10rpx 20rpx 10rpx;
  align-items: center;
  justify-content: center;
}
.header .showUserInfo button{
  background-color: teal;
   280rpx;
  height: 80rpx;
  padding: 10rpx 0 0 0;
}
.header .bottom{
  display: flex;
  flex-direction: row;
  justify-content:space-around;
  margin-bottom: 50rpx;
}
.header .bottom .item{
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  align-items: center;
}
.content{
  margin-top:60rpx;
}
.content .contentList {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.content .contentList .item{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.content .contentList .item image{
   80rpx;
  height: 80rpx;
}
.content .mycontent {
  margin-top: 100rpx;
  border-top:10rpx solid  darkgrey;
}
.content .mycontent .my_content_title{
  font-size: 39rpx;
  font-weight: 600;
}
.content .mycontent .item{
  height: 100rpx;
  margin: 50rpx 30rpx 50rpx 30rpx;
  border-bottom:4rpx solid  rgb(169, 169, 169);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content .mycontent .my_content_detail{
  font-size: 35rpx;
  font-weight: 200;
}
.footer {
  margin: 100rpx 0 100rpx 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.footer .item{
  border: 4rpx solid rgb(169, 169, 169);
  border-radius: 20rpx;
  padding: 10rpx 10rpx 10rpx 10rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
}
.footer_item_text{
  margin-left: 10rpx;
}
.footer image {
  height: 50rpx;
   50rpx;
  vertical-align: middle;
}

// pages/myInfo/myInfo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userinfo: {
      avatarUrl: "/static/myinfo/user_icon.png",
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.getUserInfo({
      success: function (res) {
        that.data.userInfo = res.userInfo;
        that.setData({
          //userinfo: that.data.userInfo //方式一 获取用户信息
        })
      }
    })
  },
  bindGetUserInfo: function () {
    var that = this;
    wx.getUserInfo({
      success: function (res) {
        that.data.userInfo = res.userInfo;
        that.setData({
           userinfo: that.data.userInfo //方式二 获取用户信息
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

 

3、发布功能    获取用户位置，图片上传

3.1 需求：添加一个发布功能，类似微信发布朋友圈功能

3.2 所需要代码

<!--pages/publish.wxml-->
<view class="viewImage">
    <view class="container">
        <textarea placeholder="这一刻的想法...">
    </textarea>
        <image wx:for="{{publich.imageList}}" src="{{item}}"></image>
        <image wx:if="{{publich.imageList.length <9 }}" bindtap="uploadImage" src="/static/publish/add.png"></image>
    </view>
</view>
<view class="bottom">

    <view class="item" bindtap="chooseLocation">
        <view class="item_left">
            <image wx:if="{{publich.location}}" src="/static/publish/locationfill.png"></image>
            <image wx:else src="/static/publish/location.png"></image>
            <text wx:if="{{publich.location}}"  class="my_content_title">{{publich.location}}</text>
            <text wx:else class="my_content_title">所在位置</text>
        </view>
        <view class="my_content_detail">
            <text > > </text>
        </view>
    </view>
 
    <view class="item" >
        <view class="item_left">
            <image wx:if="{{publich.attUserList}}" src="/static/publish/tixingfill.png"></image>
            <image wx:else src="/static/publish/tixing.png"></image>
            <text wx:if="{{publich.attUserList}}"  class="my_content_title">{{publich.attUserList}}</text>
            <text wx:else class="my_content_title">提醒谁看</text>
        </view>
        <view class="my_content_detail">
            <text > > </text>
        </view>
    </view>
      <view class="item" >
        <view class="item_left">
            <image wx:if="{{publich.canUserList}}" src="/static/publish/yonghufill.png"></image>
            <image wx:else src="/static/publish/yonghu.png"></image>
            <text wx:if="{{publich.canUserList}}"  class="my_content_title">{{publich.canUserList}}</text>
            <text wx:else class="my_content_title">谁可以看</text>
        </view>
        <view class="my_content_detail">
            <text > > </text>
        </view>
    </view>
</view>

/* pages/publish.wxss */
.viewImage .upload image{
   100rpx;
  height: 100rpx;
}
.upload{
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  align-items: center;
}
.container{
  display: flex;
  flex-flow: row wrap;  
  align-content: space-around;
}
.container image{
   230rpx;
  height: 230rpx;
  margin: 10rpx 10rpx 10rpx 10rpx ;
}
.bottom {
  display: flex;
  flex-flow: column;  
  align-content: space-around;
}
.bottom .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 4rpx solid rgb(169, 169, 169);
  margin-right: 20rpx;
}

.bottom .item image{
   80rpx;
  height: 80rpx;
}
 

// pages/publish.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
    publich:{
      imageList: [],
      location:"",
      attUserList:"",
      canUserList:""
    }
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  uploadImage: function () {
    var that = this;
   

    wx.chooseImage({
      count:9,
      sizeType:['compressed','original'],
      sourceType:["album","camera"],
      
      success: (res) => {
        var item = this.data.publich
        item.imageList = that.data.publich.imageList.concat(res.tempFilePaths);
        // 依旧是根据index获取数组中的对象
        var key = "publich"
        this.setData({
          // 这里使用键值对方式赋值
          key: item
        }, function () { })
        this.setData({ publich: this.data.publich })
      },
    })
  },
  chooseLocation: function () {
    var that = this;
    wx.chooseLocation({
      success: (res) => {
        var item = this.data.publich
        item.location = res.address ;
        // 依旧是根据index获取数组中的对象
        var key = "publich"
        this.setData({
          // 这里使用键值对方式赋值
          key: item
        }, function () { })
        this.setData({ publich: this.data.publich })
      },
    })
  }
})

3.3 效果展示