wns9778.com_威尼斯wns.9778官网

热门关键词: wns9778.com,威尼斯wns.9778官网
wns9778.com > 计算机教程 > 详解微信第三方小程序代开发

原标题:详解微信第三方小程序代开发

浏览次数:154 时间:2019-08-10

详解微信第三方小程序代开发

1、模版消息功能概述


基于微信的通知渠道,为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验。

  • ###### 模板推送位置:服务通知

  • ###### 模板下发条件:用户本人在微信体系内与页面有交互行为后触发

1、 支付:当用户在小程序内完成过支付行为,可允许开发者向用户在7天内推送有限条数的模板消息(1次支付可下发1条,多次支付下发条数独立,互相不影响)
2、提交表单:当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的,开发者需要向用户提供服务时,可允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条,多次提交下发条数独立,相互不影响)

  • ###### 模版消息效果展现:

图片 1

模版消息效果展现

  • ###### 进入服务通知:

图片 2

进入服务通知

  • ###### 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的小程序各个页面

微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考

2、功能实现


  • ##### 获取模板 id

登录 https://mp.weixin.qq.com 获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用

图片 3

mp-notice.jpg

![](https://upload-images.jianshu.io/upload_images/4250933-35b833a6a1a35e87.png)

请求参数说明



![](https://upload-images.jianshu.io/upload_images/4250933-9f3dd2c7acf0fe95.png)

返回参数说明
  • node.js代码实现
<!-- ih_request.js -->
const request = require('request');
var ih_request = {};
module.exports = ih_request;
ih_request.get = async function(option){
    var res = await req({
        url: option.url,
        method: 'get'
    });
    res.result?option.success(res.msg):option.error(res.msg);
}

const request = require('../script/ih_request');
await request.get({
        url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET',
        success: function(res){
            console.log(res.access_token)
        },
        error: function(err){
            console.log(err)
        }
  });
  • ##### 获取用户的唯一标识(openid)

  • 调用wx.login(OBJECT)获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid)

  • 参数说明
![](https://upload-images.jianshu.io/upload_images/4250933-7547acc3b3125d02.png)

参数说明
  • 小程序代码实现获取code并请求传给服务器
//app.js
App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          //发起网络请求 将code传给服务器
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('获取用户登录态失败!'   res.errMsg)
        }
      }
    });
  }
})
![](https://upload-images.jianshu.io/upload_images/4250933-8bd9dd70f91041d7.png)

返回参数



![](https://upload-images.jianshu.io/upload_images/4250933-12a2835f61471c04.png)

返回说明
  • node.js 代码实现code 换取 opened
<!-- ih_request.js -->
const request = require('request');
var ih_request = {};
module.exports = ih_request;
ih_request.get = async function(option){
    var res = await req({
        url: option.url,
        method: 'get'
    });
    res.result?option.success(res.msg):option.error(res.msg);
}

const request = require('../script/ih_request');
request.get({
        url: 'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code',
        success: function(res){
            console.log(res)
        },
        error: function(err){
            console.log(err)
        }
    });
  • ##### 小程序提交表单将formId传给服务器
<!--index.wxml-->
<view class="container">
  <view bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <form bindsubmit="formSubmit" report-submit="true">
    <input name="input" class="input" placeholder="please input here" />
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </form>
</view>

<!--index.js-->
//实现绑定的formSubmit 将formId传给服务器
  formSubmit: function (e) {
    var that = this
    wx.request({
      url: 'https://ihealth-wx.s1.natapp.cc/template',
      data: {
        'input': e.detail.value.input,
        'formId': e.detail.formId,
        'code': that.data.login_res.code
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function(res){
        // success
        console.log('成功'   res);
        // console.log(e.detail.formId);
      },
      fail: function(err) {
        // fail
        console.log('失败'   err);
      },
      complete: function() {
        // complete
      }
    })
  }

图片 5

页面展示

![](https://upload-images.jianshu.io/upload_images/4250933-2c3f632b73eb0df9.png)

POST参数说明
  • 返回码说明
![](https://upload-images.jianshu.io/upload_images/4250933-84c2e96fe01e4792.png)

返回码说明
  • node.js代码实现
<!-- ih_request.js -->
const request = require('request');
var ih_request = {};
module.exports = ih_request;
ih_request.postJson = async function(option){
    var res = await req({
                            url: option.url,
                            method: 'post',
                            headers: {
                                'content-type': 'application/json'
                            },
                            body: JSON.stringify(option.body)
                        });
    res.result?option.success(res.msg):option.error(res.msg);
}

const request = require('../script/ih_request');
 await request.postJson({
        url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' access_token,
        body: {
            touser: '触发帐号的opened',
            template_id: '模版id',
            page: '点击模版卡片的跳转页面',
            form_id: 'form_id或者prepay_id',
            data: {
                keyword1:{
                    value: '小程序测试模版',
                    color: '#173177'
                },
                keyword2:{
                    value: '2017年3月24日',
                    color: '#173177'
                },
                keyword3:{
                    value: 'iHleath',
                    color: '#173177'
                }
            },
            //需要放大的关键字
            emphasis_keyword: 'keyword1.DATA'
        },
        success: function(res){
            console.log(res);
        },
        error: function(err){
            console.log(err);
        }
    });
  • ###### 模版消息效果展现:

图片 6

模版消息效果展现

  • ###### 进入服务通知:

图片 7

进入服务通知

注意事项:如果在调试过程中返回了错误码请到小程序代开发api页面查看,

3、最后


如何大家看了文章还有不懂或者其他问题,欢迎私信我或者评论

      小程序代开发使用的域名是你申请第三方时候填写的域名,

     小程序代码模板最多只有50个,可以删除然后重新添加。

准备工作:

  申请微信第三方并且权限那边要选上代开发,第三方申请成功之后就是准备小程序了,需要两个小程序,一个作为小程序代码库,一个作为用户测试用,需要在第三方授权。

  添加小程序代码库: 在第三方那边将小程序添加为开发小程序,然后该小程序就成为了第三方的开发小程序,之后该小程序提交的代码都会存入第三方草稿箱,你可以选择版本添加为模板,一个第三方最             多只能有50个模板。

代开发流程:

  post请求公共方法,与微信服务器交互用

  代码如下

protected function curl_post( $curlHttp, $postdata ) {
    $ch = curl_init(); //用curl发送数据给api
    curl_setopt( $ch, CURLOPT_POST, true );
    curl_setopt( $ch, CURLOPT_POST, true );
    curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
    curl_setopt( $ch, CURLOPT_URL, $curlHttp );
    curl_setopt( $ch, CURLOPT_POSTFIELDS, $postdata );
    curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, FALSE );
    curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, FALSE );

    $response = curl_exec( $ch );
    curl_close( $ch );
    $result = json_decode( $response, true );
    return $result;
  }

  get请求公共方法,与微信服务器交互用

  代码如下

protected function buildRequestForm( array $param, $method, $target='',$jump=false) {
    $sHtml = "<meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><form id='autoSubmit' action='".$target."' method='".$method."'>";

    if ( !empty( $param ) ) {
      foreach( $param as $key => $value ) {
        $sHtml.= "<input type='hidden' name='".$key."' value='".urldecode($value)."'/>";
      }
    }
    $sHtml .= "</form>";

    if($jump) $sHtml = $sHtml."<script>document.getElementById("autoSubmit").submit();</script>";

    return $sHtml;
  }

  获取授权方api调用拼成access_token公共方法

  代码如下

protectd function getAccessToken( $appId ) {
    $accessToken = '';

    if ( empty( $appId ) ) {
      return $accessToken;
    }

    // 中间的逻辑自己填充

    return $accessToken;
  }

  首先是开发一套小程序并且上传,之后再第三方里边把该版本设置成模板,这个时候你就用了模板id(用于代码指定用)

  通过调用微信接口,给用户小程序指定小程序代码

  代码如下

public function commitCode() {
    $appId = input( 'app_id', '' );
    $descript = input( 'descript', '测试代码指定' );
    $version = input( 'version', 'V.1.0' );
    $templateId = input( 'template_id', 1 );
    if ( empty( $appId ) ) {
      $this->error( appid不能为空 );
      return;
    }

    if ( empty( $templateId ) && ( $templateId != 0 ) ) {
      $this->error( '模板id不能为空' );
      return;
    }

    $accessToken = $this->getAccessToken( $appId );

    // 个人信息我给清除了,空字符部分请自己补充
    $extJson = array(
      'extAppid' => $appId,
      'ext' => array(
        'attr1' => 'value1'
      ),
      'extPages' => array(
          'pages/index/index' => array(
            'navigationBarTitleText'  => ''
          ),
          'pages/media/media' => array(
            'navigationBarTitleText'  => ''
          )
      ),
      'pages' => array(
          'pages/index/index',
          'pages/media/media'
      ),
      'window' => array(
          'backgroundColor'      => '#f8f8f8',
          'navigationBarTextStyle'  => 'white',
          "navigationBarTitleText"  => "",
          'navigationBarBackgroundColor' => '#2b3b48'
      ),
      'tabBar' => array(
        'list' => array(
          array(
            'text'   => '',
            'pagePath' => 'pages/index/index',
          ),
          array(
            'text'   => '',
            'pagePath' => 'pages/media/media',
          )
        )
      ),
      'networkTimeout' => array(
          'request'    => 10000,
          'uploadFile'  => 10000,
          'downloadFile' => 10000,
          'connectSocket' => 10000
      )
    );

    $params = array(
      'template_id'  => $templateId,
      'user_version' => $version,
      'user_desc'   => $descript,
      'ext_json'   => json_encode( $extJson, JSON_UNESCAPED_UNICODE )
    );
    $result = $this->curl_post( 'https://api.weixin.qq.com/wxa/commit?access_token='.$accessToken, json_encode( $params, JSON_UNESCAPED_UNICODE ) );
    if ( empty( $result ) || !empty( $result['errcode'] ) ) {
      $this->error( '代码指定错误' );
      return;
    }

    $this->success( '操作成功' );
    return;
  }

  指定代码之后就是查看功能是否正常了,所以就要调用微信接口获取体验二维码扫码体验,

本文由wns9778.com发布于计算机教程,转载请注明出处:详解微信第三方小程序代开发

关键词: wns9778.com

上一篇:php debug_backtrace、debug_print_backtrace和匿名函数

下一篇:没有了