需求：添加一個頁面，通過按鈕觸發(fā)事件，且可從首頁跳轉(zhuǎn)至該頁面

首頁

如圖，紅框部分是添加的內(nèi)容，其他的都是demo自帶的

添加一個頁面只需4個文件即可，其中.js文件和.wxml文件是必需的，.js文件里面一般寫初始化數(shù)據(jù)和定義方法，如圖中的navigateTo(）方法是微信封裝好的導航方法

.wxml定義事件觸發(fā)方法，這里添加了一個button，通過bindtab綁定js文件中定義的方法，如下圖

<!--index.wxml-->
<view class="container">
<view  bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
  <text class="user-motto">{{motto}}</text>
  <button type="default" bindtap="bindViewTap2">前往我的朋友圈</button>
</view>
</view>

點擊【前往我的朋友圈】，跳轉(zhuǎn)到如下界面

我的朋友圈

點擊【點贊】后人氣指數(shù)+1

人氣指數(shù)+1

mypage.js代碼如下

Page({
data: {
  mytext:"人氣指數(shù)100"
         },
anyfunction: function () {
      console.log("執(zhí)行anyfunction");
          this.setData({
              mytext: "人氣指數(shù)101"
                    });
           }
  })

mypage.wxml代碼：

<view class="container">
<text>Welcome to mypage!</text>
<button type="default" bindtap="anyfunction">點贊</button>
<text>{{mytext}}</text>
</view>

剩下mypage.json和mypage.wxss主要是定義頁面樣式，從其他頁面復制過來即可

//mypage.json
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我的朋友圈",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true  
}

其中enablePullDownRefresh屬性是指頁面是否支持下拉刷新

/* pages/mypage/mypage.wxss */
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
 }