1、关于工具
微信官方提供了开发者工具,集成了开发调试、代码编辑及程序发布等功能。具体的文档在这里:微信官方文档,文档里面包含了该工具的基本操作,接下来就是下载工具了。
2、下载完工具之后,我们就可以选择:本地小程序项目–》添加项目—》无APPID开发(只有内侧人员才有,我们直接选没有就好了)–》项目名,项目路径(可以随便写的)–》添加项目
进行到这一步的时候,你进去就会发现是以自己的微信登录的,你的微信头像和昵称通通都显示了出来。同时我们也能看到基本的文件结构:
如图所示,在pages文件夹下存在Index主页和基本配置app.js,app.json,app.wxss等文件。看过文档的小伙伴都知道,app开头的都是基础的配置,如果在每个页面都有一些私有的设置时,需要在每个页面的文件夹里面新建这些配置文件,就像图中的index文件夹下面一样。
3、分析首页代码
如图所示:首先是在app.json里面要引入Index页面:
“pages”: [
“pages/index/index”,
]
然后先获取app实例:var app = getApp(); 然后data代表的是数据,此处的userInfo()代表获取用户的数据。看onload部分,该部分的代码代表在加载页面的时候,先获取app的实例,然后调用app.getUserInfo方法获取用户信息,然后再通过that.setData赋值,把用户的信息赋值到userInfo里面。
4、页面效果:
如图所示:不要在意文字颜色的花里胡哨,然后首页显示的数据就是这样的。具体的大家看看代码就知道了。
5、只是一个首页的话,总觉得少了很多东西,看起来光秃秃的,因此得想办法加点东西。首先呢,是在底部加一些tabBar,做一些分类,然后每个分类都对应一些页面。同时要给每个分类专属的icon图片。ok,需求就是这些,接下来就开始做:
如图所示:由图中代码可知,我们需要:
(1)新建hello文件,然后对应的文件结构都要有,比如:hello.js,hello.wxml等
(2)在app.json的pages中引入这三个页面。在此是准备把这三个页面通过底部选项卡来切换。
(3)既然是选项卡,最好是配上图片。在项目的根目录下新建img文件,然后随便引入两个图片作为icon。
(4)准备工作ok之后就开始撸代码:window代表对于窗口的一些设置。比如设置窗口的颜色,顶部标题栏的文字等:比如:“春风十里”作为标题栏
然后就是底部tabBar的编写,先制定底部栏目的样式,如代码所示。然后下面开始写list,因为我们要写三个tabBar,所以在此就在List里面写了三个部分。pagePath代表引入页面的路径。text代表选项卡的名称.。iconPath代表选项卡的图标。而,selectedIconPath代表被选中时,选项卡的图标。
如图所示:在此我们已经实现了基本的页面切换。(PS:新页面我们只需要根据微信给的首页代码依葫芦画瓢即可)
6、微信官方文档提供了很多组件。不同组件的结合就产生了我们熟知的各种小程序。在此呢,我们只是相当于刚入门微信小程序。具体的js功能,还有和后台交互的部分还没有做。继续研究,下一步是做一个小demo,然后实现一些Js的写法,还有就是争取和服务器交互一下试试。
第二弹结束:end
第三弹还在总结摸索中。。。敬请期待
|
请发表评论