一: 设置微信小程序底部导航栏json
咱们找到项目根目录中的配置文件 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 未选择时 底部导航文字的颜色api
selectedColor 选择时 底部导航文字的颜色数组
borderStyle 底部导航边框的样色(注意 这里若是没有写入样式 会致使 导航框上边框会出现默认的浅灰色线条)微信
list 导航配置数组app
selectedIconPath 选中时 图标路径this
iconPath 未选择时 图标路径spa
pagePath 页面访问地址日志
text 导航图标下方文字
二: 微信小程序api接口之自定义菜单和相机
看过微信api文档的人相比都了解
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], }) } }) }