应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

TNK:微信小程序开发尝鲜

发布时间:2024-01-01 00:00 浏览次数:38

微信小程序面世以来受的高度关注颇多,直至最近我才动手尝试展开了小程序的研发,总体上感觉还是极好的,有一点不适应环境的就是必须彻底摆脱Web APP研发对DOM的操作方式。在这里我就把我就是如何利用API研发微信小程序的过程译成教程,教导大家快速上手体验一次微信小程序的研发。


在已经开始之前我们先来看下成品的效果图


准备工作工作


我们先确认想研发一款什么样的小程序,首先必须合乎「大」,因为我们这次就是必须体验小程序的研发,所以尽量不要弄得太繁杂;其次就是「慢」,小程序里须要的数据啊、资源啊,最出色就是非常简单就有的,自己写下个API什么的这就太耗时了,就不叫做快速初学者了。


所以呢,如果能够调用非常简单的API那就是极好的,经过一番挑选出,我挑选了生成数据的 历史上的今天 这个API,调用这个API获取数据,我们只要搞2个页面就可以全然展现出了,又「大」又「慢」哈XD


API一枚: 「历史上的今天」


微信小程序 开发者工具


备注: API须要登记注册之后赢得KEY就可以采用,具体内容恳请查阅 生成数据 官方文档,这里预设各位已经登记注册并具有适当API所需的KEY


工程结构


微信开发者工具的加装和采用在这里就不多并作了解了,存有疑点的话可以看看微信官方的 轻便教程


先建立一个工程,依次页面「嵌入项目」--「无AppID」,然后寄出「项目名称」并挑选「项目目录」,页面「嵌入项目」


然后我们去清扫一下预设工程的目录结构,删掉以下目录和文件


pages/logs/


pages/index/index.wxss


建立以下目录和文件


pages/logs/


pages/index/index.wxsspages/detail/


pages/detail/detail.js


pages/detail/detail.wxml


pages/templates/


pages/templates/item.wxml


res/


现在你看见的目录结构必须就是这样子的


.


├── app.js


├── app.json


├── app.wxss


├── pages


│ ├── detail


│ │ ├── detail.js


│ │ └── detail.wxml


│ ├── index


│ │ ├── index.js


│ │ └── index.wxml


│ └── templates


│ └── item.wxml


├── res


└── utils


└── util.js


这就是我们工程目录的最终结构了,后面还可以嵌入资源进来,但是整体结构还是这样不能发生改变的


修正布局


微信小程序就是通过修正 app.json 文件发生改变全局布局的,具体内容的可以布局项恳请各位自行查询小程序文档的 布局 一节


关上 app.json ,修正成


{


"pages":[


"pages/index/index",


"pages/detail/detail"


],


"window":{


"backgroundTextStyle":"light",


"navigationBarBackgroundColor": "#3e3e3e",


"navigationBarTitleText": "历史今日",


"navigationBarTextStyle":"white"


},


"debug": true


}


我们这里修正了导航系统栏的背景颜色(navigationBarBackgroundColor)、标题颜色(navigationBarTextStyle)以及标题内容(navigationBarTitleText),为了便利查阅调试信息,我还打开了debug模式


全局布局以及搞掂啦,接下来正式宣布已经开始编码


首页布局


前面已经说道了我们必须搞的就是「历史上的今天」这样的一个小程序,所以同一个日期可以存有很多条目,最常用的布局就是制成列表


列表里可以存有很多的条目,数量就是不确认的,所以我们无法在页面里写下死去了布局,这时候就要使用 模板(template) 了,我们可以在模板中定义代码片段,然后在相同的地方调用


我们去定义一个模板,关上 pages/templates/item.wxml ,嵌入代码



备注: 模板的采用细节恳请参照官方文档 模板 一节


接下来关上 pages/index/index.wxml 删除里面的内容,我们必须在这里撰写列表页,这里可以采用至我们上面定义的模板