精华内容
下载资源
问答
  • 微信小程序消息通知-打卡考勤

    千次阅读 2018-11-29 18:50:58
    微信小程序消息通知-打卡考勤 效果: 稍微改一下js就行,有不必要的错误,我就不改了,哈哈! index.js //index.js const app = getApp() // 填写微信小程序appid var appid = ''; // 填写微信小程序secret var ...

    在这里插入图片描述

    微信小程序消息通知-打卡考勤

    效果:

    在这里插入图片描述

    稍微改一下js就行,有不必要的错误,我就不改了,哈哈!

    index.js

    //index.js
    const app = getApp()
    // 填写微信小程序appid
    var appid = '';
    // 填写微信小程序secret  
    var secret = '';
    Page({
      // 页面数据
      data: {
        access_token: '',
        openid: '',
      },
    
      // 表单请求
      formRequst: function (e) {
        var that = this;
        // 登录
        wx.login({
          success: res => {
            // 调用接口获取登录凭证(code)
            console.log("获取code 成功", res.code);
            var code = res.code;
            // 获取openId
            wx.request({
              url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&grant_type=authorization_code&js_code=' + code,
              header: {
                'content-type': 'application/json' //默认值
              },
              success: function (res) {
                console.log("获取openid 成功", res.data.openid);
                var openid = res.data.openid;
                that.setData({
                  openid: openid
                })
                // wx.setStorageSync("openid", openid)
    
                // 获取 access_token
                wx.request({
                  url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret,
                  method: 'GET',
                  header: {
                    'content-type': 'application/json' //默认值
                  },
                  // 成功
                  success: function (res) {
                    console.log("获取小程序 access_token 成功", res.data.access_token);
                    that.setData({
                      access_token: res.data.access_token
                    })
    
                    // 上上一步
                  },
                  // 失败
                  fail: function (err) {
                    console.log("获取小程序 access_token 失败", err);
                  }
                })
    
                // 上一步
              },
              fail: function (err) {
                console.log("获取openid 失败", err);
              }
            })
          }
        })
      },
      // 提交表单
      formSubmit: function (e) {
        console.log('form发生了submit事件,携带数据为:', e.detail.value);
        console.log('form发生了submit事件,携带数据为:', e.detail.formId);
    
    
        var that = this;
        // 发送模板消息
        wx.request({
          url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + that.data.access_token,
          data: {
            // openid
            "touser": wx.getStorageSync("openid"),
            // 模板消息的id
            "template_id": "",
            // "form_id": "FORMID",
            "form_id": e.detail.formId,
            data: {
              "keyword1": {
                "value": "2018.10.10"
              },
              "keyword2": {
                "value": "小红"
              }
            },
            "emphasis_keyword": "keyword1.DATA"
          },
          method: 'POST',
          // 成功
          success: function (res) {
            var data = res.data;
            console.log("sendTemplateMessage 成功", data);
            wx.showToast({
              title: '发送成功',
              icon: 'success'
            })
          },
          // 失败
          fail: function (err) {
            console.log("sendTemplateMessage 失败", err);
          }
        })
      },
    
    
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // this.formSubmit();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        this.formRequst();
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    

    index.wxml

    <!--index.wxml-->
    <view class='page'>
      <!-- 标题 -->
      <view class='title'>
        <text>考勤打卡</text>
      </view>
      <form class="text" report-submit="true" bindsubmit='formSubmit' bindreset='formReset'>
        <!-- 考勤填表 -->
        <input name="date" placeholder='日期' class='input'></input>
        <input name="name" placeholder='姓名' class='input'></input>
        <!-- 按钮设置 -->
        <view class='btn'>
          <button form-type='submit' type='primary'>提交</button>
          <button form-type='reset' type='primary'>重置</button>
        </view>
      </form>
    </view>
    

    index.wxss

    /**index.wxss**/
    
    .page {
      margin: 0rpx 50rpx 50rpx 50rpx;
      font-size: 50rpx;
      background-color: lavender;
    }
    
    .title {
      text-align: center;
    }
    
    .input {
      margin: 0rpx 0rpx 50rpx 0rpx;
      width: 100%;
    }
    
    .btn {
      display: flex;
      flex-direction: row;
    }
    

    往后余生,唯独有你
    简书作者:达叔小生
    90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
    简书博客: https://www.jianshu.com/u/c785ece603d1

    结语

    • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
    展开全文
  • 微信小程序消息通知简单Demo

    千次阅读 2019-11-26 10:06:21
      最近项目有需求需要用到微信小程序推送消息,在此记录一下实验过程。 前提准备 在开始前,你需要准备: 注册微信小程序 一个简单的springBoot 项目 微信开发者工具 正式 微信小程序发送消息主要通过...

    前言


      最近项目有需求需要用到微信小程序推送消息,在此记录一下实验过程。

    前提准备


    在开始前,你需要准备:

    • 注册微信小程序
    • 一个简单的springBoot 项目
    • 微信开发者工具

    正式


    微信小程序发送消息主要通过WxMaTemplateMessage 类来推送

    public class WxMaTemplateMessage implements Serializable {
        private String toUser;       // 给谁推送(用户openId)
        private String templateId;  // 消息ID
        private String page;    // 用户点开消息跳转到对应的小程序界面
        private String formId;  // 表单formId
        private List<WxMaTemplateData> data; // 消息的数据列表
        private String emphasisKeyword;  
    ...
    

    所以我们在推送前需要构造这些信息,formId 和toUser(openId) 是从前端传过来的。formId 可以通过表单或者支付来获取,表单比较简单,只需要把report-submit 设置为true 就可以获得。

    简单通过微信开发者工具来获取formId(openId 数据库存了)

    1. 先建立一个前端项目,AppID 就是小程序的id,在微信公众号后台可以看到。
      image.png

    2. 修改index/index.js 和index.wxml (百度某位同学的),通过表单来获取formId ,并发送到后台。

    // index.wxml
    <form bindsubmit='registerFormSubmit' report-submit='true'>
      <view class='buttons'>
        <button class='confirmbtn' form-type='submit'>确定</button>
      </view>
    
    </form>
    <view>formid: {{formid}}</view>
    <button bindtap='push'>
        发送
    </button>
    
    
    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      
      data: {
        formid: ""
      },
      //事件处理函数
      registerFormSubmit: function (e) {
        //    打印formId
        console.log(e.detail.formId);
        this.setData({
          formid: e.detail.formId
        })
       },
      //测试推送
     push() {
        let formid = this.data.formid;
       let openid = 'oT-H-40ZHdRX1REZFKQhPg3jJZoQ';
        wx.request({
          url: 'http://localhost:8080/push?openId=' + openid + "&formId=" + formid,
          success(res) {
            console.log("推送结果:", res)
          },
          fail(err) {
            console.log("推送失败:", err)
          }
        })
      }
    })
    
    

    效果图
    这里formid 在测试的时候获取不到,调到真机调试,或者用预览就行了。

    1. 请求后台接口来发送消息(ctrl c v 百度某同学)
    import cn.binarywang.wx.miniapp.api.WxMaService;
    import cn.binarywang.wx.miniapp.api.impl.WxMaServiceImpl;
    import cn.binarywang.wx.miniapp.bean.WxMaTemplateData;
    import cn.binarywang.wx.miniapp.bean.WxMaTemplateMessage;
    import cn.binarywang.wx.miniapp.config.WxMaInMemoryConfig;
    import me.chanjar.weixin.common.error.WxErrorException;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.util.ArrayList;
    import java.util.List;
    
    @RestController
    public class PushController {
    
        @GetMapping("/push")
        public String push(@RequestParam String openId, @RequestParam String formId) {
            //1,配置小程序信息
            WxMaInMemoryConfig wxConfig = new WxMaInMemoryConfig();
            wxConfig.setAppid("你的appId");
            wxConfig.setSecret("你的secret");
    
            WxMaService wxMaService = new WxMaServiceImpl();
            wxMaService.setWxMaConfig(wxConfig);
    
            //2,设置模版信息(keyword1:类型,keyword2:内容)
            List<WxMaTemplateData> templateDataList = new ArrayList<>(2);
            WxMaTemplateData data1 = new WxMaTemplateData("keyword1", "获取老师微信");
            WxMaTemplateData data2 = new WxMaTemplateData("keyword2", "2501902696");
            WxMaTemplateData data3 = new WxMaTemplateData("keyword3", "2501902696");
            WxMaTemplateData data4 = new WxMaTemplateData("keyword4", "2501902696");
            templateDataList.add(data1);
            templateDataList.add(data2);
            templateDataList.add(data3);
            templateDataList.add(data4);
    
            //3,设置推送消息
            WxMaTemplateMessage templateMessage = WxMaTemplateMessage.builder()
                                                      .toUser(openId)
                                                      .formId(formId)
                                                      .templateId("你的消息id") // 在微信公众号后台可以申请消息模版
                                                      .data(templateDataList)
                                                      .page("pages/index/index")
                                                      .build();
    
            //4,发起推送
            try {
                wxMaService.getMsgService().sendTemplateMsg(templateMessage);
            } catch (WxErrorException e) {
                System.out.println("推送失败:" + e.getMessage());
                return e.getMessage();
            }
            return "推送成功";
        }
    
    }
    

    image.png

    一个简单的小程序推送demo ,权侵删

    展开全文
  • 结合着文档,一天忙下来,小程序消息通知可以跑通了 接入消息通知指引地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 文档地址:...

    结合着文档,一天忙下来,小程序的消息通知可以跑通了

     

    接入消息通知指引地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html

    文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#%E6%A8%A1%E7%89%88%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86

    看完这两个地址基本上你就明白是怎么实现消息通知的了,下面就是需要根据自己的业务需求写php代码了

    php中业务分为以下几个步骤:

    1、小程序后台消息模板设置获取模板ID

    2、微信公众平台|小程序->设置->开发设置 获取AppID(小程序ID)、AppSecret(小程序密钥   注:重置后导致之前的失效)

    3、通过AppID、AppSecret调用接口生成ACCESS_TOKEN

    4、获取form_id

    5、发送模板消息

     

    下面是实现上面步骤的详细过程:

    一、获取模板ID

    二: 获取AppID(小程序ID)、AppSecret(小程序密钥   注:重置后导致之前的失效)

    三、生成ACCESS_TOKEN

    接口地址:

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


    代码实现:

    public function getAccessToken(Request $r)
    {
    $appId = Input::get('appId',NULL);
    $appSecret = Input::get('appSecret',NULL);

    $r = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appId&secret=$appSecret"); //返回的是字符串,需要用json_decode转换成数组
    $data = json_decode($r,true);

    return $data['access_token'];

    }

    四、获取form_id

    需要在小程序上做个form表单提交,可以前端生成传到后台,就可以获取到了

    注:
    页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息(多个地方生成form_id传给后端)。
    form_id的长度:Android是13位时间戳、iOS是32位GUID
    form_id其实就是前端负责获取,传给后端,后端将form_id存起来,在业务中用到消息通知的时候从表里面取出来

    form_id中需要注意的一点:一个form_id只能用一次,所以在建表的时候需要给个status区分已使用和未使用的状态(这个坑已经进去过,发送完模板不修改status值,会使得消息通知偶尔成功,偶尔失败)


    五、发送模板消息

    上面需要的参数都准备好了,OK,这里自己封装了一个方法。然后在用到的地方调用的
    封装的方法如下:
    public function sendMessage()
    {
    $token = $this->getToken();
    $post = [];
    $post['touser'] = '用户openId';
    $post['page'] = 'index';
    $post['emphasis_keyword'] = 'keyword1.DATA';
    $post['color'] = '#173177';

    $post['template_id'] = '模板id';
    $post['form_id'] = 'formId';
    $post['data'] = [
    'keyword1'=>['value'=>'xxxxxx','color'=>'#173177'],
    'keyword2'=>['value'=>'2018-03-06 14:22:34','color'=>'#173177'],
    'keyword3'=>['value'=>'xxxxxx','color'=>'#173177']
    ];

    $url = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token='.$token;
    $re = $this->curl_url($url,$post);
    return $re;
    }

    private function curl_url($url, $json)
    {
    $body = json_encode($json);
    $headers = array("Content-type: application/json;charset=UTF-8", "Accept: application/json", "Cache-Control: no-cache", "Pragma: no-cache");

    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $body);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    $result = curl_exec($ch);
    curl_close($ch);

    return $result;

    }

    调用:
    public function send(Request $r)
    {
    $wechat = new WeChatApi();
    $re = $wechat->sendMessage();
    return $re;

    }



    到这里就可以实现消息通知了



     

     

     

     

    转载于:https://www.cnblogs.com/a-record/p/8521138.html

    展开全文
  • 1.小程序的订阅消息的每一次推送都需要获取授权 2.小程序的订阅消息每次都...5.获取了一次授权允许一个订阅消息通知,用完即授权失效,若继续推送则出现“"errcode":43101,"errmsg":"userrefusetoacceptthemsg” ...

    1.小程序的订阅消息的每一次推送都需要获取授权

    2.小程序的订阅消息每次都是需要回到首页才能触发授权

    3.每种订阅消息每次都需要单独授权

    4.部分特殊行业允许长期订阅消息,大多数都是只有一次性订阅消息

    5.获取了一次授权允许一个订阅消息通知,用完即授权失效,若继续推送则出现“"errcode":43101,"errmsg":"user refuse to accept the msg”

     

    展开全文
  • 主要为大家详细介绍了微信小程序实现滚动消息通知,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 公司管理小程序需要做到关闭小程序后能收到审核通过或驳回得消息通知,短信推送的成本太高,查询了一下小程序的文档,有一个订阅消息,但是只能一次性订阅点一次订阅只能接收一次推送,微信没有对一般企业开放长期...
  • 小程序之模版消息通知

    千次阅读 2018-08-16 18:19:33
    手把手教你开发微信小程序之模版消息通知   一、模板消息功能概述 模板推送位置:服务通知 模板消息效果展示图:   进入小程序通知:   二、开发前的配置准备 1、验证token是否有效 &lt;?php /**...
  • 小程序通知消息推送

    千次阅读 2018-05-01 21:10:14
    最近公司在搞微信小程序:抽奖小程序,打卡小程序;...小程序的前端编写下一篇文章再写,这篇文章主要介绍小程序通知消息推送的实现; 大家可以去看小程序的官方文档: https://developers.weixin.qq.com/mini...
  • 小程序】微信小程序-滚动消息通知  写在前面:   这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器。  我们通过vertical...
  • 我们走在大街上,会经常看到许多店家门上有滚动的消息通知,本文主要为大家详细介绍了微信小程序实现滚动消息通知,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。效果图:index.wxml{{item...
  • 话不多说,先熟悉微信小程序官网操作逻辑实现:(别搞错了!) https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html 步骤一:获取模板 ID (这个没什么好说的,根据界面...
  • 小程序 模板消息通知

    2019-04-26 10:48:34
    //小程序后台申请到的模板编号 "page" => "/pages/index/index", //点击模板消息后跳转到的页面,可以传递参数 "form_id" => $formId, //第一步里获取到的 formID "data" => $data_arr, "emphasis_keyword" =...
  • 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器。 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动。 ......
  • 微信小程序订阅消息服务通知申请模板 申请模板
  • 准备工作 1、实现微信模板消息推送需要用户的...form_id: 页面的 form 组件,属性 report-submit 为 true 时,可以声明为需要发送模板消息,此时点击按钮提交表单可以获取 formId,用于发送模板消息。或者当用户...
  • 本篇文章主要介绍了微信小程序-滚动消息通知的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序服务通知 模板消息

    万次阅读 2018-10-11 16:10:20
    首先登陆微信公众平台 找自己的模板消息设置, 设置自己想要的模板消息,拿到模板消息ID,再准备好自己小程序的appid,小程序秘钥。这三个都准备好了以后直接看代码。 js: Page({ data: { openid:"", ...
  • 小程序服务消息通知集成

    千次阅读 2019-03-13 17:49:25
    微信接口文档:...调用微信服务消息的请求接口为:https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_T...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,490
精华内容 596
关键字:

小程序消息通知