月度归档：2021年11月

网页制作中html5和微信小程序切图的区别

在做html5切图和小程序切图的时候，有哪些区别？其实本质差不多，小程序的样式文件wxss 对css做了少许改变，小程序的wxml则是 xml的基础上做了小许改变，所以如果你对html5/css3足够了解的话，在小程序代码中看到大量的html5的影子。

但是需要了解html5和微信小程序的不同切图的规则。

一、微信小程序和HTML5的标签区别：

 

网页制作中html5和微信小程序切图的区别

 

 

二、wxss 选择器

HTML5 微信小程序

div（标签选择器） view、text、icon、input、image、navigator（标签选择器）

class(类选择器) class

id(id选择器)（效率最高） id(效率最高)

element,element(层级选择器) element,element(层级选择器)

：after（伪类选择器） ：after ：before

：frist-child等 ：frist-child等(不建议（工具过滤易导致页面错乱）)

.class .class .class .class(不建议（工具过滤易导致页面错乱）)

群组选择器 群组选择器

后代选择器 后代选择器

三、placeholder的区别

小程序中可以直接给placeholder添加样式

四、自适应区别

1、我们用html5写自适应的话需要用到百分比或是函数计算比例，但小程序可以让我们避免了这个麻烦，我们可以用rpx，在ipoone6的开发环境下，1rpx=0.5px;我们采用这个单位就可以在完成后，省掉兼容的一部分问题了。（当然我这里面没有考虑到）

2、这里有个开发中可能遇到的坑，由于背景图是全覆盖的，所以这里可以在wxss文件中添加语句：.indexBox{height:100%;} page{height:100%} 都需要设置，要不然没法自适应，注意大小写。

eyoucms图集分页 | volist标签分页

eyoucms的图集在很多时候充当相册功能的作用，调用的话也很简单volist标签循环输出就可以，痛就痛在这个volist标签分页居然不支持，怎么办？

以下办法通过前端切割数据进行显示，配合eyoucms静态缓存清除，达到前端图集分页的目的：

地表最强eyoucms图集分页代码

一、数据处理：

{eyou:arclist row=’1′ titlelen=’30’}
{eyou:arcview id=’field4′}
{php}
$p_num = 3; //每页显示条数
$p_btn = 2; //分页按钮整数阈值，越大显示越多
$p_con = $field4[image_list]; //图集json
$ck = ‘page’.$field4[typeid];
$thenum = $_COOKIE[$ck];
if(!$thenum){ $thenum = 1; }
$p_totle = count($p_con);
$p_list = [1];
if($p_totle > $p_num && $p_num > 0) {
$p_con = array_slice($p_con, ($thenum-1)*$p_num, $p_num); //内容切割
$p_all = $p_totle/$p_num;
$p_allint = intval($p_all);
$p_all = $p_all > $p_allint ? $p_allint+1 : $p_allint;
for ($c = 0; $c < $p_all; $c += 1) {
if($c >= $thenum-$p_btn && $c < $thenum+($p_btn-1)) {
$p_list[$c] = $c+1;
}
}
$p_list[$p_all-1] = $p_all;
}
{/php}
<script type=”text/javascript”>
//放在变量$ck之后，在列表渲染之前刷新
var url = window.location.href;
theurl = url.indexOf(“clear”);
var clear = url+’&clear=1′;
var ck = document.cookie.indexOf(“{$ck}=”);
if(ck == -1 && theurl == -1){
location.replace(clear);
}
function page(obj) {
document.cookie=”{$ck}=”+obj.title;
theurl == -1 ? location.replace(clear) : location.reload();
}
</script>

