微信小程序前端设计,以北京动物园为例

Posted 2022-01-16 算法与编程之美

1问题描述

关于微信小程序的前端页面设计

2算法描述

首先打开微信开发者工具创建一个新的小程序项目，但是可以不选择任何模板，进入新建的小程序，因为是前端设计，就可能需要我们插入图片之类的，所以先在项目栏中新建文件夹images（注意，图片的文件夹是浅绿色，有图片图标的，详见图一），然后就是在和html很像的wxml中编辑我们的web内容，在wxml中我们一般在text标签活着view标签中加文字或者图片，class是设置标签的样式，在wxml中使用image标签时，图片的插入格式是这样的：<image src="../../images/feizhouxiang.png"></image>，然后就是页面上文字与图片的距离，对它的控制是在wxss中的标签中用margin-top（详见图2）。还有关于首行缩进，是在wxss中使用text-indent：2em设置首行缩进2字符。

3 结语

本次是简单的做了一个小程序的前端页面设计，还有一些页面中的细节。

附件：代码清单：wxml

<view class="navbar">  <label    wx:for="navbar"    wx:key="unique"    data-idx="index"    class="item currentTab==index ? 'active' : ''"    bindtap="navbarTap"    >    item  </label> </view> <view class="fzxphoto"><image src="../../images/feizhouxiang.png"></image></view> <view class="xiang">      非洲象分布于非洲中部、东部和南部。非洲象是现存最大的陆生哺乳动物，它的体长6一7.5米，尾长1—1.3米，肩高3一4米，体重5一7.5吨。目前最高大的纪录为一只雄性非洲象，体全长10.67米，前足围1.8米，体重11.75吨。最大的象牙纪录为长350厘米，重约107公斤。 </view> <view class="xiang">      它们生活在从海平面至海拔5000米的热带森林、从林和草原地带。大象是游牧动物，它知道哪里有新鲜的水和新的草原,它的记忆力非常好，在非洲作为头领大象可以带领象群找到上千公里以外的水源。同时这样也引导了其它的动物寻找水源，所以大象又是很多动物的偶像和追随者。 </view> <view class="xiang">      大象的记忆力好，身强体壮但性格上可是个小心眼了。在我们动物园，有一天一只大象肠胃不舒服,我们的饲养员就把药片放到了他最喜欢的苹果里喂给它吃,第一次他不小心都吃了，第二次再放的时候,大象就不上当了,用脚轻轻把药片给挤出来,只把苹果给吃了，然后抬起头冲饲养员大吼了一声，好像在说“谁让你骗我吃药啊”。来宣泄着自己不满,而且以后每次见到那位饲养员时，它都会用鼻子钩一下，嘿!还记仇那。 </view> <view class="xiang">      大象与我们人类—样，有着复杂的情感。在象群中，如果有刚出生的小象,其它的大象都会用鼻子来帮助它站立起来。并且给与它无微不致的照顾，还会教它各种生存技能。在象群中如果有哪位成员出现危险，其它的同伴会马上会前去营救表现的非常团结协作。现在亚洲象是国家的一类保护动物。 </view> <view class="xiang">      一提到大象我们马上就会想到它那长长的鼻子。您知道吗?它的大鼻子里有十多万块活动的肌肉哪，而我们人类整个身体全部算起来只有600多块肌肉，他的肌肉数量是我们人类的160多倍。难怪说鼻子是大象最有力的武器了。当遇到敌害的时候,它会用鼻子把对方卷起来，然后狠狠的甩出去。对于大象来说，鼻子是它身上“举足轻重”的器官，大象靠着它呼吸和取食喝水，大象的嗅觉灵敏在顺风的时候可以闻到80米以外的气味。 </view> <view class="xiang">      在它鼻孔开口的末端,有指状突起，就像我们人类手指一样，能够帮助它拾拣细物。我们平常看到大象吃草、采摘树叶、果实等都是用鼻子完成的。曾经有人做过这样的试验，看大象的鼻子究竟能拿起多么细小的东西，结果大象可以拿起我们缝纫用的针，可见大象的鼻子是多么的灵巧啊!除此以外,它的长鼻还能用来喝水和洗澡。一只成年的大象，一次可以用鼻子吸取十几公斤的水。相当于我们常见的一大桶桶装水还要多，就算是这样，大象想喝饱了还得喝上十次才算差不多。 </view>

代码清单：wxss

.container    display: flex;    flex-direction: column;    align-items: center; .fzxphoto    text-align: center;    /* margin-top: 100%; */ .xiang    margin-top: 50rpx;    font-size: 32rpx;    text-indent: 2em;    display: flex; .navbar    flex: none;    display: flex;    background: #fff;    .navbar .item    position: relative;    flex: auto;    text-align: center;    line-height: 80rpx;    .navbar .item.active    color: #FFCC00;   page    height: 135%;    background-color:#ffffff;

代码清单：app.json

"pages": [        "pages/webs/webs"    ],    "window":        "navigationBarBackgroundColor": "#ffff",        "navigationBarTitleText": "北京动物园",        "navigationBarTextStyle": "black"    ,    "sitemapLocation": "sitemap.json"

图一  

图2

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）