Hi，我是TyCoding
在前两天我发布了一篇文章：我开发了一款春节小程序 ，在掘金了收到了大量的流量关注。
如果你想看一下小程序效果，地址在这里：
有很多朋友咨询关于小程序开发、审核的问题，这里给大家分享一些经验，希望能帮助到想要开发小程序中的朋友。
前言
如果你想整体了解小程序的开发准备流程，建议你先阅读：我开发了一款春节小程序
在这篇文章中我默认你已经对小程序开发和上架有一定了解。
踩过的坑
我们先了解一下作为一个开发人员，小程序前期开发中的一些技巧。
技术选型
如果你和我一样是从零开发，首先建议你先考虑好技术选型，其实无非就是确定好JS框架和UI框架。 JS框架我只讨论两种：
-
Uni-app：支持Vue3、TS，如果你仅仅只写小程序端，我觉得和原生区别不大，最多有一些Vue的双向绑定特性比原生稍微简单一丢丢（原生需要
this.setData手动更新） -
原生语法：只需要翻阅微信文档即可，微信的坑Uniapp一样有，微信没有的坑Uniapp不一定没有。
UI框架非常多，但是我还是推荐大家选用一些Star多更新快的，很多小程序UI框架都是弃更几年了：
-
vant：https://github.com/youzan/vant-weapp
-
lin-ui：https://github.com/TaleLin/lin-ui
-
we-ui：https://github.com/Tencent/weui-wxss（千万别用）
-
iview：https://github.com/TalkingData/iview-weapp
-
taro-ui： https://github.com/NervJS/taro-ui
-
color-ui：https://github.com/weilanwl/coloruicss
-
......
大家可以根据自己的审美选择喜欢的UI。其次就是你应该考虑你可能使用到的UI组件，比如说：
-
图片裁剪组件
-
日历组件
-
上传组件
-
瀑布流组件
-
轮播图组件
-
......
如果你一定会用到某些组件，你可以选择一个UI丰富的
我的建议
如果你是从零开发小程序，我建议你首先去Github找一个小程序模版项目帮助你搭建基础开发环境，至少应该包括：
-
Uni-app：使用uni-cli模式，不要用HbuildX这种垃圾编辑器
-
Vue3：比vue2使用更简洁
-
TS：强类型比JS更容易追踪错误
-
UnoCSS：和Tailwind一样，用class定义css，一定要有，能大量减轻你写CSS的成本
这里我推荐一个开源项目（我是后来才看到的）：https://github.com/antfu/vitesse-lite
开发技巧
Tabbar
使用原生Tabbar而不是自定义Tabbar
其实写过小程序的都知道，小程序的一个大坑：自定义tabbar切换页面闪动。
所以我建议你使用原生Tabbar而不是自定义Tabbar，当然如果你非要搞一个有个性的tabbar。闪屏并不是没有解决方案，如果你想研究一下，你可以找微信开发者工具里面，给的一些示例项目，里面很多自定义tabbar的案例，会有相关的解决办法。
之前我也是看的案例，确实有一种技巧能避免页面闪动，具体代码就写了。
图片资源
将图片资源放到微信公众号后台的
素材管理，避免请求我们自己服务器的流量
如果你同时有公众号，我建议你吧所有小程序中的图片资源都放到微信公众平台。我们知道小程序会限制包体积大小，如果你需要大量的UI素材，并不建议你在本地加载。
Uniapp会自动将40kb的图片编译时转成base64，如果体积再大，就无法转换并且不能用url('./x.png')方式引入，要么你手动转换成base64要么你就用URL地址加载。
在微信公众号后台你可以轻松获取图片地址：
得到一个地址https://mmbiz.qpic.cn/xxx ，这样所有的资源都是从腾讯的服务器加载，避免了占用我们服务器流量。
如果你想要无损压缩图片，我推荐来自谷歌的无损压缩神器：https://squoosh.app/
Tips：可以在pages.json配置usingComponents，定义用到的UI组件，如果没用到就不要引入，避免打包体积大。
页面高度Height
建议在
App.vue中<style>增加全局的height: 100vh
height:100vh表示页面高度充满整个屏幕，这在需要滚动布局时（或者适配小尺寸屏幕）非常有用。
页面滚动
建议所有页面都在顶层用
<scroll-view :scroll-top="0" :throttle="false" scroll-y="true">包裹
scroll-view是微信小程序特有的标签用于实现一个滚动布局的div。为什么建议每个页面都用：
-
适应不同尺寸手机屏幕：在长屏中不需要滚动，在小尺寸屏幕可能就需要了
-
方便增加广告组件，如果你需要增加广告组件，高度大概率要超过屏幕高度，这是竖向滚动就非常需要了
Tips： 小程序默认页面可滚动，但是在IOS端小程序会有一个上下拉动的效果，如果想避免就得用"disableScroll": true，如果用了它就必须得用scroll-view
滚动加载
一般移动端使用滚动加载代替Web的分页加载方式，其实道理是一样的，但是uni有一个特别大的坑：页面滚动到底部时会多次触发@scrolltolower监听事件，导致你发送多次分页请求。
解决方案：在<scroll-view>中增加:throttle="false"配置即可避免。
请求封装
和Web前端项目一样，我建议你在小程序中封装一个http.ts组件用于转发全局请求，你可以在http.ts中增加请求时的loading弹窗，以及增加错误的全局拦截器和弹窗提醒。 我这里有一个简单的函数：
/**
* 封装请求
*/
function fetch(options: any) {
uni.showLoading({
title: '加载中...',
mask: true,
});
return new Promise((resolve, reject) => {
try {
uni.request({
url: baseUrl + options.url,
data: options.data,
header: getHeader(options.url),
method: options.method,
success: function (res: any) {
uni.hideLoading();
if (res.statusCode == 200) {
resolve(res.data);
} else {
uni.showToast({
title: res.errMsg,
mask: true,
icon: 'none',
duration: 3000,
});
throw new Error(res.errMsg);
}
},
fail: function (err: any) {
console.log('fail', err);
uni.hideLoading();
uni.showToast({
title: '接口调用失败！',
icon: 'none',
duration: 3000,
});
throw new Error(err);
},
});
} catch (err) {
uni.hideLoading();
console.log('err', err);
}
}).catch((err) => {
console.log('err', err);
});
}
/**
* POST 请求
*/
export function post(url: any, params: any) {
const option = {
url: url,
data: params,
method: 'POST',
};
return fetch(option);
}
/**
* GET请求
*/
export function get(url: any, params: any) {
const option = {
url: url,
data: params,
method: 'GET',
};
return fetch(option);
}
请求加密
如果你想避免有人通过抓包拿到小程序数据，你可以使用AES加密，虽然这种加密对于H5没用，但小程序毕竟看不到源码，这种简单的加密方式还是很有效果的。
加密的案例我再后续文章分享。
获取用户头像
在以前小程序有一个专门的接口可以获取到头像、名称等数据，现在越来越严格，获取头像和名称接口分开了，并且获取的头像非常不清晰。
<button open-type="chooseAvatar" @chooseavatar="onGetAvatar"></button>
此回调必须放在<button>组件上，写在<view>组件上是没用的。
另外 获取到的头像是一个临时地址：http://tmp/xxx，此地址只能在微信开发者工具中通过控制台Console面板点击打开预览，在其他地方都没法预览此链接。
页面分享
大家应该知道小程序点击右上角三个小圆点，会弹出分享页面，但是有的页面是不可分享的，原因在于此页面的代码中有没有设置分享监听回调函数：
onShareAppMessage(() => {
return {};
});
onShareTimeline(() => {
return {};
});
增加了才有，否则会显示如下：
切记： 一旦有此分享，就意味着此小程序有了分享属性。（这就是为什么审核时说个人小程序不能有社交分享属性）
海报分享
截屏组件一直是个坑，我没找到可用的组件，但是有一个海报组件目前用起来还可以：
https://github.com/Kujiale-Mobile/Painter
此项目最大的好处是提供了一个可视化页面配置海报布局JSON： https://lingxiaoyi.github.io/painter-custom-poster/
过审技巧
小程序备案时候建议你所有的操作同步进行，避免浪费时间：
-
域名备案
-
小程序备案
-
小程序认证
-
SSL配置
功能设计方面
你在设计小程序初期，就要考虑到哪些数据应该从后端获取，哪些是可以直接写死在小程序代码里的。 你应该遵循一个原则：尽量避免小程序端代码变动
所以你在设计数据库、交互逻辑时候就要想清楚如何避免这些问题
涉及AI制作功能？
你可能会收到这种驳回申请，但是如果你的代码确定没有涉及，你就直接对结果提出抗议，说明你的代码中没有涉及AI功能。 一般再提交一次就能通过。
涉及社交分享功能？
移除此功能的页面中分享相关的代码，包括微信的onShareAppMessage和onShareTimeline事件。
也就是说，你可以生成图片或者文字，但是把分享功能去掉即可过审。
UI设计
我感觉小程序偏重的是UI体验，而不是重功能，因此好的UI设计能带来更好的用户体验。这里我推荐我使用的几个UI设计工具：
-
Sketch
-
Figma
-
Pixso（这个是国内的）
举个例子：如果你实在不知道页面该怎么布局，以及文字颜色、背景色、卡片布局该怎么设计，你可以去社区搜索一些免费的APP UI库，直接拷贝对应的颜色，参考对象的布局风格即可：
End
到此为止，我遇到的普遍性比较坑的问题基本就是这些了，大家可以围观我的小程序看实际效果：
最后，欢迎大家关注我的公众号：程序员涂陌 。我是一个Java全栈开发者，定期推送优质文章：
合作和联系
-
博客：https://tycoding.cn
-
Github：https://github.com/tycoding
-
Email：tycoding@sina.com
-
微信公众号：程序员涂陌
-
小程序：龙年新年祝福
推荐阅读
9557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
