添加公众号

原创 2018年04月17日 17:43:14

使用layui框架搭建了一个下面这样的html页面


我们今天先来说一下添加公众号按钮,点添加公众号这个按钮后进入到下面这个页面


如果说你想要使用这个项目实现公众号相应的功能话,APPID,APPSECRET需要填写你公众号信息的真实值

这是添加公众号这个页面的详细代码

<block name="body">
    <div class="conent-hd" style="padding-bottom: 20px;padding-left: 50px;">
      <h1>接入微信公众号</h1>
    </div>
      <form class="layui-form" action="{:U('addmp')}" method="post">
        <div class="layui-form-item">
          <label class="layui-form-label">公众号名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入公众号名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">公众号类型</label>
          <div class="layui-input-block">
            <input type="radio" name="type" value="1" title="普通订阅号" checked>
            <input type="radio" name="type" value="2" title="认证订阅号" >
            <input type="radio" name="type" value="3" title="普通服务号" >
            <input type="radio" name="type" value="4" title="认证服务号/认证媒体/政府订阅号" >
          </div>
        </div>
           <div class="layui-form-item">
          <label class="layui-form-label">APPID</label>
          <div class="layui-input-block">
            <input type="text" name="appid" required  lay-verify="required" placeholder="请输入APPID" autocomplete="off" class="layui-input">
          </div>
        </div>
           <div class="layui-form-item">
          <label class="layui-form-label">APPSECRET</label>
          <div class="layui-input-block">
            <input type="text" name="appsecret" required  lay-verify="required" placeholder="请输入APPSECRET" autocomplete="off" class="layui-input">
          </div>
        </div>
           <div class="layui-form-item">
          <label class="layui-form-label">原始ID</label>
          <div class="layui-input-block">
            <input type="text" name="origin_id" required  lay-verify="required" placeholder="请输入原始ID" autocomplete="off" class="layui-input">
          </div>
        </div>
           <div class="layui-form-item">
          <label class="layui-form-label">微信号</label>
          <div class="layui-input-block">
            <input type="text" name="mp_number" required  lay-verify="required" placeholder="请输入公众号微信号" autocomplete="off" class="layui-input">
          </div>
        </div>
         <div class="layui-form-item">
          <label class="layui-form-label">LOGO</label>
            <div class="layui-input-block">
              <input type="hidden" name="logo">
              <img src="" id="img_logo" width="100" height="100">
              <button type="button" class="layui-btn" id="btn_logo">
                <i class="layui-icon"></i>上传图片
              </button>
            </div>
          </div>
          <div class="layui-form-item">
          <label class="layui-form-label">二维码</label>
            <div class="layui-input-block">
              <input type="hidden" name="qrcode">
              <img src="" id="img_qrcode" width="100" height="100">
              <button type="button" class="layui-btn" id="btn_qrcode">
                <i class="layui-icon"></i>上传图片
              </button>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
  </block>
<block name="js">
  //表单提交
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    <!-- layer.msg(JSON.stringify(data.field)); -->
    <!-- return false; -->
  });
});

  
//文件上传
layui.use('upload', function(){
  var upload = layui.upload;
  var uploadInst = upload.render({
    elem: '#btn_logo', //绑定元素
    url: "{:U('upload')}", //上传接口
    done: function(res){
      //上传完毕回调
      var url="__ROOT__/Uploads/"+res.url;
      console.log(url);
      $("#img_logo").attr("src",url);
      $("form input[name=logo]").val(url);
      layer.msg(res.msg);
    },
    error: function(){
      //请求异常回调
      layer.msg(res.msg);
    }
  });
});
//文件上传
layui.use('upload', function(){
  var upload = layui.upload;
  var uploadInst = upload.render({
    elem: '#btn_qrcode', //绑定元素
    url: "{:U('upload')}", //上传接口
    done: function(res){
      //上传完毕回调
       var url="__ROOT__/Uploads/"+res.url;
      console.log(url);
      $("#img_qrcode").attr("src",url);
      $("form input[name=qrcode]").val(url);
      layer.msg(res.msg);
    },
    error: function(){
      //请求异常回调
       layer.msg(res.msg);
    }
  });
});
</block>

点击立即提交后调用 addmp方法,下面是addmp方法的代码

public function addmp(){
    	if(IS_GET){
    		$this->display();
    	}else{
    		$Form = D('mp');
    		$result=$Form->create();
			if($result) {
				$result = $Form->add();
			if($result) {
				$this->success('数据添加成功!');
			}else{
				$this->error('数据添加错误!');
			}
			}else{
				$this->error($Form->getError());
			}
    	}
    }

$Form = D('mp'); D表示使用我们自己的Model,下面就是Model,的代码,我们让他自动完成token

<?php
namespace Home\Model;
use Think\Model;
class MpModel extends Model {
	//自动完成
	protected $_auto = array(
	    array('token','inittoken',3,'callback'),
	    );

