详解微信小程序入门五: wxml文件引用、模版、生

<!--pages/mon/header.wxml-->
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>

/app.wxss/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

<!--pages/index/index2.wxml-->
<view class="container">
  <include src="../mon/header.wxml" />

  <view class="myBtn">
    <button type="primary" bindtap="goIndex3">进入index3</button>
  </view>  
</view>

// pages/index/index2.js
var app = getApp()

Page({
 data: {
  userInfo: {},
 },

 goIndex3:function(){
  wx.navigateTo({
   url: 'index3'
  })
 },

 onLoad: function () {
  console.log('onLoad')
  var that = this
  app.getUserInfo(function (userInfo) {
   that.setData({
    userInfo: userInfo
   })

   //本地存储
   wx.setStorageSync('userInfo', userInfo)
  })
 }
})

<!--pages/index/index3.wxml-->

<view class="container">
  <include src="../mon/header.wxml" />

  <text>pages/index/index3.wxml</text>
</view>

// pages/index/index3.js
Page({
 data:{
  userInfo: {},
 },
 onLoad:function(options){  
  this.setData({
   userInfo: wx.getStorageSync('userInfo')
  })
 },
})

<template name="msgItem">
  视图代码...
</template>

<template is="msgItem" data="{{...item}}"/>