分类目录归档:EyouCms

网页制作中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}
———————————–
最后,明白这个原理,作用就不仅仅是图集了,任何数据输出,都可以用这个超级代码进行切割分页显示。

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

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