微信小程序项目之失物招领平台-1.项目的创建

{
  "pages": [
    "pages/lostandfound/lostandfound",
    "pages/lostandfound/comment/comment",
    "pages/send/send",
    "pages/find/find",
    "pages/userMsg/userMsg"
     
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  }
}

其中pages中的第一个页面对象（"pages/lostandfound/lostandfound"）为小程序启动的第一个页面

8.进行第一个主页面的开发，在pages目录-->lostandfound-->lostandfound.json ，在lostandfound.json文件中添加如下代码，引入我们需要的组件库.

{"usingComponents": {
    "w-button": "/dist/w-button/index",
    "w-tabs":"/dist/w-tabs/index",
    "w-avatar": "/dist/w-avatar/index"
  }
  
  }

9.在lostandfound.js文件中写入页面初始数据

pages({
   
      data: {
          tabs1: [
            {
              text: 首页,
            },
            {
              text: 发布,
            },
            {
              text: 查询,
            },
            {
              text: 我的,
            },
          ]
          }

      /*省去了小程序的生命周期函数*/
         
         //页面之间的跳转方法
       handleChange(e) {
         const index = e.detail.value;
         console.log(e);
         console.log("value: "+e.detail.value);
         switch(index){
           case 0:
               // wx.navigateTo({
               //   url: /pages/lostandfound/lostandfound,
               // })
               break;
           case 1:
             wx.redirectTo({
               url: /pages/send/send,
             })
               break;
           case 2:
             wx.redirectTo({
               url: /pages/find/find,
             })
               break;
           case 3:
             wx.redirectTo({
               url: /pages/userMsg/userMsg,
             })
               break;
         }
       },
       handleSelected() {
         this.setData({
           index: 2,
         });
       },
       handleClick(e) {
         const { index, title } = e.detail;
         console.log(点击了tab: + index, title);
       }
  })

10.lostandfound.wxml文件添加代码，将导航栏固定在底部

<!-- 导航栏-->
    <view class=tabs>
          <w-tabs bind:onChange="handleChange" currentIndex="0" options="{
         
  { tabs1 }}" />
    </view>

11.lostandfound.wxss文件

.tabs{
    position: fixed;
    width: 100%;
    bottom: 0;
  }