ホームページ  >  記事  >  WeChat アプレット  >  WeChat開発入門(jssdk開発)

WeChat開発入門(jssdk開発)

零下一度
零下一度オリジナル
2017-05-27 13:56:282197ブラウズ

プロジェクトは WeChat 内の現在の位置を取得する必要があるため、WeChat 開発の旅を開始しました...

WeChat JSSDK ドキュメント
mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

手順JSSDK を使用する
ステップ 1: ドメイン名をバインドする
バインドするドメイン名には第 1 レベルのドメイン名が必要ですが、それを使用する場合でも、第 2 レベルのドメイン名の下にある Web ページは引き続きインターフェイスを使用できます。 2: JS ファイルをインポートします

http://res.wx.qq.com/open/js/jweixin-1.0.0.jsページで https が有効になっている場合は、必ず res.wx.qq.com を導入してください/open/js/jweixin-1.0 .0.js

ステップ 3: 構成インターフェースを介して権限検証構成を挿入します

これを構成するのはさらに面倒になります。最後に説明しましょう。

wx.config({
   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
   appId: '', // 必填,公众号的唯一标识
   timestamp: , // 必填,生成签名的时间戳
   nonceStr: '', // 必填,生成签名的随机串
   signature: '',// 必填,签名,见附录1
   jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});


ステップ 4: プロセス準備完了インターフェイスを介して検証が成功しました

wx.ready(function(){
  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

ステップ 5: エラー インターフェイスを介して失敗した検証を処理します

wx.error(function(res){
  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
例: 地理的位置インターフェイスを取得します
wx.ready(function(){
  wx.getLocation({     type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'     success: function (res) {     var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90     var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。     var speed = res.speed; // 速度,以米/每秒计     var accuracy = res.accuracy; // 位置精度     }  });
});

詳細については、公式ドキュメントを参照してください。

Configステップ 3 の手順:

var wxConfigJson = {   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。   appId: 'wx821bb7356e99a3a7', // 必填,公众号的唯一标识   timestamp: 1446184841, // 必填,生成签名的时间戳   nonceStr: '80262bec-7cd2-4b03-b366-97fab6e91cdd', // 必填,生成签名的随机串   signature: 'fd017d631d63cef32d5f25ea276911bcb0a29782', // 必填,签名,见附录1   jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2};@Html.Raw(new WeChatJS_SDK_Config().GetConfig()) 生成上面的wxConfigJson

以下は私が作成した WeChatJS_SDK_Config クラスです。面白いです。

 1 public class WeChatJS_SDK_Config
 2 {
 3     private string _appId;
 4     private int _timestamp ;// 必填,生成签名的时间戳
 5     private string _nonceStr ;// 必填,生成签名的随机串
 6     private string _url;
 7     private string _sign;
 8 
 9     public WeChatJS_SDK_Config()
10     {
11         _appId = AccountConfig._appID;
12         _timestamp = Core.GetTimestamp();
13         _nonceStr = Guid.NewGuid().ToString();
14         _url = HttpContext.Current.Request.Url.ToString();
15         _sign =
16             String.Format("jsapi_ticket={0}&noncestr={1}&timestamp={2}&url={3}", Jsapi_Ticket.GetJsapi_Ticket(),
17                 _nonceStr, _timestamp, _url).Md5Entry("sha1").ToLower();
18     }
19 
20     /* Url方法的区别
21      *@Html.Raw("var originalString='"+HttpContext.Current.Request.Url.OriginalString+"';")
22     @Html.Raw("var rawUrl='"+HttpContext.Current.Request.RawUrl+"';")
23     @Html.Raw("var url='"+HttpContext.Current.Request.Url+"';")
24    
25     var originalString = 'http://xb.hnjdkj.cn:80/index/home';
26     var rawUrl = '/index/home';
27     var url = 'http://xb.hnjdkj.cn/index/home';*@
28      */
29     public string GetConfig()
30     {
31         var res = string.Format(
32             "var wxConfigJson = {{debug: {0}, appId: '{1}', timestamp: {2},nonceStr: '{3}',signature: '{4}',jsApiList: ['getLocation'] }};", Kits.AppSettings("WeChatDebug"), _appId, _timestamp, _nonceStr, _sign);
33         return res;
34     }
35 
36 }

【関連する推奨事項】

1.

WeChat パブリック アカウント プラットフォームのソース コードのダウンロード

2 のサンプル チュートリアル。 WeChat開発のライフサイクル機能

3. WeChat開発の価値転送いくつかの方法の紹介

4. WeChatアプレット決済機能開発エラーの概要の詳細説明

以上がWeChat開発入門(jssdk開発)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。