开发篇

1、block标签的妙用

block 标签其实就类似于 react 中的 Fragment, Vue中的 template。

如果没接触过 react/vue 没关系，看下面例子：

<block>
  <view>say</view>
  <view>hello</view>
</block>
复制代码

渲染后结果, block 节点消失

<view>say</view>
<view>hello</view>
复制代码

如果没有block节点，需要这么做:

<!-- 多渲染了跟节点标签 -->
<view>
  <view>say</view>
  <view>hello</view>
</view>
复制代码

比较常用的用来配合 wx:if

<block wx:if="{{ show }}">
  <view wx:for="{{ arr }}" wx:key="index">{{ item }}</view>
</block>
复制代码

2、如何设置背景图片

1、可以将图片转成 base64 即可：（推荐使用）

background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoP………………");
复制代码

2、内联节点中使用 backgorund-image

<view style="background-image: url(example.png)">
</view>
复制代码

在真机是无效的。。。（无语）

3、使用 image 这个方法最xx，改改样式设置到底部即可。

<view>
  <image src="example.png" />
</view>
复制代码

最后：现在的项目本地图片使用是非常少的，大多为了性能都会把图片做cdn存储。这也能随带做优化（罒ω罒）。所以设置背景图片最简单的方法就是使用base64。

3、图片宽度100%，高度无法自适应(mode="widthFix")

在WEB开发中当把图片设置 100% 时，高度会自适应。

小程序就是不行，不行你看：

因为小程序底层已经对 image 添加了宽高了，所以默认就是 240px。

解决方法是给 image 元素添加 mode 属性

<image src="example.png" mode="widthFix"></image>
复制代码

当添加此模式并给图片设置 100% 宽度后，小程序自动计算其高度，就可以让图片自适应了。

4、还在为苹果手机底部的黑条条折磨吗，好了它来了~

先介绍env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离

而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

未适配底部效果：

适配底部代码：

height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2

height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2

padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2

padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2


//先constant再env，最好（constant/env）两种都写上，

适配后效果,不被挡住啦！

5 图片资源预加载

图片可以用：developers.weixin.qq.com/miniprogram…

//代码示例
wx.getImageInfo({
  src: 'images/a.jpg',
  success (res) {
    console.log(res.width)
    console.log(res.height)
  }
})

服务号订阅

1. 每个页面只能配置一个该组件。

Tips:

使用组件前，需前往小程序后台，在“设置”->“接口设置”->“公众号关注组件”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:

当小程序从扫二维码场景（场景值1011）打开时
当小程序从扫小程序码场景（场景值1047）打开时
当小程序从聊天顶部场景（场景值1089）中的“最近使用”内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态

示例：

<official-account></official-account>

2.微信开发者工具下调试展示

1646037839(1).jpg

确保使用组件前，需前往小程序后台，在“设置”->“接口设置”->“公众号关注组件”中设置要展示的公众号。设置的公众号需与小程序主体一致.设置完成后在开发工具中设置（1011/1047/1089）中任意一个场景值以后，则可以正常显示。否则无法看到任何效果。

调试篇

1、平时测试的时候尽量少开`调试模式`

因为打开调试模式，会默认过滤（默许）很多问题的存在，例如；域名不是合法域名，会不做提示。变量未声明直接使用，小程序也不会报错等等，当时日常24h开启测试的话，到正式环境下会给你带来许多的惊喜。当你发现定位问题的时候，你会非常的狗带

2、真机查看page页面路由参数

首页需要开启调试模式，在调试模式【command】中输入：__query__,即可输入page路由参数。例：

当然,直接输入window，window对象中包含了很多对象，如wx、Page、Component、Behavior等变量，你可以试试看。

优化篇

代码简洁篇

1、`[使用可选链?.]`当某个对象我们需要去判断是null或者undefined在辅助的时候，使用可选链会更加方便

使用前

let name = '张三'；
if(info && info.name){
    name = info
 }

使用后

let name = info?.name || '张三';

2、数组操作

有些人还在使用for循环做一些数组的操作，js Array的很多原生函数会大大提升简洁度

1.通过filter()函数进行数组筛选符合条件的所有值

const users = [{name:'张三', age:30},{name:'李四', age:35},{name:'王5', age:12}];

const result = users.filter(user => user.age > 20);   // [{name:'张三', age:30},{name:'李四', age:35}]

2.通过find()函数进行数组筛选符合条件的第一个值

const users = [{name:'张三', age:30},{name:'李四', age:35},{name:'王5', age:12}];

const found = users.find(user => user.age > 20);   // {name:'张三', age:30}

