1.什么是小程序框架?
我们先看看官方给的解释:
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据
传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。
2.全局配置(app.json的文件)
代码如下:
官方给出的配置项列表:
(pages(Array), window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean))个配置项.
(1)pages
它的作用是配置小程序的页面,这个配置项是必填的,它接受一个数组,里面的每一项都是字符串,从上面给出的代码:
代码如下:
"pages": [
"pages/index/index",
"pages/logs/index"
]
可以看出,每一项分别对应的都是实现文件的路径以及他的文件名.
注意:这个配置里面的第一行配置是它的初始页面,例如上面代码的初始页面就是index;另外,如果在调试的时候哪个放在pages的第一个,就默认显示哪个页面。
(2)window
代码如下:
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#e22f21",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
官方给的window的配置属性如下:
(3)networkTimeout
它是用来设置各种网络请求的超时时间的,单位是毫秒,官方给出了四个属性(request, connectSocket, uploadFile, downloadFile)这四个属性分别定义的是wx.request, wx.connectSocket, wx.uploadFile, downloadFile 这四个API的超时时间.
(4) tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
如图所示:
注意:
当设置 position 为 top 时,将不会显示 icon
tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
(5)debug
如果在app.json将debug配置为true,那么在开发者工具的控制台面板中可以输出详细的调试信息.
3.每一个文件下包含自己的文件。
eg:
其中在.js 主要写的为脚本文件。
.wxss 主要写样式文件。一般用rpx
.wxml 写的是布局代码(页面文件)
eg:
4.小DEMO(用法)
(1.)简单绑定
在布局文件中写
<view> {{ message }} </view>
在js文件中写
Page({
data: {
message: 'Hello MINA!'
}
})
写法给上面类似,都是页面中写布局,css中写样式,js中写脚本文件。
直接给结果图:
好了,今天就先分享这么多基础的东西和一些简单的例子,以后会持续更新,也希望大家多多交流。