微信小程序从注册账号到上架(图文详解)

自从微信小程序功能发布后,我就一直关注着小程序的动向,然而限于学业繁忙,总是没有太多的时间去学习。大二逐渐学习了Vuejs,被其简洁的设计所吸引,后来看了看小程序的开发文档,发现这么的相似?可能前端的发展趋势就是这样的吧,各个框架都趋向于相似的优秀的设计。

大三逐渐学习了Go语言,为了练习Go语言,同时也将自己几年来积累的东西聚合在一起,于是开发了微信小程序:We中南(可以去微信搜索,虽然现在毕业已经不打算维护了),其聚合了中南大学校内常见的信息查询功能,如:成绩课表查询、校车校历查询等项目已经在我的Github开源:前端后端

We中南、SCI期刊IF查询

微信小程序从注册账号到上架(图文详解)

今年暑假的某天突然心血来潮,看了下We中南的数据统计,发现还是有人用的,在没有推广的情况下居然增加了好几百的访问量(突然的感动),同时发现小程序支持云函数开发了,也就是说对于小型的小程序不必使用后端服务器,直接使用其提供的nodejs环境进行开发。

经过这些天的摸索,我想把自己从小程序注册到上架的全过程分享出来,供准备学习小程序的同学参考。

准备工作

1. 注册微信小程序账号

点击立马注册微信小程序账号。点进去后会看到如下界面,选择注册类型时要选择微信小程序。

注册界面

微信小程序从注册账号到上架(图文详解)

接着填写相关的信息即可完成注册。

注册界面-填写信息

微信小程序从注册账号到上架(图文详解)

在完成注册后,切换到开发->开发设置,可以查看开发者ID。

AppID

微信小程序从注册账号到上架(图文详解)

2. 下载开发者工具,新建项目

进入传送门,下载安装最新版的开发者工具。使用开发者工具,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

关于IDE使用方法的界面,可以详细参考官方文档

接着打开开发者工具,修改项目名称,填入上面说的AppID,后端服务选择小程序云开发。

新建小程序项目

微信小程序从注册账号到上架(图文详解)

新建项目后我们可以看到,IDE已经帮我们新建了一个包含云函数开发的小程序模板,还提供了一些功能测试界面。
此时我们并没有开通云开发,需要点击IDE左上角的“云开发”,然后选择开通云服务。

IDE主界面

微信小程序从注册账号到上架(图文详解)

开发小程序

1. 关于项目文件结构的介绍

项目结构

微信小程序从注册账号到上架(图文详解)

项目分为两个子文件夹,一个为cloudfunctions,里面包含小程序的云函数,一个子文件夹包含一个云函数;另一个为miniprogram,是小程序的前端文件夹,没有固定的文件夹格式,完全可以通过对app.json进行修改定制自己的文件夹。具体文件的介绍可以参考官方文档

2. 修改小程序信息

打开miniprogram文件夹下的app.json,其定义了小程序的基本信息。
下面是我的小程序的app.json,我将示例里无关的页面都删除了,添加了index主界面和detail详情页。
关于示例项目的修改:可以直接将pages目录下除index外的页面都删除,将style、images文件夹下的文件都删除。

{ "pages": [ "pages/index/index", "pages/detail/index" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "SCI IF期刊影响因子查询2019", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json" }

3. 新建云函数!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/167b90a3e9153544d5071f1cf342a9f2.html