输入框在获得焦点的同时，判断如果页面内容高度大于屏幕高度，则进行滚动到页面底部： [代码]onFocus: [代码][代码]function[代码][代码]() {[代码][代码]    [代码][代码]var[代码] [代码]sys = wx.getSystemInfoSync()[代码][代码]    [代码][代码]var[代码] [代码]query = wx.createSelectorQuery()[代码][代码]    [代码][代码]query.select([代码][代码]'.container'[代码][代码]).boundingClientRect([代码][代码]function[代码][代码](res) {[代码][代码]        [代码][代码]if[代码] [代码](res && res.height && res.height > sys.windowHeight) {[代码][代码]            [代码][代码]wx.pageScrollTo({[代码][代码]                [代码][代码]scrollTop: res.height - sys.windowHeight[代码][代码]            [代码][代码]})[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]}).exec()[代码][代码]}[代码] 此时发现，input组件也跟着页面一起滚动了。input外层有一个view，并且设置为fixed属性bottom=0。

先上截图： [图片] 小程序二维码： [图片] 一、申请百度地图的AK 在百度地图开放平台上注册账号并登录，然后在“控制台”中创建一个应用。 [图片] 选择“微信小程序”，并填入创建小程序时得到的APP ID。 [图片] 提交后就可以在前一个页面中看到新创建的应用的AK了。 二、下载SDK 在“开发文档”中点击“微信小程序JavaScript API” [图片] 在“相关下载”中点击“全部下载”。 [图片] 压缩包里主要包括两个文件夹：[代码]demo[代码]和[代码]src[代码]，开发时主要用到[代码]src[代码]里的js文件：[代码]bmap-wx.js[代码]（为讲解方便，本文不使用[代码].min[代码]）。 三、配置服务器域名 登录微信小程序管理后台，进入开发——开发设置 [图片] 在服务器域名中，填入request合法域名：https://api.map.baidu.com [图片] PS：微信要求域名都为https，所以有些API为http的就不能用了。 四、写代码 打开微信开发者工具，并新建一个小程序项目，会自动生成一些文件（新建项目的方法、各文件的作用，网上有很多教程，不再赘述）。 1、打开[代码]index.js[代码]文件，添加对[代码]bmap-wx.js[代码]文件的引用： [代码]//index.js //获取应用实例 const app = getApp() //调用百度地图天气API的js文件 var bmap = require('../../utils/bmap-wx.js'); [代码] 2、在[代码]onLoad[代码]方法中，新建一个[代码]BMapWX[代码]对象，并填入AK： [代码]var BMap = new bmap.BMapWX({ ak: '你申请的百度地图AK' }); [代码] 3、在[代码]onLoad[代码]方法中，发起查询天气的请求： [代码]BMap.weather({ fail: fail, success: success }); [代码] 4、在[代码]onLoad[代码]方法中，定义查询成功和失败的方法： [代码]var fail = function(data) { console.log('查询失败') }; var success = function(data) { console.log('查询成功'); var currentWeather = data; this.setData({ currentWeather: currentWeather }); } [代码] 注意，[代码]setData[代码]中的[代码]currentWeather[代码]要与[代码]Page[代码]中的[代码]data[代码]部分对应： [代码]data: { currentWeather: '' }, [代码] 至此，就可以获得返回的天气数据了，剩下的工作就是解析返回的数据。 五、解析数据 在第三步中，查询成功获得的返回数据[代码]data[代码]包括了我们需要展示的信息，因此解析的工作也主要是针对[代码]data[代码]。 data主要包括两部分内容：currentWeather和originalData [图片] 1、解析data.currentWeather 结构如下： [图片] 解析方式如下： [代码]var currentWeather = data.currentWeather[0]; //currentWeather.currentCity："济南市" //currentWeather.date："周四 01月17日 (实时：3℃)" //currentWeather.pm25："85" //currentWeather.temperature："7 ~ -2℃" //currentWeather.weatherDesc："晴" //currentWeather.wind："南风微风" [代码] 注意，data.currentWeather是一个JSON数组，关键的数据都存在data.currentWeather[0]中 2、解析data.originalData 结构如下： [图片] data.originalData也是JSON格式，我们关心的数据存在data.originalData.results数组中，结构如下： [图片] 可以看出，data.originalData.results[0]数组中关键的部分也是两块：index数组和weather_data数组： [图片] data.originalData.results[0].index[0]是穿衣的相关信息 data.originalData.results[0].index[1]是洗车的相关信息 data.originalData.results[0].index[2]是感冒的相关信息 data.originalData.results[0].index[3]是运动的相关信息 data.originalData.results[0].index[4]是紫外线强度的相关信息 [图片] data.originalData.results[0].weather_data[0]是今天的天气情况 data.originalData.results[0].weather_data[1]是明天的天气情况 data.originalData.results[0].weather_data[2]是后天的天气情况 data.originalData.results[0].weather_data[3]是大后天的天气情况 至此，就完成了数据解析工作，通过setData可以将数据与index.wxml中的变量绑定。修改success如下： [代码]var success = function(data) { console.log('查询成功'); //实时天气 var currentWeather = data.currentWeather[0]; //感冒信息 var flu = data.originalData.results[0].index[2]; //未来三天的天气 var forecast = new Array(3); for (var i = 0; i < 3; i++) { forecast[i] = data.originalData.results[0].weather_data[i + 1]; } //配置数据 this.setData({ currentWeather: currentWeather, flu: flu, forecast: forecast }); } [代码] 在index.wxml文件中调用： [代码]<!--当前定位的城市--> <view class='cityName'>{{currentWeather.currentCity}}</view> <!--未来3天的天气情况，包括日期、天气描述、温度范围、风力--> <view class='forecast'> <view class='next-day' wx:key="{{index}}" wx:for="{{forecast}}"> <view class='detail date'>{{item.date}}</view> <view class='detail'>{{item.weather}}</view> <view class='detail'>{{item.temperature}}</view> <view class='detail'>{{item.wind}}</view> </view> </view> <!--感冒信息--> <view class='tips'> <view class='index'>感冒指数：{{flu.zs}}</view> <view class='description'>{{flu.des}}</view> </view> [代码] 六、bmap-wx.js简单介绍 打开bmap-wx.js文件，可以看到只有一个类BMapWX。该类包含了四个方法，而我们需要用到的是weather(param)方法： [代码]/** * 天气检索 * * @param {Object} param 检索配置 */ weather(param) { var that = this; param = param || {}; let weatherparam = { coord_type: param["coord_type"] || 'gcj02', output: param["output"] || 'json', ak: that.ak, sn: param["sn"] || '', timestamp: param["timestamp"] || '' }; let otherparam = { success: param["success"] || function () {}, fail: param["fail"] || function () {} }; let type = 'gcj02'; let locationsuccess = function (result) { weatherparam["location"] = result["longitude"] + ',' + result["latitude"]; wx.request({ url: 'https://api.map.baidu.com/telematics/v3/weather', data: weatherparam, header: {"content-type": "application/json"}, method: 'GET', success(data) { let res = data["data"]; if (res["error"] === 0 && res["status"] === 'success') { let weatherArr = res["results"]; // outputRes 包含两个对象， // originalData为百度接口返回的原始数据 // wxMarkerData为小程序规范的marker格式 let outputRes = {}; outputRes["originalData"] = res; outputRes["currentWeather"] = []; outputRes["currentWeather"][0] = { currentCity: weatherArr[0]["currentCity"], pm25: weatherArr[0]["pm25"], date: weatherArr[0]["weather_data"][0]["date"], temperature: weatherArr[0]["weather_data"][0]["temperature"], weatherDesc: weatherArr[0]["weather_data"][0]["weather"], wind: weatherArr[0]["weather_data"][0]["wind"] }; otherparam.success(outputRes); } else { otherparam.fail({ errMsg: res["message"], statusCode: res["status"] }); } }, fail(data) { otherparam.fail(data); } }); } let locationfail = function (result) { otherparam.fail(result); } let locationcomplete = function (result) { } if (!param["location"]) { that.getWXLocation(type, locationsuccess, locationfail, locationcomplete); } else { let longitude = param.location.split(',')[0]; let latitude = param.location.split(',')[1]; let errMsg = 'input location'; let res = { errMsg: errMsg, latitude: latitude, longitude: longitude }; locationsuccess(res); } } [代码] 可以看出，成功返回的数据为data，通过解析，封装成了我们在前面得到的data.currentWeather和data.originalData两个数组。 另外，程序中默认查询的城市是当前定位的城市，依据的参数是经纬度坐标。 [代码]weatherparam["location"] = result["longitude"] + ',' + result["latitude"]; [代码] 如果想查询其它城市，例如北京，可以修改为： [代码]weatherparam["location"] = param["北京"]; [代码] 其中param就是weather()函数的参数。

当我们需要自定义底部导航栏时   首先要解决iphoneX的底部大横条对这个兼容   通常不设置兼容  都会被挡住 如何编写 在你要编写的底部菜单中插入   样式 [代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码])   即可兼容 [代码] [代码] 例如：css中插入[代码] [代码]@supports ([代码][代码]bottom[代码][代码]: constant(safe-area-inset-[代码][代码]bottom[代码][代码])) or ([代码][代码]bottom[代码][代码]: env(safe-area-inset-[代码][代码]bottom[代码][代码])) {[代码][代码]    [代码][代码].fixed-wrap {[代码][代码]        [代码][代码]height[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码]        [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码].fixed-pay {[代码][代码]        [代码][代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码]    [代码][代码]}[代码] [代码]}[代码]其中       [代码]env(safe-area-inset-[代码][代码]bottom[代码][代码])  是计算兼容的高度   通常一半即可   [代码]         calc  是计算css   你也可以加入高度  假设有第二层 底部固定栏【即底部导航栏上面还有一层固定栏】  可如下编写   view.footer {     bottom: calc(100rpx + env(safe-area-inset-bottom)); } 这样轻轻松松解决兼容  不需要写js代码 <-------------大横条-------------> [图片]