{eyou:volist name=”$p_con” id=’field5′}
<li class=”projectitem”>
<a rel=”nofollow” href=”{$field5.image_url}” target=”_blank” class=”item_link”>
<div class=”project_img”>
<img src=”{$field5.image_url|thumb_img=###,500,320,3}” />
</div>
<div class=”project_info”>
<div>
<p class=”title”>{$field4.title}</p>
<p class=”subtitle”>{$field5.intro}</p>
</div>
</div>
</a>
<a rel=”nofollow” href=”javascript:;” target=”_blank” class=”details”>more</a>
</li>
{/eyou:volist}
{/eyou:arcview}
{/eyou:arclist}

二、分页的输出：

{eyou:foreach name=’$p_list’ item=’p’}
<a rel=”nofollow” href=”javascript:;”{eyou:eq name=’$thenum’ value=’$p’} class=”active”{/eyou:eq} title=”{$p}” onclick=”page(this)”>{$p}</a>
{/eyou:foreach}
———————————–
最后，明白这个原理，作用就不仅仅是图集了，任何数据输出，都可以用这个超级代码进行切割分页显示。

DEDECMS手机站如何AJAX提交数据到自定义表单

需求:手机站要点击某一个按钮后,弹出一个留言框,让用户留下姓名和电话号码

首先:后台自定义表单内添加表单,,多的不解释,字段添加好了后,下面是重点

根据: http://www.moke8.com/article-12258-1.html 这个教程修改你的自定义表单字段

比如我修改成了这样子.

《开始》

<div class=”phone_form”>
<form action=”javascript:;” enctype=”multipart/form-data” method=”post”>
<input type=”hidden” name=”action” value=”post” />
<input type=”hidden” name=”diyid” value=”1″ />
<input type=”hidden” name=”do” value=”2″ />

<label>姓名：<input type=”text” id=”name” name=”name” value=”” /></label>
<label>手机：<input type=”text” id=”phone” name=”phone” value=”” /></label>

<input type=”hidden” name=”dede_fields” value=”name,textchar;phone,textchar;” />
<input type=”button” class=”submit fr” value=”提 交” onclick=”add_ajaxmessage()”/>
</form>
</div>
<script type=”text/javascript” src=”726/js/jquery-1.10.1.min.js”></script>
<script type=”text/javascript”>
function add_ajaxmessage(){
var name=document.getElementById(“name”);
var phone=document.getElementById(“phone”);

//定义变量接收上面表单每项的值和几个dede隐藏的input的值
var dataString = ‘name=’+ name.value + ‘&phone=’ + phone.value +’&action=post’+ ‘&diyid=1&do=2&dede_fields=name,textchar;phone,textchar’;
$.ajax({
type: “POST”,
url: “diy.php”, //提交到后台文件
data: dataString, //传值
success: function(data) {

alert(data);//成功打印PHP返回的值

}
});
return false;
}
</script>

 

《结束》

复制一份plus/diy.php到m(手机站根目录)下,然后修改

把这一行代码注释掉,,

alert显示提交成功后基本上就可以在后台看到提交的数据了

,至于后面的jquery加判断之类的..这些可以后期自己去加..

 

eyoucms留言模版验证码实现

eyoucms留言模版验证码实现
效果图如下

1、为什么要在留言模版下加入验证码？
留言模版下加入验证码可以防止恶意攻击，防止用机器把数据库填满
2、实现验证码功能
第一步：找到lists.guestbook.html

第二步：前台留言模型的图形验证码标签调用
比如需要在留言表单里加入图形验证码，复制下方验证码开始到验证码结束在留言标签中 {eyou:guestbookform}。

{eyou:guestbookform type=’default’}
<form method=”POST” enctype=”multipart/form-data” action=”{$field.action}”>
<!– ……此处省略其他表单代码 –>
<div class=’form-group’>
<textarea name=”{$field.attr_1}” id=”attr_1″ placeholder='{$field.itemname_1}’></textarea>
</div>
<!– ……此处省略其他表单代码 –>

<!– 验证码开始 –>
{eyou:notempty name=’$field.IsVertify’}
<div>
<input type=”text” name=”vertify” autocomplete=”off” placeholder=”图片验证码”/>
<img {$field.VertifyData} title=”看不清？点击更换验证码” style=”margin-left: 2px;width: 80px;height: 35px;” />
看不清？<a href=”javascript:void(0);” id=”a_vertify” {$field.VertifyData}>点击更换</a>
</div>
{/eyou:notempty}
<!– 验证码结束 –>

<!– ……此处省略其他表单代码 –>
<div class=”form-group m-b-0″>
<button type=”submit” >提交<button>
</div>
{$field.hidden}
</form>
{/eyou:guestbookform}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
第三步：找到config.php文件

第四步：把config.php文件中的留言提交验证码配置0改为1

然后就完成啦，有帮助的话不妨点个赞吧，谢谢啦！！！

ThinkPHP5.0手把手实现手机阿里云短信验证

最详细教程，没有第二篇

为分享经验而来(菜鸟来围观，大神轻点喷)
简述一下思路：现在有一个简单的手机短信验证页面，代码如下

html代码

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>ThinkPHP5.0短信验证</title>
  6. <script src=“__STATIC__/jquery.js”></script>
  7. </head>
  8. <body>
  9. <form>
  10. <div>
  11. <div>
  12. <input id=“tel” type=“text” placeholder=“手机号”><br>
  13. <input id=“yzm” type=“text” placeholder=“验证码”><input type=“button” id=“sendmsg” value=“获取验证码”>
  14. </div>
  15. <div>
  16. <a href=“#” id=“submit”>验证</a>
  17. </div>
  18. </div>
  19. </form>
  20. </body>
  21. </html>
  22. <script >
  23. /*——————————————-*/
  24. var InterValObj; //timer变量，控制时间
  25. var count = 60; //间隔函数，1秒执行
  26. var curCount;//当前剩余秒数
  27. var code = “”; //验证码
  28. var codeLength = 6;//验证码长度
  29. $(function () {
  30. $(‘#sendmsg’).click(function () {
  31. var tel = $(‘#tel’).val();
  32. $.ajax({
  33. type: “POST”,
  34. url: “{:url(‘index/send_dx’)}”,
  35. data: {tel:tel},
  36. success: function (result) {
  37. if(result == 1){
  38. curCount = count;
  39. //设置button效果，开始计时
  40. $(“#sendmsg”).css(“background-color”, “”);
  41. $(“#sendmsg”).attr(“disabled”, “true”);
  42. $(“#sendmsg”).val(“获取” + curCount + “秒”);
  43. InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
  44. // alert(“验证码发送成功，请查收!”);
  45. }else{
  46. alert(result);
  47. }
  48. },
  49. dataType: ‘json’
  50. });
  51. });
  52. $(‘#submit’).click(function(){
  53. var yzm = $(‘#yzm’).val();
  54. $.ajax({
  55. url:“{:url(‘index/check_dx’)}”,
  56. data:{yzm:yzm},
  57. type:“post”,
  58. dataType:“json”,
  59. success:function(data){
  60. if(data == 1)
  61. {
  62. alert(“验证成功”);
  63. }else{
  64. alert(data);
  65. }
  66. }
  67. });
  68. });
  69. });
  70. function SetRemainTime() {
  71. if (curCount == 0) {
  72. window.clearInterval(InterValObj);//停止计时器
  73. $(“#sendmsg”).removeAttr(“disabled”);//启用按钮
  74. $(“#sendmsg”).css(“background-color”, “”);
  75. $(“#sendmsg”).val(“重发验证码”);
  76. code = “”; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
  77. }
  78. else {
  79. curCount–;
  80. $(“#sendmsg”).val(“获取” + curCount + “秒”);
  81. }
  82. }
  83. </script>

控制器代码

  1. <?php
  2. namespace app\index\controller;
  4. use think\Controller;
  5. use think\Loader;
  6. class Index extends Controller
  7. {
  8. public function index()
  9. {
  10. return $this->fetch();
  11. }
  12. public function send_dx()
  13. {
  14. // 加载extend文件夹里面的文件
  15. Loader::import(‘dx.api_demo.SmsDemo’,EXTEND_PATH);
  16. $tel = input(‘post.tel’);
  17. $code = rand(100000,999999);
  18. // 调用示例：
  19. set_time_limit(0);
  20. header(‘Content-Type: text/plain; charset=utf-8’);
  21. $response = (new \SmsDemo)::sendSms($tel,$code);
  22. $response = (new \SmsDemo)::sendBatchSms();
  23. $response = (new \SmsDemo)::querySendDetails($tel);
  24. // 保存验证码
  25. session(‘code’,$code);
  26. return 1;
  27. }
  28. public function check_dx()
  29. {
  30. $yzm = input(‘post.yzm’);
  31. if($yzm == session(‘code’))
  32. {
  33. session(‘code’,null);
  34. return 1;
  35. }
  36. return “验证码错误”;
  37. }
  38. }

当我们点击获取验证码时，我们填的手机会收到一条短信，并且我输入手机发来的验证码正确输入到验证码输入框后点击验证，就跳转到了我们想要的页面。

思路理清了就开始我们的教学步骤吧

1、登录到www.aliyun.com首页，右上角导航找到控制台点击进入。

2、在控制台首页左上角导航找到产品与服务二级导航再找到云通信栏目下的短信服务点击进入。

3、在短信服务控制台页面左侧找到应用开发完成应用开发栏目下的接口调用，签名管理，模板管理三步操作，我们的任务就完成了一半了。

（1）接口调用：获取AK，点击AccessKey按钮，如果没有创建过访问密钥(AK)，点击创建AccessKey，验证后就可以了。

（2）添加签名：我们还需要添加一个签名作为发出短信的标题，一般个人用户使用自己的真实姓名、网站名通过率较高，申请说明：可以使用固定句子手机验证码或短信验证，当然可以使用其他申请理由，申请后等待小小会儿，在等待过程可以先完成模板管理。

（3）模板管理：模板类型看个人需求，我们这里选验证码；模板名称可以随便起，它的作用只是方便用户管理自己的模板；模板内容可以点击常用模板库选择自己想要的模板，也可以自己定义；申请理由同上一步，使用固定句子就可以了。

4、 回到短信服务控制台页面在右边头像下面?申请短信模板选择SDK及DEMO下载，进入下载页面后找到并点击下载标题下的【PHP】蓝色字样，将下载的压缩包解压这里我们取名为“dx”，后面才是重头戏。

5、 把解压好的文件夹(dx)放在ThinkPHP项目根目录下的extend目录下，开始操作dx文件夹里面的文件。

6、 用sublime打开dx,修改dx/api_demo/SmsDemo.php，我们需要把之前在阿里云申请的信息填写到这里，具体步骤看截图吧，跟着截图先把这个小功能实现了，后面再把这个小功能修改成自己的东西。

设置API接口
设置发送短信
设置接受号码
代码搬家

看这里：完成以上步骤加上代码，相信看完的朋友已经心中有数了!!! 如果本文对你有一点点帮助，可以帮我点个赞吗 你们的认可是我前进的动力。

有一些朋友可能还有不懂的，可以及时联系我，我的邮箱1279728601@qq.com，大家一起进步