小程序开发、过审技巧？看这里

Hi，我是TyCoding

在前两天我发布了一篇文章：我开发了一款春节小程序 ，在掘金了收到了大量的流量关注。

如果你想看一下小程序效果，地址在这里：

有很多朋友咨询关于小程序开发、审核的问题，这里给大家分享一些经验，希望能帮助到想要开发小程序中的朋友。

前言

如果你想整体了解小程序的开发准备流程，建议你先阅读：我开发了一款春节小程序

在这篇文章中我默认你已经对小程序开发和上架有一定了解。

踩过的坑

我们先了解一下作为一个开发人员，小程序前期开发中的一些技巧。

技术选型

如果你和我一样是从零开发，首先建议你先考虑好技术选型，其实无非就是确定好JS框架和UI框架。 JS框架我只讨论两种：

1. Uni-app：支持Vue3、TS，如果你仅仅只写小程序端，我觉得和原生区别不大，最多有一些Vue的双向绑定特性比原生稍微简单一丢丢（原生需要this.setData手动更新）

2. 原生语法：只需要翻阅微信文档即可，微信的坑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找一个小程序模版项目帮助你搭建基础开发环境，至少应该包括：

1. Uni-app：使用uni-cli模式，不要用HbuildX这种垃圾编辑器

2. Vue3：比vue2使用更简洁

3. TS：强类型比JS更容易追踪错误

4. 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。为什么建议每个页面都用：

1. 适应不同尺寸手机屏幕：在长屏中不需要滚动，在小尺寸屏幕可能就需要了

2. 方便增加广告组件，如果你需要增加广告组件，高度大概率要超过屏幕高度，这是竖向滚动就非常需要了

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设计工具：

1. Sketch

2. Figma

3. Pixso（这个是国内的）

举个例子：如果你实在不知道页面该怎么布局，以及文字颜色、背景色、卡片布局该怎么设计，你可以去社区搜索一些免费的APP UI库，直接拷贝对应的颜色，参考对象的布局风格即可：

End

到此为止，我遇到的普遍性比较坑的问题基本就是这些了，大家可以围观我的小程序看实际效果：

最后，欢迎大家关注我的公众号：程序员涂陌 。我是一个Java全栈开发者，定期推送优质文章：

合作和联系

• 博客：https://tycoding.cn

• Github：https://github.com/tycoding

• Email：tycoding@sina.com

• 微信公众号：程序员涂陌

• 小程序：龙年新年祝福

---

推荐阅读

• 我开发了一款春节小程序

• 龙年专属微信红包封面

• 教你怎么白嫖ChatGPT4&DALLE3文生图