微信小程序js发送模板消息

版权声明： https://blog.csdn.net/weixin_41716049/article/details/84066595

微信小程序的Java的的后台获取的的的access_token存储数据库并接通本更新https://blog.csdn.net/weixin_41716049/article/details/84066112

近期开始在学习小程序希望和大家一起交流学习额

小程序地图导航，天气显示源码  https://github.com/zzwwjjdj319/miniProgramAmap

微小信猜拳程序游戏小源码https://gitee.com/sccqcd/wechat_applet_weather_map

微信小程序机票查询源码：https：//gitee.com/sccqcd/ticket_inquiries

开始了，首先说一说微信小程序在JS中发送模板消息，一般不建议在JS中发送，微信小程序里的请求地址必须自己配置，但是它自己的地址的HTTPS：//api.weixin。 qq .com我们配置不上，要想在小程序JS中使用只有开启不校验合法域名，网络视图（业务域名），TLS版本以及HTTPS证书（这是重点，不做的话肯定发送不了模板消息的，后面我会补一份的java的的后台调用请求发送模板消息的博客，欢迎大家到时候查看并提出意见，好了直接上代码了，为了方便大家查看，代码里打“###### “就是你们需要替换的代码额）

wxml注意看表单的配置

<view class="main">
  <form bindsubmit="formSubmit" report-submit="true" bindreset="formReset">
    <view class="info-area">
       
       <view class="flex-wrp" style="display: flex;flex-direction:row;">
          <view class="flex-item">
            <label class="info-title" style="display: flex;flex-direction:row;">请填写本次活动信息</label>
          </view>
          
        </view>


       <view class="section">
        <view class="flex-wrp" style="display: flex;flex-direction:row;">
          <view class="flex-item">
            <label class="info-title" style="display: flex;flex-direction:row;">主题：</label>
          </view>
          <view class="flex-item">
             <input class="input" name="Subjectlogin"  focus='true' placeholder="这里写活动目的！！" type="text" auto-focus required confirm-type="done" />
          </view>
        </view>
      </view>


      <view class="section">
          <view class="flex-wrp" style="display: flex;flex-direction:row;">
            <view class="flex-item">
              <label class="info-title" style="display: flex;flex-direction:row;">发起人：</label>
            </view>
            <view class="flex-item">
                <input class="input" name="SubjectUser"   placeholder="这里写本次活动的组织人员！！" type="text" auto-focus required confirm-type="done" />
            </view>
          </view>
      </view>

      <view class="btn-area flex-wrp">
        <button class="button" formType="submit" type="primary">提交</button>
        <button class="button reset" formType="reset">重置</button>
      
      </view>
    
      <view   class="WxDamo">
      <button class="button" catchtap="handleClicks">返回我的主页</button>
      </view>
    </view>
  </form>

JS

 //发送模板消息
               var fId = e.detail.formId;
               var fObj = e.detail.value;
//access_token的获取方法详细见本文的另一个博客
               var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + #####;
               var d = { 
//touser：用户的ID，
                 touser: userOpenID,
                 template_id: 'xNVc7oTpYpnSEduciZoiWcJAl64fifPve49UGa9EwSU',//申请的模板消息id，
//page：连接页面，点击后进入的页面
                 page: 'pages/pages/created/created',
//form_id;form表单提交的form_id，测试的时候用真机测试额，工具测是拿不到数据的，切记
                 form_id: fId,
                 data: {
//这里相信大家都懂了，按你们的模板上面填写需要发送的模板消息即可
                   "keyword1": {
                     "value": "提交成功",
                     "color": "#4a4a4a"
                   },
                   "keyword2": {
                     "value": "2018-11-08",
                     "color": "#9b9b9b"
                   },
                   "keyword3": {
                     "value": fObj.MeetingDate,
                     "color": "#9b9b9b"
                   },
                   "keyword4": {
                     "value": fObj.inputSite,
                     "color": "#9b9b9b"
                   }
                 },

               }
               wx.request({
                 url: l,
                 data: d,
                 method: 'POST',
                 success: function (res) {
                   console.log("push msg");
                   console.log(res);
                },
                 fail: function (err) {
                   // fail
                   console.log("push err")
                   console.log(err);
                 }
               });