Taro框架多平台小程序实践之获取睡后收入

文章开始之前，推荐一些别人写的很好的文章！感兴趣的也可以去读一下哦！

今日推荐：前端实现主题换肤功能的几种方案

好事文章链接：https://cloud.tencent.com/developer/article/2466311

学习前端主题换肤方案，各有其特点和适用场景，可以根据具体的项目需求来进行选择和应用

Taro框架多平台小程序实践

　　前言: 随着小程序开发的热度上升，小程序开发框架也层出不穷。但目前每个框架都会绑定一个专属 DSL，如类 React 或者类 Vue，在一个框架内，开发者无法根据团队技术栈自由选择 DSL，同时也无法共享框架本身的生态与工具。之所以选择taro，是因为之前统一内部框架是react。 Taro多端统一开发解决方案

　　这些小程序开发框架最主要的区别是 DSL，这点从 logo 颜色上就可以看出来，除了滴滴的 Chameleon 是自定义 DSL 外，其余的绿色的 logo 是遵循了 Vue 语法（如 mpvue ），蓝色的 logo 是遵循了 React 的语法（如 Taro）。

　　在微信小程序之后，各大厂商纷纷发布了自己的小程序平台，比如：支付宝、百度、头条、QQ等，再加上快应用、网易、360、京东等，小程序的赛道越来越拥挤，开发人员需要适配的小程序平台越来越多，因此，各大小程序开发框架也纷纷进行了多端适配。

Taro

• 多端适配：从一个端到多个端 以及现在比较火的**鸿蒙OS**
• 开发体验：如支持 React Hooks、CSS Modules、Mobx ，到目前为止，vue2、vue3的支持
• 社区共建：如 Taro 论坛、Taro物料市场 等平台，大量的案例合集
• 反向转换：如# 微信小程序转 Taro、Taro转react等

为什么想做小程序

　　2022年有一段时间很焦虑，在口罩时期，不知不觉就三十而立了。怎么快速拥有睡后收入，想花一份时间开发，可以获得持续收益的事情。 刚好朋友是当老师的，每天都要通过学习后台，把学生家长发送全家的行程码、健康码图片一一上传，工作量巨大。于是找到我问，有没有可以把图片拼在一起的工具，然后我就在网上找了一些美图秀秀、可画等等，但是使用后反馈过来的一些问题：功能页面太深，功能太复杂、想在手机上操作等等。然后询问了朋友，当时这个事情所有学校都在做，感觉市场挺大的，于是就有了微信拼图码小程序，随后应要求还上线了QQ小程序，最后通过广告主收益。后续还准备开发小程序实战课程。（当时收了2个小徒弟，算是亦师亦友，相互学习）

taro多端开发实战（QQ、微信、支付宝、抖音、百度）

• 综上所述的需求，于是就是有了拼图小程序，简洁、分享链接直达拼图、操作简单，无需服务器部署，只需要cos储存相关图片资源，简单易上手

拼图代码（目前上线到qq、微信。支付宝、抖音 因需要企业资质问题，未上线）

项目目录结构

├── dist 编译结果目录  

├── config 项目编译配置目录  

| ├── index.js 默认配置  

| ├── dev.js 开发环境配置  

├── src 源码目录  

| ├── common 公共配置目录

| ├── components 页面组建目录

| ├── images 图片资源目录

| ├── mock 页面数据目录

| ├── pages 页面文件目录  

| | └── index index 页面目录  

| | ├── index.js index 页面逻辑  

| | ├── index.css index 页面样式  

| | └── index.config.js index 页面配置  

| ├── utils 公共工具函数目录  

| ├── app.js 项目入口文件  

| ├── app.css 项目总通用样式  

| └── app.config.js 项目入口配置  

├── project.config.json 微信小程序项目配置 project.config.json  

├── project.tt.json 抖音小程序项目配置 project.tt.json  

├── project.qq.json QQ 小程序项目配置 project.qq.json  

├── babel.config.js Babel 配置  

├── tsconfig.json TypeScript 配置  

├── .eslintrc ESLint 配置  

└── package.json

