本文说明如何在微信小程序工程中引入小程序 JSAPI,并完成域名与权限配置。完成后即可调用任意接口。
小程序项目的创建过程属于微信侧操作,本文不再重复,请直接参考微信官方文档《小程序开发指南 · 开始》。下面从引入 SDK 开始。
从相关下载页面下载开发包并解压,在项目根目录新建 libs 目录,把 dist/bmap-wx.min.js 拷贝进去:
├── app.js├── app.json├── app.wxss├── libs│ └── bmap-wx.min.js // 拷贝进来的 SDK└── pages└── index├── index.js├── index.json├── index.wxml└── index.wxss
在页面中按相对路径引入并实例化:
// pages/index/index.jsconst { BMapWX } = require('../../libs/bmap-wx.min.js');const bmap = new BMapWX({ ak: '您的ak' });
小程序只允许请求已登记的域名。登录微信公众平台 → "开发管理" → "开发设置" → "服务器域名",在 request 合法域名 中添加 https://api.map.baidu.com。保存并提交后,回到开发者工具点击"编译"或"刷新",域名配置即同步生效。
未显式传 location 时,SDK 会调用 wx.getLocation 获取当前位置。该接口属于隐私接口,需要在 app.json 中声明并在公众平台补充隐私协议:
{"permission": {"scope.userLocation": {"desc": "你的位置信息将用于检索周边地点、解析地址与查询天气"}},"requiredPrivateInfos": ["getLocation"]}
在页面 onLoad 中发起一次检索,控制台能打印出结果即表示配置成功:
// pages/index/index.jsbmap.search({query: '美食',location: '39.915,116.404',success: res => console.log('检索成功', res.wxMarkerData),fail: err => console.log('检索失败', err.statusCode, err.message),});
接下来可以参考"Hello 我的小程序"完成第一个完整示例。
上一篇
下一篇