	//初始化密码为123456
	protected function inittoken($value){
		$length=20;
		//验证码
		$arr1=range('a', 'z');
		$arr2=range('A', 'Z');
		$arr3=range(0, 9);
		$arr=array_merge($arr1,$arr2,$arr3);
		shuffle($arr);
		$newarr=array_slice($arr,0,$length);
	    $str=implode('',$newarr);
	    return $str;
	}
}

注意我们点上传图片时,要让我们上传的图片显示到页面上,所以下面的JS代码中我们调用了upload方法,下面是upload方法的代码

public function upload(){
		$upload = new \Think\Upload();// 实例化上传类
		$upload->maxSize = 3145728 ;// 设置附件上传大小
		$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
		$upload->rootPath = './Uploads/'; // 设置附件上传根目录
		$upload->savePath = ''; // 设置附件上传(子)目录
		// 上传文件
		$info = $upload->uploadOne($_FILES['file']);
		if(!$info) {// 上传错误提示错误信息
		$this->ajaxReturn(array('code'=>1,'msg'=>$upload->getError()));
		}else{// 上传成功
		$file=$info['savepath'].$info['savename'];
		$this->ajaxReturn(array('code'=>0,'msg'=>'上传成功','url'=>$file));
		}
	}

微信公众号中增加地图位置标识

对于地图标识,首先想到用百度地图,但是百度地图的展示效果不好,而且还有提示下载百度地图。 于是开始尝试腾讯地图,毕竟是一家公司的,应该结合的更好。 找到了腾讯的地图位置服务:http://...
  • yellow88488
  • yellow88488
  • 2017-04-17 11:32:37
  • 4800

微信如何添加地图导航?公众号一键导航添加方法。

非常实用,有图有步奏详解。 https://www.douban.com/note/508268064/
  • culous
  • culous
  • 2017-10-11 10:19:10
  • 590

微信公众号添加天气预报功能

首先打开微信公众平台,登录自己的账号, 然后将自己的外网的url路径写入,写入token值,加入方式选为明文方式,并用fz上传你要写入的token值判断是否正确。 ...
  • zhangweiguangsunjiao
  • zhangweiguangsunjiao
  • 2015-06-11 19:25:02
  • 3926

微信公众号授权给第三方平台时报“没有绑定公众号”

没有全网发布的第三方平台,需要添加公众号ID(gh_xxxxx之类的)到测试帐号里才可以添加,否则需要申请全网发布,不然就会报上面图中的错误,找了很多才找到。微信提示的不清不楚的,真的很坑人~ 希望...
  • yao978318542
  • yao978318542
  • 2017-12-18 16:19:42
  • 2478

关于错过的语句,个性微信公众号被添加自动回复

一个产品最能打动人的往往是细节,微信也不例外。作为一个公众号运营者,从用户关注你的第一步开始,就要抓住他们内心。所以“被添加自动回复”这第一“见面”大家要格外用心。当你关注一个公众号时,它会自动回复你...
  • qq1052441272
  • qq1052441272
  • 2016-12-06 10:16:03
  • 13709

微信公众号插入地图及地图搜索资源的前端处理(坐标系转码,自动定位等业务实现)

var map;// 地图对象 var ac;// ac自动完成对象 var isReturnNum = false;// 初始未返回微信的经纬度信息 var parkMarkers = [];...
  • qq_20086125
  • qq_20086125
  • 2017-12-11 20:35:43
  • 311

公众号的菜单栏

一.公众号下的菜单项  公众号下的菜单项如果是页面跳转链接的话,这个链接已经存储在手机客户端上了,在请求链接的时候,不会进过微信的服务器,所以如果是内网的ip也是可以访问的。...
  • lzp2011150309
  • lzp2011150309
  • 2015-10-20 09:20:48
  • 198

在微信公众号中添加外部的链接图文教程

本教程教大家如何在微信公众号中,添加外部的链接,网络有很多教程,但由于表述不太清楚,出个教程吧。最终实现在微信后台管理平台“原文链接”处插入外部链接,用户点击发布好的图文文章底部左下角的“阅读原文”,...
  • ffffffff8
  • ffffffff8
  • 2017-09-18 15:55:01
  • 1784

微信开发 - 微擎管理微信公众号

原文链接:http://blog.csdn.net/ghost_hell/article/details/53930144 首先我们要有一个微擎的安装包install.PHP 放在你的访问路径 确保...
  • woshihaiyong168
  • woshihaiyong168
  • 2016-12-29 20:55:24
  • 2598

Axure手机原型视频教程之微信公众ETC添加公众号.rar

  • 2014年12月12日 19:09
  • 1.7MB
  • 下载
收藏助手
不良信息举报
您举报文章:添加公众号
举报原因:
原因补充:

(最多只允许输入30个字)