zoukankan      html  css  js  c++  java
  • 小程序公用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{
       200px;
      height: 100px;
      background-color: #188eee;
      text-align: center;
      line-height: 100px;
      color: #fff;
      margin-top: 20px;
    }
    .test2{
       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{
         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");
      }
    })
  • 相关阅读:
    磁盘冗余 ---RAID磁盘管理
    linux磁盘管理
    linux基础命令
    Apache配置rewrite
    memcache运维整理
    mysql主从配置
    rsync相关整理
    Lua 学习笔记(六)
    Lua 学习笔记(五)
    Lua 学习笔记(四)
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7115046.html
Copyright © 2011-2022 走看看