3.使用reduce() 方法进行统计

let lists = [
  {singer:'jayChou', song:'夜曲'},
  {singer:'mayday', song:'倔强'},
  {singer:'mayday', song:'如烟'},
  {singer:'yoga', song:'说谎'},
];
let userSongs = lists.reduce((result, currentList) =>{ // result 累计值   currentList 当前值
  result[currentList.singer] = result[currentList.singer] ? ++result[currentList.singer] : 1;   
  return result;
}, {});
// {jayChou: 1, mayday: 2, yoga: 1}

4.使用new Set()去重

let userLists = ['张三','jaychou', '张三', '李四']；

let users = [...new Set(userLists)]; // ['张三','jaychou', '李四']；

5.通过Math.max() 配合map() 查询数组对象中的最值

const users = [{name:'张三', age:30},{name:'李四', age:35},{name:'王5', age:12}];
Math.max.apply(Math, users.map(user => user.age))  // 35  最小值只需要把max改成min

6.通过some()判断数组中是否有元素满足次条件，every()判断是否都满足，返回值为boolean

const users = [{name:'张三', age:30},{name:'李四', age:35},{name:'王5', age:12}];

users.some(user => user.age<20); // true

users.every(user => user.age<20); // false

3、对象操作

1.通过Object.keys和Object.values分别获取对象所有的key值和value值

const user = {
  	name: 'jayChou',
    job: 'singer',
    song: '七里香'
};

let userKeys = Object.keys(user); //['name', 'job', 'song']

let userValues = Object.values(user); //['jayChou', 'singer', '七里香']

2.通过Object.entries把对象转换成key/value对数组

const user = {
  	name: 'jayChou',
    job: 'singer',
    song: '七里香'
};

let userKeys = Object.entries(user); //[['name','jayChou'],['job', 'singer'], ['song', '七里香']]

3.通过结构赋值过滤对象属性

const {address,  ...user} = {
  	name: 'jayChou',
    job: 'singer',
    song: '七里香',
    address: '台湾'
};
console.log(user)  // {name: 'jayChou',job: 'singer',song: '七里香'}

功能&组件

1，瀑布流：目前使用数组分割的方式实现

    将一个数组分成两个数组（单数分类，双数分类），其用两个容器分别展示在页面的左右区域中

为什么不用纯css样式去实现：因为那样无法确定数组位置，无法按顺序从左到右展示数据

//css 方式实现瀑布流
columns: column-width column-count;
但我们瀑布流用到的css属性是：
//column-count：指定列数
//column-gap：列之间的差距

//---------------------------------------html-------------------------------------------------
<ul class="img-wrapper">
    <li>
        <img src="./image/1.jpg" alt="">
    </li> 
    <!-- ... ... ... --> 
    <li>
        <img src="./image/20.jpg" alt="">
    </li> 
</ul>

//---------------------------------------css-------------------------------------------------

.img-wrapper{ 
    column-count: 3; 
    column-gap: 10px; 
    counter-reset: count; 
    width: 960px; 
    margin: 0 auto; 
} 
.img-wrapper>li{ 
    position: relative; 
    margin-bottom: 10px; 
}

//这里我们用column-count设定为了3列，column-gap间距为10像素。就这么简单的两句我们就实现了一个瀑布流。

瀑布流侧重页面和信息布局，自上而下滑动的过程中会不断加载页面内容

2，容器高度和宽度由背景图片控制

方法： 在容器内加一个<Image>容器，把背景图片传进去，通过盒子特性用内部的图片的大小去撑开容器的大小。当然要将<Image>的透明度和z-index设置为透明和-1，这样图片就不会遮盖内容内其他内容的显示。

小程序代码优化

方案1：删除无用代码（已弃用功能或组件代码）
方案2：按需加载例如第三方js或者ui库使用按需引入的方式
方案3：分包：见小程序开发文档
方案4：【webppack】 splitchunk -- 打包优化

splitChunks: {
            cacheGroups: {
              自定义名称: {
                name: '页面路径',
                minChunks: 2,
                priority: 100,
                test: (module) => {
                  return /pages[\\/]目标文件名称[\\/]/.test(module.resource)
                }
              },
            }

方案5：页面尽可能使用组件的方式编写调用到页面（功能复杂的组件定要这样做，在把功能细分为可变子组件和不可变子组件）
方案6：减少对setdata的连续使用：例如在onscroll回调方法中不要直接是哟个setdata，做一个节流处理

小程序开发小技巧~ 真巧，不间断更新~~~~

开发篇