　　一开始的时候，其实也没有想那么多，主要用户还是在微信侧，后续想着反正都用的Taro，为什么不多平台部署呢？一套代码通用的关键是Taro函数，以及一些需要在开发过程中发现一些问题，进行polyfill。因为小程序比较简单，主要功能就是上传上传图片，通过Taro.canvasToTempFilePath生成图片，因此没有遇到什么问题

1. 方案一 兼用的方式写

info: wx?.getSystemInfoSync() || qq?.getSystemInfoSync(),



// 临时处理Taro.nextTick 在安卓手机上不执行问题

const \_this = process.env.TARO\_ENV === 'weapp' ? wx : process.env.TARO\_ENV === 'qq'? qq : Taro;



2. 方案二 使用Taro去调用

import Taro from '@tarojs/taro';



小程序相关sdk调用使用Taro.xxx去调用

微信和QQ小程序的区别

1.产品定义

　　微信小程序：依赖微信生态生存，是一种不需要下载安装即可使用的轻量级应用，已经形成了较为完整的小程序生态，可以实现在小程序生态中的多方触达和互交。QQ小程序：连接年轻用户的新方式，覆盖8亿新生代活跃网民。

2.审核方

　　微信小程序：由小程序团队审核。QQ小程序：由QQ团队审核，大体一样，但是审核标准相对严格。

3.用户体验差异

　　由于微信和QQ的设计风格和交互方式有所不同，因此在同一款小程序中可能会呈现出不同的用户体验。开发者需要根据目标平台的特性来调整界面设计和操作流程，以适应各自的用户需求。

4.流量入口不同

　　微信小程序的入口是非常多的，包括扫码、附近的小程序、公众号、微信好友及社群转发、微信聊天框下拉菜单、发现栏小程序、搜索框等等。用户可以做多种营销方式来引流，比如公众号推文、社群分享、线下门店推广、朋友圈小程序海报等等，而QQ小程序则不具备这些优势，流量入口更少，商家要做营销推广活动也不能像微信小程序这样多样化。

分享一些实际问题

1.推荐官方小程序：微信指数

微信指数是基于微信大数据的移动端指数产品，能反映关键词在微信内的热度变化。 微信指数所反映的热度变化来源于对微信搜索、公众号文章以及朋友圈公开转发文章形成的综合分析。简单说：指数越高，代表这类关键词搜索的用户人数越多，顺着这个规则，我们就可以更加清楚的给小程序起一个好名字。

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/913d018fc5a646679fb91e4ae6389f1f~tplv-k3u1fbpfcp-watermark.image" width = "180" height = "300" alt="top" align=center />

2.给你的小程序起名字

　　人是“万物之灵”，名字自然尤为重要，小程序也一样。 有人说名字就是“符号”，叫什么都行，但名字这个符号可非同一般，要伴随你的一生。 你有什么名字就吸引什么信息，在信息时代你有什么信息就会有什么命运。 老子说：“无名，天地之始；有名，万物之母。”人类的文明史就是从给万物起名开始的。所以你的小程序名字也是一样的道理，微信搜索小程序为什么出来的是别人的小程序？热搜热词

　　热搜热词 顾名思义，蹭热点给自己的小程序起名字。根据实时热点去给自己的小程序起名字。这里可以给大家啰嗦一下，每个平台都有自己的搜索算法，平台推荐算法，实时热点曝光。拿抖音平台举例，最近的热点就是日本前首相安倍的事件调查研究，以及嫌疑犯的生平所以使用的枪械，提取关键词：前首相、安倍、自制枪械等等，与之相关的话题就多了起来，发送相关的视频也会得到平台系统的推荐，推送给更多人看到。再说微博热点前十条也有一大半都是关于安倍事件。触类旁通，大同小异--微信平台也有自己的搜索排名推荐算法。

　　1. 前段时间，‘教育部：9月起，中小学生需学习炒菜炖汤、修理家电、种菜养鸡……’，这期间，微信小程序-搜索关键词：【美食】、【食谱】就是实时热搜热词🔥🔥🔥

