【微信小程序】微信小程序入门与实战小项目笔记
目录
- 笔记
-
- 一、初识微信小程序
-
- 1. 如何申请小程序`AppID`(小程序ID)
- 2. 开发工具的基本设置
- 3. 小程序的基本单位-Page页面
- 二、小程序的基本目录
-
- 1. 页面的4种基本文件类型
- 2. 全局配置文件、全局样式和应用程序级别js文件
- 三、rpx响应式单位与flex布局
-
- 1. 小程序默认显示第一位的页面索引或`entryPagePath`
- 2. 图片、文字与按钮标签
- 3. rpx的特点
- 4. 可以在page标签直接设置小程序的背景色
- 四、阅读列表与详情页
-
- 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/)
-
- `wx.showToast` 轻提示
- `wx.showModal`模态对话框
- `wx.showActionSheet`显示操作菜单
- 17. [音乐播放api](https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html)
-
- 音乐播放事件监听
- 五、小程序tabar的基本配置
- 六、自定义组件
-
- 1. 引入自定义组件
- 2. 自定义组件属性使用
- 3. 在自定义组件在添加样式失效问题（当容器设置为flex布局的时候，样式就可以生效）
- 4. 自定义事件
- 七、访问服务器数据
-
- 1. 请求方法的基本使用
- 2. ` justify-content：space-between；` 解决最后一排数量不够自动向两端排列问题
- 3. 上滑加载更多数据
- 4. 下拉刷新
- 5. 配置标题
-
- 静态配置
- 动态设置
- 八、电影详情页
-
- 1. 图片预览
- 2. 图片的多种mode模式
- 3. Scroll-View组件的使用
笔记
一、初识微信小程序
微信开发工具下载地址
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 [email protected]
安装好之后需要在 工具->构建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 ，不需要双括号
循环渲染多个平级子元素的时候可配合
默认情况下
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.postIdevent.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; // 纵向出现很大高度时，需要设置
}