微信小程序开发快速入门-小程序之开发前准备(1/5)
发布于 2 年前 作者 houqiang 1776 次浏览 来自 分享

为什么要学习微信小程序?

小程序于微信团队在 2017 年 1 月对外发布的,2017年整年发展的非常艰难。直到2018年跳⼀跳掀起了⼩程序的热潮。而我也正是2018年加入了小程序这个浪潮当中。

在 2018 年的时候,我就开始关注微信小程序。在我看来没有微信小程序的时候,微信用户运营主要在两个部分:

第一,微信群,大家可以一起沟通讨论。

第二,微信公众号,可以沉淀一些优质的内容。

但是这两个工具无法把一些规则系统化,而微信小程序刚好就可以做这一点,比如说我们现在可以看到很多很实用的一些小程序:抽奖助手,小打卡等。它本质上就是把行为程序化,并且跟微信生态融合的很好。所以我非常看好小程序,它弥补了现有微信生态运营的一些短板。

于是我毫不犹豫的转向了小程序。首先我是做了一段时间小程序的开发,然后组建了团队做小程序矩阵。

2022 年是微信小程序上线以来的第六年。在今年的微信公开课 Pro 公开数据得知,微信小程序数量 300 万+(占全网小程序数量 43%),DAU(日均活跃用户数量)4.5 亿,同比增长 32%。活跃小程序稳步增长 41%,有交易的小程序数持续增长 28%。

在我看来学习什么的技术首先要看生态,微信小程序背靠微信生态,微信生态拥有12亿日活,无论是个人开发者还是企业都是不能错过的生态。据我所知有很多创业型公司都是先做微信小程序测试产品模式的MVP(Minimum Viable Product –最简化可实行产品)方案,所以整个市场需求对小程序需求量非常大。

然后我们再来看看微信之父张小龙对小程序的定义:

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无须安装卸载。>

小程序有以下 4 大优势:

  1. 无需安装,使用成本低
  2. 不占内存,环境要求低
  3. 容易传播,裂变效果快
  4. 支持多端,开发成本低

相信看到这里,你肯定已经迫不及待的想要学习,接下来我们本篇会讲解:

  1. 注册小程序管理账号
  2. 了解小程序管理后台
  3. 了解小程序开发工具

PS:本次教程是根据我个⼈⼩程序开发经验制定的快速入门教程。根据⼆⼋理论,20%的功能为重点功能,80%为辅助功能。我会重点讲20%实⽤性功能,80%的辅助功能我会贴官⽅链接

注册小程序管理账号

进入「微信公众平台」点击立即注册。公众平台地址:https://mp.weixin.qq.com/

然后会有四个注册类型,选择小程序进行下一步

输入邮箱,密码,验证码即可注册。邮箱不能是注册过公众号、服务号、企业微信的。

这里有人就问如果邮箱都被使用过了,没有邮箱怎么办?

建议自己去注册QQ邮箱和163邮箱都可以。

如果要注册大量的小程序可以找一些购买邮箱的网站批量购买,市场价格几分到几块钱。

以上所有注册信息填写完毕之后,会收到注册邮件,点击即可填写详细信息。

点击注册链接进去填写信息。

个人账号不支持一键获取手机号、微信支付能力还有服务类目不同。

企业账号注册需要企业营业执照以及法人认证,其他与个人主体信息一致。

个人主体类目:https://developers.weixin.qq.com/miniprogram/product/material/#个人主体小程序开放的服务类目

非个人主体类目:https://developers.weixin.qq.com/miniprogram/product/material/#非个人主体小程序开放的服务类目

同一身份证注册小程序数量上限为5个。

个人小程序可以迁移成为企业小程序,企业小程序不能转成个人小程序。

填写完主体信息登记成功之后,需要补充小程序基础信息。

名字和介绍:

  1. 在注册小程序的时候要想清楚小程序的定位,基于小程序的定位来思考小程序名字。
  2. 最好在取名字的时候带上具体行为的关键词,如果是工具如:签到、打卡、报名。
  3. 可以作用于小程序SEO,好名字决定了用户的来源,这个时候要站在用户的角度取思考用户是如何搜索的。

头像:要醒目,让人一眼就看出来小程序的作用。

类目:决定了小程序的推送模版消息,以及还会影响小程序提交审核(提交小程序的内容要与服务内容相符,否则不予通过),建议先看下自己想做的同类小程序的类目。

查看其他小程序类目方法:

  1. 进入目标小程序,点击右上角三个小点,呼出小程序更多信息菜单
  1. 点击小程序名称,进入小程序介绍页面,点击菜单项的「更多资料」

  1. 这里可以看到更多资料详情,里面有服务类目就是当前小程序类目

当然如果你现在没有想好也没有关系,以上这些信息填写后都还可以修改。填写完以上信息整个注册流程就已经完成了,接下来我们来看下在后台我们需要了解的一些常用模块。

