标签 小程序开发 下的文章

    swipclick:function(event){
  console.log(event)
  let item_url =event.currentTarget.dataset.url // 页面跳转地址
  console.log(item_url)
  let tolink  = '../../pages/h5view?url='+encodeURIComponent(item_url);
  if(item_url){
    //先提示后跳转
     wx.showModal({
      title: '跳转提示',
      content: '您即将离开XXX，请注意您的账号和财产安全！',
      confirmColor: "#1aad19",
      success: function (sm) {
          if(sm.confirm){
              wx.navigateTo({
              url: tolink,
              })
          }
      }
   })
  }
  console.log('嘿嘿')
},

问题：navigator和tabBar同样URL地址无法使用的问题。详细查看【网页地址】

当url和tabar的地址一致时候，navgator要增加open-type="switchTab"的属性。

  <navigator url="/pages/loan/index" open-type="switchTab">
            <text class="txt">地址一</text>
          </navigator>

其他情况，可加open-type="navigate",默认情况下也是这个属性

  <navigator url="/pages/loan/index" open-type="navigate">
            <text class="txt">地址二</text>
          </navigator>

wxml代码

<view class="notice">
<view class="title">公告：</view>
<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
    <block wx:for="{{msgList}}" wx:key="{{item}}">
      <navigator url="/pages/index/index?title={{item.url}}" open-type="navigate">
        <swiper-item>
          <view class="swiper_item">{{item.title}}</view>
        </swiper-item>
      </navigator>
    </block>
  </swiper>
  </view>

数据js

msgList: [
{ url: "url", title: "多地首套房贷利率上浮 热点城市渐迎零折扣时代" },
{ url: "url", title: "悦如公寓三周年生日趴邀你免费吃喝欢唱城市渐迎零折扣时代" },
{ url: "url", title: "你想和一群有志青年一起过生日嘛？" }],
wxss样式

.notice {
 width: 750rpx;
 position: relative;
 margin-top:12rpx;
 }
.notice .title{
 width: 151rpx; 
 float: left;
 text-align: center;
 font-size: 30rpx;
 line-height:55rpx;
}
.notice .swiper_container {
height: 55rpx;
width: 600rpx;
line-height:55rpx;
float: right;
}

wxml代码

<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
    <swiper-item wx:for="{{imgUrls}}" wx:key="{{item.id}}">
      <navigator url="{{item.action}}">
        <image src="{{item.photo}}" background-size="cover"></image>
      </navigator>
    </swiper-item>
  </swiper>

js代码
嵌套在data：{}里面
imgUrls:[

  {"id":1,"action":"#","photo":"/static/demo/1.jpg"},
  {"id":2,"action":"#","photo":"/static/demo/2.jpg"},
  {"id":3,"action":"#","photo":"/static/demo/3.jpg"}
],

wxss

.banner {
  width: 750rpx;
  height: 320rpx;
}
.banner image {
  width: 100%;
  height: 320rpx;
}

前置步骤：
1、注册微信公众号
2、开发者配置----基本配置-----拿到APPID（开发者ID）和APPKEY（开发者密钥）
3、服务器配置
这里就是介绍【服务器配置】，在开始以前，先做下白名单设置：

【设置】---【基本设置】----【白名单】---添加你本地的公网IP即可，不懂移步这里

现在进入今天的正题：

如何进行服务器地址的有效验证，也就是人常说的TOKEN验证。

就官方而言，微信服务器在验证token的时候会发送GET请求到服务器的地址上（我的地址是www.kinmor.com/weixin/index/checkSignature[thinkphp3.2.3]），会请求带以下四个参数：

在验证的时候我做个小测试，下面是我接收到的参数
{"signature":"bd44ae804d379f63150a2dbb371137613f30f1c7","echostr":"1252117117333880755","timestamp":"1528768433","nonce":"902738055"}

signature 微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
timestamp 时间戳
nonce 随机数
echostr 随机字符串

官方的加密/校验流程如下：

  1. 将token、timestamp、nonce三个参数进行字典序排序
  2. 将三个参数字符串拼接成一个字符串进行sha1加密
  3. 开发者获得加密后的字符串可与signature对比，标识该请求来源于微信

下面是我的代码：



/**
    * 验证签名
    * @return bool
    */
    public  function checkSignature() {

        /*{"signature":"bd44ae804d379f63150a2dbb371137613f30f1c7","echostr":"1252117117333880755","timestamp":"1528768433","nonce":"902738055"}
        #$signature ='bd44ae804d379f63150a2dbb371137613f30f1c7';
        #$timestamp ='1528768433';
        #$nonce='902738055';*/
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce     = $_GET["nonce"];
        $echostr   = $_GET["echostr"];
        $token  = C('TOKEN');
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr, SORT_STRING);
        $tmpStr = implode($tmpArr);
        $tmpStr = sha1($tmpStr);
        if($tmpStr == $signature&&$echostr){
         echo  $echostr;
         exit;
        }
        
        
    }

/*$signature = isset($_GET["signature"])?$_GET["signature"]:'';
$signature = isset($_GET["msg_signature"])?$_GET["msg_signature"]:$signature; //如果存在加密验证则用加密验证段
$timestamp = isset($_GET["timestamp"])?$_GET["timestamp"]:'';
$nonce     = isset($_GET["nonce"])?$_GET["nonce"]:'';
$echostr   = isset($_GET["echostr"])?$_GET["echostr"]:'';
$token  = $this->options['token'];
$tmpArr = array($token, $timestamp, $nonce);
sort($tmpArr, SORT_STRING);
$tmpStr = implode($tmpArr);
$tmpStr = sha1($tmpStr);
if($tmpStr == $signature&&$echostr){
 echo  $echostr;
 exit;
}*/

在上面的代码中，用到的配置是token,注意这里的token值一定要和微信公众号【服务器配置】--【token】的值保持一致。上面我为了更方便管理，将token进行了预定义。

1.jpg