2018-09-27 11:02:00 weixin_30526593 阅读数 4

昨天有个小需求,在微信文章页面点击顶部固定的一段话弹出二维码,并且在上边加上关闭按钮,做完之后这个样子:

微信页面处理是比较麻烦的,在我的电脑上不管用微信开发者工具调还是浏览器手机模式调整都有点麻烦(可能微信者开发工具上有插件或者适配的编辑器,比较容易编辑,但是我刚开始做所以还没研究这个),而且跟在手机上看都有一定差别。自己就还是用编辑器写一个新的页面,实现功能再复制到项目中,然后再上传服务器看效果。

刚开始写了一个页面只有一个固定在顶部的一行红色,点击出现二维码,背景变暗用的是点击时给body添加rgba(0,0,0,.4),之后到微信上看发现文字部分是有这个颜色的背景,但是图片没变暗。后边到网上查了一下,在二维码弹框外边给了个div,设置属性

{

display: block;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);

}

这样图片也变暗了,但是弹出的二维码也变暗了,所以把背景色写成了rgba,去掉opacity相关设置,还有用absolute会导致文章超出手机屏幕再下拉别的地方还是没变,就改成了fixed。最终代码写的是

#bg{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index:10;
}

这个z-index,只要大于文章部分,小于顶部固定部分就行。要在固定在顶部的部分上加上X,给点击事件就要用阻止事件冒泡了,event.stopPropagation()。完整代码在下边(当然了,图片要换成自己有的?,自己能力目前有限,只能这样了,可以用手机模式查看能好看点?)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        /*二维码*/
        #bg{
            position: fixed; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%;
            z-index:10; 
        }
        #top{
            background-color: red;
            position:fixed;
            top:0;
            width: 100%;
            text-align: center;
            color:white;
            height: 40px;
            line-height: 40px;
            z-index: 20;
        }
        #qrcode{
            width: 56%;
            left: 22%;
            top: 20%;
            display: none;
            z-index: 20;
            position:fixed;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
            background-color: white;
        }
        #qrcode .one{
            font-size: 16px;
        }
        #qrcode .two{
            font-size: 16px;
            color: red;
        }
        #qrcode .three{
            font-size: 12px;
        }
        #qrcode img{
            width: 90%;
        }
        #close{
            position:absolute;
            top:5px;
            right:10px;
            cursor:pointer;
        }
        #closetop{
            position: absolute;
            right:20px;
        }
    </style>
</head>
<body>
    <div id="top">
        <span>马上关注好方妆扮,领取100元新手礼包</span><span id="closetop">×</span>
    </div>
    <div id="bg">
        <div id="qrcode">
            <span id="close">×</span>
            <p class="one">马上关注好方装扮</p>
            <p class="two">领取100元新手礼包</p>
            <img src="images/qr.jpg">
            <p class="three">扫描或长按识别二维码关注</p>
        </div>
    </div>
    <img src="images/1.jpg">
</body>
<script type="text/javascript">
    $('#top').on('click',function(){
        $('#qrcode').show();
        $('#bg').css('background-color','rgba(0,0,0,.5)');
    })
    $('#close').on('click',function(){
        $('#qrcode').hide();
        $('#bg').css('background-color','rgba(0,0,0,0)');
    })
    $('#closetop').on('click',function(event){
        event.stopPropagation();
        $('#top').hide();
    })
</script>
</html>

转载于:https://www.cnblogs.com/demeter/p/9711991.html

2020-01-05 12:05:26 lling0309 阅读数 48

1.开发者工具登录

1)开发者身份验证

微信web开发者工具在使用开发者微信账号登录后,才可以进行小程序的开发。在PC客户端双击微信开发者工具图标会弹出二维码扫描页面,开发者用手机微信扫描PC端的二维码确认身份,扫描成功后,在手机端用户点击跳转页面的“确认登录”即可以登录并使用微信开发者工具

在扫描二维码的过程中注意二维码是动态变化的,并且长时间不扫描会超时过期

2)开发者账号切换

如果用户登录后发现需要更换账号,可以在菜单栏选择微信开发者工具-账号,重新扫描二维码进行切换

                                                      

                                                           

2.辅助工具

1)小程序官方文档

小程序官网提供了技术文档供开发者学习,https://developers.weixin.qq.com/miniprogram/dev/framework/

2)微信开发社区:为小程序提供了一个专区,用户可以在此查找常见的问题和解答,用户也可以在此提问

https://developers.weixin.qq.com/community/develop/question

3)小程序开发助手:使用小程序开发助手可以方便,快捷地预览和体验小程序线上版本,体验版本和开发版本,管理小程序

