微信小程序 navigationbar怎么配置

微信小程序——配置 以下就是小编对小程序配置的资料进行的系统的整理，希望能对开发者有帮助。 我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 以下是一个包含了所有配置选项的简单配置app.json ： { "pages": ["pages/index/index","pages/logs/index" ], "window": {"navigationBarTitleText": "Demo" }, "tabBar": {"list": [{ "pagePath": "pages/index/index", "text": "首页"}, { "pagePath": "pages/logs/logs", "text": "日志"}] }, "networkTimeout": {"request": 10000,"downloadFile": 10000 }, "debug": true } app.json 配置项列表 属性类型必填描述pagesArray是设置页面路径windowObject否设置默认页面的窗口表现tabBarObject否设置底部 tab 的表现networkTimeoutObject否设置网络超时时间debugBoolean否设置是否开启 debug 模式 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。 文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。 如开发目录为： pages/ pages/index/index.wxml pages/index/index.js pages/index/index.wxss pages/logs/logs.wxml pages/logs/logs.js app.js app.json app.wxss 则，我们需要在 app.json 中写 { "pages":["pages/index/index""pages/logs/logs" ] } window 用于设置小程序的状态栏、导航条、标题、窗口背景色。 属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000"navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/whitenavigationBarTitleTextString 导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉背景字体、loading 图的样式，仅支持 dark/light 注：HexColor（十六进制颜色值），如"#ff00ff" 如 app.json ： { "window":{"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "微信接口功能演示","backgroundColor": "#eeeeee","backgroundTextStyle": "light" } } tabBar 如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 属性说明： 属性类型必填默认值描述colorHexColor是 tab 上的文字默认颜色selectedColorHexColor是 tab 上的文字选中时的颜色backgroundColorHexColor是 tab 的背景色borderStyleString否blacktabbar上边框的颜色， 仅支持 black/whitelistArray是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab 其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下： 属性类型必填说明pagePathString是页面路径，必须在 pages 中先定义textString是tab 上按钮文字iconPathString是图片路径，icon 大小限制为40kbselectedIconPathString是选中时的图片路径，icon 大小限制为40kb networkTimeout 可以设置各种网络请求的超时时间。 属性说明： 属性类型必填说明requestNumber否wx.request的超时时间，单位毫秒connectSocketNumber否wx.connectSocket的超时时间，单位毫秒uploadFileNumber否wx.uploadFile的超时时间，单位毫秒downloadFileNumber否wx.downloadFile的超时时间，单位毫秒 debug 可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。 page.json 每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如： { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

这是因为小程序的 navigationBarTextStyle（导航栏标题颜色）配置，就支持 black / white 两种。(小程序全局配置)

在小程序的app.json文件中配置 window属性

{

    "window": {

        "navigationBarTextStyle": "black"

    }

}

在微信小程序实现简单定位功能，简单易读，获取经纬度信息，在pages下创建一个单页，举例如local页面，配置该类页面的.js、.wxml、.json文件，来完成定位api接口的引用

local.js如下

var app = getApp()  

Page({ 

    data:{

       latitude:'',

       longitude:''

    },

getLocation:function(e) {

    console.log(e)

    var that = this

    wx.getLocation({

      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标

      success: function(res){

        console.log(res)     

      that.setData({

              longitude:res.longitude,

              latitude:res.latitude        

      })

    }

　})

}

})

local.wxml如下

<view class="page-body">

<view class="page-body-form">

    <text class="page-body-form-key">经度：</text>

    <input class="page-body-form-value" type="text" 

    value="{{longitude}}" name="longitude"></input>

    <text class="page-body-form-key">纬度:</text>

    <input class="page-body-form-value" type="text" 

    value="{{latitude}}" name="latitude"></input>  

    <view class="page-body-buttons">

    <button class="page-body-button" type="primary" 

    bindtap="getLocation">获取位置</button>

    </view>

</view>

</view>

app.json如下

{

  "pages":[

    "pages/local/local"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "定位",

    "navigationBarTextStyle":"black"

  }

}

---