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
