微信小程序学习整理

1. 微信小程序 wx.request方法的异步封装实例详解

　　wx-promise-request 是对微信小程序 wx.request 方法的异步封装。

　　解决问题：

　　支持Promise(es6-promise)。管理请求队列，解决 request 最大并发数超过 10 会报错的问题。

　　下载：npm install wx-promise-request

　　然后拷贝 dist/index.js 文件到你的小程序项目中。　

 1 import {request} from './wx-promise-request';
 2 request({
 3  url: 'test.php',
 4  data: {
 5   x: '',
 6   y: '',
 7  },
 8  header: {
 9   'content-type': 'application/json',
10  },
11 })
12 .then(res => console.log(res))
13 .catch(error => console.error(error))

View Code

　　API

　　setConfig(object)

　　通过 setConfig 配置 wx-promise-request，如：使用 qcloud 提供的 request 方法；使用其他 Promise 库等等。

 1 import {request, setConfig} from './wx-promise-request';
 2 import qcloud from './vendor/qcloud-weapp-client-sdk/index';
 3 import Promise from 'bluebird';
 4  
 5 setConfig({
 6   request: qcloud.request,
 7   Promise,
 8 })
 9 request({
10  url: 'test.php',
11 })
12 .then(res => console.log(res))
13 .catch(error => console.log(error));

View Code

2. 页面跳转（传参）

<view class="btn-area">    
  <navigator url="../navigator/navigator?title=我是navigate" >跳转到新页面</navigator>    
  <navigator url="../redirect/redirect?title=我是redirect" redirect>在当前页打开</navigator>    
</view></span>

　　index.wxml中的URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数.
　　navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数.

1 获取参数：
2 Page({    
3   onLoad: function(options) {    
4     this.setData({    
5       title: options.title    
6     })    
7   }    
8 })

小程序跳转、请求、带参数请求小例子:　

* wx.request(OBJECT)

wx.request发起的是 HTTPS 请求。一个微信小程序，同时只能有5个网络请求连接。

 1 //当页面加载时，请求后台数据，并赋值给前台显示
 2 Page({
 3     data:{
 4         new_list:[]
 5     },
 6     onLoad:function(){
 7         var that = this;
 8         wx.request({
 9             url:'http://wxcms.com/getList',
10             header:{
11                 'content-type':'application/json',
12             },
13             success:function(res)
14             {
15                 //将请求的后台数据赋值new_list
16                 that.setData({
17                     new_list:res.data,
18                 })
19             }
20         })
21     }
22 })

View Code

*wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

wxml:

 1 <view class="lists">
 2     <view class="img">
 3      <!---这里绑定了一个手指触摸后马上离开的时间，跳转时并带上了id参数-->
 4         <image src="{{img}}" bindtap="detial" data-id="{{id}}"></image>
 5     </view>
 6     <view class="info">
 7         <view class="title">{{title}}</view>
 8         <view class="time">{{time}}</view>
 9     </view>
10 </view>

View Code

js:

 1 Page({
 2     data:{
 3         new_list:[]
 4     },
 5     detial:function(event){
 6         //带id跳转到指定的页面，这里的event.target.dataset.id是获取wxml页面上的data-id参数，详见事件说明
 7         wx.navigateTo({
 8             url:"../../pages/detail/detail?id="+event.target.dataset.id
 9         })
10     }
11  })

View Code

*带参数的wx.request(OBJECT)

上述代码跳转到指定页面后：

 1 Page({
 2     data:{
 3         info:{}
 4     },
 5     //res对象包含了跳转页面中的id参数，再页面加载时，获取id参数然后向后台请求参数，并赋值
 6     onLoad:function(res)
 7     {   
 8         var that = this;
 9         wx.request({
10             url:"http://wxcms.com/getOne",
11             //这里是 
12             data:{
13                 id:res.id,
14             },
15             header:{
16                 'content-type':'application/json'
17             },
18             success:function(msg)
19             {
20                 that.setData({
21                     info:msg.data,
22                 })
23             }
24         })
25     }
26 })

View Code

3.微信小程序数据请求方法wx.request测试

 1 // wxml:
 2 <view>
 3     <textarea value="{{textdata}}"/>
 4 </view>
 5 <button bindtap="RequestData" value="Button">Button</button>
 6 
 7 // js:
 8 Page({
 9     data:{
10        textdata:"put value",
11                 
12     },
13     RequestData:function(){
14        var that=this;
15         wx.request({
16           url: 'https://baidu.com',
17           data: {},
18           method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
19           // header: {}, // 设置请求的 header
20           success: function(res){
21             that.setData({textdata:res.data});
22             console.log(res.data);
23           },
24           fail: function() {
25             // fail
26           },
27           complete: function() {
28             // complete
29           }
30         })
31     }
32 })

View Code

4.关于小程序登录时获取openId和unionId（来源：https://blog.csdn.net/qq_38316918/article/details/78343128）

