微信小程序（一）

一： 設置微信小程序底部導航欄

咱們找到項目根目錄中的配置文件 app.json 加入以下配置信息

"tabBar": {  
   "color": "#a9b7b7",  
   "selectedColor": "#11cd6e",  
   "borderStyle":"white",  
   "list": [{  
     "selectedIconPath": "images/111.png",  
     "iconPath": "images/11.png",  
     "pagePath": "pages/index/index",  
     "text": "首頁"  
   }, {  
     "selectedIconPath": "images/221.png",  
     "iconPath": "images/22.png",  
     "pagePath": "pages/logs/logs",  
     "text": "日誌"  
   }, {  
     "selectedIconPath": "images/331.png",  
     "iconPath": "images/33.png",  
     "pagePath": "pages/test/test",  
     "text": "用戶"  
   }]  
 },  

tabBar  指底部的 導航配置屬性

color  未選擇時 底部導航文字的顏色

selectedColor  選擇時 底部導航文字的顏色

borderStyle  底部導航邊框的樣色（注意 這裏若是沒有寫入樣式 會致使 導航框上邊框會出現默認的淺灰色線條）

list   導航配置數組

selectedIconPath 選中時 圖標路徑

iconPath 未選擇時 圖標路徑

pagePath 頁面訪問地址

text  導航圖標下方文字

 

二： 微信小程序api接口之自定義菜單和相機

看過微信api文檔的人相比都瞭解

wx.showActionSheet 和 wx.chooseImage 這倆個接口把，

一個是自定義菜單功能，一個是圖片功能， 具體參數我就很少說了，直接上代碼

chooseimage: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['從相冊中選擇', '拍照'],
      itemColor: "#CED63A",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })

  },

  chooseWxImage: function (type) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
        console.log(res);
        that.setData({
          tempFilePaths: res.tempFilePaths[0],
        })
      }
    })
  }

<button style="margin:30rpx;" bindtap="chooseimage">獲取圖片</button>

<image src="{{tempFilePaths }}" catchTap="chooseImageTap" mode="aspectFit" style="width: 100%; height: 450rpx" />

　　

 效果圖以下：