你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

【小程序】实战商城笔记_电商笔记小程序

作者：你好赵伟 | 2024-07-12 00:28:48

踩

电商笔记小程序

新建页面
添加tab
改变头部样式
引用外部样式变量
在某个压面引用组件
小程序navigator（跳转）标签open-type属性

注释：由于小程序页面有层数限制，目前打开的页面最多只能有 5 层
index.js中的onLoad函数：页面加载时候就会运行
函数中的赋值使用this.setData()
使用wx:for时候要配套使用wx:key给每一个子项绑定一个关键字
<image>标签的mode属性为widthFix时候意味着图片宽高与标签等比例
改变标签的默认宽高换成rpx单位达到不同屏幕自适应
封装请求接口
多个图片同行平均宽度显示
如果有两层嵌套wx:for记得区分item和index
给dom绑定点击事件

//标签里
bindtap="handleItemTap"
data-index="{{index}}" //传递数据

//js
handleItemTap(e)//获取数据
1
2
3
4
5
6

如果想要获取双层数据

数据缓存（本地存储）

//存储
wx.setStorageSync("cates", { time: Date.now(),data: this.cates});
//使用
const Cates = wx.getStorageSync("cates");
//时间限制（超过十秒就重新获取）
Date.now() - Cates.time > 1000 * 10
1
2
3
4
5
6

切换标签页返回顶部

不能写死0 要用数据动态绑定每次切换就赋值0
提取接口公共部分

async语法（回调）

async getABC(){
	const res = await requese({url:xxx});
	coding...//请求未完成时候是不会执行的 res即为返回结果
}

1
2
3
4
5

组件的生命周期（与页面不同）
created 组件实例化，但节点树还未导入，因此这时不能用setData
attached 节点树完成，可以用setData渲染节点，但无法操作节点
ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点
moved 组件实例被移动到树的另一个位置
detached 组件实例从节点树中移除
父子组件间的传值与调用函数

父组件给子组件传递参数一定要用单引号！！

在这里插入图片描述

加载动画如何应对当有多个请求同时发送时候
略缩文字

拼接数组（原来的+新获取的）

this.setData({
      goods: [...this.data.goods,...res.data.message.goods]
    })
1
2
3

下拉刷新框

//json文件中
  "enablePullDownRefresh":true,
  "backgroundTextStyle":"dark"

//请求完成后手动关闭（在请求回调函数中加入）
wx.stopPullDownRefresh()
1
2
3
4
5
6

使用阿里图标库
class="iconfont icon-shoucang1"类名记得加上总类

弹性盒子垂直水平居中

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
1
2
3
4

按钮样式不好做可以直接用view写样式然后覆盖一个等大透明按钮上去

button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
1
2
3
4
5
6
7
8

给对象setData

点击图片放大预览保存

wx.previewImage({
  current, //放大的图片
  urls //滑动的图片组
})
1
2
3
4

有时候穿回的数据过多可以只取需要的不需要全部去省钱省力

封装微信的api

	export const getSetting =()=> {
    return new Promise((resolve,reject) => {
        wx.getSetting({
            success: (result)=>{
                resolve(result)
            },
            fail: (err)=>{
                reject(err)
            }
        })
    })
}
1
2
3
4
5
6
7
8
9
10
11
12

获取地址流程
获取用户对小程序所授予获取地址的权限状态 scope

假设用户点击获取收货地址的提示框确定 authSetting ["scope.address"]
scope 值 true 直接调用获取收货地址
假设用户从来没有调用过收货地址的api
scope undefined 直接调用获取收货地址
假设用户点击获取收货地址的提示框取消
scope 值 false
- 诱导用户自己打开授权设置页面(wx.openSetting) 当用户重新给与获取地址权限的时候
- 获取收货地址
把获取到的收货地址存入到本地存储中

onShow()与onLoad()
onShow()是样式有变化（包括data()里的数据变化）之后运行
onLoad()是加载页面之后运行

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/812068