需求：添加一个页面，通过按钮触发事件，且可从首页跳转至该页面
首页
如图，红框部分是添加的内容，其他的都是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;
}