了解小程序管理后台

首页

当你没有发布版本的时候小程序后台首页就是引导你去发布版本,点击「前往发布」进入的是版本管理。这个版本提交就是开发工具上提交过来的,具体后续会在开发工具中介绍。

如果已经发布过,首页就会显示小程序的昨日数据、数据来源、实时访问次数三个数据看板。

昨日数据的数据看板支持灵活编辑,可以把你最关系的数据放在看板上。

这个可以根据当前你对这个小程序定义的指标来进行修改,最多支持同时显示8个数据指标。

说完首页,再来上线会用到的版本管理模块。

版本管理

主要分为四个状态:待提交,审核中,待发布,已发布。

从微信开发工具提交就是「待提交」审核状态可以进行提交审核,这个时候为开发版本。

开发版本如果你想要给其他人体验可以将版本设置为体验版本。

提交完审核后会进入「审核中」的状态,审核时间大概是1-7个工作日,这个时候为审核版本。

如果有快速审核的需求,可以使用加急审核。个人账号一年2次,企业账号一年3次。

审核成功后会进入「待发布」状态,这个时候需要开发者手动发布。

如果审核不通过,可以通过通知中心查看具体原因。通知中心点击页面右上角🔔图标进入。

开发者发布后小程序状态就是为「已发布」状态,这个时候就可以去线上使用该小程序了,这个时候为线上版本。如是⾸次发布,需等待20分钟左右,才可以通过搜索查到⾃⼰的⼩程序。

如果发布的小程序有问题还支持进行小程序「版本回退」。

很多时候我们并不是一个人进行而是多个人进行开发,哪怕我们是一个人开发也需要给其他人进行体验测试。如果有这些需求这个时候我们一定会用到成员管理模块。

成员管理

一共分为三个角色:

管理员:

个人账号管理员只能换自己其他的微信,个人基础信息要一致才能修改。企业账号管理员可以修改成其他人的微信为管理员。修改小程序名称,修改小程序头像,添加项目成员,迁移小程序,注销小程序都需要管理员扫码。

项目成员:

通过微信号添加,最多添加15个成员。用于给一起维护的开发者和运营人员开通,可以分别开通运营者权限、开发者权限、数据分析者权限。项目成员权限包含体验成员权限。

体验成员:

用于体验未上线的小程序版本。在版本管理模块可以把开发版本设置成体验版本,使用体验版本就需要体验权限。

了解完成员管理后,我们再来看看上线后使用频率最高的模块「统计」

统计

里面包含多个维度的统计:使用分析、实时统计、用户画像、自定义分析。这个主要是给运营人员和产品人员分析小程序数据作为后续迭代及优化产品的依据。

后续会在产品和运营板块专门讲解,怎样通过现有的数据看板来做迭代上的功能指导以及自定义分析具体的使用方法和业务场景。

最后再说一个常用模块「设置」

设置

设置模块常用的功能有:

  1. 修改基础信息:名称、简称、介绍、头像、类目。
  2. 下载小程序码:用于上线后的宣发推广。
  3. 暂停服务:用于小程序版本更新或重大bug停止访问。
  4. 小程序迁移:个人只能迁移到企业主体,迁移需要300元迁移费用。
  5. 注销小程序:注销的前提是先小程序暂停服务,注销提交7天后确认信息即可注销。注销后邮件将会释放,可以再次用于微信公众平台的注册。

还有一个非常重要的信息:AppID(小程序ID),小程序开发工具就是通过AppID和后台建立的关联。

以上就是小程序后台管理的常用模块,覆盖了90%的日常需求。后续在开发过程中还会涉及到其他的模块,我会在使用的时候针对性讲解。

了解完常用模块后接下来我们就进行下一步,下载开发工具。下载地址可以通过进入管理后台的开发模块下面的开发工具直接跳转到工具下载页面。

了解小程序开发工具

下载开发工具地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

初学者建议使用「稳定版」,根据自己的操作系统下载对应的版本。下载安装完成后我们打开微信开发者工具进行扫码登录,登录成功后会显示小程序项目管理页面,点击管理页面的+号新建小程序项目。

新建项目:

  • 项目名称:有意义的英文小写,多个词用“-‘符号隔开
  • 目录:选择一个存放源码的地址即可
  • AppID:在小程序管理后台的设置页面可以获得
  • 后端服务:先选择不使用云服务。根据后续课程内容再开通。

创建成功则会进入代码编辑器页面:

一共分为 4 大块:

a.工具栏

b.模拟器

c.编辑器

d.调试器

然后来我会给大家介绍以上除了编辑器之外的 3 大块的内容。编辑器主要是管理代码相关内容,所以会放在后续讲解代码这块重点本次介绍不做过多讲解。

工具栏

先从工具栏从左到右一个一个说起,重点部分会重点介绍。

点击头像可以进行账号切换,旁边有个分别有 模拟器/编辑器/调试器 控制三个区域的显示和隐藏。可视化并不常用,所以可忽略。

