index.wxml:

<view class="datas" bindtap="test01" data-id="">
<text>{{page}}</text>
</view> <view class="datas" bindtap="test02" data-id="">
<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");
}
})

小程序公用js提取到app.js中调用的实例的更多相关文章

  1. 小程序基础知识点讲解-WXML + WXSS + JS,生命周期

    小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wx ...

  2. 微信小程序实质是什么? Hybrid App

    微信小程序是一种不需要下载安装即可使用的应用,用户扫一扫或者搜一下即可打开应用.微信小程序实质是Hybrid技术的应用.Hybrid App(混合模式移动应用). 小程序能够更多的可以更多的调用手机本 ...

  3. 小程序框架之逻辑层App Service

    小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能. 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈. ...

  4. 转载:微信小程序源码提取反编译

    转载来源:www.51xuediannao.com/xiaochengxu/019c08cc.html 一.前言 微信小程序源码提取反编译,听起来很屌,其实还是简单的,基本是傻瓜式操作.要想拿到微信小 ...

  5. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  6. 浅析微信支付:微信支付简单介绍(小程序、公众号、App、H5)

    本文是[浅析微信支付]系列文章的第二篇,主要讲解一下普通商户接入的支付方式以及其中的不同之处. 上篇文章讲了本系列的大纲,没有看过的朋友们可以看一下. 浅析微信支付:前篇大纲 微信支付是集成在微信客户 ...

  7. 林兴爆料小程序很快可以支持各个 App 直接打开小程序

    在微信开放平台基础高级产品经理林兴演讲的当场,他爆料了微信小程序一个轰动性新能力:小程序很快可以支持各个 App 直接打开小程序!没错,你没有听错,简单来说,在不久以后,所有的 App 里面都可以看到 ...

  8. [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)

    本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...

  9. 微信小程序 不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

    微信小程序  不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 友情提示: 大家 ...

随机推荐

  1. 20145105 《Java程序设计》第9周学习总结

    20145105 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 一.JDBC入门 (一)JDBC简介 厂商在操作JDBC驱动程序时,依操作方式可将驱动程序分为 ...

  2. JavaScript常用操作,常用类

    算术运算符 重点关注 算数,赋值,逻辑运算符,三目运算符 <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. MIMO雷达比幅单脉冲测角精度分析(系统工程与电子技术)

    MIMO雷达比幅单脉冲测角精度分析(系统工程与电子技术)

  4. .NET MVC请求流程

    ASP.NET MVC 请求流程:Controller MvcHandler Action Action参数赋值 .NET MVC权限设计思考之切入点

  5. 【旧版本】Ubuntu 14.04 下 P416编译器 p4c的安装

    注:此为2017年5月份的安装方法,最新的p4c安装方法见: Ubuntu14.04下 安装p4c 参考: p4c README Ubuntu 14.04 下 P4v16编译器 p4c的安装 系统要求 ...

  6. FAST UA API

    参考: FAST_UA 编程手册 FAST DATA STRUCTURE fast_packet fast_metadata fast_rule fast_flow FAST UA API 1.fas ...

  7. 【Python】【元编程】【一】动态属性和特性

    #19.1 使用动态属性转换数据"""#栗子19-2 osconfeed.py:下载 osconfeed.jsonfrom urllib.request import u ...

  8. Codeforces Round #323 (Div. 2) C. GCD Table map

    题目链接:http://codeforces.com/contest/583/problem/C C. GCD Table time limit per test 2 seconds memory l ...

  9. 已使用 163 邮箱测试通过,且支持 SSL 连接。 发送邮件

    示例:Jack 发送一封邮件给 Rose. public class SendMail {     public static void main(String[] args) {         b ...

  10. Spring AMQP 源码分析 08 - XML 配置

    ### 准备 ## 目标 通过 XML 配置文件使用 Spring AMQP ## 前置知识 <Spring AMQP 源码分析 07 - MessageListenerAdapter> ...