4)小程序运营数据:小程序数据分析是面向小程序开发者,运营者的数据分析工具,提供关键指标统计,实时访问监控,自定义分析等,帮助小程序产品迭代优化和运营

3.微信小程序的未来

小程序会有很好的发展前景,个人觉得还不会一统天下,而且用起来还不太方便,都是在微信后台来启动的,如果有一天微信可以当做浏览器来用小程序的春天就到了,哈哈

 

2015-10-02 14:47:30 zhangfeng1133 阅读数 8878
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2015-10-01
 * Time: 15:41
 */
/**
 * * Created by PhpStorm.
 * * User: bin
 * * Date: 15-1-16
 * * Time: 上午9:48
 * */

//根据网上的代码 改写 不需要<span style="color: rgb(51, 51, 51); font-family: Simsun; font-size: 14px; line-height: 22px;"><span style="color: rgb(128, 0, 128);">openssl </span></span>支持和 libconv 支持
//namespace HomeCommon;
// 微信处理类

set_time_limit(30);


class Weixin
{
//构造方法

    static $qrcode_url = "https://api.weixin.qq.com/cgi-bin/qrcode/create?";

    static $token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&";

    static $qrcode_get_url = "https://mp.weixin.qq.com/cgi-bin/showqrcode?";

   //生成二维码
    //$wechat = array('appid'=>'','secret'=>'' );
    public function getEwm($wechat, $fqid, $type = 1)
    {

        //$wechat = array('appid'=>'','secret'=>'' );

        $appid = $wechat['appid'];

        $secret = $wechat['secret'];

        $ACCESS_TOKEN = $this->getToken($appid, $secret);

        $url = $this->getQrcodeurl($ACCESS_TOKEN, $fqid, 1);

        return $this->DownLoadQr($url, time());

    }

    protected function getQrcodeurl($ACCESS_TOKEN, $fqid, $type = 1)
    {

        $url = self::$qrcode_url . 'access_token=' . $ACCESS_TOKEN;
        //echo $url;

        if ($type == 1) {
            //生成永久二维码

            $qrcode = '{"action_name": "QR_LIMIT_SCENE", "action_info": {"scene": {"scene_id": ' . $fqid . '}}}';

        } else {
            //生成临时二维码

            $qrcode = '{"expire_seconds": 1800, "action_name": "QR_SCENE", "action_info": {"scene": {"scene_id": ' . $fqid . '}}}';

        }

        $result = $this->http_post_data($url, $qrcode);

        //print_r($result);
        $oo = json_decode($result[1]);

        if (!$oo->ticket) {

            $this->ErrorLogger('getQrcodeurl falied. Error Info: getQrcodeurl get failed');

            exit();

        }

        $url = self::$qrcode_get_url . 'ticket=' . $oo->ticket . '';

        return $url;

    }

    protected function getToken($appid, $secret)
    {
        //echo self::$token_url . "appid=$appid&secret=$secret";
        $ACCESS_TOKEN = $this->curl_get_contents(self::$token_url . "appid=$appid&secret=$secret");

        $ACCESS_TOKEN = json_decode($ACCESS_TOKEN);
        if($ACCESS_TOKEN){
            //print_r($ACCESS_TOKEN);
            $ACCESS_TOKEN = $ACCESS_TOKEN->access_token;
        }else{

            $ACCESS_TOKEN = '';
        }
        return $ACCESS_TOKEN;

    }

    protected function http_post_data($url, $data_string)
    {

        //echo $url;
        //echo $data_string;

        $ch = curl_init();

        curl_setopt($ch, CURLOPT_POST, 1);

        curl_setopt($ch, CURLOPT_URL, $url);

        curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);