然后继续看重点看看编译模式这块。

添加编译模式是非常常用的功能,因为只要一个小程序涉及到多个页面通常就会用到添加编译模式。普通编译模式就是从首页开始,很多时候在调试其他页面的时候需要直接进入该页面就会需要用到添加编译模式,还有就是页面模拟跳转参数需要用到。

  1. 添加编译模式

1.0 模式名称:根据具体模式页面取名,便于识别即可。如:我的页面

1.1 启动⻚⾯:具体页面的全路径

1.2 启动参数:模拟链接带参数

1.3 进⼊场景:模拟各种⼊⼝场景,不同场景会自带场景值

1.4 模拟更新:配合更新代码使⽤,每次发布版本的时候,⽤户的⼩程序代码不会及时更新,会

存在缓存情况,所以为了保守起⻅还是需要加⼊更新代码进⾏强制更新。

1.5 局部编辑:不常用,可忽略。

  1. 通过⼆维码编译

2.0 有时候市场部会有这样的需求,就是需要看不同推⼴渠道来的数据情况,这个时候我们需要

后台做⼀个功能,⽣产带参数的⼆维码,这个就是⽤于测试带参数的⼆维码的。

  1. 通过URL Scheme编译:不常用,可忽略。

编译模式的编译按钮,可以理解为刷新重新编辑。

然后再来看看预览:

第一种,会生成二维码,自己手机扫码也可以发给其他人进行开发版本的测试,但是测试者必须要在小程序管理的成员管理后台进行授权「开发者权限」。这个⼆维码有时效性,如果想要没有实效性的就发体验版本的⼆维码。如何生成体验版本二维码?后续会提到。

第二种,自动预览,这种适合自己一个人开发,无需扫码,直接可以选择手机编译还是电脑编译。只要登录了这个开发者账号的微信即可,非常方便。

接下来就是真机调试,也是两种模式和预览一样。区别就是如果就是一个可以在调试器里进行调试一个只是预览效果。主要应用场景是有些少数的问题在模拟器上无法复现,就用真机调试,大部分为适配兼容问题。

下一个清缓存,用于清除各种缓存状态,来调试产品在不同缓存状态下的显示是否正常,通常产品设计都会针对不同状态显示不同的提示/页面。

最后再来看看工具栏右侧的三个小按钮

上传:把现在的代码上传到管理后台,需填写版本号和备注点击上传即可。

上传成功后可以在管理后台的版本管理看到刚刚提交的版本,还可以点击最右边下拉按钮进行体验本本设置,这样就可以获得体验版本的二维码,这个二维码永久有效。

版本管理:其实就是生成一个Git仓库管理代码,大部分公司或个人都有自己代码管理平台,所以这里就不详细讲解了。

详情:可以看基本信息,本地设置,项目配置。

在这里需要注意的很多开发者喜欢在开发的时候勾选不校验合法域名这个选项。

通常在开发初期,都是通过连接本地ip测试或普通域名,所以会选择勾选才能访问。上线前需要配置https域名才⾏,否则会导致影响线上接口调用。(如果是云开发就无需配置)

接口配置需要在:管理后台-》开发-》开发管理-》开发设置-》服务器域名,进行配置。

配置成功后可以在项目配置里面看到具体配置域名。

好的,工具栏就讲解完毕。

模拟器

最常用的就是切换各种机型,然后看小程序布局适配情况。

模拟器底部还可以查看当前页面路径/页面参数/场景值。点击路径编辑器会定位到具体的页面js代码,除此之外还可以复制代码路径/页面参数,便于添加到编译模式配置中。

调试器

调试⼯具分为 13 个功能模块:Wxml、AppData、Console、Storage、Sources、Network、Sensor、Memory、Security、Mock、Audits、Trace、Vulnerability。

Wxml:查看页面布局以及样式并且支持修改实时预览。

AppData:查看在AppData中的数据并且支持修改实时预览。

Console:查看业务与系统日志信息。

Storage:管理本地缓存信息。

Sources:用于调试页面断点。

Network:用于监控接口请求数据。

Sensor:模拟地理位置与重力感应。

Memory:内存分析工具。

Security:查看页面整体的安全性。

Mock:模拟 API 的调用结果。

Audits:小程序体验评分。

Trace:性能分析工具。

Vulnerability:接口安全扫描。

相信大家看到这里有点蒙蔽,这个功能模块有点多。大家不用担心常用的模块只有5个:Wxml、AppData、Console、Storage、Network,后续会在实际场景中跟大家详细讲解。

最后

今天虽然还没有接触到代码层,但是想要高效编码前期准备少不了。建议有时间可以学习下微信开发工具的快捷键使用。

快捷键操作文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/shortcut.html

下一章节内容:学习小程序项目结构以及小程序需要的前端常用基础技术。

1 回复

太棒了,期待下一章节

回到顶部