开发文档链接

微信官方文档

文件

全局文件：

  • app.js 全局 js 文件：js 代码全局可以调用
  • app.json 全局配置文件：导航栏，背景颜色，标题，窗口配置
  • app.wxss 全局样式文件：统一样式
  • utils 文件夹：封装自定义的工具
  • pages 小程序页面文件夹：所有的页面都在该文件夹下管理，pages 文件夹中，一个文件夹代表一个页面。

局部文件：一个页面的文件

  • wxml
  • wxss
  • js
  • json

app.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  "pages": ["pages/index/index", "pages/logs/logs"], //页面管理
  "window": {
    //窗口界面
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff", //导航栏颜色
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

若要添加页面或者直接在"pages": ["pages/index/index", "pages/logs/logs"]中添加，IDE 会直接生成一个文件夹及内部页面文件。

若在全局配置中窗口界面配置了"navigationBarBackgroundColor": "#fff"的同时，在单个页面(例如 logo 页面)的配置文件也配置了"navigationBarBackgroundColor": "#000"，这是只有当跳转到(例如 logo 页面)时，导航栏颜色才会变成#000。

微信小程序中的 js

变量

js 变量：用于储存信息的容器
声明时使用 var+变量名，变量类型通过赋值来决定
注意：变量必须一字母开头，也可以$和_开头，大小写敏感

1
2
3
4
5
6
7
8
var answer = "It's alright";
var x1 = 43.0;
var x = true;
var cars = new Array();
cars[0] = "Saab";
var cars = ["saab", "Volor"];
var person = null; //清空变量内容
var carname; //执行后内容为undefined

对象

1
2
3
4
5
var person = {
  firstname: "John",
  lastname: "Doe",
  id: 5566,
};

对象寻址方式

1
2
name = person.lastname;
name = person["lastname"];

运算

+,-,*,/,%
比较运算符，返回值均为FALSE&TRUE
比较运算符

逻辑运算符
&&,||,！

1
2
3
4
5
6
y = 5;
z = 2;
x = y + z;
txt1 = "what a very";
txt2 = "nice day";
txt3 = txt1 + txt2; //此时txt3 = "what a verynice day"

条件

if
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (condition) {
  //当condition为true时，才执行下面语句
}

if (condition) {
  //当condition为true时，才执行下面语句
} else {
  //否则执行下面代码
}

if (condition) {
  //当condition为true时，才执行下面语句
} else if (condition1) {
  //否则执行下面代码
} else {
  //否则执行下面代码
}

循环

for
1
2
3
4
5
6
7
8
for (语句1; 语句2; 语句3) {
  //被执行的代码，语法和C语言相似
}

var x = 0;
for (var i = 0; i < 5; i++) {
  x = x + 1;
}

小程序中自动生成的 js 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
});
page
1
2
3
Page({
  //页面内容，不写任何东西也不会报错
});
data 和函数

data 对象

1
2
3
4
data:{
  msg:'hello!',
  flag:false
}

function 函数

1
2
3
function(参数){
  //函数内容
},
小程序的生命周期和回掉函数
1
2
3
4
5
6
7
8
加载
 |
渲染
 |
显示---->隐藏
 |       |
 |       |
卸载<----隐藏

当程序运行到各个生命周期函数的节点时，会执行生命周期回调函数

回掉函数：

  • onLoad() 页面加载时触发
  • onShow() 页面显示/切入前台触发
  • onReady() 页面初次渲染完成时触发
    运行完上面流程即进入激活状态
  • onShow() 页面显示/切入前台触发
  • onHide() 页面影藏/切入后台触发
  • onUnload() 页面卸载时触发
  • onPullDownRefresh() 下拉刷新
  • onReachBottom()上拉触底事件
  • onShareAppMessage() 转发按钮，自定义转发内容
事件响应

事件：视图层到逻辑层的通讯方式，将用户的行为反馈到逻辑层
即事件可以通过在 wxml 中绑定在组件上，达到触发条件时，会触发相应的事件处理函数(事件响应)对象可以额外携带如 id,dataset 等额外信息

