UNI-APP开发微信公众号（H5）JSSDK使用

你鹅發表於 2019-6-24 16:08:00

UNI-APP开发微信公众号（H5）JSSDK使用

最近在使用开发项目，需要在公众号上运行。需要实现定位获取经纬度的功能。
使用的模块方式引用微信 js-sdk
引用方法：https://ask.dcloud.net.cn/article/35380
github：https://github.com/zhetengbiji/jweixin-module
<ol>
<li>
<h3>NPM安装方式（不会用NPM就不要用这种方式）  </h3>
<div class="cnblogs_code">
<pre>npm install jweixin-module --save</pre>
</div>
 
</li>
<li>
<h3>下载使用方式</h3>
</li>
</ol>
下载地址：https://unpkg.com/jweixin-module@1.4.1/out/index.js
 
使用
<div class="cnblogs_code">
<pre>var jweixin = require('jweixin-module')
jweixin.ready(function(){
// TODO
});</pre>
</div>
两个地方，对使用方法都像上面说的那样简单。但是真要是用起来，就悲剧了。特别是新手。
DCloud官网的论坛，有分享的例子http://ask.dcloud.net.cn/article/36007。
 
我这里做个定位接口例子。
首先要看微信的文档。清楚大致的流程。https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 
<code>1、common</code>目录，创建文件，名称是<code>wechat.js。内容如下：</code>
<div class="cnblogs_code"><img id="code_img_closed_2b712cf6-3782-4823-b172-074b3302e6b5" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_2b712cf6-3782-4823-b172-074b3302e6b5" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_2b712cf6-3782-4823-b172-074b3302e6b5" class="cnblogs_code_hide">
<pre>1 // import request from './request'; //笔者自己封装的网络请求类，也可以直接使用uni.request
2 import {
3 post
4 } from './wxRequest';
5 var jweixin = require('jweixin-module');
6
7 export default {
8 //判断是否在微信中
9 isWechat: function() {
 10 var ua = window.navigator.userAgent.toLowerCase();
 11 if (ua.match(/micromessenger/i) == 'micromessenger') {
 12 // console.log('是微信客户端')
 13 return true;
 14 } else {
 15 // console.log('不是微信客户端')
 16 return false;
 17 }
 18 },
 19 //初始化sdk配置
 20 initJssdkShare: function(callback, url) {
 21 //服务端进行签名，可使用uni.request替换。签名算法请看文档
 22 post(
 23 'https://fbyc.microchainsoft.cn/index/wechat/getSignPackage',
 24 {
 25 url: url
 26 },
 27 function(res) {
 28 // console.log(res)
 29 if (res.data) {
 30 jweixin.config({
 31 debug: true,
 32 appId: res.data.appId,
 33 timestamp: res.data.timestamp,
 34 nonceStr: res.data.nonceStr,
 35 signature: res.data.signature,
 36 jsApiList: [
 37 'checkJsApi',
 38 'onMenuShareTimeline',
 39 'onMenuShareAppMessage',
 40 'getLocation'
 41 ]
 42 });
 43 //配置完成后，再执行分享等功能
 44 if (callback) {
 45 callback(res.data);
 46 }
 47 }
 48 });
 49 },
 50 initJssdk:function(callback){
 51 post('https://fbyc.microchainsoft.cn/index/wechat/getSignPackage',{},
 52 function (res) {
 53 if(res.data){
 54 jweixin.config({
 55 debug: true,
 56 appId: res.data.appId,
 57 timestamp: res.data.timestamp,
 58 nonceStr: res.data.nonceStr,
 59 signature: res.data.signature,
 60 jsApiList: [
 61 'checkJsApi',
 62 'getLocation'
 63 ]
 64 });
 65 //配置完成后，再执行分享等功能
 66 if (callback) {
 67 callback(res.data);
 68 }
 69 }
 70 })
 71 },
 72 //在需要自定义分享的页面中调用
 73 share: function(data, url) {
 74 url = url ? url : window.location.href;
 75 if (!this.isWechat()) {
 76 return;
 77 }
 78 //每次都需要重新初始化配置，才可以进行分享
 79 this.initJssdkShare(function(signData) {
 80 jweixin.ready(function() {
 81 var shareData = {
 82 title: data && data.title ? data.title : signData.site_name,
 83 desc: data && data.desc ? data.desc : signData.site_description,
 84 link: url,
 85 imgUrl: data && data.img ? data.img : signData.site_logo,
 86 success: function(res) {
 87 //用户点击分享后的回调，这里可以进行统计，例如分享送金币之类的
 88 // post('/api/member/share');
 89 },
 90 cancel: function(res) {}
 91 };
 92 //分享给朋友接口
 93 jweixin.onMenuShareAppMessage(shareData);
 94 //分享到朋友圈接口
 95 jweixin.onMenuShareTimeline(shareData);
 96 });
 97 }, url);
 98 },
 99 //在需要定位页面调用
100 location: function(callback) {
101 if (!this.isWechat()) {
102 console.log('不是微信客户端')
103 return;
104 }
105 console.info('定位')
106 this.initJssdk(function(res) {
107 jweixin.ready(function() {
108 console.info('定位ready')
109 jweixin.getLocation({
110 type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
111 success: function (res) {
112 // console.log(res);
113 callback(res)
114 },
115 fail:function(res){
116 console.log(res)
117 },
118 // complete:function(res){
119 // console.log(res)
120 // }
121 });
122 });
123 });
124 }
125 }</pre>
</div>
View Code</div>
2、main.js加载该文件
<div class="cnblogs_code">
<pre>1 // #ifdef H5
2 import wechat from './common/util/wechat'
3 if(wechat.isWechat()){
4 Vue.prototype.$wechat =wechat;
5 }
6 // #endif</pre>
</div>
3、页面中使用
<div class="cnblogs_code">
<pre> 1 // #ifdef H5
 2 //获取定位经纬度
 3 if (this.$wechat && this.$wechat.isWechat()) {
 4 this.$wechat.location(function (res) {
 5 console.log(res)
 6 // let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
 7 // let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
 8 // todo
 9 let latitude = 31.14979;
10 let longitude = 121.12426;
11
12 //根据经纬度，解析区域，提示用户输入
13 });
14 }
15 // #endif</pre>
</div>
 
后端服务器，可以参考：https://my.oschina.net/superkangning/blog/368043 
来源：https://www.cnblogs.com/shen55/p/11077677.html

頁: [1]

琼殿技术论坛's Archiver

UNI-APP开发微信公众号（H5）JSSDK使用