        @curl_setopt($ch,CURLOPT_FOLLOWLOCATION,1);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);




        curl_setopt($ch, CURLOPT_HTTPHEADER, array(
                'Content-Type: application/json; charset=utf-8',
                'Content-Length: ' . strlen($data_string))
        );



        //echo curl_exec($ch);
        ob_start();
        echo curl_exec($ch);
        if (curl_errno($ch)) {

            $this->ErrorLogger('curl falied. Error Info: ' . curl_error($ch));

        }
        $return_content = ob_get_contents();
        ob_end_clean();

        //exit();
        $return_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); //注意curl_getinfo 要在curl_exec 后面运行,否则都返回0
        //echo $return_code;
        return array($return_code, $return_content);
    }

    //下载二维码到服务器
    protected function DownLoadQr($url, $filestring)
    {

        echo '二维码 url' . $url;
        if ($url == "") {

            return false;

        }

        $filename = $filestring . '.jpg';

        //ob_start();
        //echo readfile($url);
        //$img = ob_get_contents();
        //ob_end_clean();
        //$size = strlen($img);
        $img = $this->curl_get_contents($url);
        $size = strlen($img);
        $fp2 = fopen('./' . $filename, "a");

        if (fwrite($fp2, $img) === false) {

            $this->ErrorLogger('dolwload image falied. Error Info: 无法写入图片');

            exit();

        }

        fclose($fp2);

        return './' . $filename;   //./Uploads/qrcode/

    }

    private function ErrorLogger($errMsg)
    {

        $logger = fopen('./ErrorLog.txt', 'a+');

        fwrite($logger, date('Y-m-d H:i:s') . " Error Info : " . $errMsg . "rn");

    }

    protected function curl_get_contents($url)
    {
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_TIMEOUT, 3);
        curl_setopt($ch, CURLOPT_USERAGENT, '');
        curl_setopt($ch, CURLOPT_REFERER,'');
        @curl_setopt($ch,CURLOPT_FOLLOWLOCATION,1);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
        $r = curl_exec($ch);
        curl_close($ch);
        return $r;
    }



}

// 演示代码

$weixinerwe = new Weixin();
echo  $weixinerwe->getEwm(
    array('appid'=>'','secret'=>'' ),
    10000);


//http://weixin.qq.com/q/aj8LDoLm9L_NGznHoxOY





/*
 *
 * 一、场景二维码
为了满足用户渠道推广分析的需要,公众平台提供了生成带参数二维码的接口。使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送。
目前有2种类型的二维码,分别是临时二维码和永久二维码,前者有过期时间,最大为1800秒,但能够生成较多数量,后者无过期时间,数量较少(目前参数只支持1--100000)。两种二维码分别适用于帐号绑定、用户来源统计等场景。
用户扫描带场景值二维码时,可能推送以下两种事件:
如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事件推送给开发者。
如果用户已经关注公众号,在用户扫描后会自动进入会话,微信也会将带场景值扫描事件推送给开发者。
获取带参数的二维码的过程包括两步,首先创建二维码ticket,然后凭借ticket到指定URL换取二维码。

二、创建二维码ticket
每次创建二维码ticket需要提供一个开发者自行设定的参数(scene_id),分别介绍临时二维码和永久二维码的创建二维码ticket过程。
临时二维码请求说明
http请求URL
https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=TOKEN
POST数据格式

1 {
2 "expire_seconds": 1800,
3 "action_name": "QR_SCENE",
4 "action_info": {
5 "scene": {
6 "scene_id": 100000
7 }
8 }
9 }

返回格式:
{
"ticket": "gQFK8DoAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL3kweXE0T3JscWY3UTltc3ZPMklvAAIEG9jUUgMECAcAAA==",
"expire_seconds": 1800
}

永久二维码请求说明
http请求URL
https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=TOKEN
POST数据格式

{
"action_name": "QR_LIMIT_SCENE",
"action_info": {
"scene": {
"scene_id": 1000
}
}
}

返回格式
{
"ticket": "gQHi8DoAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL0UweTNxNi1sdlA3RklyRnNKbUFvAAIELdnUUgMEAAAAAA=="
}

提交数据参数说明:

返回结果参数说明

程序实现

三、通过ticket换取二维码
获取二维码ticket后,开发者可用ticket换取二维码图片。无须登录态即可调用。
HTTPS GET请求说明(TICKET必需UrlEncode)
https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET
ticket正确情况下,http 返回码是200,是一张图片,可以直接展示或者下载。
HTTP头示例如下:

1 {
2 "url": "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQHi8DoAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL0UweTNxNi1sdlA3RklyRnNKbUFvAAIELdnUUgMEAAAAAA%3D%3D",
3 "content_type": "image/jpg",
4 "http_code": 200,
5 "header_size": 162,
6 "request_size": 181,
7 "filetime": -1,
8 "ssl_verify_result": 20,
9 "redirect_count": 0,
10 "total_time": 0.509,
11 "namelookup_time": 0,
12 "connect_time": 0.058,
13 "pretransfer_time": 0.343,
14 "size_upload": 0,
15 "size_download": 28497,
16 "speed_download": 55986,
17 "speed_upload": 0,
18 "download_content_length": 28497,
19 "upload_content_length": 0,
20 "starttransfer_time": 0.481,
21 "redirect_time": 0
22 }

四、扫描带参数二维码事件
用户扫描带场景值二维码时,可能推送以下两种事件:
如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事件推送给开发者。
如果用户已经关注公众号,则微信会将带场景值扫描事件推送给开发者。
1. 用户未关注时,进行关注后的事件推送

<xml>
<ToUserName><![CDATA[gh_45072270791c]]></ToUserName>
<FromUserName><![CDATA[o7Lp5t6n59DeX3U0C7Kric9qEx-Q]]></FromUserName>
<CreateTime>1389684286</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[subscribe]]></Event>
<EventKey><![CDATA[qrscene_1000]]></EventKey>
<Ticket><![CDATA[gQHi8DoAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL0UweTNxNi1sdlA3RklyRnNKbUFvAAIELdnUUgMEAAAAAA==]]></Ticket>
</xml>

参数说明

2. 用户已关注时的事件推送

<xml>
<ToUserName><![CDATA[gh_45072270791c]]></ToUserName>
<FromUserName><![CDATA[o7Lp5t6n59DeX3U0C7Kric9qEx-Q]]></FromUserName>
<CreateTime>1389684184</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[SCAN]]></Event>
<EventKey><![CDATA[1000]]></EventKey>
<Ticket><![CDATA[gQHi8DoAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL0UweTNxNi1sdlA3RklyRnNKbUFvAAIELdnUUgMEAAAAAA==]]></Ticket>
</xml>

参数说明

事件代码:
以下代码判定了扫描带参数二维码的两种情形

private function receiveEvent($object)
{
$contentStr = "";
switch ($object->Event)
{
case "subscribe":
$contentStr = "欢迎关注方倍工作室 ";
if (isset($object->EventKey)){
$contentStr = "关注二维码场景 ".$object->EventKey;
}
break;
case "SCAN":
$contentStr = "扫描 ".$object->EventKey;
//要实现统计分析,则需要扫描事件写入数据库,这里可以记录 EventKey及用户OpenID,扫描时间
break;
default:
break;

}
$resultStr = $this->transmitText($object, $contentStr);
return $resultStr;
}

如果您不懂微信第三方开发,还是找人做吧
 *
 * */

