添加公众号

使用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));
		}
	}
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