WeChat h5 page launches third-party navigation application
What you need to prepare:
Background: WeChat public account clicks on the menu bar to jump to the h5 page, which requires the navigation function
Requirement: When the user clicks the navigation button, jump to the third-party app for navigation
Reference: WeChat public account development documentation
step:
Introduce the following JS file into the page that needs to call the JS interface (https is supported): http://res.wx.qq.com/cgi-bin/index?lang=zh_CN
The signature permission of jssdk is provided by the backend. The front-end only needs to inject the signature permission into wx.config. I believe this step can be saved if you have used other WeChat APIs.
``` wx.config({ debug: true, // Turn on debugging mode. The return values of all apis called will be alerted on the client side. If you want to view the incoming parameters, you can open them on the PC side. The parameter information will be passed Log is printed, it will only be printed on the PC side. appId: '', // Required, the unique identifier of the official account timestamp:, // Required, the timestamp of the generated signature nonceStr: '', // Required, Generate a random string signature of the signature: '', // Required, signature jsApiList: ['openLocation'] // Required, list of JS interfaces that need to be used. Fill in the WeChat api that needs to be used here. Openlocation is the location interface using WeChat's built-in map}); ```What needs to be noted here is that debug must be changed to false after going online, and the interface you want to use must be filled in the jsApiList, otherwise it will have no effect.
Register a click event for the navigation button and call the wx.openLocation method
$('.btn2').click(function () { wx.openLocation({ latitude: 22.545538, // Latitude, floating point number, range is 90 ~ -90 longitude: 114.054565, // Longitude, floating point number, range is 180 ~ -180. name: 'Fill in the location name here', // Location name address: 'Details of the location name', // Address details description scale: 10, // Map zoom level, shaping value, ranging from 1 to 28. The default is the maximum}); }).After clicking, it will jump to the WeChat location page. Click the navigation in the lower right corner to pull up the third-party navigation!
5. WeChat uses the coordinates of gcj02, and some maps use the coordinates of wgs84. If the error is relatively large, you can consider whether it is a problem with the incoming longitude and latitude. For details, you can ask Du Niang
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.