目录
- 笔记
- 一、初识微信小程序
- 二、小程序的基本目录
- 三、rpx响应式单位与flex布局
- 四、阅读列表与详情页
- 1.下载安装`linUI`
- 2. 使用自定义组件
- 3. `swiper`组件的使用
- 4. 使用LinUI的icon字体图标
- 5. 单向数据与双向数据
- 6. 数据绑定
- 7. 页面生命周期
- 8. Mustache语法
- 9. 条件渲染
- 10. 列表渲染
- 11. [小程序事件](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html)
- 12. 小程序跳转
- 13. 自定义属性
- 14. 小程序的全局变量
- 15. 小程序缓存
- 16. [小程序api](https://developers.weixin.qq.com/miniprogram/dev/api/)
- 17. [音乐播放api](https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html)
- 五、小程序tabar的基本配置
- 六、自定义组件
- 七、访问服务器数据
- 八、电影详情页
笔记
一、初识微信小程序
1. 如何申请小程序AppID
(小程序ID)
2. 开发工具的基本设置
打开开发工具后先调整设置为下图所示
3. 小程序的基本单位-Page页面
可以在
app.json
文件的pages属性配置页面路径,理论上可以在任意路径存放页面文件,但是推荐放在pages目录下
二、小程序的基本目录
1. 页面的4种基本文件类型
.wxml: 类似与html,用于支撑页面的骨架
.wxss:类似与css,用于美化页面的样式
.js:处理业务逻辑
.json:对页面进行配置
页面目录下面的文件名需要保持一致,无需引入
2. 全局配置文件、全局样式和应用程序级别js文件
用于小程序的全局配置,相当于初始化,各个页面内可以单独配置覆盖全局配置
三、rpx响应式单位与flex布局
1. 小程序默认显示第一位的页面索引或entryPagePath
{
"pages": [
"pages/index/index",
"pages/welcome/welcome"
]
}
2. 图片、文字与按钮标签
斜线代表根目录,绝对路径
image组件有一默认的宽高:宽度320px、高度240px
使用text标签的时候写成一行
<image></image>
<text></text>
<button></button>
3. rpx的特点
根据用户屏幕大小动态调整尺寸
iPhone6: 1px = 2rpx
4. 可以在page标签直接设置小程序的背景色
page{
background-color: #b3d4db;
}
四、阅读列表与详情页
1.下载安装linUI
npm init
npm i lin-ui@0.8.7
安装好之后需要在 工具->构建npm
2. 使用自定义组件
json文件内先配置引入使用的组件
{
"usingComponents": {
"l-avatar": "/miniprogram_npm/lin-ui/avatar/index"
}
}
<l-avatar></l-avatar>
3. swiper
组件的使用
容器组件内可滑动的不只是图片,也可以是文本等其他内容
swiper
组件内只能使用swiper-item
组件(子组件)
<swiper class="swiper">
<swiper-item>
<image src="/images/69317501_p0.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/70682785_p0.png"></image>
</swiper-item>
</swiper>
需要给swiper标签以及image标签都加上宽高属性
.swiper, .swiper image{
height: 460rpx;
width: 100%;
}
属性 | 描述 | 默认 |
---|---|---|
indicator-dots | 是否显示面板指示点 | false |
autoplay | 是否自动切换 | false |
vertical | 滑动方向是否为纵向 | false |
详情可查阅官方文档
与Vue的不同之处:小程序标签里面的属性需要加双括号才表示变量,与React类似
4. 使用LinUI的icon字体图标
在json文件引入icon组件
加上name直接使用
<l-icon name="cart"></l-icon>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 图标的名称,必填 | String | - | - |
color | 图标的颜色 | String | - | 默认为主题色 |
size | 图标的大小(单位:rpx) | Number | - | 40rpx |
5. 单向数据与双向数据
单向数据:一旦数据变化,就去更新页面(data-页面),但是没有(页面-data)
双向数据:数据变化,可以(data-页面),也可以(页面-data)
6. 数据绑定
通过setData
方法修改data的数据,不能直接赋值,与Vue不同,与React类似
this.setData({
a: '1',
b: '2'
})
// 需要修改对象数组里面的属性时
let data = 'week[' + n + '].is_sign'
that.setData({
[data]: 1
})
7. 页面生命周期
生命周期钩子函数 | 触发时机 |
---|---|
onLoad | 监听页面加载 |
onShow | 监听页面显示 |
onReady | 监听页面初次渲染完成 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
页面初次打开执行顺序:onload =》onShow =》onReady
8. Mustache语法
与Vue的基本一致
动态属性也需要加双括号,与React类似
9. 条件渲染
wx:if
=> 相当于 v-if
wx:else
=> 相当于v-else
10. 列表渲染
wx:for
=> 相当于v-for
wx:key
=> 相当于:key
wx:key
需要为对象中的的 属性名 或是 index ,不需要双括号
循环渲染多个平级子元素的时候可配合<block>
标签使用,该标签不会被渲染到页面,相当于Vue中的<template>
默认情况下
item
表示数组的子元素,index
表示数组索引可通过
wx:for-item
修改默认子元素表示,通过wx:for-index
修改默认索引
11. 小程序事件
bind:tap
:触摸事件(最好用冒号隔开写,提高可读性)
//触摸事件
bind:tap //具有 事件冒泡
catch:tap //阻止 事件冒泡
capture-bind:tap //具有 事件捕获
capture-catch:tap //阻止 事件捕获,在内部嵌套的元素永远无法触发对应的事件处理函数
mut-bind:tap //具有 互斥效果,即"有我没你"的感觉,一个 mut-bind 触发后,如果事件冒泡到其他节点上,其他节点上的 mut-bind 绑定函数不会被触发,但 bind 绑定函数和 catch 绑定函数依旧会被触发。
12. 小程序跳转
wx.switchTab(Object object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.switchTab({
url: '/pages/search/search',
})
2)wx.reLaunch(Object object)
关闭所有页面,打开应用内的某一个页面
wx.reLaunch({
url: '/pages/list/list?id=1&name=zhangsan',
})
onLoad: function (options) {
console.log("list-id",options)
},
3)wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
url:"/pages/list/list?id=1"
})
4)wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateTo({
url: '/pages/list/list?id=1',
})
5)wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,
// 而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2 // A=>B=>C 现在从c直接到a,那么就写个2,默认是1,只能返回B
})
13. 自定义属性
设置:data-xx
获取:event.currentTarget.dataset.xx
注意:
data-post-id
=>dataset.postId
event.targrt
:触发事件的源组件;event.currentTarget
:事件绑定的当前组件
14. 小程序的全局变量
app.js
App({
test: 1
})
通过getApp()
可获取全局变量
const app = getApp()
console.log(app.test) // 1
15. 小程序缓存
相当于localstorage
同步操作
wx.setStorageSync('key', 'value') // 设置
wx.removeStorageSync('key') // 删除
wx.clearStorageSync() // 清空
wx.getStorageSync('key') // 获取
异步操作
wx.getStorage({
key: 'a',
success(res){
console.log('res', res.data);
}
})
异步操作已经封装成了了Promise,可以直接通过.then
或者async/await
调用
16. 小程序api
wx.showToast
轻提示
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
wx.showModal
模态对话框
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
wx.showActionSheet
显示操作菜单
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success (res) {
console.log(res.tapIndex)
},
fail (res) {
console.log(res.errMsg)
}
})
更多其他api请查看文档
17. 音乐播放api
const mgr = wx.getBackgroundAudioManager() // 创建背景音乐播放实例
mgr.src = this.data.postData.music.url
mgr.title = this.data.postData.music.title // 必须要设置标题,不然音乐播放不了
当设置了新的 src 时,会自动开始播放,持的格式有 m4a, aac, mp3, wav
// 若需要小程序在退到后台后继续播放音频,需要在 app.json 中配置 requiredBackgroundModes 属性
"requiredBackgroundModes": ["audio"],
音乐播放事件监听
// 判断当前音乐是否正在播放
currentMusicIsPlaying() {
if (app.gIsPlayingMusic && (app.gIsPlayingPostId == this.data.pid)) {
return true
}
return false
},
mgr.onPlay(() => {
app.gIsPlayingMusic = true
this.setData({
isPlaying: this.currentMusicIsPlaying()
})
}) // 监听开始播放
mgr.onPause(() => {
app.gIsPlayingMusic = false
this.setData({
isPlaying: this.currentMusicIsPlaying()
})
}) // 监听暂停播放
通过app.js独立管理每个页面的音乐
gIsPlayingMusic: false, // 是否正在播放音乐
gIsPlayingPostId: -1, // 哪篇文章正在播放音乐
五、小程序tabar的基本配置
"tabBar":{ //配置底部的tab栏
"color":"#ccc", //默认的颜色
"selectedColor":"#35495e", //选中tabar的文字颜色
"borderStyle":"white", //tabbar的上边框线 white 默认是black
"backgroundColor":"#f9f9f9", //tabbar的背景色
"list":[ //数组 规定了2-5
{
"text": "榜单", //tabbar的文字
"pagePath":"pages/board/board", //tabbar的页面路径
"iconPath":"images/board.png", //tabbar的icon图标
"selectedIconPath":"images/board-actived.png" //tabbar当前选中的图标
}
]
}
注意:pagePath路径不需要在首部加上/
六、自定义组件
1. 引入自定义组件
{
"usingComponents": {
"l-icon": "/miniprogram_npm/lin-ui/icon/index",
"post": "/components/post/index"
}
}
2. 自定义组件属性使用
与Vue类似
pages/posts/posts.html
<post text="777"></post>
components/post/index.js
properties: {
// text: String
text: {
type: String,
value: '123'
}
},
3. 在自定义组件在添加样式失效问题(当容器设置为flex布局的时候,样式就可以生效)
通过使用外部样式类解决,
父
<movie-list m-class="movie-list"></movie-list>
.movie-list{
margin-bottom: 30rpx; // 样式与子组件冲突的时候可能会不生效,就是用!important
}
子
<view class="container m-class">
<text>正在热映</text>
</view>
Component({
externalClasses: ['m-class'],
})
4. 自定义事件
绑定自定义事件
父
<post bind:eventName="toDetail" res="{{item}}"></post>
toDetail(event){
console.log(event.detail.test)
}
在组件内触发
子
this.triggerEvent('eventName', {
test: 1
}) // 类似于Vue中的 this.$emit()
七、访问服务器数据
1. 请求方法的基本使用
wx.request({ // 该方法没有返回promise对象,不能使用then,async/await
url, // 地址
data, // 参数
success: (res) => { // 请求成功回调函数
this.setData({
data: res.data.subjects
})
}
})
2. justify-content:space-between;
解决最后一排数量不够自动向两端排列问题
可以通过:after解决,只适合每列有3个的分布情况
.tem-flex:after{
content: '';
width: 200rpx; /* 一项数据的宽度 */
}
其他解决方案点击这里查看
3. 上滑加载更多数据
通过onReachBottom
钩子函数可以监听
onReachBottom: async function () {
let queryObj = {
start: this.data.movies.length,
count: 12
}
let res = await this.requestData(this.data._type, queryObj)
this.setData({
movies: this.data.movies.concat(res.data.subjects)
})
},
4. 下拉刷新
在json文件里面配置,开启允许下拉
"enablePullDownRefresh": true
通过onPullDownRefresh
钩子函数可以监听
onPullDownRefresh: async function () {
let queryObj = {
start: 0,
count: 12
}
let res = await this.requestData(this.data._type, queryObj)
wx.stopPullDownRefresh()
this.setData({
movies: res.data.subjects
})
},
5. 配置标题
静态配置
在json文件可配置
"navigationBarTitleText": "Top250"
动态设置
最好在onReady
钩子函数设置
onReady: function () {
let title = ''
switch (this.data._type) {
case 'in_theaters':
title = '正在热映'
break;
case 'coming_soon':
title = '即将上映'
break;
default:
title = '电影'
break;
}
wx.setNavigationBarTitle({
title
})
},
八、电影详情页
1. 图片预览
wx.previewImage({
urls: []
})
2. 图片的多种mode模式
<image src="{{movie.images.large}}" mode="aspectFill"></image>
详情可查询官方文档
3. Scroll-View组件的使用
enable-flex:允许使用flex
scroll-x:横向滚动
<scroll-view class="casts-container" enable-flex scroll-x>
<block wx:for="{{movie.castsInfo}}" wx:key="index">
<view class="cast-container">
<image class="cast-img" src="{{item.img}}"></image>
<text>{{item.name}}</text>
</view>
</block>
</scroll-view>
.casts-container{
display: flex;
margin-bottom: 50rpx;
height: 300rpx; // 纵向出现很大高度时,需要设置
}