一 前端
微信小程序以数据驱动的理念以及类jsx语法的形式，以高集成高度封装的方式开辟了H5新理念。
1.navigation传参
和一般的链接带参数一样'?data=xxx&list=xxx'，参数可以在onLoad函数的回调里获得
onLoad:function(option){
//console.log(option.data);
}
2.获取属性值
由于在小程序以数据驱动作为基本理念。我们要尽量避免去操作Dom。
组件的属性以data-param = "xxx"的形式写入，当该组件绑定了事件处理函数bindtap（不会阻止事件冒泡）或catchtap时，如bindtap = "tapName"，可以同过该函数获取该组件的一些信息，如下：
tapName:function(event){
console.log(event);
}
获取到的返回值如下（部分省略）：
"target": {
"id": "cid",
"dataset": {
"param":"xxx"
}
},
"currentTarget": {
"id": "cid",
"dataset": {
"param":"xxx"
}
}
........
这里需要注意的事，当获取某个组件的属性的值的时候，请使用event.currentTarget.dataset.param。当该事件没有阻止事件冒泡的时候，target和currentTarget（相当于this）的值是不一样的。
3.动画
小程序在使用动画的时候：
- 组件上写入animation属性
<View animation="{{move}}"></View>
- js中创建animation实例
page({
data:{
move:''
},createAnimation : function(){
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear',
});
}
})
- export导出动画并传递给animation属性
creatAction:function(){
this.createAnimation();
this.animation.top('50rpx').left('50rpx').step();
//step() 来表示一组动画完成
this.setData({
move : this.animation.export();
})
}
4.条件渲染
js中经常遇到显示隐藏等功能，这里有两种方法
- wx:if条件渲染
<View wx:if="{{isShow}}"></View>
当isShow为ture是该View会被渲染
条件还可以if else配合使用
<View wx:if="{{num>1}}"></View>
<View wx:elif="{{num<1}}"></View>
<View wx:else></View>
- hidden属性
用法相似
如何抉择：
如果需要频繁切换的情景下，用 hidden ，反之则 用wx:if 。
二 后端（PHP）
1.session问题
小程序有个很奇葩的现象，每次交互的sessionid都不一样，所以当我们和自己的服务器交互时需要将sessionid传给前端，前端的下次请求则在head中设置好sessionid
2.wx.getUserInfo接口改动
不再主动呼出授权框，需要前端自己引导用户授权，按钮：
<button class='getinfo' open-type="getUserInfo" bindgetuserinfo="goauth_info" binderror="goauth_error">确认授权</button>
2.获取unionid
官方文档上说的还是比较清楚的
- 1.调用接口wx.getUserInfo，从解密数据中获取UnionID。注意本接口需要用户授权，请开发者妥善处理用户拒绝授权后的情况。
- 2.如果开发者帐号下存在同主体的公众号，并且该用户已经关注了该公众号。开发者可以直接通过wx.login获取到该用户UnionID，无须用户再次授权。
- 3.如果开发者帐号下存在同主体的公众号或移动应用，并且该用户已经授权登录过该公众号或移动应用。开发者也可以直接通过wx.login获取到该用户UnionID，无须用户再次授权。
也就是说如果是2,3种情况，我们调用接口
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code='.$code.'&grant_type=authorization_code
可以直接拿到unionid
{
"openid": "OPENID",
"session_key": "SESSIONKEY",
"unionid": "UNIONID"
}
如果是第1种情况
这我我们需要采用算法将wx.getUserInfo接口获取到的私密信息encryptedData，iv和session_key传递给后端进行解密获得unionid
PHP写法
include_once "wxBizDataCrypt.php";
$appid = 'APPID';
$sessionKey = $_SESSION["sk"];
$encryptedData = $_POST["encryptedData"];
$iv = $_POST["iv"];
$pc = new WXBizDataCrypt($appid, $sessionKey);
$errCode = $pc->decryptData($encryptedData, $iv, $data );
if($errCode == 0)
{
echo $data;
}else{
echo $errCode;
}
3.数据验证
通常我们在使用unionid在和自己的业务关联时，都会考虑有效性。但公众号的token有效性验证接口无法用于小程序
不过我们可以通过wx.getUserInfo接口获取到的参数rawData和signature传给后端，将rawData和session_key进行哈希加密，与signature进行比对来确保数据的有效性
if(hash('sha1',$rawData.$session_key) === $signature)
{
echo '验证通过';
}
网友评论