构建自己的开源项目

微信小程序

项目目录结构

  • 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、封装接口

参考下面文档接合下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 同时发送异步代码的次数
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 来暴露模块接口,除非你已经清晰地知道两者之间的关系。

1
2
3
4
5
// 例如
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. 启动慢主要从优化代码包上下手:

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

    • 冷启动开启数据预拉取
    • 页面路由切换时提前拉取数据
    • 对数据进行缓存
  3. 交互慢需要从发起请求和页面渲染下手:

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

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

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

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

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

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.