微信小程序出来已有段时间,虽还在内测阶段。利用空闲时间,我把蜂贷微信项目部分迁移到小程序上。
1.目录结构
小程序的主体由三个文件组成,这三个文件要放在项目的根目录下,分别是
app.js 配置小程序的逻辑
app.json 公共设置
app.wxss 公共样式
小程序可以自定义 page,但是 page 需要在 app.json 中做出声明,不然IDE会报错,找不到页面。小程序的页面由四个文件组成,分别是
.js文件 页面逻辑
.wxml 视图层文件,页面结构
.wxss 样式文件,页面样式表
.json 文件,配置文件,页面配置
2.小程序配置
app.json 决定页面文件的路径、窗口表现、设置网络超时时间、设置多少 tab 。
在 pages 对象里定义页面路径,pages 接受由字符串组成的数组,pages数组的第一个元素就是小程序的首页。
window 用于设置小程序的状态栏、导航条、标题、窗口背景色。
tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
networkTimeout 用来设置各种网络请求超时时间
debug 是布尔类型,用来配置是否在开发者工具中开启 debug 模式
3.小程序视图
在小程序中,你不能继续用 html 中的标签来构造你的页面,MANA 框架有特定的容器组件,view,scroll-view 以及 swiper。
view 是视图容器,类似于 html 中的 div ,但是不同的是,用 view 包裹的内容,在超出设备窗口的时候,它实现的效果如 css 样式设置的 overflow:hidden
如果你需要实现类似通讯录或则聊天列表的滚动效果,你需要使用 scroll-view 滚动容器组件,它实现的效果如 css 样式设置的 overflow:scroll 。
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 同样也定义了常用的事件分类,如
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断,如来电提醒,弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longtap 手指触摸后,超过350ms再离开
4.组件样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。如果你写过 css ,那你就能轻松驾驭 wxss,wxss 在选择器上做了限制,目前支持的选择器有:
.class 如:.intro 选择所有拥有 class=”intro” 的组件
#id
如:#firstname
选择拥有 id=”firstname” 的组件element 如: view 选择所有 view 组件
element, 如: element view checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after 如:view::after 在 view 组件后边插入内容
::before 如:view::before 在 view 组件前边插入内容
开发过移动端的前端er 都知道,苹果手机有物理像素和逻辑像素的区别,比如设备的像素是350px,设计稿的像素是750px;一般在开发过程中,我们会使用自动化构建工具去做像素转化,或则是使用预处理器定义像素转化函数进行处理,在小程序的开发中,大可不必这么麻烦,小程序提供了一个 rpx 的单位,你可以直接写上你在设计稿中测量的数值即可,小程序开发工具在编译过程中会自动帮你做转换。
在下次小程序分享《小程序开发踩坑(二)》的时候,会教大家如何与后端进行数据交互,欢迎感兴趣的小伙伴订阅博客。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。