微信小程序消息订阅完整教程前端+后端。

内容较多!!!如果有没涉及到的欢迎补充或提问。

一、订阅模板,前端调用

        根据官方文档来:第一步

        在小程序里面找到消息订阅,随便选个模板就行,我们需要的是模板id

https://mp.weixin.qq.comhttps://mp.weixin.qq.com/      在前端页面我们只需要调用方法

       wx.requestSubscribeMessage({
                  tmplIds: ['填写我们申请的模板id'],
                  success (res) { 
                  }
        })

        调用这个方法必须是在点击时间里面出发,它不能默认触发。下面为前端页面触发样式

        

         当用户允许之后,只能获取到一条消息,个人小程序只能进行一次消息订阅,只有再次触发这个方法,用户点击允许,才可以接收到下个消息,但有个bug,用户可以连续点很多次允许,那么就可以接收到很多次消息。

二、获取token

        前端的任务已经完成,下面是后端的内容,我们先以php为例子。

        我们不使用云调用的话,首先我们需要获取access_token  获取access_token  的方法在官方文档里面有。auth.getAccessToken | 微信开放文档 

        需要在后端调用的接口为

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

       需要appid  和appsecret 这两个参数我们从小程序里面可以找到:开发管理==》开发设置 appsecret 忘记的话 重置即可。

 下面贴上后端获取access_token的代码:PHP

$openid = $_POST['openid'];
            $appid = '小程序的appid';//小程序的appid	 
            $secret = '小程序的$appSecret';// 小程序的$appSecret
            $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
            $res = curl_get($url);
            $res = json_decode($res,1);
            if($res['errcode']!=0) throw new Exception($res['errmsg']);
            $token = $res['access_token'];//保存下来token,下面要用

   三、后端发送消息

        做测试的话,可以在前端,设置一个事件,在后端写一个接口。前端去调用接口,去实现消息发送

        第三步的官方文档:subscribeMessage.send | 微信开放文档

        后端调用接口需要的参数为:上面获取到的token 和下图

        

         其中data:是消息模板中的数据,数据填写根据自己的模板数据填写。在小程序里,打开自己的模板就可以看到对应的额数据怎么填写:上图中的number0 就对应这个图中的thing2,value就对应这个图中的data,随便填。

 看具体代码部分

        强调一下,使用php的时候,post_data 不要设置成对象,要设置成数组的形式,然后将post_data转化成json格式不然会报错47001

 $post_data = [
                'touser' => '用户的openid,你只需要前端调接口的时候穿过来就行',
                'template_id' => '你的模板id',
                
                'page' => '/pages/index',//你点击消息要跳转的页面
                'miniprogram_state' => "developer",//跳转小程序类型:developer为开发版;trial为体验版;formal为正式版;默认为正式版
                'lang' => 'zh_CN',
                'data'=>[
                    'thing2'=>[
                        "value"=> "你可以睡觉了"
                    ],
                    'thing3'=>[
                        "value"=> "你已经很多天没有睡了"
                    ],
                    'name1'=>[
                        "value"=> "帅气的黑大王"
                    ]

                ]
            ];
 $url="https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token={$token}";
            // send_post($url, $post_data);
            $curl = curl_init();
            $post_data = json_encode($post_data);    
            // $post_data = http_build_query($post_data);
            curl_setopt($curl,CURLOPT_URL,$url1);
            curl_setopt($curl,CURLOPT_POST,1);
            curl_setopt($curl,CURLOPT_POSTFIELDS,$post_data);
            curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
            $resulet = curl_exec($curl);
            var_dump($resulet);

 此时我们在前端页面增加点击事件测试一下:下图为测试结果

        

 四、后端python代码

        

import requests
import time
from flask import Flask, json, request, jsonify, render_template
from hashlib import sha1

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False  #解决中文乱码

appid = ''
secret = ''
openid = None
template_id = ''


@app.route('/', methods=['GET', 'POST'])
def home():
    return '<h1>Home</h1>'

# 小程序消息发送启用接口
@app.route('/check_msg_auth', methods=['GET'])
def check_msg_auth():
    signature = request.args.get("signature")
    timestamp = request.args.get("timestamp")
    nonce = request.args.get("nonce")
    echostr = request.args.get("echostr")
    print("echostr: ", echostr)

    token = "qimhui"
    tmpArr = [token, timestamp, nonce]
    tmpArr.sort()
    tmpStr = "".join(tmpArr)
    s1 = sha1()
    s1.update(json.dumps(tmpStr).encode())
    tmpStr = s1.hexdigest()
    print("tmpstr: ", tmpStr)
    return echostr

# 登录获取openid
@app.route('/login', methods=['POST'])
def login():
    ret_json = {'status': 0, 'msg': '未访问', 'data': None}
    global openid
    try:
        code = request.form.get('code')
        print("---------------code =", code)
        url = "https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code" % (
            appid, secret, code)
        res = requests.get(url).json()
        openid = res.openid
        print("----------res =", res)
        ret_json['data'] = res
    except Exception as e:
        ret_json['msg'] = str(e)
        ret_json['status'] = 1
    finally:
        return jsonify(ret_json)

# 获取access_token
@app.route('/get_authtoken', methods=['POST'])
def get_authtoken():
    url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s" % (
        appid, secret)
    res = requests.get(url).json()
    print("----------res =", res['access_token'])
    return res['access_token']

