柚媚网络营销培训

柚媚网络营销培训



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


作者:虎雕 日期:2018-09-27 03:23:38

  通过前面3课的学习,我们大概知道百度智能小程序的框架就是由逻辑层和视图层两部分组成,json文件只是一个基本设置文件,在以后的页面中是可有可无的。swan文件相当于一个前端开发语言,不再是一个单纯的标记类语言了,它还涉及到逻辑运算、事件等,但是它一般又是以成对的标签出现的。
一、    模版的引用
为了使代码更容易阅读和减少重复编写代码,在百度智能小程序中允许对模版进行引用,本来还应该有继承的,在官方文档里面没有找到
我们一般的网站可见部分大体可以分为三个部分,头部、中间底部,头部和底部的模版一般是完全一样的,比如柚媚网络营销培训就是这种架构。那么,我们就可以分别先写一个header.swan和footer.swan模版文件,然后在比如index.swan这类文件中用,示例如下:

我们先用template创建一个柚媚业务的模版,

然后用import引用。

注意data的内容是在js文件中说明的。

A文件import了B文件中的模版,B文件又import了C文件中的模版,那么,B文件中能出现C文件中的模版,A文件中能出现B文件中的模版,但是不能出现C文件中的模版。创建模版时定义的模版名称name与引用时的名称is要保持一致,is就是是的意思,不仅可以静态引用,还可以动态渲染,这个,目前在百度开发文件里没看到,以后再说。
二、    数据绑定
我们从上面的列子可以看到,js文件与swan文件存在对应关系,我们需要把这些数据相互绑定,才能在小程序上面展现。
1、    绑定内容
我们先建一个我的小程序js文件,myMP.js

现在我们要让这个名称出现在小程序中,在myMP.swan中要这样对应:

双大括号内这个称为模版变量,必须与page()里面data数据内的变量名保持一致。

2、    绑定属性
直接复制一个官方的过来,注意要加双引号和双大括号。

3、    属性控制
    这个也拷贝一个官方的,以前做过微信小程序的要特别注意,百度的是没有双大括号,微信的有。

4、    运算
Swan模版不仅能进行变量、属性访问,还能进行简单的运算,比如一元否定{{!isOK}},加减乘除、还可以带括号或者是数字,以及二元关系,三元数值、字符条件与运算,数组字面量也是可以的。
5、    对象字面量
还是抄袭一个官方的,带仨大括号那个就是对象字面量。

有时候我们需要获取的数据是数组,一个一个写就太麻烦了,尤其是如果我们是动态给这个数组赋值,要一个一个写就不可能了,这时候可以用s-for来渲染。

或者简单点:

也可以通过使用 s-for-index 来指定下标索引,s-for-item 来指定数组当前变量名。

有时候我们希望访问者在不同情况下看到的是不同的内容,比如登录与未登录、付费与未付费、会员与非会员等,我们就要用到条件判断。

如果我们只是想渲染一组组件或者标签,而不是自身,那么就要用到block 虚拟组件,用官方例子:

三、    本课用到的组件View、swiper、navigator、image、

    我们在本课下半课会用到上面这五个组件,大家可以先到这里学习: 百度智能小程序开发文档—组件汇总

 

 



评论列表:
发表评论:

昵 称:

内 容: