小程序数据显示和一些基本处理

近来有一个契机让我想写写小程序开发的事，我一个朋友写毕业论文涉及到小程序开发，跟我说有不懂的来问我，因为我之前有写过这方面的项目，但是细想一下，其实很多代码细节我都记得不是很清楚了，所以好记性不如烂笔头，我还是打算整理一下把这些东西记录下来，方便自己以后查阅，也可以让跟我刚入门时一样的新手童鞋们借鉴一下。具体新建项目就不说了，直接从代码开始吧。

1、新建一个小程序项目，然后看一下结构

2、数据的显示和处理
index.js

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

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    dataInfo:[
      {id:1,name:'测试1',type:1},
      { id: 2, name: '小黑', type: 1},
      { id: 3, name: '小黄', type: 2 }
    ],
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    // 页面跳转
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  // 修改motto
  changeword:function(){
    this.setData({
      motto: 'Hello World 你好',
    })

  },
  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.wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <!-- 列表 -->
  <view class="list" wx:for="{{dataInfo}}" wx:key="item" wx:for-item="item">
      <view class="listItem">{{item.id}}</view>
      <view class="listItem">{{item.name}}</view>
      <!-- wx:if用法 判断 -->
      <view class="listItem" wx:if="{{item.type==1}}">false</view>
      <block wx:else>
        <view class="listItem">true</view>
      </block>
  </view>
  <!-- 列表 -->

  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <button class="chanbtn" bindtap="changeword">测试按钮</button>
</view>

index.wxss

.usermotto {
  margin-top: 100px;
}

.list{
  width: 100vw;
  height: 30px;
  line-height: 30px;
  display: flex;
  flex-direction: row;
}
.listItem{
   flex-grow: 1;
   text-align: center;
}

.chanbtn{
  font-size: 14px;
  line-height: 30px;
  padding: 5px 0px;
  background: #aaa;
  color: #ffffff;
}

效果图

点击测试按钮会修改helloworld