pages
window
小程序的头部,用于设置小程序的状态栏、导航条、标题、窗口背景色
backgroundTextStyle
light
(高亮),和dark
(暗黑)navigationBarBackgroundColor
navigationBarTitleText
navigationBarTextStyle
tabBar
selectedColor
tab 上的文字选中时的颜色,仅支持十六进制颜色"tabBar": {
// tab 上的文字选中时的颜色,仅支持十六进制颜色
"selectedColor": "#269fde",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
// 默认图标
"iconPath": "/images/home.png",
// 选中时的图标
"selectedIconPath": "/images/home-o.png"
}, {
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my-o.png"
}]
}
view 相当于 div
image 相当于 img
input 输入框 没有样式时看不到的
button 按钮
text 相当于 span
e.detail.value
单向数据绑定
turn() {
// this.data.pindao = '少儿频道'
// console.log(this.data.pindao);
this.setData({
pindao: '少儿频道'
})
}
双向数据绑定
bindinput
获取到输入框中的值wxml
<view>{{danmu}}</view>
<input bindinput="get" class="danmu" type="text" placeholder="请出入内容"/>
js
get(e) {
console.log(e.detail.value);
this.setData({
danmu: e.detail.value
})
}
弹窗
submit() {
wx.showToast({
title: '提交失败',
icon: 'error',
duration: 3000
})
}
页面跳转
wxml
<button bindtap="toaaa" class="btn">toaaa</button>
js
toaaa() {
wx.navigateTo({
url: '/pages/aaa/aaa',
})
}
wxml
<button bindtap="toBBB">tobbb</button>
js
toBBB() {
wx.redirectTo({
url: '/pages/bbb/bbb',
})
}
wxml
<button bindtap="todata">todata</button>
js
todata() {
wx.switchTab({
url: '/pages/data/data',
})
}
wxml
<button bindtap="reback">返回到上一个页面上</button>
js
reback() {
wx.navigateBack({
delta: 1
})
}
// 也可以不写delta,省略就是返回上一页
wxml
<button bindtap="openPage">关闭所有页面,打开到应用内的某个页面</button>
js
openPage() {
wx.reLaunch({
url: '/pages/data/data',
})
}
请求调用接口
wx.request() 发起 HTTPS 网络请求 或者导入(utils)
用老版本的函数形式写,注意有this指向的问题,但是用箭头函数就不会了(this没有指向,会指向上一级作用域)
let that = this
wx.request({
url: 'https://cnodejs.org/api/v1/topics',
// 用老版本的函数形式写,注意有this指向的问题,但是用箭头函数就不会了
success(res) {
// console.log(res)
// Cannot read property 'setData' of undefined 找不到this
that.setData({
dataList: res.data.data
})
}
})
wxml
<button bindtap="getUserInfo">获取用户信息</button>
js
getUserInfo() {
wx.getUserProfile({
desc: '用于完善个人信息',
success(res) {
console.log(res);
// 获取用户名
console.log(res.userInfo.nickName);
// 获取用户头像地址
console.log(res.userInfo.avatarUrl);
}
})
}
getUserInfo() {
// 这里需要把this转存到that中,this指的是page
let that = this
wx.getUserProfile({
desc: '用于完善个人信息',
success(res) {
console.log(res);
// 获取用户名
console.log(res.userInfo.nickName);
// 获取用户头像地址
console.log(res.userInfo.avatarUrl);
// 这里的this指的是sucess,不是page
that.setData({
userName: res.userInfo.nickName,
avatarUrl: res.userInfo.avatarUrl
})
}
})
}
全局数据都定义在 app.js 中的 globalData
组件需要实例化全局数据,才能调用globalData中的全局数据
const app = getApp()
设置用户数据为全局数据
getUserInfo() {
// 这里需要把this转存到that中,this指的是page
let that = this
wx.getUserProfile({
desc: '用于完善个人信息',
success(res) {
console.log(res);
// 获取用户名
console.log(res.userInfo.nickName);
// 获取用户头像地址
console.log(res.userInfo.avatarUrl);
// 这里的this指的是sucess,不是page
that.setData({
userName: res.userInfo.nickName,
avatarUrl: res.userInfo.avatarUrl
})
// 获取到用户信息后,转存到全局数据中
app.globalData.userInfo = res.userInfo
}
})
}
clickItem() {
console.log('被点击了');
console.log(app.globalData.userInfo);
}
设置
获取
wx.getStorageSync(‘key’)
首先要把用户信息转存为全局数据
然后还要把用户数据存储到本地缓存中(这样方便其他页面获取,直接通过本地数据获取)
授权获取
getUserInfo() {
let that = this
wx.getUserProfile({
desc: '完善信息',
success(res) {
// console.log(res);
// 获取用户名及头像地址
console.log(res.userInfo.nickName);
console.log(res.userInfo.avatarUrl);
that.setData({
nickName: res.userInfo.nickName,
avatarUrl: res.userInfo.avatarUrl
})
// 将用户信息存储为全局数据
app.globalData.userInfo = res.userInfo
// 获取后存储本地
wx.setStorageSync('userInfo', res.userInfo)
}
})
}
其他页面使用
show() {
// 获取缓存中的数据
wx.getStorageSync('userInfo')
// 把缓存获取到的数据转存给全局变量app.globalData.userInfo
app.globalData.userInfo = wx.getStorageSync('userInfo')
this.setData({
userInfo: app.globalData.userInfo
})
}
页面声明周期
就是单独的每个页面
onLoad(options) {
console.log('onLoad声明周期,只会执行一次,一般做初始请求用',options)
},
onReady (页面初次渲染完成时触发。一个页面只会调用一次)
onShow (只要展示这个页面,就会自动加载),显示一次,加载一次
onHide (每次页面隐藏就会自动加载),隐藏一次,加载一次
onUnload (卸载页面,小程序关闭)
// pages/alive/alive.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载,只会执行一次(only one)
* options 形参接收上个页面传递过来的参数
*/
onLoad(options) {
console.log('onLoad声明周期,只会执行一次,一般做初始请求用',options)
},
/**
* 生命周期函数--监听页面初次渲染完成,一个页面只会调用一次
*/
onReady() {
console.log('onReady声明周期,多做修改内容使用')
},
/**
* 生命周期函数--监听页面显示,显示一次,加载一次,多做数据更新用
*/
onShow() {
console.log('onShow显示一次,加载一次,多做数据更新用')
},
/**
* 生命周期函数--监听页面隐藏,隐藏一次,加载一次
*/
onHide() {
console.log('onHide隐藏一次,加载一次');
},
/**
* 生命周期函数--监听页面卸载, (卸载页面,小程序关闭时触发)
*/
onUnload() {
console.log('onUnload小程序关闭时触发');
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
应用生命周期
App({
// 小程序初始化完成时触发,全局只会触发一次。一般用于获取用户的信息
onLaunch() {
console.log('onLaunch 小程序初始化完成时触发,全局只会触发一次,一般获取用户信息用')
},
// 小程序启动,或从后台进入前台显示时触发
onShow() {
console.log('onShow 小程序启动,或从后台进入前台显示时触发')
},
// 小程序从前台进入后台时触发
onHide() {
console.log('onHide 小程序从前台进入后台时触发')
},
// 全局数据 globalData
globalData: {
userInfo: null
}
})
简单数据类型 | 描述 |
---|---|
number | 数字型,包含整数和小数,如 18,18.8 |
string | 字符串型,如“华神”。注意js里字符串都要带引号 |
boolean | 布尔值类型,就true和false两个值,代表真和假 |
undefined | Undefined 这个值表示变量不含有值,如var a;声明了变量a,但是没有赋值,就是undefined |
null | 空值,如var a=null,声明了变量a为空值 |
object | 对象类型: Function、Array、Date . . . |
方式 | 说明 | 案例 |
---|---|---|
toString() | 转为字符串 | var age=1 age.toString() |
String() | 转为字符串 | var age=1 String(age) |
用加号拼接字符串 | 转为字符串 | var age=1 “”+age |
方式 | 说明 | 案例 |
---|---|---|
Number() | 将字符串转换为数字 | Number(“8.88”) // 返回 8.88 |
parseFloat() | 解析一个字符串并返回一个浮点数 | parseFloat(“8.88”) //返回8.88 |
parseInt() | 解析一个字符串并返回一个整数 | parseInt(“8.88”) //返回8.88 |
转为数字的几个特殊情况
console.log(Number(""))//空字符串转换为 0
console.log(Number(true))//true转换为1
console.log(Number(false))//false转换为0
console.log(Number("华神"))//其他的字符串会转换为 NaN (因为转换过来不是数字)
let arr = […]
let arr = new Array()
数组里面可以包含不同变量
添加元素
删除元素
尾部删除 pop,返回删除的元素
头部删除 shift,返回删除的元素
splice(从第几个开始,删除几个)
splice(从第几个开始,替换几个,要替换的值)
car.splice(0,2,'红旗','特斯拉')
console.log(car)
合并数组
console.log(car.concat(home))
渲染数组
<view wx:for="{{carList}}" wx:key="index">
{{index + 1}} -- {{item}}
</view>
<block wx:for="{{carList}}" wx:key="index">
<view>{{index + 1}} -- {{item}}</view>
</block>
渲染对象
<block wx:for="{{userList}}" wx:key="index">
<view>{{item.name}}</view>
<view>{{item.age}}</view>
<view>{{item.sex}}</view>
</block>
<block wx:for="{{userList}}" wx:key="index">
<view>{{item.name}} || {{item.age}} || {{item.sex}}</view>
</block>
<view wx:if="{{false}}">是否显示呢</view>
// 根据条件判断
<view wx:if="{{flag}}">是否显示呢</view>
<view wx:if="{{!flag}}">是否显示呢</view>
<view wx:if="{{num == 1}}">1</view>
<view wx:elif="{{num == 2}}">2</view>
<view wx:else>3</view>
随机数
Math.random() [0,1)
生成 min - max 之间的随机小数
let min = 10
let max = 100
console.log(Math.random() * (max - min ) + min)
let min = 10
let max = 100
console.log(Math.floor(Math.random() * (max - min ) + min))
// 这个随机数是min和max之间的随机整数
function getRandomInt(min, max) {
min = Math.ceil(min)
max = Math.floor(max)
//不含最大值,含最小值
return Math.floor(Math.random() * (max - min)) + min;
}
// 这个随机数是min和max之间的随机整数
function getRandomInt(min, max) {
min = Math.ceil(min)
max = Math.floor(max)
//含最大值,含最小值
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let date = new Date()
console.log(date) // 会输出当前的时间
let utils = require('../../utils/util.js')
let utils = require('../../utils/util.js')
let nowTime = utils.formatTime(time)
console.log(nowTime)
this.setData({
nowTime
})
let utils = require('../../utils/util.js')
let date = new Date('2022-2-25 12:00:00')
console.log(date)
let time = new Date(1645796691081)
console.log(utils.formatTime(time))
let time = new Date()
console.log(time.getTime())
let date = +new Date()
console.log(date)
let d = Date.now()
console.log(d)
方法 | 描述 |
---|---|
getFullYear() | 获取四位的年(yyyy) |
getMonth() | 获取月(0-11) 记得+1 |
getDate() | 以数值返回天(1-31) |
getHours() | 获取小时(0-23) |
getMinutes() | 获取分(0-59) |
getSeconds() | 获取秒(0-59) |
getDay() | 以数值获取周名(0-6) |
getMilliseconds() | 获取毫秒(0-999) |
getTime() | 获取时间戳(从 1970 年 1 月 1 日至今) |
onLoad() {
console.log(this)
this.setDate({
cat: '花花'
})
}
let that = this
wx.request({
url: 'https://www.baidu.com',
success(res) {
console.log(res);
let aaa = 3
// Cannot read property 'setData' of undefined 找不到this
that.setData({
dataVal: aaa
})
}
})
JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。
回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。
wx.request({
url: 'https://www.baidu.com',
success:(res)=> {
console.log(res);
let aaa = 3
// Cannot read property 'setData' of undefined 找不到this
this.setData({
dataVal: aaa
})
}
})
wx.cloud.database().collection('数据库表名称').get()
.then(res=>{
this.setData({
})
this.coding()
})
应用场景
<navigator url="/pages/page01/page01">page01</navigator>
<navigator class="aa" url="/pages/page01/page01?id={{zs.id}}&name={{zs.name}}">{{zs.name}}</navigator>
onLoad: function (options) {
console.log(options); // page01.js:15 {id: "1", name: "张三"}
}
Api跳转携带参数
跳转方式 | 说明 | 对应wx方法 |
---|---|---|
navigate | 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 | wx.navigateTo |
redirect | 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 | wx.redirectTo |
switchTab | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 | wx.switchTab |
reLaunch | 关闭所有页面,打开到应用内的某个页面 | wx.reLaunch |
navigateBack | 关闭当前页面,返回上一页面或多级页面 | wx.navigateBack |
exit | 退出小程序,target="miniProgram"时生效 | 无 |
toPage02() {
wx.navigateTo({
url: '/pages/page02/page02?id=' + this.data.zs.id + '&name=' + this.data.zs.name,
})
}
onLoad: function (options) {
console.log(options);
console.log(options.id);
console.log(options.name);
},