小程序公用js提取到app.js中調用的實例

index.wxml:

<view class="datas" bindtap="test01" data-id="0">
  <text>{{page}}</text>
</view>

<view class="datas" bindtap="test02" data-id="1">
  <text>測試2</text>
</view>

<navigator class="test2" url="/pages/page2/page2">跳轉到測試頁面page2</navigator>

index.wxss:

.datas{
  width: 200px;
  height: 100px;
  background-color: #188eee;
  text-align: center;
  line-height: 100px;
  color: #fff;
  margin-top: 20px;
}
.test2{
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background-color: red;
  margin-top: 50px;
}

index.js

var app=getApp();
Page({
  data: {
    page:"測試數據1"
  },
  /*調用公共方法test01*/
  test01:function(event){
    var that=this;
    app.test01(event,that);
  },
  /*調用公共方法test02*/
  test02: function () {
    app.test02();
  }
})

 

page2.wxml:

<view class="page2" bindtap="test01" data-id="page2">
{{page}}
</view>

page2.wxss

.page2{
    width: 200px;
  height: 100px;
  background-color: #188eee;
  text-align: center;
  line-height: 100px;
  color: #fff;
  margin-top: 20px;
}

page2.js

var app=getApp();
Page({
  data: {
    page: "測試數據1"
  },
  /*調用公共方法test01*/
  test01: function (event) {
    var that = this;
    app.test01(event, that);
  },
})

 

app.json

{
  "pages":[
    "pages/index/index",
    "pages/page2/page2"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.js

App({

  test01: function (event, that){
    that.data.page= "修改后的page數據";
    that.setData({
      page: that.data.page
    });
    console.log(event.currentTarget.dataset.id);
  },

  test02:function(){
    console.log("test2");
  }
})