一、小程序的 JS 文件

一个小程序页面由 4 个文件组成，分别是 JS 文件，WXML 文件，JSON 文件和　WXSS 文件，WXML 文件之前已经讲解过了，错过的同学可以点传送阵直达：什么是 WXML 文件

废话不多说，今天主要讲解的是小程序的 JS 文件，让我们开始吧！

小程序中的js代码如何写,小程序js文件客户端能看到

二、注册页面

在微信小程序中，每个页面都需要一个对应的 JS 文件来控制页面的行为，指定页面的初始数据、生命周期回调、事件处理函数，用于控制小程序页面的逻辑、交互和数据处理。

1、简单页面注册

简单页面可以使用 Page 构造器进行注册，接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

//index.js
Page({
data: {
    newData: '我是湾湾呀，很高兴认识你!'
  }
})

其中，微信提供的 API 远不止 data 可以设置页面的初始数据，还有生命周期回调、事件处理函数等，这些晚一点讲。

2、在页面中使用 behaviors

页面可以引用 behaviors , behaviors 可以用来让多个页面有相同的数据字段和方法。

Behaviors 是一种用于实现组件间代码共享的特性，类似于一些编程语言中的 “ mixins ” 或者 “ traits ”。每个 behavior 可以包含一组属性、数据、生命周期函数和方法。

当组件引用某个 behavior 时，这个 behavior 中的属性、数据和方法会被合并到组件中，同时生命周期函数会在对应的时机被调用。

一个组件可以引用多个 behavior ，而且一个 behavior 也可以引用其他 behavior 。

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is my-behavior data.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is my-behavior methods changes data'
    }
  }
})

// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  data: {
   shareText: 'This is index init data';
  },
  onLoad: function() {
    this.data.sharedText === 'TThis is index onLoad set data'
  }
})

那么，这时候就有一些同学产生疑问了，要是遇到组件和它引用的 behavior 遇到同名的字段，这时候怎么处理呀？这时候「同名字段的覆盖和组合规则」隆重出场，咱们按照规则去处理即可～

1）如果有同名的属性 (properties) 或方法 (methods)

若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法，如上面的例子，展示出来的就是：This is index init data

小程序中的js代码如何写,小程序js文件客户端能看到

最后出来的效果

若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；

module.exports = Behavior({
  data: {
    sharedText: 'This is my-behavior data.',
    // 新增一个 index.js 没有的数据，并在  index.wxml 打印
    onlyBehavior: 'only behavior has'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is my-behavior methods changes data.'
    }
  }
})

小程序中的js代码如何写,小程序js文件客户端能看到

最后出来的效果

在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：引用者 behavior 覆盖被引用的 behavior 中的同名属性或方法。

var myBehavior = require('./my-behavior.js')
Page({ 
  behaviors: [myBehavior],
  data: {
    sharedText: 'This is index init data',
    // 我们在引用 behavior 中新建一个和 behavior 中的同名属性
    onlyBehavior: 'NOT behavior, this is index',
    }
   })

小程序中的js代码如何写,小程序js文件客户端能看到

最后出来的效果

简单来说，就是「原始居民」大于「外来者」

2）如果有同名的数据字段 (data)

a. 若同名的数据字段都是对象类型，会进行对象合并//组件中有对象： dataObj = { a: 1 } // behavior 也有对象： dataObj = { b: 2 } //那么，组件引用 behavior，dataObj 会变成以下数据： dataObj = {a: 1, b: 2 } b. 其余情况会进行数据覆盖，覆盖规则为：引用者 behavior > 被引用的 behavior 、靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）大家可以尝试将 sharedText 不同文件注释一下，看看最后展示效果是不是如 b 点所示 // my-second.js module.exports = Behavior({ data: { // NO.3 sharedText: 'This is my-behavior-2 data.', }}) // my-behavior.js var myBehavior2 = require('./my-second.js') module.exports = Behavior({ behaviors: [myBehavior2], data: { // NO.2 sharedText: 'This is my-behavior data.', }}) // index.js var myBehavior = require('./my-behavior.js'); Page({ behaviors: [myBehavior], data: { // NO.1 sharedText: 'This is index init data' }, 3) 生命周期函数和 observers 不会相互覆盖，而是在对应触发时机被逐个调用：
behavior 优先于组件执行；
被引用的 behavior 优先于引用者 behavior 执行；
靠前的 behavior 优先于靠后的 behavior 执行；
对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
对于同种生命周期函数和同字段 observers ，遵循如下规则：
如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行。

3、复杂页面注册

Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。

此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

//这种创建方式非常类似于 自定义组件 ，
// 可以像自定义组件一样使用 behaviors 等高级特性。
Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

当然，小程序的页面也可以直接视为自定义组件。所以，可以使用 Component 构造器构造页面，拥有与普通组件一样的定义段与实例方法。 但此时要求对应 json 文件中包含 usingComponents 定义段。

此时，组件的属性可以用于接收页面的参数，如访问页面 /pages/index/index?paramA=123¶mB=xyz ，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。

页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。

{
  "usingComponents": {}
}

Component({


  properties: {
    paramA: Number,
    paramB: String,
  },


  methods: {
    onLoad: function() {
      this.data.paramA // 页面参数 paramA 的值
      this.data.paramB // 页面参数 paramB 的值
    }
  }


})

三、小程序 JS 文件和普通 JS 文件的区别

1、小程序不是运行在浏览器中。

所以没有 BOM 和 DOM 对象，所以在小程序里面打印 window 和 document 是 undefined

console.log(window); => undefined
console.log(document); => undefined

2、小程序的 JS 有一些额外的成员

比方说，微信小程序由一个应用程序实例对象+多个页面对象构成，这里的 App() 用于注册小程序，Page() 用于定义页面对象

每个小程序有一个唯一的应用程序示例，可以通过getApp方法在任何位置拿到这个示例，getApp 方法用来获取全局应用程序对象

还有其他的 API，这里不一一列举了。

3、小程序的 JS 是支持 CommonJS 规范的（导入导出功能）

// 在 utils 文件夹中新建一个 foo.js 文件


  function say(a) {
     console.log('hello' + '---'  + a);
  }
  module.exports = {
      hh:say
  }
// 以上定义一个foo函数并导出。


  const foo = require('/utils/foo.js');
  foo.hh('lisa');
  
// 以上代码在app.js文件中导入并使用

好啦，今天就到这里啦，欢迎你在后台私信我，咱们明天再见哦，拜了个拜拜～

小程序中js可以干嘛 (小程序js教程)

一、小程序的 JS 文件