小程序入门知识总结

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
project
├─ app.js //放置全局的数据，其他js文件通过全局函数 getApp() 可以获取全局的应用实例
├─ app.json //是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
├─ app.wxss
├─ components //组件
├─ utils
│    └─ util.js //放一些公共的js函数
├─ pages
│    ├─ index //初始界面
|    |     ├─ index.js
│    |     ├─ index.wxml
|    |     └─ index.wxss
│    └─ other page //其他界面
└─ project.config.json //工具配置

数据传递

  • 给数据传出方添加triggerEvent事件:this.triggerEvent("事件名", 数据)

  • 在数据传出方的组件内添加bind:m="n" m为第一步的那个事件名，n为数据接收方处理数据的函数名。

比如我现在在一个页面（比如index)内用到了v-modal这个组件，而且我需要接收来自v-modal的数据，那么代码需要这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//index.wxml
<v-modal bind:modalValue="receiveModalValue"></v-modal>

//index.js
data: {
    value:''
},
receiveModalValue: function (e) {
  this.setData({
    value: e.detail
  })
}

//v-model.js
data: {
    value:''
},
methods: {
  modalConfirm: function (e){
    this.triggerEvent("modalValue", this.data.value)
    ...
  }
}

不管在数据传出方里数据的字符串类型还是数字类型，数据接收方收到的都是字符串类型（即e.detail为字符串类型）

官方IDE无法输中文

部分文件处于编辑未保存状态被关闭，重启该项目就会这样，必须把未保存的文件找出来保存后再重启开发者工具才行。

依次点击文件，若上一个文件未保存，那么当点击新文件时会在新的窗口显示。

生命周期

组件也有生命周期函数，和页面一样。

页面有：onload onready onshow onhide onunload

组件有：created attached ready detached move

1
2
3
4
5
6
7
8
Component({
  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function(){},
  moved: function(){},
  detached: function(){},
  created: function(){},
  data: {}
})

公共方法的引用

1.在utils/util.js里编写公共的方法，例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//utils/util.js

//正则判断
function Regular(str, reg) {
  if (reg.test(str))
    return true;
  return false;
}

//是否为中文
function IsChinese(str) {
  var reg = /^[\u0391-\uFFE5]+$/;
  return Regular(str, reg);
}

2.将这些方法暴露出去

1
2
3
4
5
6
//utils/util.js

module.exports = {
  getRequestUrl: "http://localhost:59637",//获得接口地址
  IsChinese: IsChinese,
}

3.在其他js文件中引用这些方法

1
2
3
4
5
6
7
8
9
10
11
//test.js

var util = require('../../utils/util.js');
Page({
    onLoad: function () {
    console.log("判断是否为中文:"+util.IsChinese('测试'));
    console.log("输出接口url："+util.getRequestUrl);
    }
})

//在引用公共函数时，函数必须加括号，即util.IsChinese()

公共数据

1.建立公共数据

1
2
3
4
5
6
7
8
9
//app.js

App({
  //m,n为公共数据
  globaData:{
    m: 'huangenai',
    n: []
  }
 })

2.引用数据

1
2
3
//test.js
var app = getApp();
app.globalData.m = 'abc'

调用自定义的函数

微信小程序中调用page中自定义的函数，在函数中如果不加this的话控制台会报错。正确格式：this.initalEncryptedInput()

behavior

存放组件共用的函数

每个 behavior 可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。

behavior 需要使用 Behavior() 构造器定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    
  },
  data: {
    
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// my-component.js
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  properties: {
    
  },
  data: {
    
  },
  attached: function(){},
  methods: {
    myMethod: function(){}
  }
})

这样myBehaviors里面的函数、性质那些就可以在 my-component.js里面直接用了

修改数组

1
2
3
4
this.data.multiArray[0] = xxx
    this.setData({
      multiArray: this.data.multiArray
    })