微信小程序码分享,微信小程序转发

项目背景:

1. 小程序要做分销功能,即这个小程序是谁分享给你的,你使用TA分享过来的小程序买了东西后,双方都有优惠

2. 小程序要实现分销功能,就要获取分享者的openid和使用者的openid;使用者的openid很容易获取,但是分享者的openid怎么通过小程序码和转发带过来呢?这是本文主要解决的问题。

 

最终实现的前端界面如下图所示,要实现 小程序码带参 和 “分享好友购票带参”

微信小程序码分享,微信小程序转发

 

一、生成带参小程序码

1. 实现的大体逻辑:

1.1  首先获取AccessToken(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183);

1.2  然后调用微信API:getWXACodeUnlimit(https://developers.weixin.qq.com/miniprogram/dev/api-backend/getWXACodeUnlimit.html);

即可生成小程序码。

 

2. 接口代码片段 CommonFunc.php (里面涉及到数据库操作和HTTP请求可以改成自己的)

<?php

class CommonFunc
{
    /**
     * @Function: 获取小程序AccessToken
     * @param $appId
     * @return mixed
     * @throws LocalServiceException
     * @throws RemoteServiceException
     * 从数据库查询access_token 如果过期,则调用微信官方接口,获取新的
     * access_token,并更新新的access_token和过期时间到数据库
     */
    public function getAccessToken($appId)
    {
        $appIdModel = new AppIDModel();
        $row = $appIdModel->fetchByWxAppId($appId);#数据库操作
        if($row)
        {
            $token = empty($row['access_token']) ? null : json_decode($row['access_token'], true);
            if($token && $token['expire'] > time())
            {
                return $token['access_token'];
            }else
            {
                $appSecret = $row['wx_appsecret'];
                $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appId}&secret={$appSecret}";
                $curl = new CUrl(30);
                $ret = $curl->get($url);#HTTP请求
                $ret = json_decode($ret, true);
                if(isset($ret['errcode']))
                {
                    throw new RemoteServiceException("获取AccessToken失败:".$ret['errmsg'],98);
                }else
                {
                    $expire = time() + $ret['expires_in'] - 200; //过期时间
                    $accessToken = $ret['access_token'];
                    $updateData = array('access_token' => json_encode(array('access_token' => $accessToken, 'expire' => $expire)));
                    $params = array('wx_appid' => $appId);
                    $appIdModel->updateData($updateData, $params);#数据库操作
                    return $accessToken;
                }
            }
        }else
        {
            throw new LocalServiceException("账户信息不存在或配置有误",99);
        }
    }


    /**
     * @Function 生成微信二维码
     * @param $scene String 最大32个可见字符,只支持数字,大小写英文以及部分特殊字符
     * @param string $page String 必须是已经发布的小程序存在的页面(否则报错),例如 pages/index/index
     * @param string $width String 二维码的宽度,单位 px,最小 280px,最大 1280px
     * @param bool $auto_color Bool 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调,默认 false
     * @param string $line_color Bool auto_color为 false 时生效,使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十进制表示
     * @param bool $is_hyaline Bool 是否需要透明底色,为 true 时,生成透明底色的小程序
     * @return mixed|string
     * @throws LocalServiceException
     * @throws RemoteServiceException
     */
    public function getWXACodeUnlimit($scene, $page='pages/index/index', $width='430',$auto_color=false,$line_color='{"r":0,"g":0,"b":0}',$is_hyaline=false)
    {
        //1.获取AccessToken
        $appId = \PhalApi\DI()->config->get('app.zc.wxAppId');#获取配置文件里的小程序appid
        $token = $this->getAccessToken($appId);

        //2.获取二维码
        $params = array(
            'scene'=>$scene,
            'page'          =>      $page,
            'width'         =>      $width,
            'auto_color'    =>      $auto_color,
            'line_color'    =>      $line_color,
            'is_hyaline'    =>      $is_hyaline,
            );
        $params = json_encode($params);
        $url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token={$token}";
        $curl = new CUrl(30);
        $curlRes = $curl->post($url,$params);#HTTP请求
        $ret = json_decode($curlRes, true);

        if(isset($ret['errcode'])) {
            throw new RemoteServiceException("获取二维码失败:".$ret['errmsg'],98);

        }else {
            return base64_encode($curlRes);
        }
    }
}

接口调用示例:

<?php
$commonFunc = new CommonFunc();
$commonFunc->getWXACodeUnlimit($scene, $page, $width, $auto_color,$line_color, $is_hyaline);
    

 

 

小程序前端wxacode.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    openid: '',
    imgBase64: '',//小程序二维码base64值
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var openid = wx.getStorageSync('openid');
    this.setData({ openid: openid });
    this.getWXACodeUnlimit();
  },


  //获取二维码数据
  getWXACodeUnlimit: function(){
    var that = this;
    var openid = that.data.openid;
    var imgBase64 = wx.getStorageSync(openid + '_imgBase64')
    if (imgBase64){
      that.setData({ imgBase64: imgBase64 })

    }else{
      var reqData = {
        scene: openid,
      }
      wx.request({
      url: 'www.example.com',
      data: {
        scene: reqData.scene,
        page: reqData.page,
        width: reqData.width,
        auto_color: reqData.auto_color,
        line_color: reqData.line_color,
        is_hyaline: reqData.is_hyaline,
      },
      header: {
        "content-type": "application/json"
      },
      method: "POST",
      success: function (e) {
        that.setData({imgBase64: e})
        wx.setStorageSync(openid + '_imgBase64', data)
      },
      fail: function (t) {
        
      }
    })

    }
  },
  


})

 

小程序前端wxacode.wxml

<view>
     <image src='data:image/png;base64,{{imgBase64}}'></image>
</view>

 

经过以上步骤即可生成小程序码。

 

 

 

二、“分享好友”按钮带参转发

transfer.wxml

<view class="queryBox">
     <button open-type="share">分享好友</button>
</view>

transfer.js


Page({

  /**
   * 页面的初始数据
   */
  data: {
    openid: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var openid = wx.getStorageSync('openid');
    this.setData({ openid: openid });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },


//分享好友购票
onShareAppMessage:function(){
  var that = this;
  var openid = that.data.openid;
  return {
    title:'专业城际巴士互联网订票平台,300万用户的首选!',
    path: '/pages/index/index?whoShareToMe=' + openid,
    success:function(res){
      console.log(res)
    }
  }
},
  


})

至此,带参转发也可以了。

 

三、最后如何获取到带过来的参数值呢?

在app.js 的 onLaunch函数里捕获即可

onLaunch: function (options) {
console.log(JSON.stringfy(options))
}