UNI-APP開發微信公衆號（H5）JSSDK使用

時間 2019-11-17

標籤 uni app 開發微信公衆號 h5 jssdk 使用简体版

原文原文鏈接

最近在使用開發項目，須要在公衆號上運行。須要實現定位獲取經緯度的功能。git

使用的模塊方式引用微信 js-sdkgithub

引用方法：https://ask.dcloud.net.cn/article/35380算法

github：https://github.com/zhetengbiji/jweixin-modulenpm

NPM安裝方式（不會用NPM就不要用這種方式）
```
npm install jweixin-module --save  
```
下載使用方式

下載地址：https://unpkg.com/jweixin-module@1.4.1/out/index.js後端

使用api

var jweixin = require('jweixin-module')  
jweixin.ready(function(){  
    // TODO  
});

兩個地方，對使用方法都像上面說的那樣簡單。可是真要是用起來，就悲劇了。特別是新手。服務器

DCloud官網的論壇，有分享的例子http://ask.dcloud.net.cn/article/36007。微信

我這裏作個定位接口例子。網絡

首先要看微信的文檔。清楚大體的流程。https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115app

一、common目錄，建立文件，名稱是wechat.js。內容以下：

  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 }

View Code

二、main.js加載該文件

1 // #ifdef H5  
2 import wechat from './common/util/wechat'
3 if(wechat.isWechat()){
4     Vue.prototype.$wechat =wechat;
5 }
6 // #endif

三、頁面中使用

 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