目前的项目是在做小程序这方面的，接触过的人应该都知道，同一个微信开放平台下的相同主体的App、公众号、小程序的unionid是相同的，这样就可以锁定是不是同一个用户。微信针对不同的用户在不同的应用下都有唯一的一个openId, 但是要想确定用户是不是同一个用户，就需要靠unionid来区分。一般自己的后台都会有自己的一个用户表，每个用户有不同的userid。也就是说同一个用户在同一个微信开放平台下的相同主体的应用对应着相同的userid,unionid以及不同的openid。所以在用户登录进来的时候，我们只能靠微信返回给我们的unionid去判断是不是同一个用户，在去关联我们的用户表，拿到对应的userid。

接下来就是在获取unionid时的一些小问题分享一下：

首先,前端调用wx.login的时候会返回一个code,这个code传到后台的时候，就需要去调用微信的接口(https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code）传入 code,appid,secret去换取到openid,session_key以及unionid等信息。这里就需要注意了。官方文档上说的是

如果用户已经关注公众号，或者曾经登录过App或公众号，则用户打开小程序时，开发者可以直接通过wx.login获取到该用户UnionID，无须用户再次授权。

就是因为没有注意到这句话，所以后来改了好多东西，这里分为两种情况，

(1)用code换取的时候，返回了unionid，这样就皆大欢喜了，你可以根据unionid以及openid去判断该用户有没有用户信息，从而获取userid或者生产userid返回给前端

(2)悲剧的情况，unionid返回为null，这时候你没法儿关联出用户的userid。后来再去看官方文档的时候，发现有针对这种情况的方法。就是需要前端再去调wx.getUserInfo()这个接口。这时候微信会返回很多数据(详情见微信官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/open.html),这些数据里面有一个encryptedData,这个数据中就包含你需要的unionid以及其他的很多用户信息啦。获取到以后将encryptedData、加密算法的初始向量iv返回给后端，后端根据这两个数据以及之前的session_key就可以解密出你需要的数据了。

View Code

5.php开启openssl扩展

 1 windows下开启方法：
 2 1： 首先检查php.ini中；extension=php_openssl.dll是否存在， 如果存在的话去掉前面的注释符‘；’， 如果不存在这行，那么添加extension=php_openssl.dll。
 3 
 4 2： 讲php文件夹下的： php_openssl.dll， ssleay32.dll， libeay32.dll 3个文件拷贝到 WINDOWSsystem32 文件夹下。
 5 
 6 3：如果没有 php_openssl.dll ，点击下载 php_openssl.dll
 7 
 8 下载下来有很多个php_openssl，找到你相应php版本下面的php_openssl。
 9 
10 查看php版本可以用如下代码：
11 <?php
12 phpinfo();
13 ?>
14 找到相应版本之后，按照上面讲的第二步来就可以了。
15 
16 4： 重启apache或者iis
17 
18 至此，openssl功能就开启了。
19 Linux下开启方法：
20 我使用的是阿里云ECS，PHP版本：php-5.5.7
21 
22 下面方案就以我的主机为例讲解为PHP添加openssl模块支持。
23 
24 网上一些答案说要重新编译PHP，添加configure参数，增加openssl的支持。这里讲一个不需要重新编译的方法。
25 
26 如果服务器上存在PHP安装包文件最好，如果已经删除，去下载和phpinfo页面显示版本一样的PHP安装文件，我这里是 php-5.5.7.tar.gz
27 
28 推荐去搜狐镜像下载，网易镜像没有找到。地址为： http://mirrors.sohu.com/php/
29 
30 用ssh工具连接到主机。
31 
32 # 下载到/var/www/php5目录下
33 
34 cd /var/www/php5
35 
36 wget http://mirrors.sohu.com/php/php-5.5.7.tar.gz
37 
38 # 解压
39 
40 tar zxvf php-5.5.7.tar.gz
41 
42 # 进入PHP的openssl扩展模块目录
43 
44 cd php-5.5.7/ext/openssl/
45 
46 /var/www/php5/bin/phpize # 这里为你自己的phpize路径，如果找不到，使用whereis phpize查找
47 
48 # 执行后，发现错误 无法找到config.m4 ，config0.m4就是config.m4。直接重命名
49 
50 mv config0.m4 config.m4
51 
52 /var/www/php5/bin/phpize
53 
54 ./configure --with-openssl --with-php-config=/var/www/php5/bin/php-config
55 
56 make
57 
58 make install
59 
60 # 安装完成后，会返回一个.so文件（openssl.so）的目录。在此目录下把openssl.so 文件拷贝到你在php.ini 中指定的 extension_dir 下（在php.ini文件中查找：extension_dir =），我这里的目录是 var/www/php5/lib/php/extensions
61 
62 # 编辑php.ini文件，在文件最后添加
63 
64 extension=openssl.so
65 
66 # 重启Apache即可
67 
68 /usr/local/apache2/bin/apachectl restart

View Code

6.微信小程序客户端腾讯云增强 SDK --- 使用方法：

https://www.npmjs.com/package/wafer2-client-sdk