请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 168|回复: 0

微信小程序开发(三)首页制作上

[复制链接]
  • TA的每日心情
    开心
    2019-5-7 14:15
  • 签到天数: 9 天

    [LV.3]偶尔看看II

    396

    主题

    399

    帖子

    1860

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1860
    admin实名认证 发表于 2019-5-11 17:32:33 | 显示全部楼层 |阅读模式
    相信大家看了我昨天发的文章后,应该对微信小程序的基本概念以及如何使用有了一定的了解,那么掌握了这些呢,今天我就带领大家把我们的首页给制作出来。首先大家先打开自己电脑桌面上的微信开发者工具,打开之后呢,大家自行找到自己创建的welcome目录(如果没有的话,请先看我的第二篇文章),打开welcome目录下面的welcome.wxml文件。上面还有一句我们自己写的“hello world !”,如图:
    212121.jpg
    我们的代码就是在welcome.wxml里面书写,在书写之前呢,我先介绍三个标签,分别是<view></view>、<text></text>、<image></image>。这三个标签是编写微信小程序最常用的三个标签,我们的首页也是用这三个标签来完成,下面我来给大家讲解一下这三个标签是干什么用的。

    <image></image>标签:这个标签从字面意思就非常好理解,image中文翻译过来是影像的意思。在微信小程序里面表示图片标签,它有一个非常重要的属性,如图所示:

    8874.jpg
    这个属性是src属性,代表的意思就是这个图片存放的路径,根据你在src里面输入图片的路径,image标签才能够生效。

    <text></text>标签:这个标签也非常简单,大家也可以从字面上就能够猜出来这个标签和文本有关,没错,这个就是文本标签,我们写的”hello world!“就可以写在这个标签里面,如图:

    2147.jpg
    <view></view>标签:这个标签我之所以放在最后一个讲,是因为它不太好理解。没关系,我给大家举个例子大家就懂了。就好比image标签和text标签是大狼狗,如果没有东西来约束它们,他们会乱跑乱跳,不服从管教,view标签就像是一个笼子,用把大狼狗扔进笼子里,它就没有办法了,所以呢view标签就是一个看不见摸不着的笼子,它用来约束image标签和text标签。如果大家有网站前端开发经验的话,肯定会想到div标签,没错,它们两个标签的性质是一样的,只不过一个用在了网站制作上,一个用在了微信小程序制作上。根据我刚才讲的,大家可以猜出image标签和text标签是写在view标签里面的,没错,代码如图所示:
    a214.jpg
    大家把上面三个标签给弄明白之后呢,咱们就开始首页的制作吧,首先大家先来看一下首页的构成:
    d21s.jpg
    很明显,首页是由一个图片,一段文字和一个矩形框组成的,而且这三部分都位于屏幕的中间。弄明白首页的组成之后,我带领大家把它制作出来。

    大家先自行创建一个image目录,image目录和pages目录是同级别的,不要放在pages目录里面,image目录用来存放我们的图片。如图所示:

    bbdd.jpg
    创建完毕后,右键单击image目录,有一个硬盘打开选项,大家点击,点击后就会找到image文件夹存放的位置,如图所示:
    3214.jpg
    这一步完成后,大家自行去网上找一张图片,把它放在image文件夹里面,我给大家展示一下我找的图片:
    3215.jpg
    大家把图片放在image文件夹后,回到微信开发者工具里面,点击image目录,大家会发现目录下面出现了自己存放的图片,如图所示:
    3216.jpg
    出现了之后,我们回到welcome.wxml文件里面,开始编写代码。这个时候welcome.wxml文件里面的代码是如图所示的状态:
    3217.jpg
    大家是不是发现image标签里面src还没有填写路径,我们image目录也有了,图片也有了,现在我们就把路径给写上,代码如图所示:
    3218.jpg
    "/image/1.png"这个路径很好理解,就是在全局找到image目录下的1.png这个图片,“image”前的"/"代表的意思是全局查找,现在界面会出现如图所示的情况:
    3219.jpg
    图片界面上已经有了,还差一段话和一个矩形框,我们把剩下的给搞定。这个时候大家可以把之前输入的”hello world!“给删掉了。我们把剩下的代码给写上吧,如图所示:
    32110.jpg
    这个代码大家应该能看懂吧,我就不多赘述了,下面来看效果图:
    32111.jpg
    哈哈,是不是和我们理想中的界面差的多,不用着急,一步一步来,我们先把导航栏给解决掉,哪个部分是导航栏呢,如图所示:
    32112.jpg
    完成后的界面的导航栏是粉色的,而且导航栏的字是”ACKING的博客“,那么这些在哪里修改呢,大家自行找到app.json文件,如图所示:
    32113.jpg
    大家应该理解了“pages”代表的含义,不懂的话可以去看看我的第二篇文章,里面有详细的解释。而这个“window”我没有讲,现在是处理它的时候了,我们想要对导航栏做修改,就是要修改“window”里面的四个属性,其中有一个属性是“navigationBarBackgroundColor”代表的意思是导航栏的背景颜色,我们把它对应的值改成自己喜欢的颜色就好了,它的默认值为“#fff”也就是白色,这里我把它改成粉色,如图所示:
    32114.jpg
    效果图如下:
    32115.jpg
    “window”里还有一个属性叫做“navigationBarTitleText”,意思是导航栏标题文字,默认值是”wechat“,大家可以把它修改成自己想要的文字即可,效果图如下:
    32116.jpg
    到了这里,导航栏我们已经解决掉了,在下一篇文章里面,我将会带领大家把我们代码优化完善,制作出完美的首页效果图,下次见~~

    如果大家对我的文章感兴趣,记得点个关注,欢迎大家踊跃评论,有什么不会的都可以评论,我会给大家详细解答,希望大家可以多多收藏,分享。


    本文采集自百度百家号:web开发那些事 原文网址https://mbd.baidu.com/newspage/d ... A%22bjhauthor%22%7D
    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|寿光赢创志诚信息技术有限公司 ( 鲁ICP备19000917号 )

    GMT+8, 2019-5-22 22:48 , Processed in 0.063821 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表