微信小程序出来已有段时间,虽还在内测阶段。利用空闲时间,我把蜂贷微信项目部分迁移到小程序上。
目录结构
小程序的主体由三个文件组成,这三个文件要放在项目的根目录下,分别是
小程序可以自定义 page,但是 page 需要在 app.json 中做出声明,不然IDE会报错,找不到页面。小程序的页面由四个文件组成,分别是
小程序配置
小程序的主体由三个文件组成,这三个文件要放在项目的根目录下,分别是
小程序可以自定义 page,但是 page 需要在 app.json 中做出声明,不然IDE会报错,找不到页面。小程序的页面由四个文件组成,分别是
小程序视图
在小程序中,你不能继续用 html 中的标签来构造你的页面,MANA 框架有特定的容器组件,view,scroll-view 以及 swiper。
1、view 是视图容器,类似于 html 中的 div ,但是不同的是,用 view 包裹的内容,在超出设备窗口的时候,它实现的效果如 css 样式设置的 overflow:hidden
2、如果你需要实现类似通讯录或则聊天列表的滚动效果,你需要使用 scroll-view 滚动容器组件,它实现的效果如 css 样式设置的 overflow:scroll 。
3、swiper 是滑块视图组件,如果你要实现类似轮播图的效果的话,他是你的不二之选,你能通过属性配置来控制是否显示圆点,是否自动播放,切换时间,以及切换间隔时间等。小程序的MANA也实现了数据的绑定,写法类似于 Angular 和 Vue,通过双括号的形式 如:{{data}} 即可,值得注意的是,如果你写在容器(为了便于描述和理解,下文会以标签来描述)于之间的话,你直接把变量写在双括号里即可,如:<view>{{data}}</view> ,但是如果你给标签的属性绑定变量,你需要将双括号放在双引号内,如:<view wx:if=”{{data}}”></view>,类似于Angular 和 Vue,你也能在双括号内进行简单的运算,如:<view hidden=”{flag?true:false}”></view>。
细心的同学可能发现了在介绍数据绑定的时候我们用了wx:if 的属性,这是 MANA 提供的条件渲染,通过判断 wx:if 传布尔值(非布尔类型进行隐士转化)来控制是否渲染标签中的内容。在 MANA 中还有一个属性能控制内容的显隐,不同的是,wx:if 只有在为 true 的时候才回去渲染标签中的内容,而 hidden 始终会渲染内容,只是根据条件来控制内容的显示与否。
此外MANA 也为我们提供了较为实用的列表渲染,wx:for 接受一个数组,在页面中能根据数组中的值来渲染页面列表
除了使用列表渲染来复用一块视图外,你还可以通过模版来进行复用,你能在 template 中定义一块代码片段,然后在不同的页面中引用,如:
<template name="odd"> <view> odd </view> </template> <template name="even"> <view> even </view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block>
除了 template 外,MANA 还提供了另外两种方式来进行应用和复用,import 和 include ,import 有作用域的概念,他只会引用目标文件中定义的模版。include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置上。
除MANA 同样也定义了常用的事件分类,如
组件样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。如果你写过 css ,那你就能轻松驾驭 wxss,wxss 在选择器上做了限制,目前支持的选择器有:
开发过移动端的前端er 都知道,苹果手机有物理像素和逻辑像素的区别,比如设备的像素是350px,设计稿的像素是750px;一般在开发过程中,我们会使用自动化构建工具去做像素转化,或则是使用预处理器定义像素转化函数进行处理,在小程序的开发中,大可不必这么麻烦,小程序提供了一个 rpx 的单位,你可以直接写上你在设计稿中测量的数值即可,小程序开发工具在编译过程中会自动帮你做转换。
在下次小程序分享《小程序开发踩坑(二)》的时候,会教大家如何与后端进行数据交互,欢迎感兴趣的小伙伴订阅博客。