微信小程序从注册账号到上架(图文详解)-创新互联

前言

专注于为中小企业提供网站制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业饶阳免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了千余家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

自从微信小程序功能发布后,我就一直关注着小程序的动向,然而限于学业繁忙,总是没有太多的时间去学习。大二逐渐学习了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"
}

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:微信小程序从注册账号到上架(图文详解)-创新互联
标题链接:http://cdiso.cn/article/dgoocd.html

其他资讯