2020年,学点微信小程序开发知识吧

330 阅读8分钟
前言

2017年1月9日凌晨,小程序正式上线,瞬间引爆网络之后,各大巨头厂商纷纷竟相布局,支付宝、百度、头条&抖音相继推出旗下的小程序产品,打造产品生态体系。可能再过段时间,当我们再提到小程序时,就不单单指的是微信小程序了。

对这个“无需安装、触手可及、用完即走、无需卸载”的小程序,微信从一开始就对它寄予了无限期望,同时也给创业者们带来了一丝希望。

时隔两年之后,我们又该怎么看待小程序呢?本编文章将作一些分析,给出些许答案供大家参考。

文章的目录结构如下:

image.png

Q:

什么是小程序?

A:

2.webp.jpg

官方解释:小程序是“镶嵌在微信/支付宝/抖音的 App”。

从开发人员角度的理解:就是在微信/支付宝/抖音界面上,添加Icon,只不过Icon是某应用的入口,当用户点击这个Icon之后,页面跳转到这个页面里面操作。

Q:

互联网从业者该如何看待小程序?

A:

这个问题不好回答,因为大多数互联网从业者所在公司没有小程序这块业务,也没有自己开发、运营、学习过小程序相关知识,目前,还是停留在只使用小程序的阶段。只能通过分析,来给出回答。

1对于用户
  • 无需安装,不占内存,在微信内即搜即用,使用成本相对于安装 App 来说降低了很多。

  • 无缝连接微信的账号体系,你甚至不需要单独注册账号即可登录使用。

2对于产品策划者
  • 基于微信的社交关系链和生态系统的产品矩阵,让产品形式的创新有了更进一步的想象空间,当然这取决于微信本身的开放程度。

  • 基于小程序开发成本和性能体验的平衡特点,让产品策划者在设计产品解决方案时多了一种极具性价比的产品解决方案。

3对于产品运营者

绝大部分的 App 都会面临用户获取成本太高、活跃不足和留存难的问题,特别是现在用户需求基本被满足的时代,流量的获取和转化成本越来越高。

由于微信对小程序用完即走的概念,小程序的获客成本和用户留存问题也依然严重。用户需要使用的时候才会点进来,不用的时候不会点击进来。

所以,小程序留给产品运营者的空间真的非常小,用户获取和用户留存更是一大难点。如何做好小程序内容,来持续获取用户使用,也是一大跳转。

4对于开发者

对于开发人员而言,主要是回答:个人有没有必要学习小程序开发呢?从各公司的技术开发人员的JD说明上来看,答案是:很有必要学习一下小程序开发技术!

不过,小程序厂商对开发者比较友好,自己封装了一些组件和API,开发者只需要如何使用就行。

小程序应用场景

在了解其功能和特点后,那么,小程序适用于什么需求场景呢?请看下图:四象限需求层次图

微信小程序的应用场景总结

结论:由于高频、刚需场景市场已经被巨头垄断,所以很多创业者基本会选择在高频次、非刚需的场景切入。

对于高频、非刚需的使用场景,采用的产品形态试情况而定,小程序主要适用于:

  • 偏工具的内容型产品

  • 日常工具类产品

  • 社区类产品(作为导流作用)

  • 游戏类产品(小游戏)

  • 创业者进行 MVP 产品形式的探索

  • 企业定制化产品服务


最后,引用某创业公司老板说的一句话:app 生态已经趋于饱和,低频产品已经没有开发 app 的必要,转而开发微信公众号、小程序将是最佳选择。

小程序开发步骤

在了解小程序相关知识和应用场景之后,那么问题来了:如果公司/个人也想开发一个小程序,该怎么做呢?

这个问题是本文的重点,相信看完之后,大多数有经验的开发人员应该了解怎么开发小程序了,非开发人员也搞懂小程序开发是怎么一回事了。

1注册账号,安装开发工具

用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,点击下面网址:

 https://mp.weixin.qq.com/wxopen/waregister?action=step1 

根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。注册完成之后开始登录。

image.png

注册完登录账号,获取AppID,需要注意的是小程序的账号和公众号账号不一样的,你登录微信公众号的账号显示的是   微信公众号后台   你登录你的小程序账号就是小程序后台。

登录地址:mp.weixin.qq.com

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到这个AppID

image.png

接着,安装工具:

必备:微信开发者工具

其它选择:Visual Studio Code、HBuilder X

image.png

2开发小程序

APPId获取、工具安装好之后,就可以创建项目进行开发了。开发前,你需要必备以下开发知识:

html、css、js等,最好也学习css3、Vue/React前端框架和任何一个可以开发api的语言。

需要明白的是,小程序不是运行在浏览器中的网页,所以小程序中没有BOM和DOM,但小程序提供了类似于html和js的一些操作。采用严格模式,每个标签要有闭合标签,类型XML标签。

具体参考一下,微信官网的开发文档:

developers.weixin.qq.com/miniprogram…

3小程序开发案列

需求:开发一个模仿网易云音乐APP的小程序。

工具:微信开发者工具、VS2019、mysql

开发步骤:

绘制小程序界面

image.png

数据准备,填充到数据库

下载Tampermonkey插件,安装脚本:

greasyfork.org/zh-CN/scrip…

安装好了之后,会在网易云界面添加两个按钮,点击一键免费下载,调到下载页面:

image.png

image.png

image.png

image.png

image.png

为了演示,这里不直接调用网易云的接口,使用自己创建的wepapi接口,并开启CORS跨域访问。

image.png

提供三个访问接口:

image.png

接着打包发布,将API部署到阿里云服务器,并在数据库创建数据库。

image.png

小程序调用API获取数据呈现在页面上,由于只有服务器没有域名等问题,需要勾选设置不校验合法...

image.png

小程序前台调用服务器API,小程序中没有ajax,使用wx.request发起请求。

image.png

最后,在真机上的显示效果如下:

image.png

功能只完成5%,其它的就不展示了。


推荐目前两个小程序开发框架:

1、Taro

2、uni-app

Taro 是由京东凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

uni-app是由Dcloud推出的一套遵循 Vue 语法规范的多端统一开发框架。

这两个框架的最大好处就是:一次开发,多端运行。

如果你的产品想全平台推广,或者你打算多个平台的小程序,那么就是用使用Taro/uni-app框架,开发了一个微信小程序,也就开发了一整套应用,包括微信/支付宝/头条小程序、H5、ReactNative。


有兴趣的开发同学可以去学习一下。

其它碎碎念Q:

小程序会完全替代APP?

A:

不会,小程序实际上是提供了一种新的产品解决方案,微信是在鼓励H5开发,但依旧开放了 App 的接口能力,这说明未来 H5 和 App 并不是‘你死我活’的状态,应该是混合应用的趋势。

对于开发者、产品 / 运营者,要做的应该是正确判断需求场景,然后选择合适的解决方案更好地去服务用户。

而不是一味叫喧 App 将死、开发小程序就足够了这些浮躁的言论。

好了,本次的分享就到这里,如果本文对你有帮助,欢迎点赞,将文章分享到朋友圈。想要get到更多的开发知识,可以微信扫描二维码关注公众号,每周会更新一两篇技术文章。