小程序码、卡券与关注公众号

发表于 2018-07-15

字数统计 4256

被 2899 人阅读

开发过H5的小伙伴肯定知道，公众号有自己的 AppID 和 AppSecret 。小程序也一样，小程序也有自己的 AppID 和 AppSecret 。公众号的 AppID 和 AppSecret 主要的作用有两个。一个是通过重定向获取Code，然后通过 AppID、AppSecret 和 Code 换取用户信息。另一个就是通过 AppID、AppSecret 换取 AccessToken，然后通过 AccessToken 换取 jsapi_ticket（公众号用于调用微信JS接口的临时票据）与api_ticket（卡券 api_ticket 是用于调用卡券相关接口的临时票据）。在小程序中，用户信息的获取由 wx.getUserInfo 方法提供数据。前端也不需要 JSSDK 签名。卡券则是调用关联的公众号卡券的参数。那么，小程序 AppID 和 AppSecret 有什么作用呢，目前所知的，就是用来换取 AccessToken ，然后通过 AccessToken 调用小程序码的 API 接口。

小程序码

<php
    $accessToken = '小程序的AccessToken';
    // 设置访问接口与参数
    $url = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' . $accessToken;
    $data = [
        'scene' => 1, //最大32个可见字符
        'width' => 430, //二维码的宽度
        'auto_color' => false, //自动配置线条颜色
    ];

AccessToken 的获取方式与公众号中 AccessToken 的获取方式一样，这里不就复述了。小程序码，则是通过CURL方法对 $url 进行 Post 请求来获取的，参数为$data。返回的图片数据为二进制流。

小程序卡券

小程序的卡券完全就是调用相关联的公众号的卡券参数，所要求的参数与公众号卡券完全一致。所以不要在小程序的开发文档里查找如何使用卡券了，因为介绍的并不完整，完整的调用与签名方法请查看公众号卡券。

是否关注公众号

想在小程序中判断是否关注公众号，唯一的办法就是在小程序中调用 <web-view> 控件，让小程序加载H5页面，然后通过H5页面换取页面 Code ，通过 Code 换取用户的公众号 OpenId 再通过公众号的方法判断用户是否关注了公众号。

小程序中的 `<web-view>`

<web-view> 有 src 和 bindmessage 两个属性，src 用来设置 <web-view> 打开的网页地址， bindmessage 用来监听页面发送给小程序的消息。也就是说，小程序可以通过 src 设置带参的 url 向 <web-view> 打开的页面传递参数，而页面也可以通过 bindmessage 属性向小程序发送数据，从而现实小程序和H5的通信。

网页代码

// 在页面内引入JSSDK1.32
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js">
</script>

<script>
    //向小程序发送消息
    wx.miniProgram.postMessage({ data: {msg: '我是网页' }})//第一层应该是data
</script>

WXML代码

<web-view src="https://localhost" bindmessage="msgShow"></web-view>

JavaScript代码

Page({
    msgShow(e){
        console.log(e.detail.data) //我是网页，获取到来自也页面的数据
    }
})

`src` 属性避坑指南

在实际应用中，<web-view> 难免要动态绑定页面路径，这样可以通过 url 的方式给页面传值。

举个例子，假设页面需要从小程序里面获取姓名，那代码可能像下面这样：

WXML代码

<web-view src="https://localhost?name={{name}}"></web-view>

JavaScript代码

Page({
    data:{
        name: '王小明'
    }
})

然而这样做，你可能就掉进了坑里，尽管看上去没设么问题，但是有很大概率获取不到传过去的姓名，因为网页加载时 src 属性可能是这样的 https://localhost?name= ,导致网页中 js 不能通过解析 url 得到小程序传过来的姓名。正确做法是在 javaScript 中完成字符串的拼接，然后调用 setData 方法。

WXML代码

<web-view src="{{url}}"></web-view>

JavaScript代码

Page({
    data:{
        url: ''
    }
    onLoad(options){
           let name = options.name;//获取到小程序其他页面传来的电话号码；
           let url = `http://localhost?naem=${name}`;
           this.setData({url : url})
     }
})

公众号是否关注

通过 <web_view> 访问特定H5页面后，我们就可以处理H5一样处理是否关注的问题了。

4.总结

因为之前没有做过小程序和公众号的混合开发，所以在开发的过程中遇到了不少坑。主要是开发流程方面的，因为小程序文档里对小程序开发所需要的后端实现表达并不是很明确，所以在卡券的调用上花了不少时间。还有就是否关注公众号的问题上，之前是想通过 unionId 来对比出是否关注，最后在测试的过程中发现行不通。所以，又想到了使用 <web-view> 的方式进行并成功了。

发开就是这样螺旋上升的过程，特别是在没有了解过的领域，会遇到特别多的坑。但只要多想想，就总能想到解决的办法，A方案不行就尝试B方案，成功的方案都会是宝贵的经验。