1、案例描述： 案例描述.jpg

2、实现过程：

2.1、代码演示

index页面
wxml

<!--index.wxml-->
<view class="box">
  <view class="title">同一页面调用不同函数</view>
  <view class="v">{{m1}}</view>
  <view class="v">{{m2}}</view>
  <view class="v">{{m3}}</view>
  <view class="v">{{m4}}</view>
  <view class="v">{{m5}}</view>
  <view class="v">{{m6}}</view>
</view>

wxss

view{
    text-align: center;
    margin-bottom: 10px;
}

js

//index.js
const App = getApp();  //调用app.js当中数据的函数
var util = require('../../utils/util');  //调用其他页面当中是数据接口的require函数

var in1 = '我是index当中的变量in1。';
function inf(){
  return '我是index当中的函数inf。';
}
Page({
  data:{
    m1 : in1,
    m2 : inf(),
    m3 : util.ut1,
    m4 : util.utf(),
    m5 : App.ap1,
    m6 : App.apf()
  }
})

utils页面
js

//util.js
var ut1 = '我是utils当中的变量ut1。';

function utf(){
    return '我是utils当中的函数utf。';
}
module.exports = {
  ut1 : ut1,
  utf : utf
}

app.js文件
app.js:

//app.js

App({
  ap1 : '我是appjs当中的变量ap1。',
  apf:function(){
    return '我是app当中的函数apf。';
  }
})

app.wxss文件
app.wxss:

/**app.wxss**/

.box{
  border: 1px solid rgb(129, 124, 124);
  padding: 10px;
}
.title{
  color: red;
  font-size: 30px;
  margin: 20;
  text-align: center;
}

2.2、结果展示

结果展示.jpg

3、知识总结

知识要点1.jpg
知识要点2.jpg

4、踩坑说明：

• app.js当中变量和函数的定义都是写在App({})当中的，所以是用键值对的方式
• util.js当中变量和函数是直接定义的，没有在Page({})当中定义，所以代码表示方式有所变化，变量前加var，函数使用“function 函数名(){函数体}”方式定义。而写在App{}或者Page{}当中的函数使用“函数名 : function(){函数体}”来定义。同时向外传递接口的函数书写格式也容易忘记是用“=”而不是“:”。
• 在index.js当中也是把函数和变量定义在Page({})外面，但是Page({})当中需要有data才能把参数传递到页面。
• 调用其他页面当中是数据接口的require函数其中写url需要用字符串表示要记得加“”。
• require('../../utils/util');当中的路径要写相对路径，暂时不能写绝对路径。