手把手教微信小程序开发(1)-页面设计

1、创建项目

图一

 2、初次进入项目窗口显示为：

图 2

3、小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等，增加首页和日志的页面(如图3)在开发文档进行复制，链接如下：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

图 3

 4、首页页面窗口默认组成 

图 4

这里面有三个元素，头像，名字，欢迎文案。结构是从上到下排列下来。

可以看到布局代码中有view、text，这些都是小程序组件。

组件都是以标签的形式成对出现。每个组件都有属性，如：class属性。

小程序组件列表：https://developers.weixin.qq.com/miniprogram/dev/component/

 5、添加导航栏的页面图标需要到app.json全局中添加

添加代码如下：

    "tabBar": {
    "color": "black",
    "selectedColor": "#d43c33",
    "borderStyle":"black",
    "position": "bottom",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "picture/shouye.png",
      "selectedIconPath": "picture/shouye1.png",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "iconPath": "picture/日志.png",
      "selectedIconPath": "picture/日志1.png",
      "text": "日志"
    }
  ]},

tabBar字段

作用：控制导航条样式和内容。

控制的正是图中的内容

color：tab 上的文字默认颜色，仅支持十六进制颜色。

selectedColor：tab 上的文字选中时的颜色，仅支持十六进制颜色。

backgroundColor：tab 的背景色，仅支持十六进制颜色。

position：tabBar 的位置，仅支持 bottom / top。

borderStyle：tabbar 上边框的颜色， 仅支持 black / white。

list属性

pagePath：指定点击后要跳转的页面路径。

text：显示的页面名称。

iconPath：未被点击时的图标图片。

selectedIconPath：被点击后的图标图片。

更多属性请移步微信开放文档中查看。