构建自己的开源项目

微信小程序

项目目录结构

• components 目录：主要用来存放一些自定义组件相关的内容
• libs 目录：主要用来存放项目中依赖的第三方库。例如 jquery、seajs、qrcode、echarts 等。
• models 目录：主要用来封装与后台进行交互的 model 操作类。
• utils 目录：主要用来存放项目开发过程中要使用到的各种工具类，避免重复代码。

过程

1、自定义 tabBar

使用官方小程序示例中的 自定义 tabBar

2、引入字体图标

使用 在线 url

将字体 url 转成 base64 的格式后使用出现问题……

3、API Promise化

使用官方 扩展能力 API Promise化 miniprogram-api-promise 工具

4、封装接口

参考下面文档接合下

// 同时发送异步代码的次数
let ajaxTimes=0;
export const request=(params)=>{
  // 判断 url中是否带有 /my/ 请求的是私有的路径 带上header token
  let header={...params.header};
  if(params.url.includes("/my/")){
    // 拼接header 带上token
    header["Authorization"]=wx.getStorageSync("token");
  }
  ajaxTimes++;
  // 显示加载中 效果
  wx.showLoading({
    title: "加载中",
    mask: true
  });
  // 定义公共的url
  const baseUrl="https://api.zbztb.cn/api/public/v1";
  return new Promise((resolve,reject)=>{
    wx.request({
    ...params,
    header:header,
    url:baseUrl+params.url,
    success:(result)=>{
      resolve(result.data.message);
    },
    fail:(err)=>{
      reject(err);
    },
    complete:()=>{
      ajaxTimes--;
      if(ajaxTimes===0){
        //  关闭正在等待的图标
        wx.hideLoading();
      }
    }
    });
  })
}
// 使用
import { request } from "../../request/index.js";
request({url:"/goods/search",data:this.QueryParams}).then(res=>{
  console.log(res);
})
// 代码来源黑马

强烈推介的几个微信小程序开发小技巧，简单又实用

5、状态管理

用官方 扩展能力 架构扩展中的 mobx-miniprogram

6、开启开发者工具中 “开启上传代码时样式文件自动不全” 功能，这样小程序会自动不全其余一些样式兼容性写法。

7、封装组件库

参考 vant 封装 icon、官方指南中自定义组件

8、分包

9、引入事件管理工具 mitt 来作为时间管理中心，来处理组件、界面传值。

10、开启开发者工具中 “增强编译”，可以使用 async/await。

11、加入简单的防抖和节流

建议

利用场景值做数据统计

在模块里随便更改 exports 的指向会造成未知的错误。推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰地知道两者之间的关系。

// 例如
function sayHello (name) {
  console.log(`Hello ${name}!`)
}
module.exports.sayHello = sayHello

scroll-view
在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中 滚动是无法触发 onPullDownRefresh 的。
若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view，这样也能通过点击顶部状态栏回到页面顶部。

在特殊机型（例如 iphoneX、iphone 11）中，因为取消了物理按键，会出现手机底部区域被手机底部的小黑条遮挡的情况，此时可以使用 padding-bottom: env(safe-area-inset-bottom)来告诉微信进行自动适配。

优化

1. 启动慢主要从优化代码包上下手：

2. • 对静态资源进行优化，将非必要的静态资源文件上传到CDN
   • 对小程序的组件进行依赖分析，过滤掉未使用的组件
   • 对独立性比较强的页面进行独立分包，减少主包下载耗时

3. 请求慢主要从预加载和缓存下手：

4. • 冷启动开启数据预拉取
   • 页面路由切换时提前拉取数据
   • 对数据进行缓存

5. 交互慢需要从发起请求和页面渲染下手：

6. • 保障与用户体验相关的业务请求正常发送
   • 页面分步渲染

---

以上是我对下列视频及文章的归纳和总结

腾讯课堂小程序性能极致优化——独立分包和性能测速上报

腾讯课堂小程序性能极致优化——网络请求优化篇

腾讯课堂小程序性能极致优化——综合篇√