柚媚网络营销培训

柚媚网络营销培训



百度智能小程序开发第4课(中),swan文件的编写


作者:虎雕 日期:2018-09-28 06:35:38

为了让代码看起来美观,而且有逻辑层次,一定要习惯规范性地写代码,如下图:

 

接下来我们首先计划一下我们的首页大概是什么样子,顶部显示公司名称或者首页两个字,然后接下来是导航栏,导航栏下面是广告轮播,为了看起来更加好看,我们在轮播下面可以再用图标展示一下我们的主要业务,然后,显示公司简介的文章部分内容,最后,可以横排或者竖排主要产品,最新文章,阅读最多,最新回复等内容。

我们在安排首页展示时,务必考虑到手机显示的内容是有限的,尽量在首页只显示最重要的内容,在实际操作中,一般请美工进行视图设计,然后再进行剪切修图,以达到视觉上的完美统一,千万不要向我这个网站一样,同我本人差不多,丑到家了!然后根据图片写css文件,再写js文件与json文件,最后写这个swan文件。

当然,你如果是简约主义,也可以像我微信小程序这样,非常简单,顶部小程序名称,然后导航,接下来就是文章列表了,最下面那个是app.json文件里面tabBar的导航。


顶部,在index.json里面写一句搞定;

{

    "navigationBarTitleText": "柚媚百度智能小程序服务"

}

 

第二排是导航条,这个与下面那个tabBar的不一样,因为那个最多只能有五个,而且字数还不能太多!可以把下面那个简单地设置成“首页”、“更多”和“我的”三个,简洁美观。如果是企业展示型的,把“我的”改成“联系”、“咨询”、“留言”等等也可以,与第二栏的导航相互补充最好。

实现头部导航,用navigatorimagetext三个组件就够了,如果没有图片,inage都省掉了!

最后就是文章列表,单纯的文章列表的话,再加上一个s-for来绑定数据就可以了。在举例子前先说一下布局,分横向和纵向,横向的话,图标类的最多5栏,视频、图像、文章带图列表等一般两栏,产品展示类的一般三栏,纵向布局的话,也不能太多了,即使是文章列表类的,也要限制数量。如下:

简易版的示例:

s-foritems数组的值绑定到视图中并显示出来,用bind绑定事件,如果发生触摸后马上离开即触发点击函数,跳转到详情页面。嵌套的s-for是把tags数组中的值绑定并显示出来。最后用一个按钮来加载更多的内容,也是绑定了一个触发loadMore的函数。

由于内容太多,我们在下一节继续讲。

 

文中关于bind的知识请查看 百度智能小程序开发文档——事件处理 , 关于组件的知识请参考 百度智能小程序开发文档——组件汇总

 



评论列表:
发表评论:

昵 称:

内 容: