零基础,如何入门并开发出一个微信小程序?

/ 2021-01-03 / 深圳网站建设 / 技术分享

  我之前没有学过编程,下面的回答侧重于微信的实际操作方法,肯定适合零基础的人,高手们别笑话。微信官方的文档确实很重要,随时都要用,但身为小白,先动手、做起来、做出来更首要。没有编程基础,上来就以学文档学代码为主,太抽象太枯燥了,很容易把自己吓跑的。

  本人情况:在一家卖酒的店里打工,平时比较闲,想为自己多找条出路,都说IT行业挣钱多,自己也比较感兴趣,加上微信小程序比较火,就从小程序开发先入手搞起。

  下面是我自己做的简要过程(基于牛刀云举例,包括制作、提交审核、发布、下载小程序码等,总共有13步):

1. 小程序原型设计

   开发前,最好先做个原型,把自己的需求理顺。我用的工具为Axure, 下载的是一个免费版,功能不全,但自己梳理想法足够了。

2. 注册一个开发工具账号

   现在微信小程序开发工具大多都是纯线上版本,无需下载;并且,打开注册页后一般都可以用微信扫码即可完成注册,非常简便。

零基础,如何入门并开发出一个微信小程序?(图1)

  需要补充说明下:想开发微信小程序,微信官方的开发工具肯定是要用的,但是对于没有编程基础的人来说,这个官方工具只能做做最后的发布。最复杂的开发制作环节,咱这种初级人员玩不转。所以像我这样的菜鸟群体,制作时得依靠市面上第三方工具。有很多,各有特色;当然,工具固然重要,但背后思路方法更为本质。

3. 选择模板

  在模板市场中,选择跟自己需求最为接近的模板,点击“使用”,即可进入开发制作台,开始小程序的正式制作。开发微信小程序,早期最好基于现成模板就行搭建,在使用过程中再逐步调整,在后期越来越熟悉后,就可以尝试进行深度个性化开发。

零基础,如何入门并开发出一个微信小程序?(图2)

4.对模板进行修改、开发

  选好模板并“使用”后,在制作台中央,模板以及模板的各个组成部分就会可视化的展现出来了。选中希望修改的模块,在右侧对基础属性、样式和触发条件(什么情况下该模块开始工作)等进行设置。如果需要增加一些新功能模块,可以在制作台左侧找到相应的模块(牛刀云称为组件),然后直接拖放到屏幕中央的小程序界面里,再回到右侧做做样式设置,就能完成一个基本模块的开发。

零基础,如何入门并开发出一个微信小程序?(图3)

  小程序的前端、后台服务,都可以参考上面的方法进行开发制作,具体可以进入“高级”标签页详细查看。

  如果模块拖拽的方式觉得不过瘾,想更彻底的掌控小程序开发细节,也可以切换到IDE模式:

零基础,如何入门并开发出一个微信小程序?(图4)

  牛刀云的IDE模式,支持用javascript、html5和css语言对微信小程序进行编程。因为代码编写我暂时还不会,介绍不上来,等过段时间学下这几个语言,再补充点代码操作的案例上来。

  开发制作操作完成后,将进入配置、发布环节。

5. 注册并配置微信小程序账号信息

  首次发布小程序,需要先进行小程序注册,获得小程序账号的appid和appsecret。

  然后再回到所使用的开发制作工具(牛刀云)里完成小程序账号信息配置。在牛刀云制作台导航栏上选"高级"——>再在屏幕左上方选“管理后台”——>左侧功能树列表里选“微信配置”:

零基础,如何入门并开发出一个微信小程序?(图5)

6. 为微信小程序获取并配置上服务器域名

  小程序正式发布前需要进行服务器域名配置。有服务器域名微信小程序才能正常工作。

  在牛刀云制作台的“发布”页面中,单击“第三步 导入微信开发者工具”按钮,显示出发布版本的服务器域名:

零基础,如何入门并开发出一个微信小程序?(图6)为微信小程序获取服务器域名信息

  然后,在小程序官网登录小程序账号,单击首页中的“开发页面”按钮,打开开发页面,向下滚动,即可看到服务器域名的配置。注意服务器域名在一个月内只能修改5次。

零基础,如何入门并开发出一个微信小程序?(图7)登录小程序账号,配置服务器域名信息

7. 下载安装微信开发者工具

  下载 · 微信官方的小程序开发工具(即所谓的"微信开发者工具")

8. 下载制作好的微信小程序包

  点击牛刀云制作台右上角的“发布”按钮,进入“发布”页面,单击页面中的“第二步 下载小程序”按钮,页面中显示“正在生成微信小程序,请稍等…”,使用浏览器的下载功能,下载步骤4中制作好的微信小程序包:

零基础,如何入门并开发出一个微信小程序?(图8)

9. 在微信开发者工具里创建一个新项目

  打开微信开发者工具。在微信开发者工具中新建一个项目,输入小程序账号的appid、项目名称、选择项目目录,为导入制作好的微信小程序包做准备:

零基础,如何入门并开发出一个微信小程序?(图9)

10. 上传微信小程序包到微信开发者工具

  在微信开发者工具中,单击“上传”按钮,上传步骤8导出的小程序包。上传后,因为还未审核,所以都叫"开发版本"。

零基础,如何入门并开发出一个微信小程序?(图10)

   上传后,登录微信公众平台|小程序,在“开发管理”中可以看到刚上传的开发版本。

11. 提交开发版本进行审核

  将开发版本提交审核,审核通过后,才能提交发布,提交审核的方法是:单击“开发版本”右侧的“提交审核”按钮,打开“提交审核相关须知”,按向导完成提交审核流程。

零基础,如何入门并开发出一个微信小程序?(图11)开始进入提交审核的向导

  提交审核后,登录微信公众平台|小程序,在"开发管理"页面中的审核版本中会显示“审核中”。等待审核结果。

12. 正式发布微信小程序

  审核通过后,审核版本中显示“审核通过,待发布”,单击审核版本右侧的“提交发布”按钮,小程序将正式发布到线上提供服务。

零基础,如何入门并开发出一个微信小程序?(图12)

  页面,

13. 下载微信小程序码

  小程序提供了小程序码,用于扫描后打开小程序。登录微信公众平台|小程序,在设置页面中下载小程序码,单击“下载更多尺寸”按钮,打开更多尺寸对话框,提供多种颜色和尺寸的小程序码用于下载。

零基础,如何入门并开发出一个微信小程序?(图13)

附、最后贴上一份开发成果图

零基础,如何入门并开发出一个微信小程序?(图14)

  再就题主的问题补充说一下:我刚开始甚至连HTML5、CSS都没听说过,更别说js(javascript)了。后来在制作过程中,我并没有满足于拖拉放,而是一边图形化搭建着,一边注意经常切换到代码状态琢磨琢磨,现在虽然还不能自己独立写代码,但基本上能读懂个大概了,还能做做简单代码修改。当然,一个重要原因是,正好牛刀云的可视化模式与代码模式来回对应起来确实比较方便、省事。否则我也没有勇气去研究代码。