小程序学习

需求：添加一个页面，通过按钮触发事件，且可从首页跳转至该页面

首页

如图，红框部分是添加的内容，其他的都是demo自带的

添加一个页面只需4个文件即可，其中.js文件和.wxml文件是必需的，.js文件里面一般写初始化数据和定义方法，如图中的navigateTo(）方法是微信封装好的导航方法

.wxml定义事件触发方法，这里添加了一个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>

点击【前往我的朋友圈】，跳转到如下界面

我的朋友圈

点击【点赞】后人气指数+1

人气指数+1

mypage.js代码如下

Page({
data: {
  mytext:"人气指数100"
         },
anyfunction: function () {
      console.log("执行anyfunction");
          this.setData({
              mytext: "人气指数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;
 }