# 发送消息
@app.route('/send_msg', methods=['POST'])
def send_msg():
    ret_json = {'status': 0, 'msg': '成功', 'data': None}
    try:
        access_token = get_authtoken()
        print("-----------access_token =", access_token)
        url = "https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=%s" % (
            access_token)

        curr_time = time.strftime("%Y年%m月%d日 %H:%M:%S", time.localtime())
        payload = {
            "access_token": access_token,
            "touser": openid,
            "template_id": template_id,
            "page": "pages/index/iconView",
            "miniprogram_state": "developer",
            "lang": "zh_CN",
            "data": {
                "thing1": {
                    "value": ""
                },
                "date2": {
                    "value": curr_time
                },
                "thing3": {
                    "value": ""
                },
                "thing4": {
                    "value": "中国"
                }
            }
        }
        # res = json.dumps(payload)
        # print("res =", res)
        data = json.dumps(payload, ensure_ascii=False)
        res = requests.post(url, data=data.encode("utf-8")).json()
        ret_json['data'] = res
    except Exception as e:
        ret_json['msg'] = str(e)
        ret_json['status'] = 1
    finally:
        return jsonify(ret_json)


if __name__ == '__main__':
    # get_authtoken()
    app.run()

 么么哒。

  • 5
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 微信小程序开发是一种基于微信平台的应用程序开发方式,可以在微信内直接运行的应用程序。它可以实现类似于APP的功能,但相比APP更加轻量、快速、易于开发和使用。 微信小程序的开发主要分为前端后端两部分。 前端开发是指通过使用小程序开发框架(如原生开发、wepy等)进行界面和交互的开发。开发者可以使用HTML、CSS和Javascript等技术进行整体的页面布局设计和交互逻辑的编写。通过小程序开发框架提供的API和组件,可以实现丰富的界面效果和功能。在前端开发中,可以通过调用后端接口获取数据或进行页面跳转等操作。 后端开发是指通过使用Java等编程语言进行服务器端的开发。在微信小程序中,后端开发主要用于数据的处理和管理。开发者可以通过后端开发来搭建服务器、编写API接口,实现数据存储和处理、权限控制、业务逻辑等功能。后端开发需要结合小程序前端的需求,定义数据的格式和访问方式,并与前端进行交互。 微信小程序开发前端后端的配合是整个开发过程中的重要环节。开发者需要根据产品需求和设计稿进行界面和交互的开发,并将数据以适当的格式传输给后端进行处理和管理。前后端的协作可以通过API接口进行,前端调用后端提供的接口,传递参数并获取数据。开发者可以根据具体需求和开发框架的限制进行功能开发和调试,最终实现微信小程序的各项功能需求。 总之,微信小程序开发需要前端后端的配合,前端负责界面和交互的开发,后端负责数据的处理和管理,两者相互合作,共同实现微信小程序的功能和效果。 ### 回答2: 微信小程序开发包括前端后端两个主要部分。 1. 前端开发:微信小程序前端开发主要使用HTML、CSS和JavaScript等技术,通过编写小程序页面的HTML结构、样式和交互逻辑来实现小程序的界面和功能。开发者可以使用微信提供的开发者工具进行开发和调试,还可以利用第三方框架如Vue.js、React等来简化开发流程。 在前端开发中,开发者需要了解微信小程序的基本组件和API,以及小程序的生命周期、页面间的跳转和传递数据等。同时,还需要掌握微信小程序的开发规范和设计原则,以保证用户体验和小程序的可靠性。 2. 后端开发:微信小程序后端开发主要使用Java等编程语言进行实现后端开发者需要负责处理小程序前端发送来的请求,验证用户身份,获取和处理数据,并将结果返回给前端。 在后端开发中,开发者需要使用Java开发框架如Spring Boot、Spring Cloud等,搭建服务器环境并实现业务逻辑。此外,还需要与数据库进行交互,操作和管理数据。同时,为了提高小程序的性能和可靠性,开发者还需要进行性能优化、错误处理和安全防护等工作。 综上所述,微信小程序开发需要前端后端的配合合作。前端负责实现小程序的界面和用户交互,后端负责处理数据和业务逻辑。通过整合两者的能力,可以开发出功能完善、用户体验较好的微信小程序。 ### 回答3: 微信小程序是一种基于微信平台的应用程序开发模式,它具有轻量级、快速加载和便捷的特点。微信小程序开发涉及到前端后端两方面的技术。 在前端开发中,我们需要掌握HTML、CSS和JavaScript等基础技术,同时需要熟悉微信小程序提供的开发框架和API。前端开发主要包括页面布局、样式设计、交互逻辑实现等工作。通过使用微信小程序的框架和API,我们可以快速地开发小程序,并且能够提供良好的用户体验。 在后端开发中,我们通常选择使用Java语言进行开发。Java是一种常用的编程语言,具有广泛的应用领域和稳定的性能。后端开发主要涉及到数据处理、业务逻辑编写、接口开发等方面的工作。我们可以使用Java的一些开发框架和工具,如Spring、SpringBoot等,来进行后端开发。这些框架和工具提供了丰富的功能模块,可以帮助我们快速地构建小程序所需的后端服务。 总而言之,微信小程序的开发涉及到前端后端两方面的技术。前端开发主要负责小程序的页面设计和交互逻辑实现后端开发则负责提供数据处理和业务逻辑支持。通过前端后端的协同工作,我们能够开发出功能完善、用户友好的微信小程序
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值