小程序入门-02

上一篇文章简单的给大家给介绍了一下什么叫小程序，以及一些简单的东西，下面带大家看点实际的东西

注册，创建小程序

这个由于比较简单，就不带大家一步步看，大家自己可以跟着介绍来做，在创建时记得如果是自己的demo不要选择云服务
在这里插入图片描述
上面是简单的介绍大家可以对照使用

板块介绍

点击完新建后的状态，如下，为大家将每一步代表什么写了，大家自己取用
在这里插入图片描述

相信大家看完应该大概懂每一步的作用了，下面为大家着重要的常用的介绍一下大概的使用，方便快速入门
在这里插入图片描述
如果大家有兴趣可以做相应改变，试试，这里不给大家一一试，
具体的大家可以官网看具体的值

tabBar

由于这里是入门，就不说太多里面的，但是小程序的tabBar大家应该都很熟悉，这里为大家简单介绍一下，然后放一个模板，大家可以复制改一改
以酷丁鱼为例
在app.json中配置一个和window对象同级的对象tabBar

  "tabBar":{
    
    
"color":"#999", //tab上文字的默认颜色
"selectedColor":"#ff547c",//tab上的文字选中时的颜色
"backgroundColor": "#ffffff",//tab的背景颜色 只支持十六进制
"borderStyle": "black",//上边框的颜色
"position":"bottom",//tab的位置 只能上下，放在上面不支持图标
"list": [{
    
    //tab的列表（只能配置2-5个）
  "pagePath": "pages/index/index", //页面路径
  "text": "首页",//tab按钮的文字
  "iconPath":"./images/tabBar/icon-home.png",//图片未选中的路径
  "selectedIconPath":"./images/tabBar/icon-home-selected.png"//图片选中的路径
}, {
    
    
  "pagePath":"pages/class/class",
  "text": "课程",
  "iconPath":"./images/tabBar/icon-course.png",
  "selectedIconPath":"./images/tabBar/icon-course-selected.png"
},{
    
    
  "pagePath": "pages/study/study",
  "text": "学习",
  "iconPath":"./images/tabBar/icon-study.png",
  "selectedIconPath":"./images/tabBar/icon-study-selected.png"
},{
    
    
  "pagePath":  "pages/mine/mine",
  "text": "我的",
  "iconPath":"./images/tabBar/icon-mine.png",
  "selectedIconPath":"./images/tabBar/icon-mine-selected.png"
}]
  },

看下面的效果图
在这里插入图片描述

差不多入门到这里结束
后期在继续后面的教程

注册，创建小程序

板块介绍

tabBar

猜你喜欢