1.開發工具：微信web開發者工具
2.相關文件：微信公共平臺
3.使用到的微信小程式UI元件庫：wuss-weapp
4.使用微信web開發者工具建立一個小程式專案，專案名：lostandfound(appId可到微信公眾平臺申請，若沒有appId小程式的一些相關的功能無法使用)
5.將wuss-wapp的dist檔案拷貝到lostandfound專案的路徑下
6.專案的結構圖如下：

7.在app.json檔案中建立5個頁面，新增程式碼如下

{
  "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;
  }

12.其他三個頁面的編寫方式同lostandfound. 13.編譯執行小程式的效果圖

 獲取原始碼:https://github.com/yangxuechen/LostAndFound/tree/master/wx_app