注意事项：
- 只有
标签包裹的文本可以在真机上长按选中 可以嵌套，里面有转义字符，则解析成转义字符，而不是字符串。 - 小程序，默认的顶层标签是
，可以用其修改全局样式等 - 如果一个标签的属性值是boolean值，不能直接用字符串false表示 布尔的false，因为false是一个字符串，js转成布尔值后是true ---------- 所以要用双大括号包裹false，表示是微信小程序中的语法
- condition: 是状态的意思
- launch: 是发射的意思
- defer： 是延迟的意思
- grid: 是格子的意思
- category: 是类型的意思
- pannel: 是面板的意思
- 在app.json中的路径，最前面用绝对路径时，不要加斜杠！！！！！！！！
效果图
(1) rpx 相对像素值
在iPhone6上，1rpx=1物理像素=0.5px。
因为设计师标注的尺寸一般是物理分辨率。所以如果以iphone6为标准出设计稿的话，那么我们就可以不需要经过换算直接标准rpx。
.banner {
width:200rpx;
height:200rpx;
border-radius:50%
}
(2) 改变导航栏颜色
- 如果想单独改变某个页面的导航栏颜色，需要在单个页面文件夹中添加.json文件，并且不能再用window
app.json ( 所有页面 )
{
"pages":[
"pages/welcome/welcome" // 注册页面
],
"window": {
"navigationBarBackgroundColor": "#b3d4db" // 设置导航栏背景颜色
}
}
----------------------------------------------------------------------------
posts.json ( 单个页面 )
{
"navigationBarBackgroundColor":"#000" // 配置单个导航栏的背景，记得没有window
"navigationBarTitleText":"主页" // 配置导航栏标题文字
}
(3) 嵌套样式
hellow ， 十月
(4) swiper轮播图组件
https://www.cnblogs.com/nosqlcoco/p/wxsmallcycle.html
小程序的生命周期：
- 应用生命周期
- 页面生命周期
- 应用生命周期影响页面生命周期
应用生命周期：
- 首次打开小程序，触发onLaunch事件 ( launch: 是发射的意思 )，( 全局只触发一次 )
- 小程序初始化完成后，触发 onShow事件，监听显示
- 小程序从前台进入后台，触发 onHide事件
应用生命周期
页面生命周期：
- 小程序注册完成后，加载页面，触发onLoad方法。
- 页面载入后触发onShow方法，显示页面。
- 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只触发一次。
- 当小程序后台运行或跳转到其他页面时，触发onHide方法。
- 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
- 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload
页面生命周期
应用生命周期影响页面生命周期
- 小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
- 当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
- 当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法
应用生命周期影响页面生命周期
前台和后台：
- 后台：
当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台 - 前台：
当再次进入微信或再次打开小程序，又会从后台进入前台
(5) 页面的生命周期
onLoad : 监听页面加 ( 可以在onLoad生命周期中请求数据 )
onShow : 监听页面显示
onReady : 监听页面初次渲染完成
onHide : 监听页面隐藏
onUnload ：监听页面卸载
(6) wx:if="{{false}}" 隐藏 和 显示
(7) 循环
- 在js文件中引入本地json文件时，使用require语法时，路径必须是 ( 相对路径 ) !!
- 如果对象中的属性名带有 - ，则在js中使用的时候，不能用点语法，只能用方括号，在方括号中必须用引号，否则会当作变量处理。
- 当 wx:for 的值为字符串时，会将字符串解析成字符串数组
{{item}}
等同于
{{item}}
wxml
{{item.age}}
{{item.name}}
{{index}}
-----------------------------------------------------------
js
data: {
switchShow: true,
forData: [
{age:10,name:"wang"},
{age:30,name:"li"}
]
}
(8) setData() 参数格式
接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。
js
onLoad: function (options) {
console.log('onLoad')
var forDataFromLoad = [
{ age: 20, name: 'zhagn'},
{age: 40, name: 'jian'}
]
this.setData({
getData: forDataFromLoad
})
},
-------------------------------------------------------
wxml
{{abc.name}}
(9) tap事件 ----- 相当于react中的onClick事件
tap事件：手指触摸后马上离开
- 事件绑定： bindtap
- 页面跳转：wx.navigateTo( { url : '.......' } ) 具有子集关系，可以返回，最多5个层级。
- 页面重定向：wx.redirectTo( {url: '.......' } ) 不具有子集关系，不能返回
- wx.navigateTo()方法的完整写法
wx.navigateTo({
url: '../posts/posts',
fail: function() {},
success: function() {},
complete: function() {},
})
navigateTo 和 redirectTo与页面生命周期 onUnload() 和 onHide() 的关系?
- wx.redirectTo() 会触发 onUnload()方法 ，页面卸载。
- wx.navigateTo() 会触发 onHide()方法，页面隐藏，因为还可以返回，并没有被卸载，只是隐藏了。
生命周期 onUnload() 和 onHide() 的区别？
- onHide() 只是隐藏了，未被卸载。
wxml
开启小程序之旅
js
goHome: function(e) {
// wx.navigateTo({
// url: '../posts/posts'
// })
wx.redirectTo({
url: '../posts/posts'
})
}
(9.1) wx.navigateTo() 页面跳转
(1) 自定义属性的获取： event.currentTarget.dataset.属性名
(2) 路由跳转传递的参数获取：onLoad(options)生命周期函数的options对象获取
- options.key
posts.wxml
(1) 自定义属性以 data- 开头
(2) 自定义属性通过 event.currentTarget.dataset.属性名 获取
(3) image很多时,可以在父级元素上用 catchtap ， 通过event.target获得自定义属性
(4) 注意采用事件冒泡的方式，自定义属性是通过：event.target.dataset.属性名 获取 (区别2和4的不同)
(5)
target 是当前点击的组件
currentTarget 是事件捕获的组件
(10) bindtap事件 和 catchtap事件的区别
- bindtap 绑定的事件会冒泡 ------------------ 冒泡
- catchtap 绑定的事件不会冒泡 ----------- 不冒泡
- 事件冒泡指的是事件的冒泡阶段，由最里层向外层传播，会触发父元素绑定的事件
(11) template 模板
- 定义：
在wxml中定义，必须有个name属性
注意： 在模板中应用图片等静态资源时，用绝对路径！！！！！
- 引入并使用：
------------------- 使用，is对应name
注意点：
(1) 使用时，标签中的 is 属性对应 wxml文件中中的name属性
(2) 中的data属性对应数据源
- 引入模板的，引入样式
@import "./posts-item/posts-item-template.wxss"; // 使用相对路径
(12) 自定义属性
- 自定义属性必须以data开头，以 - 横线链接，可以有多个横线
- 自定义的标签属性，在 js 中通过event.currentTarget.dataset获取
- 自定义的标签属性，在 js 中是会省略 "-" 横线和data，并且是驼峰命名
- 在js中，大写的英文字母也会被转化成小写的
wxml中：
js中：
nameText:"aaa" --------- 注意：省略了（ data- ）， 并且采用驼峰命名
(13) event事件 和 点击事件的参数传递
在小程序中，bindtap等事件都有一个event事件
- 在点击元素标签上自定义的属性，可以通过event.currentTarget.dataset获取
- 自定义属性 以 data-xxx-xxx 形式组成，可以有多个横线
- catchtap事件不冒泡，bindtap事件冒泡
wxml中：
---------------------- 自定义属性和点击事件
--------------------------
js中
goDetail: function(event) { ----------------------- event.currentTarget.dataset拿到自定义属性
const detail_id = event.currentTarget.dataset.id;
wx.navigateTo({
url: `./posts-detail/posts-detail?id=${detail_id}&xxx=xxxx...`,
}) ---------------------------------------------- 向js传递参数，以查询字符串的形式组成
},
在被传递的js文件中：
在 onLoad生命周期函数中，有 options 参数
onLoad: function (options) { ----------------- 一般请求数据都在 onLoad 生命周期中
const detail_id = options.id; ----------------- 上面代码传递过来的 id 值
console.log(options)
},
(14) wx.setStorageSync() 和 wx.setStorage()
wx.removeStorageSync() 和 wx.clearStorageSync()
小程序规定 缓存的上限不能超过 10M
设置同步缓存：wx.setStorageSync(key, data)
第一个参数是键名，是一个字符串
第二个参数是键值，可以是 object 或者 string获取同步缓存：wx.getStorageSync(key)
删除指定键的同步缓存：wx.removeStorageSync(key)
删除全部同步缓存：wx.clearStorageSync() - 不需要参数
同步设置：
wx.setStorageSync('message', {
name: 'wang'
});
-------------------
异步设置：
wx.setStorage({
key: 'name',
data: 'wang',
})
-------------------
同步获取：
wx.getStorageSync(key)
-------------------
异步获取：
wx.getStorage({
key: 'name',
success: function(res) {
console.log(res.data, 'res.data') ------------ res.data就是键名name对应的键值wang
},
})
(15) 状态切换，显示隐藏
- wx:if 和 wx:else
(16) wx.showToast 消息提示框
wx.showToast({
title: '收藏成功',
con: "success",
duration: 1000,
mask: true
})
(17) wx.showModal()
wx.showModal({
title: '收藏',
content: '是否收藏该文章',
showCancel: true,
cancelText: '取消',
cancelColor: 'silver',
confirmText: '收藏',
confirmColor: "#9F79EE"
})
(18) wx.showActionSheet()操作菜单
goShare: function(event) {
const shareLists = [
"分享给微信好友",
"分享到到朋友圈",
"分享到QQ",
"分享到微博",
];
wx.showActionSheet({ -------------- wx.showActionSheet({itemList: [], ...})
itemList: shareLists, -------------- itemList按钮的文字数组，最大长度为6个
success: function(res) { ---- 点击菜单某一项成功后的回调，res.tapIndex可获得数组的index
const index = res.tapIndex;
wx.showModal({
title: `分享`,
content: `确定分享到${shareLists[index]}吗？`,
showCancel: true,
confirmText: "确定",
confirmColor: "#9F79EE",
cancelText: "取消",
cancelColor: "silver"
})
}
})
},
(19)
wx.playBackgrounAudio() 音乐播放控制
wx.pauseBackgroundAudio() 暂停播放音乐
wx.onBackgroundAudioPlay() 监听音乐播放。
wx.onBackgroundAudioPause() 监听音乐暂停。
wx.onBackgroundAudioStop() 监听音乐停止。
- audio：是音频，音响，声音信号的意思
wx.playBackgroundAudio({
dataUrl: '',
title: '',
coverImgUrl: ''
})
播放和暂停音乐播放：
gomusic: function(event) {
const isMusciPlaying = this.data.isMusciPlay;
const detailData = data.data.filter(item => {
return item.id === this.data.id
})[0];
const music = detailData.music;
if (isMusciPlaying) {
wx.pauseBackgroundAudio(); ---------- 暂停音乐播放
this.setData({
isMusciPlay: false
});
} else {
wx.playBackgroundAudio({ ---------- 播放音乐
...music
});
this.setData({
isMusciPlay: true
})
}
},
监听播放和暂停：用来同步播放，改变图标状态
一般在onLoad生命周期函数中使用
onLoad: function(options) {
const that = this;
wx.onBackgroundAudioPlay(function() { ---------- 监听音乐播放
that.setData({
isMusciPlay: true
})
});
wx.onBackgroundAudioPause(function() { ---------- 监听音乐暂停
that.setData({
isMusciPlay: false
})
})
(20) 全局变量
全局变量在入口 app.js中定义，通过getApp()获取全局变量
app.js中定义全局变量
App({
globalData: {
g_ispalyMusic: false,
}
})
---------------------------------------------
detail.js中获取全局变量
const app = getApp(); ------- 获取App
onLoad: function(options) {
const g_ispalyMusic = app.globalData.g_ispalyMusic; ------ 获取全局变量
console.log(g_ispalyMusic, 'g_ispalyMusic') // false
}
单在详情页播放音乐时，返回到父级页面，再回到详情页时，图标状态和全局控制图标状态不一致
用全局标量解决（注意：定义时是一个对象，所以把对象赋值后，修改对象摸个属性，影响原对象）
wx.onBackgroundAudioPlay(function() {
that.setData({
isMusciPlay: true,
});
app.globalData.g_ispalyMusic = true;
});
wx.onBackgroundAudioPause(function() {
that.setData({
isMusciPlay: false
});
app.globalData.g_ispalyMusic = false; // 改变全局对象的值
})
(21) tabBar
tabBar在app.json文件中配置
"tabBar": {
"list": [
{
"pagePath": "pages/posts/posts",
"text":"阅读",
"iconPath": "/images/home2.png",
"selectedIconPath": "/images/homecheck2.png"
},
{
"pagePath": "pages/moves/moves",
"text":"电影",
"iconPath": "/images/move.png",
"selectedIconPath": "/images/movecheck.png"
}
],
"borderStyle": "white"
}
(22) 启动页不跳转到tabBar页面的坑？
-
wx.switchTab({...}) : 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
(1) navigateTo和redirectTo都不跳转：
wx.navigateTo({
url: '../posts/posts'
});
wx.redirectTo({
url: '../posts/posts'
});
----------------------------
(2) 使用 switchTab({}) 可以跳转到tabBar页面，并关闭其他非tabBar页面
wx.switchTab({
url: '../posts/posts'
});
(23) wx.request()发起请求
官方文档：
https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html#wxrequestobject
onLoad: function (options) {
wx.request({
url: 'http://t.yushu.im/v2/movie/top250',
method: 'GET',
data: { --------------------------------------------- 请求参数，get请求会转换成查询字符串
start: 0,
count: 20,
},
header: { -------------------------------------------- 请求头
"Content-Type": "application/json" -------------- 发送端发送的实体数据类型是json格式
},
success: function(res) { ----------------------------- 成功的回调
console.log(res);
console.log(res.data); --------------------------- 数据
console.log(res.statusCode); --------------------- 状态码
console.log(res.header); ------------------------ 响应头
}
});
},
(24) template模板的点击事件
因为模板只能有wxml和wxss，不能包含js文件，没法做到真正的组件化
- 在模板的wxml中绑定的点击事件，在哪个js文件？ ---- 是在引用模板的组件的js文件中
move-list.wxml文件
{{moveTop.type}}
更多
------------------------------------------
moves.js文件
gomore: function(event) { -------------------------------- 在moves页面中应用了template
const type = event.currentTarget.dataset.type;
wx.navigateTo({
url: '/pages/moves/more-move/more-move?type=' + type,
})
},
说明：
(1) 用event.currentTarget.dataset获得点击的节点的自定义属性
(2) wx.navigateTo()导航
(3) 用查询字符串传递参数，在子页面的js中的onLoad生命周期中的options参数获得导航传递的参数
(25) wx.setNavigationBarTitle() 动态设置当前页面标题
-
区别json中配置的 ------- navigationBarTitleText
- 对界面设置ui相关的操作时，要在onReady页面初次渲染完成之后。
onLoad()页面加载，页面还没有正式生成，所以不能做ui相关的事情。一个页面只会调用一次onShow()页面显示，每次打开页面都会调用一次onReady()页面初次渲染完成，一个页面只会加载一次onReady()函数，代表页面已准备妥当，可以和视图层进行交互。- 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onReady: function () { ------ onReady()页面初次渲染完成，一个页面只加载一次，该生命周期可以和ui交互
wx.setNavigationBarTitle({ ------ wx.setNavigationBarTitle动态设置当前页面标题
title: this.data.type,
})
},
------------------------------------------
不是动态设置，可以在当面页面的json中，配置
{
"navigationBarTitleText": "免费电影"
}
(26) scroll-view 可滚动视图区域组件
- bindscrolltolower: 滚动到底部/右边，会触发 scrolltolower 事件
- lower-threshold: 距底部/右边多远时（单位px），触发 scrolltolower 事件
move-grid-template.wxml
-----------------------------------------------
more-move.js
goScrollLower: function() {
const url = this.data.url; -------------- 点击更多按钮后，请求电影类型的地址
const type = this.data.type; ---------- 电影类型
this.setData({
type
})
const that = this;
let countNumber = this.data.count;
wx.request({
url: url,
method: 'GET',
data: {
start: 0,
count: countNumber, ------------------------------- 每次滚动到底部，count+10
},
header: {
"Content-Type": "application/json"
},
success: function(res) {
console.log(res, 'res----xxxxxxxxxxxxx')
if (res.statusCode === 200) {
const newStartsArray = res.data.subjects.map(item => {
const starsArray = {
starsLightArray: [],
starsDarkArray: []
};
function getStarsNumber(starsArray) { -------------- 星星的数量显示
const startsNumber = Number(item.rating.stars.slice(0, 1));
for (let i = 0; i < startsNumber; i++) {
starsArray.starsLightArray.push(1);
}
for (let i = 0; i < 5 - startsNumber; i++) {
starsArray.starsDarkArray.push(1)
}
};
getStarsNumber(starsArray);
return {
...item,
'rating': {
...item.rating,
stars: item.rating.stars.slice(0, 1),
starsArray: starsArray
},
}
});
that.setData({
moveTop: {
...res.data,
type: '正在热映',
subjects: [
...newStartsArray
],
'requestAddress': 'http://t.yushu.im/v2/movie/top250'
}
})
}
}
});
this.setData({ -------------------------------------- 每次滚动到底部，count+10
count: countNumber+10
})
},
(27)
wx.showNavigationBarLoading() 显示导航条加载动画。
wx.hideNavigationBarLoading() 隐藏导航条加载动画
goScrollLower: function() {
const url = this.data.url;
const type = this.data.type;
this.setData({
type
})
const that = this;
let countNumber = this.data.count;
wx.showNavigationBarLoading(); ---------------------------- 请求数据时，loading显示动画
wx.request({
url: url,
method: 'GET',
data: {
start: 0,
count: countNumber,
},
header: {
"Content-Type": "application/json"
},
success: function(res) {
if (res.statusCode === 200) {
const newStartsArray = res.data.subjects.map(item => {
const starsArray = {
starsLightArray: [],
starsDarkArray: []
};
function getStarsNumber(starsArray) {
const startsNumber = Number(item.rating.stars.slice(0, 1));
for (let i = 0; i < startsNumber; i++) {
starsArray.starsLightArray.push(1);
}
for (let i = 0; i < 5 - startsNumber; i++) {
starsArray.starsDarkArray.push(1)
}
};
getStarsNumber(starsArray);
return {
...item,
'rating': {
...item.rating,
stars: item.rating.stars.slice(0, 1),
starsArray: starsArray
},
}
});
that.setData({
moveTop: {
...res.data,
type: '正在热映',
subjects: [
...newStartsArray
],
'requestAddress': 'http://t.yushu.im/v2/movie/top250'
}
})
}
}
});
this.setData({
count: countNumber+10
})
setTimeout(function() { --------------------- 设置完所有的data数据后，关闭loading动画
wx.hideNavigationBarLoading();
}, 500)
},
(28) 下拉刷新
https://blog.csdn.net/weixin_41871290/article/details/80665161
https://zhuanlan.zhihu.com/p/24739728
在页面的json文件中，配置 enablePullDownRefresh()
-
enablePullDownRefresh() 是否开启下拉刷新
- enablePullDownRefresh() 是否开启下拉刷新-------------------- 默认是false
- 在app.json中可以配置window，tabBar，pages数组等 ------- 区别
- 在页面的json中，只能配置window选项---------------------------- 区别
-
onPullDownRefresh() 监听下拉刷新事件
- 在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件。
- 需要在 config 的window选项中开启 enablePullDownRefresh。
- 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
-
wx.stopPullDownRefresh停止拉刷新
(29) 搜索
- input组件有bindfocus，bindblur，bindinput，bindconfirm等函数
- 输入的值通过 event.detail.value获得