组建事件响应：

  1. 组件上绑定事件处理函数
    点击事件绑定处理函数的方法：使用bindtap属性，属性值为 js 中的事件的事件处理函数的函数名

    1
    2
    3
    <view id="tapTest" data-hi="WeChat" bindtab="tapName">
      Click me!
    </view>

  2. Page 中写相应函数处理事件，单数是 event，函数名要和 wxml 中绑定的 bindtap 属性属性值一致

    1
    2
    3
    4
    5
    Page({
      tapName(event) {
        console.log(event); //该语句将获取到的数据打印在了编译器的窗口中
      },
    });
小程序 js 数据处理
this 关键字

this：当前对象的一个引用，在使用时往往指向的是上一层对象，在函数中执行时指向的是全局对象

访问页面数据：this.data 页面初始数据的那部分
调用页面内的函数：this.onload() 执行这一语句就会执行 onload()函数

tips: 若在 API 中使用 this，需要在调用 API 前暂存指向页面的 this，例

1
var that = this;

调用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Page({
  data:{
    a:1,
    b:'balabala',
    c:["a","b",]
  },

  action:function(){
    this.data.a=666
    console.log("这是新的函数")
  },

  onLoad: function(options){
    console.log(this.data)//调时窗口打印出data中的所有值
    this.action()//调用action函数
  }
})
页面数据更新
1
2
3
4
5
6
this.setData({
  //变量名：新的值，
  //变量名：新的值，
  //变量名：新的值
  a: 8888,
});
不同页面的数据出传递

方法有二，其一，页面跳转过程中携带参数。其二，将数据存于全局数据中，各个页面在从全局中读取

第二种用法：在 app.js 中

1
2
3
4
5
6
App({
  globalData: {
    //globalData可以改成其他名称
    userInfo: null,
  },
});

各个页面与全局数据进行交互，使用getApp()历程如下:

页面的 js 文件如下

1
2
3
4
onLoad:function(options){
  console.log(getApp().globalData.abc)
  getApp().globalData.abc = 456
}

app.js 文件中含有如下

1
2
3
4
5
6
7
8
App({
  globalData: {
    //globalData可以改成其他名称
    userInfo: null,
    abc: 1234,
    d: [],
  },
});

微信小程序的 API 介绍

API 的类型：

  • 事件监听 API：以 on 开头用于监听
  • 同步 API：以 Sync 结尾的 API 都是同步 API，起执行结果可通过函数返回值直接获取。当执行到 API 时，停止组件进程等待 API 执行完。
  • 异步 API：都接受一个 object 类型的参数。程序会启动一个分支来运行 API

API 内容

  • success 部分：接口调用成功的回调函数
  • fail 部分：接口调用失败的回调函数
  • complete 部分：接口调用结束的回调函数

微信登陆 API

1
2
3
4
5
6
7
8
9
10
11
12
wx.login({
  success(res) {
    //成功执行
  },
  fail(res) {
    console.log(res.errMsg);
    //失败执行
  },
  complete(res) {
    //一定执行
  },
});

Object 类型参数包含的字段

属性 类型 说明
errMsg string 错误信息，若成功为
errCode number 错误码，成功时为 0
其他 Any 接口返回数据

调用 API 进行页面互交

  1. 消息提示框
1
2
3
4
5
wx.showToast({
  title: "成功", //文字
  icon: "success", //对勾
  duration: 2000, //延时时间
});
  1. 模态弹窗
1
2
3
4
5
6
7
8
9
10
11
wx.showModal({
  title: "提示",
  content: "这是一个模态弹窗",
  success(res) {
    if (res.confirm) {
      console.log("用户点击确定");
    } else if (res.cancel) {
      console.log("用户点击取消");
    }
  },
});
  1. Loading 提示框
1
2
3
4
5
6
7
wx.showLoading({
  title: "加载中",
});

setTimeout(function () {
  wx.hideLoading(); //必须调用hideLoading才能关闭loading
}, 2000);
  1. 页面路由 API
  • wx.relaunch()关闭所有页面，打开到指定页面
  • wx.redirectTo()关闭当前页面，跳转到指定页面
  • wx.navigateTo()保留当前页面，跳转到指定页面
  • wx.navigateBack()关闭当前页面，返回上一级或多级页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
wx.relaunch({
  url: "/pages/jsjs/jsjs",
});

wx.redirectTo({
  url: "../jsjs/jsjs",
});

wx.navigateTo({
  url: "/pages/jsjs/jsjs",
});

wx.navigateBack({
  delta: 1,
});
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

快来参与讨论吧~