　　2. 给微信头像加国旗、加口罩、加状态的，类似工具的小程序都很简单，【头像】 实时热搜约9000万，【口罩】 实时热搜将近2亿。时至今日，搜索量仍在3000万左右。类似的源码也有大佬提供，我会分享到评论区。

　　3. 再举个例子，年终的时候，很多人喜欢立flag，flag编辑器工具，也是很受大家欢迎的。关键词 【flag】。

　　所以取名字，可以结合热点蹭名称，【美女高清壁纸】【头像口罩】【全民食谱】【美食食谱】【网易云热评】【flag神器】【xxx神器】【xxx高清手机壁纸】【xxx头像】 等等，

3.给你的小程序加上热门搜索关键词

• 有利于搜索，类似seo，不知道有没有类似竞价排行

小程序简称

　　小程序的简称在上线后，每个自然年可更改两次，抓住这两次免费更改机会，比如你的小程序名字叫：“西红柿音乐学院线上教育平台”（名字虚构，如侵权马上改）。可以设置的简称很多，根据微信小程序简称设置规则，可以设置“音乐学院”、“线上教育”等，从名称中按顺序截取字符。举例：

　　1、比如你这个名字“西红柿音乐学院线上教育平台”，在疫情期间“线上教育”这个关键字绝对是大流量，你可以把简称设置为“线上教育”

2、再比如随着时间的推移，“西红柿音乐学院”这所院校，发生了某些事儿惊动全国，你可以把简称设置为“西红柿音乐学院”

小程序介绍

　　从微信公众平台->微信搜一搜->数据概括，来查看搜索词数据，然后我们可以根据搜索词来优化我们的介绍，120字内

4.快速粗暴的到达1000UV，大佬可以忽略

　　1. 转发群聊、朋友圈UV只需要点击进入小程序就算一个，拉下脸皮，群聊转发，朋友圈转发，全家参与。我的首批用户就是20多个微信群聊转发来，还让我爸妈也分享朋友圈转发给朋友。

　　2. 做视频+文案 我会把小程序操作做成视频+文案的形式，转发各大平台（微博、小红书、B站、掘金、豆瓣、抖音、西瓜、快手）。

　　3. 互相引流 增加小程序流量入口，和其他朋友的小程序互相调整引流，多方融合，开通微信公众号、视频号增加入口。

　　小程序累计用户突破1000当天，相信每位开发者都很兴奋，迫不及待的想要开通流量主，添加上梦寐以求的微信广告，但是欲速则不达，为了不耽误广告收益，不影响美丽的心情，提前知道这些，是很有必要的。

小程序广告种类：

banner广告（点击计费）、视频广告（曝光计费）、插屏广告（曝光计费）、激励式视频广告（曝光计费）、前置视频广告（曝光计费）、格子广告（点击计费）、封面广告所有广告ecpm （广告千次曝光收益）该值越高 收益越高

5.如何挑选适合的小程序开发--阿拉丁小程序数据

　　小程序排行榜可以看到的信息很多，top榜和成长榜。成长榜可以看看最近火热的板块是那些，不知道做什么，可以学习优秀的小程序。看看手机壁纸、高清头像、成语类型、答题类型能不能做？找自己感兴趣、擅长、能解决痛点到，站在风口的项目下手，多看多想多动手，大家学fei了吗✌️✌️✌️

总结下收获

1. 在开发过程中学习一些产品思维，运营技巧，和不同的人群交流，能得到不同想法。
2. 在口罩时期，通过学校学生家长裂变，自然增长到百万UV，最高PV200多万，单个账号日收益高达5000+
3. 站在风口猪真的能上天

最后分享一个小程序反编译工具

　　有意思的学习工具，通过使用模拟器+反编译工具，学习一些优秀的小程序代码获取微信小程序的代码包，并将其转换为源码工程。可将微信小程序的工程转换为uniapp或者taro多端框架。仅供学习，禁止使用此教程的方法盗取他人的成果获利。

反编译git仓库

ps：目前阿拉丁小程序已经停运，不知道是什么情况 我哭死。。。

下篇准备写小程序-房贷计算器