2019-11-13 10:52:57 longbi141 阅读数 43

公众号二维码海报自动生成,使用公众号开发接口生成带参数的二维码和获取用户基本信息(UnionID机制)实现海报通的效果,在自己的服务器上部署就可以,也可以直接使用微号帮平台生成海报二维码。

1、生成海报二维码

使用微号帮平台生成海报二维码功能,实现海报通裂变粉丝,带粉丝头像、昵称、二维码,分享粉丝海报关注自动生成海报。

2、任务消息设置

可以设置【生成海报时弹出的信息,新粉丝关注时向推广员推送的提醒消息,推广员任务完成(达标)时推送的信息,粉丝重复取关公众号后再扫海报二维码关注时弹出的信息,老粉丝扫海报二维码时弹出的信息】这些消息,还可以搭配动态字符,任务达标数。

3、海报高级设置

海报通裂变粉丝,在微号帮生成海报二维码功能里操作,粉丝好友关注支持都可以查看到结果。

4、二维码海报统计数据

通过生成海报二维码》数据统计报表查看每天海报分享粉丝关注数据。

2018-10-18 13:43:29 qq_17433217 阅读数 137

前言:昨天写了一篇博客记录了一下ImageView长按实现图片的保存,在生活中使用微信的时候会发现长按图片,图片中如果含有二维码的话会弹出一个有“识别二维码”的弹窗,也就是说有无二维码弹出框是不一样的。今天,趁着午休的时间在保存图片demo的基础上进行了一下修改,实现简单的二维码识别功能。

        逻辑流程:用户长按图片—ImageView截图—判断有无二维码—提示

        关键代码:

        

img = (ImageView) findViewById(R.id.qrcode);
img.setDrawingCacheEnabled(true);
img.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(final View view) {
        Bitmap bitmap = ((ImageView) view).getDrawingCache();
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        int[] data = new int[width * height];
        bitmap.getPixels(data, 0, width, 0, 0, width, height);
        RGBLuminanceSource source = new RGBLuminanceSource(width, height, data);
        BinaryBitmap bitmap1 = new BinaryBitmap(new HybridBinarizer(source));
        QRCodeReader reader = new QRCodeReader();
        Result re = null;
        try {
            re = reader.decode(bitmap1);
        } catch (NotFoundException e) {
            e.printStackTrace();
        } catch (ChecksumException e) {
            e.printStackTrace();
        } catch (FormatException e) {
            e.printStackTrace();
        }
        if (re == null) {
            Toast.makeText(MainActivity.this,"没有找到二维码", Toast.LENGTH_SHORT).show();
        } else {
            String text = re.getText();
            Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
        }
        return true;
    }
});

        需要注意的是在使用getDrawingCache之前必须要调用setDrawingCacheEnabled,除此之外识别二维码是用的ZXing库,需要提前引入

        demo比较简单,附上地址

没有更多推荐了,返回首页