Mini Programs and JavaScript
2024-04-21 02:04:17 #Notes

小程序与JavaScript

0x01 控制台Console

需要掌握JavaScript的基本语法

了解如何使用JavaScript来操作小程序（通过API接口）

Console.log打印日志、四则运算、字符串

0x001 console.log打印数组Array

1
console.log(["肖申克的救赎","霸王别姬","这个杀手不太冷","阿甘正传","美丽人生"])

可以通过索引值打印数组里的单一数据，也就是通过指定数组名以及索引值，来访问某个特定的元素：

1
console.log(["肖申克的救赎","霸王别姬","这个杀手不太冷","阿甘正传","美丽人生"][3])

0x002 console.log打印对象Object

1
2
3
4
console.log({name: "霸王别姬",img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",desc: "风华绝代。"})

//访问该属性对应的值
console.log({name: "霸王别姬",img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",desc: "风华绝代。"}.desc)

0x02 变量与赋值

JavaScript可以使用let语句声明变量，使用等号=可以给变量赋值，等号=左侧为变量名，右侧为给该变量赋的值，变量的值可以是任何数据类型

JavaScript常见的数据类型有：数值（Number）、字符串（String）、布尔值（Boolean）、对象（Object）、函数（Function）等。

0x001 将数据赋值给变量

1
2
3
4
5
6
7
8
let movielist=["肖申克的救赎","霸王别姬","这个杀手不太冷","阿甘正传","美丽人生"]
console.log(movielist)
console.log(movielist[2])

//打印情况
let movie={name: "霸王别姬",img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",desc: "风华绝代。"}
console.log(movie)
console.log(movie.name)

将复杂的数据信息（数组、对象）赋值给一个变量，代码得到了大大的简化，可以深刻了解到变量是用于存储信息的”容器”

0x002 变量的冲突与覆盖

1
2
3
4
5
let school  //声明变量
school="清华"   //将字符串String"清华"赋值给变量
console.log(school)  //打印变量
school=["清华","北大","上交","复旦","浙大","南大","中科大"] //给变量赋值新的数据类型新的数据
console.log(school)  //打印变量

0x03 操作数组

1
movielist=["肖申克的救赎","霸王别姬","这个杀手不太冷","阿甘正传","美丽人生"]//赋值一个数组

0x001 分隔符join方法

1
2
//join方法将数组元素拼接为字符串,以分隔符分割，默认是逗号,分割。
console.log(movielist.join("、"))

0x002 添加数组push方法

1
2
//push()方法向数组的末尾添加一个或更多元素，并返回新数组的长度。
console.log(movielist.push("千与千寻","泰坦尼克号","辛德勒的名单","盗梦空间","忠犬八公的故事"))

0x003 移除最后一项pop方法

1
console.log(movielist.pop())

0x04 操作对象

1
movie={name: "霸王别姬",img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",desc: "风华绝代。"}

0x001 给对象添加属性

1
movie.englishname="Farewell My Concubine"

0x002 删除对象的某个属性

1
delete movie.img

0x003 更新对象的某个属性

1
movie.desc="人生如戏。"

0x05 常量

变量的值可以通过重新赋值的方式来改变，但是有些数据我们希望是固定的（写死，不会经常改变），这个时候可以使用const声明创建一个值的只读引用。

开发小程序的时候，我们会确定小程序的色系、颜色等，使用const声明，以后直接调用这个常量，这样就不用记那么多复杂的参数，以后想全网改样式，直接改const的内容即可。

1
2
3
4
5
const defaultStyle = {
  color: '#7A7E83',
  selectedColor: '#3cc51f',
  backgroundColor: '#ffffff',
}

0x06 字符串的操作

length 返回字符串的长度
charAt(4) 返回在指定位置的字符
substring(3,6) 从索引3开始到6（不包括6）
substring(4) 从索引4开始到结束
toLowerCase() 把一个字符串全部变为小写
toUpperCase() 把一个字符串全部变为大写
indexOf(‘oud’) 搜索指定字符串出现的位置
concat(lesson) 连接两个字符串
slice(4) 提取字符串的某个部分，并以新的字符串返回被提取的部分 
1
2
3
4
5
6
7
8
9
10
11
12
let lesson="云开发技术训练营";
let enname="CloudBase Camp"
console.log(lesson.length);  //返回字符串的长度
console.log(lesson[4]);  //返回在指定位置的字符
console.log(lesson.charAt(4));   //返回在指定位置的字符
console.log(lesson.substring(3,6));  //从索引3开始到6（不包括6）
console.log(lesson.substring(4));  //从索引4开始到结束
console.log(enname.toLowerCase()); //把一个字符串全部变为小写：
console.log(enname.toUpperCase());  //把一个字符串全部变为大写：
console.log(enname.indexOf('oud')); //搜索指定字符串出现的位置：
console.log(enname.concat(lesson)); //连接两个字符串
console.log(lesson.slice(4)); //提取字符串的某个部分，并以新的字符串返回被提取的部分

0x07 Math对象

Math.abs(b) 返回b的绝对值
Math.round(z) 返回b的绝对值
Math.pow(x,y) 返回x的y次幂
Math.max(x,y,z,a,b,c) 返回x,y,z,a,b,c的最大值
Math.min(x,y,z,a,b,c) 返回x,y,z,a,b,c的最小值
Math.sign(a) 返回a是正数还是负数
Math.hypot(x,y) 返回所有x,y的平方和的平方根
Math.PI 返回一个圆的周长与直径的比例，约3.1415 
1
2
3
4
5
6
7
8
9
let x=3,y=4,z=5.001,a=-3,b=-4,c=-5;
console.log(Math.abs(b)); //返回b的绝对值
console.log(Math.round(z));//返回z四舍五入后的整数
console.log(Math.pow(x,y)) //返回x的y次幂
console.log(Math.max(x,y,z,a,b,c)); //返回x,y,z,a,b,c的最大值
console.log(Math.min(x,y,z,a,b,c));//返回x,y,z,a,b,c的最小值
console.log(Math.sign(a));  //返回a是正数还是负数
console.log(Math.hypot(x,y));  //返回所有x,y的平方和的平方根 
console.log(Math.PI);  //返回一个圆的周长与直径的比例，约3.1415

0x08 Date对象

Date 对象用于处理日期和时间。时间有年、月、日、星期、小时、分钟、秒、毫秒以及时区的概念

getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 
1
2
3
4
5
6
7
8
9
10
11
let now = new Date();  //返回当日的日期和时间。
console.log(now); 
console.log(now.getFullYear()); //从 Date 对象以四位数字返回年份。
console.log(now.getMonth());  //从 Date 对象返回月份 (0 ~ 11)。
console.log(now.getDate());  //从 Date 对象返回一个月中的某一天 (1 ~ 31)。
console.log(now.getDay());  //从 Date 对象返回一周中的某一天 (0 ~ 6)。
console.log(now.getHours());  //返回 Date 对象的小时 (0 ~ 23)。
console.log(now.getMinutes());  //返回 Date 对象的分钟 (0 ~ 59)。
console.log(now.getSeconds());  //返回 Date 对象的秒数 (0 ~ 59)。
console.log(now.getMilliseconds());  //返回 Date 对象的毫秒(0 ~ 999)。
console.log(now.getTime());  //返回 1970 年 1 月 1 日至今的毫秒数。

0x09 全局对象wx

wx是小程序的全局对象，用于承载小程序能力相关 API。

0x001 了解网络状态

1
2
3
4
5
wx.getNetworkType({
  success(res) {
    console.log(res)
  }
});

0x002 了解用户信息

1
2
3
4
5
wx.getUserInfo({
  success(res) {
      console.log(res);
  }
});

0x003 获取设备信息

1
2
3
4
5
6
7
8
9
10
11
wx.getSystemInfo({
  success (res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})

0x004 页面链接跳转

1
2
3
wx.navigateTo({
  url: '/pages/home/imgshow/imgshow'
})

0x005 返回页面的上一层

1
2
3
wx.navigateBack({
  delta: 1
})

0x006 显示消息提示框

1
2
3
4
5
wx.showToast({
  title: '弹出成功',
  icon: 'success',
  duration: 1000
})

0x007 设置当前页面的标题

1
2
3
wx.setNavigationBarTitle({
  title: '控制台更新的标题'
})

0x008 打开文件选择

1
2
3
4
5
6
7
8
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    const tempFilePaths = res.tempFilePaths
  }
})

0x10 点击事件

事件是视图层到逻辑层的通信方式，当我们点击tap、触摸touch、长按longpress小程序绑定了事件的组件时，就会触发事件，执行逻辑层中对应的事件处理函数。

点击事件就用到bindtap,它的赋值为一个函数名，且函数的命名规则为小写＋大写驼峰式，如类似于scrollToTop。

0x11 页面滚动(返回顶部)

1
2
3
4
<button type="primary" bindtap="scrollToPosition">滚动到页面指定位置</button>
<view class="pagetop" style="background-color:#333;width:100%;height:400px"></view>
<button type="primary" bindtap="scrollToTop">滚动到页面顶部（返回顶部）</button>
<view id="pageblock" style="background-color:#333;width:100%;height:400px"></view>

这里的 type=”primary”只是引入weui给button添加的样式。而函数名scrollToPosition和scrollToTop是可以自己定义的，然后我们再来在相应的js文件里要添加和函数名scrollToPosition和scrollToTop对应的事件处理函数。

在js的Page({})里（也就是和 data:{}、 onLoad: function (options) { }等函数平级），输入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
scrollToTop() {
  wx.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
},
 
scrollToPosition() {
  wx.pageScrollTo({
    scrollTop: 6000,
    duration: 300
  })
},

原理是scrollToTop()和scrollToPosition()这两个函数实际上都是调用了同一个小程序的滚动API wx.pageScrollTo()

wx.pageScrollTo()的作用是将页面滚动到目标位置，支持选择器和滚动距离两种方式定位

  • scrollTop滚动到页面的目标位置，单位 px，值为0就是滚动到顶部；值为600就是
  • duration是滚动动画的时长，单位为ms，而1秒=1000毫秒

0x12 滚动到指定的选择器的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
scrollToTop() {
  wx.pageScrollTo({
    duration: 3000,
    selector:".pagetop"
  })
},
 
scrollToPosition() {
  wx.pageScrollTo({
    duration: 300,
    selector:"#pageblock"
  })
},

0x13 消息提示框Toast

1
2
3
<button type="primary" bindtap="toastTap">点击弹出消息对话框</button>
//primary是type的三个有效值之一，它是绿色的
//其余有效值为warn红色，default白色
1
2
3
4
5
6
7
toastTap() {
   wx.showToast({
     title: '购买成功',
     icon: 'success',
     duration: 2000
   })
 },
  • title：为必填，提示的内容
  • icon：只有三个选项，success、loading、none(这三个分别适用于不同的场景)
  • duration：提示延迟的时间，默认为1500毫秒，也就是1.5秒

0x14 模态对话框

Ctrl+/为代码注释快捷键

1
<button type="primary" bindtap="modalTap">显示模态对话框</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
modalTap() {
   wx.showModal({
     title: '学习声明',
     content: '学习小程序的开发是一件有意思的事情，我决定每天打卡学习',
     showCancel: true,
     confirmText: '确定',
     success(res) {
       if (res.confirm) {
         console.log('用户点击了确定')
       } else if (res.cancel) {
         console.log('用户点击了取消')
       }
     }
   })
 },

千变万化之API

阅读API的技术文档，就要了解该API有哪些属性，属性代表得是什么含义，属性是什么类型（这一点非常重要），以及它的默认值是什么，可以有哪些取值。

  • title属性不是必填，删除title的赋值，就不会显示标题啦；
  • content属性也不是必填，为提示的内容；
  • showCancel默认值就是true，意思是默认显示取消按钮，改为false就不显示了
  • confirmText默认值为确定，你可以改成别的试试

0x001 wx.showModal(Object object)

显示模态对话框

0x002 参数

Object object

属性 类型 默认值 必填 说明
title string 否 提示的标题
content string 否 提示的内容
showCancel boolean true 否 是否显示取消按钮
cancelText string ‘取消’ 否 取消按钮的文字，最多 4 个字符
cancelColor string #000000 否 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText string ‘确定’ 否 确认按钮的文字，最多 4 个字符
confirmColor string #576B95 否 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

0x003 object.success 回调函数

0x004 参数

Object res

属性 类型 说明
confirm boolean 为 true 时，表示用户点击了确定按钮
cancel boolean 为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）

0x15 console.log日志打印

1
2
3
4
5
6
7
success(res) {
  if (res.confirm) {
    console.log('用户点击了确定')
  } else if (res.cancel) {
    console.log('用户点击了取消')
  }
}

res是什么？res.confirm、res.cancel是什么，从哪里来的？

1
2
3
4
5
6
7
8
9
10
11
12
13
success(res) {
  console.log(res)
  if (res.confirm) {
    console.log(res)
    console.log("点击确认之后的res.confirm是：" + res.confirm)
    console.log("点击确认之后的res.cancel是：" + res.cancel)
  } else if (res.cancel) {
    console.log(res)
    console.log('用户点击了取消')
    console.log("点击取消之后的res.confirm是：" + res.confirm)
    console.log("点击取消之后的res.cancel是：" + res.cancel)
  }
}

0x16 手机振动

0x001 长震动

1
<button type="primary" bindtap="vibrateLong">长振动</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
vibrateLong() {
  wx.vibrateLong({
    success(res) {
      console.log(res)
    },
    fail(err) {
      console.error(err)
    },
    complete() {
      console.log('振动完成')
    }
  })
},

0x002 短震动

1
<button type="primary" bindtap="vibrateShort">短振动</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
vibrateShort() {
  wx.vibrateShort({
    success(res) {
      console.log(res)
    },
    fail(err) {
      console.error(err)
    },
    complete() {
      console.log('振动完成')
    }
  })
},

0x17 弹出操作菜单

1
<button type="default" bindtap="actionSheetTap">弹出操作菜单</button>
1
2
3
4
5
6
7
8
actionSheetTap() {
  wx.showActionSheet({
    itemList: ['添加照片', '删除照片', '更新照片', '查询更多'],
    success(e) {
      console.log(e.tapIndex)
    }
  })
},

tapIndex number 用户点击的按钮序号，从上到下的顺序，从0开始

0x18 页面路由

页面路由是一个非常重要的概念，打开新页面、页面返回、Tab页面切换、页面重定向等都是页面路由的不同方式。

页面路由我们可以简单的理解为对页面链接的管理，根据不同的url链接来显示不同的内容和页面信息

0x001 Navigator组件与页面路由API

学习过Navigator组件，在navigator组件的技术文档里，我们可以看到open-type属性以及合法值。在小程序API左侧也可以看到5个不同的API。它们之间的对应关系如下:

页面路由API Navigator open-type值 含义
redirectTo redirect 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
navigateTo navigate 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
navigateBack navigateBack 关闭当前页面，返回上一页面或多级页面。
switchTab switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch reLaunch 关闭所有页面，打开到应用内的某个页面

也就是说Navigator组件可以做到的事情，既能使用JavaScript调用小程序，也能通过路由API调用小程序。Navigator组件的内容是写死的，而JavaScript则可以提供动态的数据。

0x002 跳转到新页面与Tab页

1
2
3
<button bindtap="navigateTo">保留页面并跳转</button>
<button bindtap="switchTab">跳转到组件Tab页</button>
<button bindtap="redirectTo">关闭当前页面跳转</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
navigateTo() {
    wx.navigateTo({
        url: '/pages/home/imgshow/imgshow'
    })
},
switchTab() {
    wx.switchTab({
        url: "/pages/list/list",
    })
},
redirectTo() {
    wx.redirectTo({
        url: '/pages/home/imgshow/imgshow'
    })
},

0x003 返回上一页

适用于添加在小程序某个页面中，从而实现页面与页面之间的跳转

1
<button bindtap="navigateBack">返回上一页</button>
1
2
3
4
5
navigateBack() {
    wx.navigateBack({
        delta: 1
    })
},

0x19 页面渲染

介绍如何通过点击组件绑定的事件处理函数来修改data里面的数据，如何把事件处理函数获取到的数据打印到页面。

0x20 将变量值渲染到页面

使用开发者工具新建一个页面比如data，然后在data.js的Page({})函数的前面，也就是不写在Page函数里面，写在data.js的第1行输入以下代码：

1
2
3
4
let lesson = "云开发技术训练营";
let enname = "CloudBase Camp";
let x = 3, y = 4, z = 5.001, a = -3, b = -4, c = -5;
let now = new Date();

然后在data里面添加如下数据（注意没有双引号，单双引号里的是字符串）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
data: {
    charat: lesson.charAt(4),
    concat: enname.concat(lesson),
    uppercase:enname.toUpperCase(),
    abs:Math.abs(b),
    pow: Math.pow(x, y),
    sign:Math.sign(a),
    now:now,//也可以使用toSpring()方法
           //now:now.toString(),
    fullyear:now.getFullYear(),
    date:now.getDate(),
    day: now.getDay(),
    hours: now.getHours(),
    minutes: now.getMinutes(),
    seconds: now.getSeconds(),
    time: now.getTime()
},

在data.wxml里输入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view>"云开发技术训练营"第5个字符 {{charat}}</view>
<view>两个字符串连接后的结果：{{concat}}</view>
<view>CloudBase Camp字母大写：{{uppercase}}</view>
<view>b的绝对值：{{abs}}</view>
<view>x的y次幂：{{pow}}</view>
<view>返回a是正还是负：{{sign}}</view>
<view>now对象：{{now}}</view>
<view>{{fullyear}}年</view>
<view>{{date}}日</view>
<view>星期{{day}}</view>
<view>{{hours}}时</view>
<view>{{minutes}}分</view>
<view>{{seconds}}秒</view>
<view>1970年1月1日至今的毫秒数：{{time}}</view>

0x21 响应的数据绑定

1
2
3
<view style="background-color:{{bgcolor}};width:400rpx;height:300rpx;"></view>
<button bindtap="redTap">让背景变红</button>
<button bindtap="yellowTap">让背景变黄</button>
1
2
3
4
5
6
7
8
9
10
11
redTap:function(){
    this.setData({
        bgcolor: "#cd584a"
    })
},
yellowTap:function(){
    this.setData({
        bgcolor: "#f8ce5f"
    })
},
data:{bgcolor: "#000000"}

0x22 响应的布尔操作

有些组件的私有属性的数据类型为Boolean布尔值，比如视频、Swiper轮播组件是否自动播放、是否轮播，视频组件是否显示播放按钮等等，这些我们都可以使用setData将true改为false，false改为true来达到控制的目的。

在交互方面，响应的布尔操作可以用于单一属性true与false的切换，比如显示与隐藏、展开与折叠、聚焦与失焦、选中与不选中。

1
2
3
<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" autoplay loop muted="{{muted}}" initial-time="100" controls event-model="bubble">
</video>
<button bindtap="changeMuted">静音和取消静音</button>
Prev
2024-04-21 02:04:17 #Notes
Next