详细介绍微信小程序使用WEB

1.获取用户的openID，在小程序项目index.js里面写入

[javascript] view plain copy

print?

1. Page({  
2.   data: {  
3.     url: '',  
4.     scode:''  
5.   },  
6.   onLoad: function (options) {  
7.     //OpenId  
8.     wx.login({  
9.       //获取code  
10.       success: (res) => {  
11.         wx.request({  
12.           method: "GET",  
13.           url: 'https://xxx.xxx.xxx/GetOpenID.aspx', //仅为示例，并非真实的接口地址      
14.           data: {  
15.             scode: res.code   // 使用wx.login得到的登陆凭证，用于换取openid  
16.           },  
17.           header: {  
18.             'content-type': 'application/json' // 默认值  
19.           },  
20.           success: (res) => {  
21.             if (res.data!='0')  
22.             {  
23.               this.setData({  
24.                 sopenid: res.data,  
25.                 url: 'https://xxxx.xxx.xxx/?openid=' + res.data  
26.               });  
27.             }  
28.             console.log(this.data.sopenid)  
29.           }  
30.         })  
31.         console.log(res.code) //这里只是为了在微信小程序客户端好查看结果，找寻问题  
32.       }  
33.     });  
34.   }  
35. });  

2.getopenid.aspx

[csharp] view plain copy

print?

1. protected void Page_Load(object sender, EventArgs e)  
2.         {  
3.             try  
4.             {  
5.                 var _APP_ID = "";   // 你申请的小程序ID  
6.                 var _APP_SECRET = "";  // 小程序的SECRET ，当然这个是可微信公共平台去生成的  
7.   
8.                 var url = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code", _APP_ID, _APP_SECRET, Utils.SafeString(Request["scode"]));  
9.                 HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);  
10.                 request.Method = "Get";     // 这里是定义请求的方式  
11.   
12.                 HttpWebResponse response = request.GetResponse() as HttpWebResponse;   //对请求返回的结果进行处理  
13.                 Stream io = response.GetResponseStream();  
14.                 StreamReader sr = new StreamReader(io, Encoding.UTF8);  
15.                 var html = sr.ReadToEnd();    //返回的内容被读取为流  
16.                 sr.Close();  
17.                 io.Close();  
18.                 response.Close();  
19.   
20.                 string key = "\"openid\":\"";  
21.                 int stratindex = html.IndexOf(key);   //截取字符  
22.   
23.                 if (stratindex != -1)   //验证是否存在OpenID ，有时使用过期的登陆凭证，会出现异常  
24.                 {  
25.                     int endindex = html.IndexOf("\"}", stratindex);    // 这里在截取字符时，要注意内容是否和截取的部分相同，否则截取会失败  
26.                     string _openid = html.Substring(stratindex + key.Length, endindex - stratindex - key.Length);  
27.                      Response.Write(_openid);  
28.                 }  
29.                 else  
30.                 {  
31.                     Response.Write("0");  
32.                 }  
33.   
34.             }  
35.             catch (Exception ex)  
36.             {  
37.                 Utils.WriteLog(DateTime.Now+"----error:" + ex);  
38.                 Response.Write("0");  
39.             }  
40.         }  

3.上面已经让我们获取到了用户的openId,接下来就用微信小程序支付的同意下单接口下单，之后根据下单之后返回的prepay_id拼接一个字符串：str = "?timestamp=" +timestamp+ "&nonceStr=" + wx_nonceStr + "&prepay_id=" +prepay_id+ "&signType=MD5" + "&paySign=" + get_sign + "&orderId=123456789";  页面加入：<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>  使web-view可以使用wx.miniProgram.navigateTo({ url: path });跳转到小程序的页面：

[javascript] view plain copy

print?

1. var params = '<%=str %>';  
2.    var path = '/pages/wxpay/wxpay' + params;  
3.    //通过JSSDK的api使小程序跳转到指定的小程序页面  
4.    wx.miniProgram.navigateTo({ url: path });  

4.在小程序里面添加wxpay页面，wxpay.js的代码为

[javascript] view plain copy

print?

1. // pages/wxpay/wxpay.js  
2. Page({  
3.   
4.   /** 
5.    * 页面的初始数据 
6.    */  
7.   data: {  
8.     
9.   },  
10.   
11.   /** 
12.    * 生命周期函数--监听页面加载 
13.    */  
14.   onLoad: function (options) {  
15.     var that = this;  
16.     //页面加载调取微信支付（原则上应该对options的携带的参数进行校验）    
17.     that.requestPayment(options);    
18.   },  
19.   //根据 obj 的参数请求wx 支付    
20.   requestPayment: function (obj) {  
21.     //获取options的订单Id    
22.     var orderId = obj.orderId;  
23.     console.log('prepay_id=' + obj.prepay_id);  
24.     console.log('prepay_id=' + obj.timestamp);  
25.     //调起微信支付    
26.     wx.requestPayment({  
27.       //相关支付参数    
28.       'timeStamp': obj.timestamp,  
29.       'nonceStr': obj.nonceStr,  
30.       'package': 'prepay_id=' + obj.prepay_id,  
31.       'signType': obj.signType,  
32.       'paySign': obj.paySign,  
33.       //小程序微信支付成功的回调通知    
34.       'success': function (res) {  
35.         //定义小程序页面集合    
36.         var pages = getCurrentPages();  
37.         //当前页面 (wxpay page)    
38.         var currPage = pages[pages.length - 1];  
39.         //上一个页面 （index page）     
40.         var prevPage = pages[pages.length - 2];  
41.         //通过page.setData方法使index的webview 重新加载url  有点类似于后台刷新页面    
42.         //此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。    
43.         prevPage.setData({  
44.           url: "https://xxx.xxxx.xxxxx/PayOk.aspx?orderId=" + orderId,  
45.   
46.         }),  
47.           //小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了    
48.           //微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作    
49.           wx.navigateBack();  
50.       },  
51.       //小程序支付失败的回调通知    
52.       'fail': function (res) {  
53.         console.log("支付失败");  
54.           console.log(res);  
55.         var pages = getCurrentPages();  
56.         var currPage = pages[pages.length - 1];  
57.         var prevPage = pages[pages.length - 2];  
58.         console.log("准备修改数据");  
59.         prevPage.setData({  
60.           url: "https://xxx.xxx.xxx/PayFial.aspx?orderId=" + orderId,  
61.         }),  
62.           console.log("准备结束页面")  
63.         wx.navigateBack();  
64.       }  
65.     })  
66.   },    
67.   
68.   /** 
69.    * 生命周期函数--监听页面初次渲染完成 
70.    */  
71.   onReady: function () {  
72.     
73.   },  
74.   
75.   /** 
76.    * 生命周期函数--监听页面显示 
77.    */  
78.   onShow: function () {  
79.     
80.   },  
81.   
82.   /** 
83.    * 生命周期函数--监听页面隐藏 
84.    */  
85.   onHide: function () {  
86.     
87.   },  
88.   
89.   /** 
90.    * 生命周期函数--监听页面卸载 
91.    */  
92.   onUnload: function () {  
93.     
94.   },  
95.   
96.   /** 
97.    * 页面相关事件处理函数--监听用户下拉动作 
98.    */  
99.   onPullDownRefresh: function () {  
100.     
101.   },  
102.   
103.   /** 
104.    * 页面上拉触底事件的处理函数 
105.    */  
106.   onReachBottom: function () {  
107.     
108.   },  
109.   
110.   /** 
111.    * 用户点击右上角分享 
112.    */  
113.   onShareAppMessage: function () {  
114.     
115.   }  
116. })