• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序开发第二弹

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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
第三弹还在总结摸索中。。。敬请期待


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序上线7天,罗胖带着1000万用户跑了……发布时间:2022-07-18
下一篇:
微信小程序学习之电影&&影评小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap