微信小程序开发第二弹

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

微信小程序开发第二弹相关推荐

自学微信小程序开发第二天-事件处理、数据流
自学微信小程序开发第二天-事件处理.数据流事件处理绑定冒泡事件阻止冒泡事件互斥事件事件传参事件对象的属性数据流实例:登录页面案例之前学习了微信小程序开发的相关环境,测试了小程序开发工 ...
微信小程序开发教程！博卡君第二弹【微信小程序项目结构以及配置】
前面我们转了博卡君通宵吐血赶稿的微信小程序开发教程,当时只更新了两章,现在接着发布第三章:微信小程序项目结构以及配置,第四章:微信小程序首页面开发,以下是微信小程序教程找到创建的 demo 文件夹, ...
MOOC微信小程序开发从入门到实践~笔记
MOOC微信小程序开发从入门到实践~笔记 1.图标网站[icon]www.iconfont.cn 2.新建项目是必须需要AppID 3.app.js是页面逻辑文件 app.json是页面全局配置文件( ...
微信小程序开发知识点总结
微信小程序开发知识点总结微信小程序的目录结构 1.外联公共样式的方法根据微信的官方文档,是支持@import的方式一如外联的公共样式的使用@import语句可以导入外联样式表,@import后跟 ...
uniapp + vue3微信小程序开发（1）框架搭建
uniapp内置vue2,很多小伙伴喜欢用,但是作为首批吃螃蟹的人,肯定会想用vue3来开发,那么会遇到哪些问题呢? 1.编辑器等工具 Hbuilder X 3.4.6版本及以上(编辑器也在不断更新, ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序开发demo
前言链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...
uniapp + vue3微信小程序开发（5）授权
不知道大家在小程序授权的时候,会不会点击拒绝授权,然后第二次进来,哦豁..授权框就在也出不来了,这种问题,在很多线上正在使用的小程序也会出现的问题,所以说,大家貌似都不太注意这方面问题,下面就是我对这 ...
【微信小程序宝典】从零开始做微信小程序开发NO.2
2019独角兽企业重金招聘Python工程师标准>>> 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 首先感谢几位给予建议的同学, ...

微信小程序开发第二弹

微信小程序开发第二弹相关推荐

最新文章

热门文章