微信小程序之原生API（下）

第65篇

极客时间《9小时搞定微信小程序开发》第五课：原生API。

小程序API最后一部分，课程中没有详细去讲，因为当时开放的API还没有现在这么多，而且这部分API偏于后台控制，大多是后期逐步新增的。

wx.getUpdateManager 获取 全局唯一 的版本更新管理器，用于管理小程序更新

UpdateManager对象用来管理更新，有强制小程序重启并使用新版本、监听小程序版本更新事件等方法。

一些异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到小程序主线程。Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法。

Worker 最大并发数量限制为 1 个，创建下一个前需要结束当前 Worker；Worker 与主线程之间的数据传输，双方使用 Worker.postMessage()来发送数据，Worker.onMessage()来接收数据，传输的数据并不是直接共享，而是被复制的。

wx.reportMonitor，自定义业务数据监控上报接口，最多可以创建128个监控事件

监听或取消监听小程序切换前后台、错误事件

wx.canIUse：判断小程序的API，回调，参数，组件等是否在当前版本可用

绘图相关的API，主要是对CanvasContent对象的使用，实现各种颜色、线条、内容填充的控制

可以用以下几种方式来表示 canvas 中使用的颜色：

RGB 颜色： 如 'rgb(255, 0, 0)'

RGBA 颜色：如 'rgba(255, 0, 0, 0.3)'

16 进制颜色： 如 '#FF0000'

预定义的颜色： 如 'red'

其中预定义颜色有148个： 自定义颜色

调试开关和日志管理器的API，console可以向调试面板打印debug\error\info\log\warn共5类日志，logmanager最多保存5M的日志内容，超过5M后，旧的日志内容会被删除。

获取第三方平台的自定义的数据字段。小程序运营者可以一键授权给第三方平台，通过第三方平台完成业务。

第三方平台有单独的说明，参见: 第三方平台

创建 map 上下文 MapContext 对象，MapContext实现以下功能

对小程序框架中的路由控制进行扩充，实现关闭页面后返回或跳转到其他页面的 *** 作。

对小程序转发功能的控制，就是小程序右上角关闭按钮旁边3个小白点里的『转发』。

获取系统信息，主要包括以下信息：

设定或取消定时器，按照指定周期或在定时到期之后执行注册的回调函数

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见

SelectorQuery，查询节点信息的对象

小程序开发框架提供的API变得越来越多，通过这些微信原生的API，可以快速方便的调用微信的能力，比如文件的控制、图片视频的控制、数据的缓存、微信支付等，从而实现更加复杂多样的业务。

首先分析制作的思路：

1.在app.json文件的pages数组里加上main文件夹和template（模板）文件夹的路径。

2.在main.js文件中，在onLoad()函数中调用loadInfo()函数。

3. 自定义获取位置的函数loadInfo()，调用wx.getLocation，用于获取当前的纬度（latitude）和经度（longitude）。在loadInfo()函数中接着调用loadCity()函数。

4. 自定义获取城市的函数loadCity()，调用wx.request，在“百度地图开放平台”网站中注册自己的AK，通过获取城市信息的网址（http://api.map.baidu.com/geocoder/v2/?ak=自己的ak&location=纬度值,经度值&output=json）实现当前城市名称的获取。

在loadCity()函数中接着调用loadWeather()函数。

5.自定义获取天气的函数loadWeather(),根据已有的城市名称，通过获取天气信息的网址（http://wthrcdn.etouch.cn/weather_mini?city=城市名）实现天气信息的数据获取。

6.在main.wxml文件中，未来天气部分通过import调用了自定义模板文件itemtpl.wxml。

然后分析项目中文件的源码。

app.json文件的代码如下：

{

"pages":[

"pages/main/main",

"pages/template/itemtpl",

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "天气",

"navigationBarTextStyle":"black"

}

}

main.wxml的代码如下：

<view class='cont'>

<!-- 今日天气-->

<view class='today'>

<view class='info'>

<view class='tempe'>{{today.wendu}}°C</view>

<view class='weather'>{{today.todayInfo.type}}{{today.todayInfo.fengxiang}}</view>

<view>温馨提示：{{today.ganmao}}</view>

<view class='city'>{{city}}</view>

</view>

</view>

<!-- 未来天气-->

<import src="../template/itemtpl"/>

<view class='future'>

<block wx:for="{{future}}">

<template is="future-item" data="{{item}}"/>

</block>

</view>

</view>

main.wxss文件的代码如下：

/**/

.cont{

font-size:30rpx

width:100%

height:100%

}

.today{

padding:50rpx 0 0 0

height:50%

}

.info{

padding:20rpx

background:rgba(0,0,0,.8)

line-height: 1.5em

color:#eee

}

.tempe{

font-size:90rpx

text-align: center

margin:30rpx 0

}

.weather{

text-align: center

}

.city{

font-size:40rpx

color:#f60

text-align: right

margin: 30rpx 10rpx 0 0

}

.future{

display:flex

flex-direction: row

height:100%

padding:20rpx 0 20rpx 10rpx

background:rgba(0,0,0,.8)

text-align: center

margin:50rpx 0 70rpx 0

color:#eee

}

.future-item{

min-height: 100%

width:160rpx

margin: 0 10rpx

border:solid 1px #f90

padding:10rpx 0 0 0

line-height:2em

}

main.js文件的代码如下：

//

Page({

data: {

// weatherData:''

city:"" ,

today:{},

future:{},

},

onLoad: function () {

this. loadInfo()

},

//自定义获取位置

loadInfo:function(){

var page=this

wx.getLocation({

type: 'gcj02', //返回可以用于wx.openLocation的经纬度

success: function (res) {

var latitude = res.latitude

var longitude = res.longitude

console.log(latitude, longitude)

page.loadCity(latitude, longitude)

}

})

} ,

//自定义获取城市

loadCity: function (latitude, longitude){

var page = this

wx.request({

url: 'http://api.map.baidu.com/geocoder/v2/?ak=自己的AK &location=' + latitude + ',' + longitude + '&output=json',

header: {

'content-type': 'application/json'

},

success: function (res) {

console.log(res)

var city=res.data.result.addressComponent.city

city=city.replace("市","")

page.setData({

city:city

})

page.loadWeather(city)

}

})

},

//自定义获取天气

loadWeather: function (city) {

var page = this

wx.request({

url: 'http://wthrcdn.etouch.cn/weather_mini?city=' + city,

header: {

'content-type': 'application/json'

},

success: function (res) {

console.log(res)

var future=res.data.data.forecast

var todayInfo=future.shift()

var today=res.data.data

today.todayInfo=todayInfo

page.setData({

today:today,

future:future,

})

}

})

}

})

itemtpl.wxml的代码如下：

<!-- 模板文件-->

<template name="future-item">

<view class="future-item">

<view>{{item.date}}</view>

<view>{{item.type}}</view>

<view>{{item.fengxiang}}</view>

<view>{{item.low}}</view>

<view>{{item.high}}</view>

</view>

</template>

至此，案例制作完成。

---