背景 过去一年写了很多小程序，但一直没有系统梳理小程序相关的知识体系。在最近的采访中，我还被问到了一些与小程序有关的问题。这里是一个大概的安排，内容会继续补充。有兴趣的可以先点赞再看，顺便加个关注！

开发技巧定制在很多业务场景中，并没有使用原生小程序。一方面是微信提供的样式过于简单，另一方面可能需要根据用户类别对业务进行不同的展示。

这种官方定制小程序的方法只适合修改样式。

{ "tabBar": { "custom": true, "color": "#000000", "selectedColor": "#000000", "backgroundColor": "#000000", "list": [{ "pagePath": "page/index/index", "text": "首页" }, { "pagePath": "page/my/index", "text": "我的" }] }, "usingComponents": {} }

这种组件化的实现方式适合这样的业务场景：根据不同的用户权限，进行相应的展示。之前做过一个小程序。普通用户登录后会进入商城，对应的页面也与商城相关。如果管理员登录，会显示管理页面，对应管理页面。

1rpx问题有时需要在小程序中定义：1rpx，有时在真机上会不完整，改成：1px即可

为了更好的用户体验，现在很多应用中骨架屏都会显示占位符图片，小程序还提供一键生成骨架屏代码。

下载后图像模糊。有时候我们预览绘制出来的图，看起来很清晰，但是下载到本地还是会模糊。我们可以在下载的时候输出图片的宽高*2。核心代码如下：

wx.canvasToTempFilePath({ x: 0, //指定的画布区域的左上角横坐标 y: 0, //指定的画布区域的左上角纵坐标 width: 200, //指定的画布区域的宽度 height: 260, //指定的画布区域的高度 destWidth: 400, //输出的图片的宽度 指定的画布区域的宽度*2 destHeight: 520, //输出的图片的高度 指定的画布区域的高度*2 canvasId: 'posterCanvas', fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。 quality: 1, success: function (res) { ... } })

小程序动画 写小程序不能避免一些小动画，我们可以用.css来完成。

@import '/animate.wxss'; <view class="animated fadeInLeft"> view>

直播功能目前很多小程序商城都有直播功能。但是，如果从0到1写一个直播，工作量还是很大的。小程序官方还提供了直播组件。优点是开发难度低，可以大大减少开发。循环。对于不太复杂的业务场景来说已经足够了。查看官方文档

配置实时

"plugins": { "live-player-plugin": { "version": "1.0.4", // 注意填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释） "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释） } }

live:function(){ let roomId = [直播房间id] // 房间号 let customParams = { path: 'pages/index/index', pid: 1 } // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节 this.setData({ roomId, customParams: encodeURIComponent(JSON.stringify(customParams)) }) }

创建直播

添加商品

在开发过程中，我们可以封装一些常用的方法微信小程序之使用本地接口开发，这样页面上的调用就会简单很多。我们可以在根目录下创建/.js，封装常用方法。下面是一些常用的方法：

// utils.js //小程序提示语 function wxshowToast(title, icon, time, fn) { !icon?icon='none' !time?time=2000 wx.showToast({ title: String(title), icon: icon, duration: time, success: function() { fn?fn():'' }, fail:function(err){ console.log(err) } }) }; //request请求 // 接口地址 const baseUrl='https://xxxx.com'; function https(method,url,data){ //loading wx.showLoading({ title: '加载中...' }); //设置请求头 var header = { 'Content-Type':'application/json' }; //检查缓存中有没有token var token = wx.getStorageSync('token'); if (token != '') { header.Authorization = token } return new Promise((resolve,reject)=>{ wx.request({ url:baseUrl+url, data: data, header: header, method: method, complete: (res) => { wx.hideLoading() if(res.statusCode==200){ if(res.data.status){ resolve(res.data.data) }else{ wxshowToast(res.data.msg) reject(res.data.data) } }else if (res.statusCode === 401) { //没有登录转跳到登录页面 wx.reLaunch({ url: '/pages/login/index' }) }else{ wxshowToast('请求失败,请稍后重试'); } } }) }) }; //导出方法 module.exports = { wxshowToast, _https:https, baseUrl, }; // 页面中使用 //引入util.js const util=require('../../utils/utils'); // 发送一个请求 util._https('get','/api/login') .then((res)=>{ ... })

性能优化 你应该会发现，有些小程序打开的非常快，而有些则很慢，所以对于用户体验来说，性能优化还是很有必要的。之前也看过大佬的文章，受益匪浅。有兴趣的可以看看京西小程序的高性能搭建。

整体优化

（1）上传代码时压缩（可在开发工具右侧查看）。

(2） 尽量删除无用的代码，避免代码冗余。

(3）把不需要的图片放在服务器上，不要放在代码包里，尽量删除不需要的本地图片。

(4）压缩css文件。

(5）分包预加载，具体使用文档

代码级优化接口合并优化

(1）在业务逻辑中，尽量组合调用

(2）页面渲染相关的数据放在data里面

(3）避免在中更新值。比如我们data中有一个list数组，可以在本地修改数组中的一项。代码如下：

// 接口返回list赋值 this.setData({ list }); //局部更新 this.setData({ 'list[0].name': list[0].name });

首屏优化 目前大部分电商小程序采用骨架屏+首屏分屏渲染。首次进入页面时显示骨架屏，然后显示首屏所需的模块。例如，对于一个电商小程序，首页可以分为：+商品分类+特价商品+推荐商品列表。我们在第一个屏幕上看到的可能只有：+产品分类+特价。获取到数据后，我们先渲染首屏模块，等所有首屏模块都渲染完成后再渲染非首屏模块。

小程序性能检测工具 小程序官方制定了权威的小程序性能数值指标，主要围绕渲染性能、数据量、元素节点数、网络请求延迟等维度进行定义。参考文档：小程序性能优化。

同时，小程序还提供了体验评分工具：面板使用也非常简单。在调试区找到它，点击运行，然后依次打开各个页面，点击“停止”结束测试即可查看成绩和测试报告。快速定义一些问题点，然后进行优化。

这就是我最后总结的所有内容。如果有新的内容，我会随时补充。如果还有其他内容，也可以评论放上来让我补充。最后希望大家可以点赞+关注支持。