微信小程序初步了解及实现底部导航栏

步骤

• 微信官方下载微信小程序的开发工具及官方小程序演示
  https://github.com/wechat-miniprogram/miniprogram-demo
• 阿里的矢量图库
  https://www.iconfont.cn/collections/index
• 目录结构及组成
  
• app.js是程序的入口,目前是空的,目前界面的代码只是做了全局的统筹规划,放在了app.json下面
• 如果按照安卓开发的思想来说,app目录很像是 单个Activity,而这四个界面很像是Fragment

底部导航代码实现

1. app.json

{
  "pages":[
    "pages/page/home/index",
    "pages/page/favor/index",
    "pages/page/class/index",
    "pages/page/user/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeMall",//该属性在子页面下进行重写,在点击时候标题会改变,请注意看效果图顶部
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/page/home/index",
        "iconPath": "pages/image/Home.png",
        "selectedIconPath": "pages/image/SelectedHome.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/page/class/index",
        "iconPath": "pages/image/Class.png",
        "selectedIconPath": "pages/image/SelectedClass.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/page/favor/index",
        "iconPath": "pages/image/Favor.png",
        "selectedIconPath": "pages/image/SelectedFavor.png",
        "text": "收藏"
      },
      {
        "pagePath": "pages/page/user/index",
        "iconPath": "pages/image/User.png",
        "selectedIconPath": "pages/image/SelectedUser.png",
        "text": "我的"
      }
    ]
  }
}

是的,到这里就结束了,四个导航的按钮选择效果便实现了,而且底部导航是与四个页面是联动的.不需要像安卓里面那样关联的处理.一直被安卓虐待的小伙伴,是不是有种受宠若惊的感觉?(笔者开始以为这个文件只是做了数据存储,却不成想竟然有了效果,激动~).

2. app.js 类似于小程序的控制中心,直接在该文件下写入App({ })会自动重写四个方法,给出的注释也很清楚(这里一直会联想到Activity的生命周期~)

App({
 /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

3. app.wxss 相当于css,是给页面上的字体,内外间距等指定样式的,微信官方给出的解释

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

如下是官方小程序的wxss文件,进行举例(未接触过css的小伙伴需要自己补充一下这一块的知识,菜鸟教程:https://www.runoob.com/css/css-text.html)

/* reset */
page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
checkbox, radio{
  margin-right: 10rpx;
}
button{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
form{
  width: 100%;
}
input {
  width: 100%;
}

/* lib */
.strong{
  font-weight: bold;
}
.tc{
  text-align: center;
}

/* page */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
  font-size: 32rpx;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}

4. project.config.json 小程序的配置文件

• 指定了此小程序的 AppId 和小程序的名称