小程序的学习笔记
小程序文件分析
WXML WXSS JavaScript JSON
page
首页log
日志- 顶部标题的颜色必须为block和white
tabBar
- 表示地址的tab栏
- 【官网地址】
注意事项
- 在使用bool类型充当类型属性时,在属性值的位置前面不能加空格
- 列表循环 `wx:for=”数组或者对象”
- 只有一层循环时可以将一下省略
- 列表循环
wx:for-item="循环项的名称"
wx:for-index=’index’` - wx:key=”唯一的值”
- 条件渲染
wx:if
wx:elif
wx:else
- hidden 是添加样式使用
- 对象循环
wx:for="{{对象/数组}}" wx:for-item="对象的值" wx:for-index="循环项目的属性"
查看答案
1 | <!--pages/demo/demo.wxml--> |
事件绑定
- input标签绑定input事件 使用
bindinput
属性 - 通过事件源对象来获取input输入的值
e.detail.value
- 与data同级 并且可以将input中输入的值与data中定义的属性绑定,使用
this.setData({属性:e.detail.value})
- 加入一个点击事件
bindtap
属性,无法直接传参 通过自定义属性的方法来传参
- 在自定义属性时要注意 如果传递的参数为数字,应该加
{{}}
使得传递的参数为number,不加为string - 注意input输入后的值为字符型,需要将输入的值转换
图片问题
- 比例尺的关系
1px =750rpx*设置的尺寸大小/page的宽度
- text 才能实现长按复制
selectable decode
解码和复制 image
中属性mode
aspectFit
是长边能显示出来aspecFill
使得短边显示出来widthFix
按照比例缩放- 图片支持懒加载
lazy-load
布尔值
轮播图swiper
- 轮播项
swiper-item
标签里面放入图片 swiper 存在默认高度 150px - 高度无法实现由内容撑开
- 图片使用
mode=“widthFix”
- indicator-dots 显示面板指示点
indicator-color
indicator-active-color
- autoplay 自动轮播 5秒一次
- interval 可以切换时间间隔
- circular 是否循环轮播
- 给图片加100%宽度 ,swipter的高度自适应
100vw * 图片的宽度 / 高度
查看答案
查看答案
navigator 导航
url
表示要跳转的页面路径- 相当于块级元素
- target 跳转小程序,默认当前小程序 可选值
self/minProgram
- open-type 跳转方式
rich-text 富文本标签
- nodes 接受字符串
- 对象数组
button标签
- size属性
default/ mini
- open-type
icon图标
- type类型
- size 大小 默认23
- color 改变颜色
radio/checkbox
- radio-ground 绑定change事件
bindchange
- checkbox-ground 绑定事件change
自定义组件
- 在使用自定义组件时 要注意 在使用函数方法时要写到
methods
中 - 并且将被使用的组件写到需要渲染页面的json文件中
- 父组件向子组件 传递数据 通过自定义属性来传递
properties
要接受的数据名称 ·type/value·
类型和值 - 子向父传递
this.triggerEvent('名称',传递的参数)
传递的时候要注意 传递的参数是什么形式,相对应 - 子传父,在子中定义一个要传递的事件方法和参数,在父中对事件方法进行绑定,然后在父中使用方法
- 数据在谁上,谁有权修改
查看答案
1 | handleitemtap(e){ |
- slot标签其实就是一个占位符,等到父组件调用子组件的时候,在传递标签
生命周期
查看答案
1 | // app.js |
页面生命周期
项目制作
- promise封装函数
查看答案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21export const request=(params)=>{
return new Promise((resolve,reject)=>{
wx.request({
...params,
success:(result)=>{
resolve(result)
},
fail:(err)=>{
reject(err)
}
});
})
}
request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})
.then(result=>{
this.setData({
swiper_list: result.data.message
})
})
缓冲事件
- 设置一个缓冲事件,获取本地的存储中的数据进行判断
- ·
{time:Date.now(),data:[...]}
- web:
localStorage.setItem("key","value")
localStorage.getItem("key")
- 优化接口的路径 使用prominse中的params将url解构出来
es7 async语法
- 解决回溯的最终方案
- async
触底事件
onReachBottom
页面触底事件- 页面上拉触底事件的处理函数。触底事件,当页面触底之后,在进行请求,并且将请求到的数据在追加到原来的数组中,并且在触底后还要进行判断如果总数据的页数>=当前的页数,要返回wxwx.showToast({title: ‘title’,}),否则继续请求
查看答案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132// pages/goods_list/goods_list.js
import { request } from "../../request/index.js";
Page({
/**
* 页面的初始数据
*/
data: {
// 将这些数据导入到子文件中
tabs: [{
id: 0,
value: '综合',
isActive: true
},
{
id: 1,
value: '销量',
isActive: false
},
{
id: 2,
value: '价格',
isActive: false
}
],
first_list:[],
},
// 设置请求后返回的总页面的数量
totalpages:1,
handleChage(e){
// console.log(e);
// 将子传递给父亲的索引值解构出来
const {id} = e.detail
// 将父亲data的数据进行解构
let {tabs} = this.data
// 将data中的数据进行遍历 如果此时的索引值等于数据中的id值则将数据中的isActive的值改为true
// 这里的v表示的是遍历的数据,i表示的是索引号
tabs.forEach((v,i) =>i===id?v.isActive=true:v.isActive=false);
// 将这里修改的数据加到源数据中
this.setData({
tabs
})
},
// 页面触底事件
pageParams:{
query:'',
cid:'',
pagenum:1,
pagesize:10
},
// 对接口数据进行请求
async getgoodList(e){
const res = await request({
url:'/goods/search',
data: this.pageParams
})
console.log(res);
// 先获取页面的总数据,计算出页码信息
const goodspages = Math.ceil(res.data.message.total / this.pageParams.pagesize)
console.log(goodspages)
this.totalpages = goodspages
this.setData({
// 这一步是将请求到的数据在使用数组拼接的方式拼接起来,这里用到了数组解构的方法
first_list:[...this.data.first_list,...res.data.message.goods],
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options);
this.pageParams.cid = options.cat_id
this.getgoodList()
},
/**
* 页面上拉触底事件的处理函数。触底事件,当页面触底之后,在进行请求,并且将请求到的数据在追加到原来的数组中,并且在触底后还要进行判断如果总数据的页数>=当前的页数,要返回wxwx.showToast({title: 'title',}),否则继续请求
*/
onReachBottom: function () {
this.pageParams.pagenum++;
// 进行页面触底的判断
if(this.totalpages<=this.pageParams.pagenum){
wx.showToast({
title: '页面加载完成',
})
}else{
this.getgoodList()
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
下拉刷新页面
- 重置数据
- 重置页码
- 然后在请求方法的最后加上 关闭下拉刷新的方法
- 显示加载中提示,在页面请求之前显示
complete方法
- 在页面请求加载之前首先先显示加载按钮在页面加载结束后隐藏 调用wx.request方法中的第三个函数方法complete
查看答案
1 | // 如果在执行异步操作时,对隐藏加载按钮进行处理,不做处理页面还未加载完成就结束了 |
css省略号
查看答案
1 | display: -webkit-box; |
预览大图
- 点击轮播图位置得图片实现大图得预览效果
- 为轮播图添加一个点击事件
- 使用事件
previewImage
- 给小程序添加大图预览效果 使用 wx.previewImage方法来实现,首先是在轮播图的遍历图片的位置添加一个函数方法,然后在方法内使用pre方法,并且将获取到的图片从列表中选出后生成一个新的列表使用map方法,由于是异步函数,所以必须将列表单独拿出来,给swiper加上一个自定义id值,当用户点击某一张图片时将该图片放大,获取该点击事件得图片id值,使用解构得方法
购物车模拟
- 对加入购物车事件进行处理,点击加入购物车 先对本地缓冲中得cart缓冲进行判断如果存在则使得该商品得总数num+1,否则将当前商品得数量设置为1,使用
findIndex
方法,如果不满足条件则返回-1查看答案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19handleshopAdd(e) {
let cart = wx.getStorageSync('cart') || []
let index = cart.findIndex(v =>v.data.message.goods_id === this.infoData.data.message.goods_id)
if (index === -1) {
this.infoData.num = 1
cart.push(this.infoData)
} else {
cart[index].num++;
// console.log(cart[index].num);
}
// console.log(index);
wx.setStorageSync('cart', cart)
wx.showToast({
title: '加入购物车成功',
icon: 'success',
// 防抖操作
mask: true
})
}
获取地址信息
查看答案
1 | data: { |
结算功能
- 使用遍历中的every方法
查看答案
1 | //Page Object |
登录获取用户信息
- 使用getgetUserProfile
查看答案
1 | getUserProfile(e) { |
防抖和节流
- 使用定时器解决防抖
图片的上传
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论