微信小程序常见问题微信小程序开发注意事项在学小程序的过程中拿一个项目练练手，顺便记一项一些常见而又不太清楚的问题，如缓

微信小程序开发注意事项

在学小程序的过程中拿一个项目练练手，顺便记一项一些常见而又不太清楚的问题，如缓存技术、异步请求等等。

1. 主题颜色

我们在做一个小程序的时候，为了它的美观，每一个小程序总有它的一个主题颜色，所以可以在app.wxss文件中给page设置一个主题颜色还有字体大小。设置主题颜色之后在想要设置该主题颜色的页面的wxss文件中给相应的标签添加color: var(--themeColor)即可。

page {
    --themeColor:#eb4450;
    font-size: 28rpx;
}

2. 引入组件

首先，在微信小程序开发者工具中新建组件，然后在想要添加这个组件的页面的json文件中添加组件名和组件的路径。下面的SearchInput就是一个自定义的组件。最后在该页面的wxml文件中添加<SearchInput> </SearchInput>标签名即可。

"usingComponents": {
  "SearchInput": "../component/SearchInput/SearchInput"
},

3. `swiper`标签使用

在使用swiper标签的时候，除了让图片的高度自适应外，还要让swiper标签的高度和图片的高度相同，才可以适配不同的机型。如果没有的话，swiper的高度就固定为150px，在不同的机型中就可能会出现有一部分被截掉的情况(如图所示)。

点击轮播图预览大图功能

给轮播图绑定点击事件

调用小程序的api——previewImage

wx.previewImage({
  current,
  urls
});

4.. 使用`calc`

在less中使用calc来计算的时候要注意，要以~'calc()'的形式来写，才能在转为wxss文件的时候calc里面的语句不会被编译，而是原样输出。

5. 使用缓存技术

在我们开发的时候，有时需要在接口获取大量的数据，那么这个为了提高运行效率，我们需要应用到缓存技术。（1）先判断本地存储中有没有旧的数据time:Date.now{}.data:[...];（2）如果没有，就直接发送新请求;（3）如果有的同时数据也没有过期，就使用本地存储的旧数据即可。

// 设置过期时间  10s  
const Cates = wx.getStorageSync("cates");
if (Date.now() - Cates.time > 1000*10) {
        this.getNavList();
}else {
        this.Cates = Cates.data;
      }
// 获取到数据后进行本地存储，命名为cates
wx.setStorageSync("cates", { time: Date.now(), data: this.cates });

先获取本地存储中的数据（小程序也存在本地存储技术），但代码的表现形式还是有所不同；

web中：localStorage.setItem("key", "value") localStorage.getItem("key")；不管存入的是什么类型，最终都会先调用一下toString()，先把数据变成了字符串再存进去

小程序中：wx.setStorageSync("key", "value"); wx.getStorageSync("key");不存在转换类型的操作，存入的是什么类型，拿出来的就是什么类型。

在进行本地存储的同时要添加一个时间戳，以便于后续添加一个过期时间。

6. 发送异步请求

当我们要发送异步请求的时候，如果安装了微信小程序的插件，打出wx-request就会生成一系列的参数，当如果我们要让多个异步请求同时进行，多次重复回调就会有回调地狱的问题，因此在这里我们可以用Promise来解决这个问题。通过定义一个request函数，后面要用的时候直接引用request之后传参即可。

export const request = (params) => {
    // 定义公共的url
    const baseUrl="...";   // 这里可以写上接口的公共路径以优化接口代码
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            url: baseUrl+params.url,
            success: (result) => {
                resolve(result)
            },
            fail: (err) => { console.log(err); },
        });

    })
}

7. 优化动态渲染

在我们从接口中获取数据的时候，有时我们并不需要用到所有的数据，此时我们只需要从中取出我们所需要的数据即可。由于部分iphone手机不识别webp图片格式，如果想自己想临时改一下，(把wwebp格式的图片转化为jpg格式)，可以通过正则表达式来改：

xxx.replace(/.webp/g, '.jpg');

微信小程序常见问题