文章目录
来源博客:【Harryの心阁】
小程序文件分析
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="循环项目的属性"
<!--pages/demo/demo.wxml-->
<view>轮播图</view>
<!-- image width 700px height 277px
x/1 = 277/700 x=277/700
-->
<swiper class="swiper" autoplay interval="1000" circular indicator-dots>
<swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/175759/5/697/309624/605fa953Eaddcc402/30b0ea12dc5cc42c.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/143564/28/18582/124317/60667523E2a4840dd/301bbb3de0243db8.jpg!q70.jpg.dpg" alt=""/></swiper-item>
<swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/155887/8/16711/104572/60534627Eb979dc75/cc416de39d2e83b0.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""/></swiper-item>
</swiper>
<!-- 单选框 -->
<radio-group bindchange="bindChange">
<radio name="sex" value="male">男</radio>
<radio name="sex" value="female">女</radio>
<view wx:if="{{gerder == 'male'}}">-您选择的按钮为男</view>
<view wx:elif="{{gerder == 'female'}}">-您选择的按钮为女</view>
<view wx:else="{{gerder == ''}}">-您选择的按钮为</view>
</radio-group>
<!-- 复选框 -->
<view>
<checkbox-group bindchange="bandelItemchange">
<checkbox wx:for="{{fruit}}" wx:key="id" value="{{item.value}}">
{{item.name}}
</checkbox>
<view>选中的是:{{checkList}}</view>
</checkbox-group>
</view>
<!-- 组件 -->
<Tabs></Tabs>
<rich-text class="" nodes="{{html}}">
</rich-text>
<view>input标签</view>
<input type="text" bindinput="handleInput"/>
<view class="btn">
<button size="mini" bindtap="handeltap" data-opertation="1">+</button>
<button size="mini" bindtap="handeltap" data-opertation="{{-1}}">-</button>
</view>
<image mode="widthFix" src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/wallhaven-oxxw29.webp"></image>
<view>{{num}}</view>
<view>----------------------------</view>
<text>测试页面</text>
<view>'text'相当于web中的span元素,view相当于web中的div标签块级元素</view>
<view>测试wx:for标签</view>
<view>---------------------</view>
<view>列表循环</view>
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="username">
属性:{{item.id}}
索引: {{index}}
名称:{{item.name}}
年龄:{{item.age}}
年龄:{{item.msg.con}}
</view>
<view>对象循环</view>
<view wx:for="{{msg}}" wx:for-item="value" wx:for-index="key" wx:key="id">
{{value}}
{{key}}
</view>
<view>---------------------</view>
<view>测试 wx:if</view>
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:elif="{{true}}">3</view>
<view>---------------------</view>
<view>测试 hidden</view>
<view hidden="{{true}}">1</view>
<view hidden>1</view>
事件绑定
- 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('名称',传递的参数)
传递的时候要注意 传递的参数是什么形式,相对应 - 子传父,在子中定义一个要传递的事件方法和参数,在父中对事件方法进行绑定,然后在父中使用方法
- 数据在谁上,谁有权修改
handleitemtap(e){
// 将点击的事件加入自定义属性
// console.log(e);
const {index} = e.currentTarget.dataset
let {tabs} = this.data
// console.log(index);
// 对以上的导航数据使用foreach进行遍历
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
this.setData({
tabs
})
}
-------------------
<view class="nav">
<view bindtap="handleitemtap" wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?'active':''}}" data-index="{{index}}">{{item.name}}</view>
</view>
- slot标签其实就是一个占位符,等到父组件调用子组件的时候,在传递标签
生命周期
// app.js
App({
// 表示在应用第一次启用时就执行
onLaunch(e){
console.log(e);
console.log('launch');
// 不能触发
// wx.navigateTo({
// url: 'url',
// })
},
// 应用被用户看到时执行
onShow(e){
// 对数据的重置
console.log('onshow');
},
// 应用被隐藏的时候所执行的
onHide(e){
// 清除定时器
console.log('onHide');
},
// 应用发生错误时执行
onError(err){
console.log('onError');
// console.log(err);
},
// 应用找不到页面时触发
onPageNotFound(e){
// 无法跳转到tabbar页面,如果页面不存在可以重定向到第二个页面
console.log('onPageNotFound');
wx.navigateTo({
url: '/pages/demo/demo',
})
}
})
页面生命周期
项目制作
- promise封装函数
export 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’,}),否则继续请求
// 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
// 如果在执行异步操作时,对隐藏加载按钮进行处理,不做处理页面还未加载完成就结束了
let ajaxtimes = 0;
export const request=(params)=>{
ajaxtimes++;
// 在页面请求加载之前首先先显示加载按钮在页面加载结束后隐藏 调用wx.request方法中的第三个函数方法complete
wx.showLoading({
title: '加载中',
})
// 将接口的公共部分解构出来,在进行拼接
const baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'
return new Promise((resolve,reject)=>{
wx.request({
...params,
url:baseUrl+params.url,
success:(result)=>{
resolve(result)
},
fail:(err)=>{
reject(err)
},
// 请求完成或者失败都会执行
complete:()=>{
ajaxtimes--;
// 如果ajaxtimes的值不等于0,不执行隐藏函数
if(ajaxtimes===0){
wx.hideLoading()
}
}
});
})
}
css省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
预览大图
- 点击轮播图位置得图片实现大图得预览效果
- 为轮播图添加一个点击事件
- 使用事件
previewImage
- 给小程序添加大图预览效果 使用 wx.previewImage方法来实现,首先是在轮播图的遍历图片的位置添加一个函数方法,然后在方法内使用pre方法,并且将获取到的图片从列表中选出后生成一个新的列表使用map方法,由于是异步函数,所以必须将列表单独拿出来,给swiper加上一个自定义id值,当用户点击某一张图片时将该图片放大,获取该点击事件得图片id值,使用解构得方法
购物车模拟
- 对加入购物车事件进行处理,点击加入购物车 先对本地缓冲中得cart缓冲进行判断如果存在则使得该商品得总数num+1,否则将当前商品得数量设置为1,使用
findIndex
方法,如果不满足条件则返回-1
handleshopAdd(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
})
}
获取地址信息
data: {
address: false
},
// 点击获取地址按钮事件
handleButtonAddress(e){
// console.log(e);
// 将获取到得地址信息存入到缓冲中
wx.chooseAddress({
success: (result) => {
// console.log(result);
// 设置一个缓冲信息
wx.setStorageSync('address', result);
}
})
},
// 在onshow事件内进行判断如果缓冲中存在数据则将地址呈现到页面中
onShow: function(){
// 先判断缓冲中是否存在信息,如果存在将数据存入到 data中并呈现到页面中
// 先获取缓冲中得数据
let address = wx.getStorageSync('address');
if(address){
this.setData({
address
})
// 将数据呈现到页面中
console.log(this.data.address);
}else{
console.log('缓冲中得数据不存在');
}
}
结算功能
- 使用遍历中的every方法
//Page Object
Page({
data: {
address: false,
cart_list: [],
Allchecked: false,
totalPrice:0,
totalNum:0
},
// 点击获取地址按钮事件
handleButtonAddress(e) {
// console.log(e);
// 将获取到得地址信息存入到缓冲中
wx.chooseAddress({
success: (result) => {
console.log(result);
// 设置一个缓冲信息
wx.setStorageSync('address', result);
}
})
},
// 在onshow事件内进行判断如果缓冲中存在数据则将地址呈现到页面中
onShow: function () {
// 先判断缓冲中是否存在信息,如果存在将数据存入到 data中并呈现到页面中
// 先获取缓冲中得数据
let address = wx.getStorageSync('address');
// 获取缓存中的购物车信息
const cart_list = wx.getStorageSync('cart') || []
// 使用遍历方法every
// const Allchecked = cart_list.length ? cart_list.every(v => v.checked) : false
// 购物车结算,将用户选中的商品的数量相加,为总数量;单个商品的价格和数量相乘相加得到商品的总价格
this.setCart(cart_list)
if (address) {
this.setData({
address
})
// 将数据呈现到页面中
// console.log(this.data.address);
}
},
// 给checkbox添加一个改变属性
handleItemChecked(e){
// console.log(e);
// 获取选中改变商品的id,解构出来
const {id} = e.currentTarget.dataset
// 找到缓冲中的相应的商品,同时进行判断如果修改checed属性值
const {cart_list} = this.data
// 使用findIndex方法对缓冲中的数组进行遍历
const index = cart_list.findIndex(v=>v.data.message.goods_id==id)
// 找出用户改变商品选中状态的索引值,修改该索引值下商品的checked的值
cart_list[index].checked = !cart_list[index].checked
// console.log(index);
this.setCart(cart_list)
},
// 封装一个计算商品总数和商品总价格的函数方法
setCart(cart_list){
let totalPrice = 0;
let totalNum = 0;
let Allchecked = true
// 使用forEach方法对缓冲中的数组进行遍历
cart_list.forEach(v=>{
if(v.checked){
totalPrice += v.data.message.goods_price*v.num
totalNum += v.num
}else{
Allchecked= false
}
})
// 并且当用户的列表为空时不进行遍历
Allchecked=cart_list.length !=0?Allchecked:false
// console.log(cart_list);
// console.log(Allchecked);
this.setData({
cart_list,
Allchecked,
totalPrice,
totalNum
})
},
登录获取用户信息
- 使用getgetUserProfile
getUserProfile(e) {
// console.log(e);
// 判断缓冲中是否存在用户id
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
wx.setStorageSync('userinfo', res.userInfo);
const userinfo = wx.getStorageSync('userinfo');
if (userinfo) {
wx.switchTab({
url: '/pages/user/user'
})
}
}
})
}
防抖和节流
- 使用定时器解决防抖