分享互联网的有趣知识~

在日常业务中我们可能会涉及到图片上传功能，现代影像设备大多数的照片都是几MB，甚至几十MB大小，大文件的上传会导致上传进度缓慢、占用云存储空间。所以，我们会根据需求来做图片压缩，将过大的图片文件压缩到指定大小内。

移动端设备中，难免会涉及到数据的可视化展示、数据统计等等，本篇主要讲解原生微信小程序中嵌入echarts并进行动态渲染，实现数据可视化功能。

文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套相应的管理接口。通过 wx.getFileSystemManager() 可以获取到全局唯一的文件系统管理器，所有文件系统的管理操作通过 FileSystemManager 来调用。

密码是用户最重要的数据，也是系统最需要保护的数据，我们在登录的时候需要用账号密码请求登录接口，如果用户勾选记住密码，那么下一次登录时，我们需要将账号密码回填到输入框，用户可以直接登录系统。

由于我们在小程序上涉及到数据采集业务，需要经常使用表单，微信小程序的表单使用起来非常麻烦，数据和表单是分离的，每个输入框都需要做数据处理才能实现响应式数据，所以我开发了dc-vant-form，针对原生微信小程序+vant组件构建的自定义表单，开发者可以通过表单配置项来快速生成表单。

有时候我们需要通过弹窗去处理表单数据，在原生微信小程序配合vant组件中有多种方式实现，其中UI美观度最高的就是通过van-dialog嵌套表单实现。

由于用户隐私保护的政策执行，我们在调用涉及到用户隐私的API时，未更新用户隐私保护协议是无法直接调用的，小程序会默认判断是否更新用户隐私保护，并根据用户隐私保护中的协议来判断是否可以调用对应的API，如开发者调用的API在用户保护协议中未声明，小程序则会默认禁用该API。

小程序搭建项目的过程中，登录是第一步，本文详细描述了微信小程序的登录流程，以及实现方法，大家可以根据项目实际需求做自由调整。

微信小程序的全局弹窗以及全局实例，可以通过弹窗+实例实现全局弹窗提醒以及参数传递和状态管理。

配置项目的请求地址，根据当前项目的版本状态来动态匹配请求地址，以及实现请求日志、token过期处理、账户封禁处理、服务器错误处理、响应成功处理

优惠券的整体流程、优惠券的发放、选择以及金额计算，用户在商城、商品、支付页的优惠券应该走怎样的流程，以及最后支付成功和失败后优惠券该如何处理。

给button设置open-type="chooseAvatar"，来使bindchooseavatar方法生效，在bindchooseavatar指定的函数中获取用户的头像信息

微信小程序分类菜单激活状态跟随列表滚动自动切换，这里主要用到微信小程序提供的获取页面节点信息实现，组件用的是微信小程序的逻辑就是获取右侧盒子的节点信息，获取右侧子分类的节点信息，当子分类滑动到顶部的之后，则切换左侧分类状态，而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下，同样激活左侧分类状态。

微信小程序wx.navigateTo跳转参数大小超出限制问题

在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。

这里主要用到闭包，将函数内的值保存下来，下次点击的时候进入判断，如果定时器启动了，则清除定时器，直到最后一次启动定时器，也就是说，在规定的时间内只会触发最后一次定时器，从而达到防抖效果。

关于抽奖，一般都会涉及到盲盒抽奖，记录关于盲盒抽奖的流程。

当我们程序太大的时候，打开小程序就会比较慢，此处就需要用到分包加载，按照模块划分不同的包，让用户在需要的时候才加载对用的模块，也就是用户在进入某些页面的时候才下载该页面的资源，提高小程序的打开速度，以及首次加载资源的速度。比如在这里要新建一个积分专区，那么主包内只需要新建一个对应的文件夹，这个是tabbar文件，必备，进入积分专区后，在专区内跳转的页面全都由子包完成。小程序在打开的时候会加载主包内的内容，如果所有文件都写在主包，那么打开小程序的时候会加载大量资源，导致小程序打开缓慢。解决方法就是分包加载。

iconfont这个前缀不是固定的，根据icon名字来，icon的前缀为my-icon-xxxx，那么前缀就是 my-icon。新建一个view，在上面加一个class，复制icon名字上去即可，注意格式，格式为iconfont icon名。没有前缀或者设置了前缀，一般都是使用iconfont，根据项目视情况而定，这里以my-icon举例。my-icon my-icon-fontxxx

微信小程序在页面中调用函数，数字转中文，wxs使用

wxs可以直接卸载wxml页面中，并且在对应的位置调用，比如在{{ xxx.xxx() }}调用wxs的函数注意var getMax 这个位置只能使用var

微信小程序的组件封装和组件传值，以及组件使用的问题点规避。

vue、uniapp、微信小程序在class上添加判断的语法

微信小程序自定义导航栏机型适配--底部Tabbar--view高度

微信小程序在使用vant组件van-nav-bar导航栏的时候出现的边框bug问题。此处会有一条边线，原因是添加了。加上这个属性就可以解决。

一般情况下，支付流程是这样的：商品页选择商品 ——> 提交商品订单（跳转到支付页） ——> 确认收货地址 ——> 确认提交 ——> 支付 ——> 支付成功。

微信小程序的转发功能，参考官方文档，使用的buttom的open-type功能，下面是转发功能的具体实现。

在做收货地址的时候，通常会让用户填写或者打开地图选择收获地址，此时就需要用到微信提供的地址API，在使用地址API的时候需要注册对应的API，而且地址API会经常调整，需要关注官方公告，下面就是关于地址API的使用。

官方文档有说明，将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。1、可能是布局样式有冲突 推测可能是flex 布局。编译之后样式就会出现，这是第一种方法。构建npm包后重新加载，样式也会出现。2、app.json中取消懒加载。

跳转TabBar页面，一般使用wx.switchTab跳转，跳转TabBar常规的带参方式是不行的，官方文档已有说明。非TabBar页面的跳转通常使用wx.navigateTo来跳转页面

原生微信小程序封装request

原生微信小程序的一些注意点。