【小程序】实战商城笔记

最新推荐文章于 2022-04-06 11:16:00 发布

阿庭

最新推荐文章于 2022-04-06 11:16:00 发布

阅读量189

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_43606809/article/details/105462478

版权

小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

新建页面
添加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)//获取数据

如果想要获取双层数据

数据缓存（本地存储）

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

切换标签页返回顶部

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

async语法（回调）

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

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

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

在这里插入图片描述

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

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

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

下拉刷新框

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

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

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

弹性盒子垂直水平居中

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

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

button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

给对象setData

点击图片放大预览保存

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

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

封装微信的api

	export const getSetting =()=> {
    return new Promise((resolve,reject) => {
        wx.getSetting({
            success: (result)=>{
                resolve(result)
            },
            fail: (err)=>{
                reject(err)
            }
        })
    })
}

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

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