微信小程序布局框架怎么开发?

　　微信小程序布局框架怎么开发?进行微信小程序布局的时候，要开发出微信小程序布局框架，很多的微信小程序开发者不知道怎么去做，今天小编就来教大家开发出微信小程序布局的框架。

　　MINA(MINA IS NOT APP)就是微信小程序布局开发使用的框架。

　　微信小程序布局框架开发基本工作原理：

　　MINA的核心是一个响应的数据绑定系统。

　　整个系统分为两块：视图层(View) 和 逻辑层(App Service)。

　　MINA可以让数据与视图保持同步非常简单。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

　　通过这个简单的例子来看，微信小程序代码如下：

　　Hello {{name}}!

　　// App Service

　　// 初始数据创建

　　var helloData = {

　　name: 'WeChat'

　　}

　　// 注册页面.

　　Page({

　　data: helloData,

　　changeName: function(e) {

　　this.setData({

　　name: 'MINA'

　　})

　　}

　　})

　　开发者通过MINA将逻辑层数据中的name与视图层的name进行了绑定，所以在页面一打开的时候会显示Hello WeChat!

　　当点击按钮的时候，视图层会发送changeName的事件给逻辑层，逻辑层找到对应的事件处理函数

　　逻辑层执行了setData的操作，将name从weChat变为MINA，因为该数据和视图层已经绑定了，从而视图层会自动响应改变为Hello MINA! 。

　　简单来说，视图层中绑定了name，在逻辑层中只需要对绑定的name操作就行了，而无需再获取"DOM对象",因为这部分关联工作MINA 已经做好了。

　　页面管理:

　　MINA管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进MINA中，其他的一切复杂的操作都交由MINA处理。

　　基础组件:

　　MINA提供了一套基础的(具有微信风格和微信逻辑的)组件，开发者通过组合各种基础组件，创建自己的微信小程序。

　　API——独特的优势

　　MINA提供丰富的微信原生API，调用微信功能十分方便(自个儿家产的当然用着方便)，如获取用户信息，本地存储，支付功能等。

　　再来细致的了解一下MINA

　　一、目录结构：

　　app文件结构

　　文件必需作用

　　app.js是小程序逻辑

　　app.json是小程序公共设置

　　app.wxss否小程序公共样式表

　　各个页面(page)文件结构

　　文件必需作用

　　wxml是页面结构

　　wxss否页面样式表

　　json否页面配置

　　小程序js是页面逻辑

　　注意：为了方便开发者减少配置项，描述页面的这四个文件必须具有相同的路径与文件名。

　　二、 配置 ——对.json文件的详细解释

　　开发者使用app.json文件对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、多tab等：

　　各个页面的.json文件来对本页面的窗口表现进行配置。 也就是只需要配置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。

　　// app.json

　　{

　　"pages": [

　　"page/index/index",

　　"page/logs/index"

　　],

　　"window": {

　　"navigationBarTitleText": "Demo"

　　},

　　"tabBar": {

　　"list": [{

　　"pagePath": "page/index/index",

　　"text": "首页"

　　}, {

　　"pagePath": "page/logs/logs",

　　"text": "日志"

　　}]

　　},

　　"networkTimeout": {

　　"request": 10000,

　　"downloadFile": 10000

　　},

　　"debug": true

　　}

　　app.json配置项列表

　　属*类型必填描述

　　pagesStringArray是设置微信小程序页面路径

　　windowObject否设置默认页面的窗口表现

　　tabBarObject否设置底部tab的表现

　　networkTimeoutObject否设置网络超时时间

　　debugBoolean否设置是否开启debug模式

　　pages

　　 接受一个字符串数组，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。

　　 文件名不需要写文件后缀，因为MINA会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

　　window

　　用于设置小程序的状态栏、导航条、标题、窗口背景色。

　　属*类型默认值描述

　　navigawqrtionBarBackgroundColorHexColor#000000导航栏背景颜色

　　navigatiofafnBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white

　　navigatiocznBarTitleTextString

　　导航栏标题文字内容

　　backgrowdawundkehicsColorHexColor#ffffff窗口的背景色

　　baaeewckgroundTextSasdatyladeStringdark下拉背景字体、loading图的样式，仅支持dark/light

　　enablePucllDownRefreshBooleanfalse是否开启下拉刷新

　　app.json中：

　　"winczdow": {

　　"naviczcgationBarTextStyle": "black",

　　"navigaztionvzBarTitleText": "这是我的小程序",

　　"navigatczvionBarBackgroundColor": "#fbf9fe",

　　"backgroundColor": "#fbf9fe"

　　}

　　页面.json中，只能配置当前页面，所以不用添加window键：

　　{

　　"navivgationBarBackvzgroundColor":"#ffffff",

　　"navaigationvzBarTextStyle":"black",

　　"navigavztionBarTitleText":"页面上部导航标题",

　　"backgrvzoundColor":"#eeeeee",

　　"backgroundvzTextStyle":"light"

　　}

　　tabBar

　　底部导航，小程序只支持2~5个tab，tab按数组顺序排序。

　　属*说明：

　　属*类型必填默认值描述

　　colorHexColor是

　　tab上文字颜色

　　selectedColorHexColor是

　　tab选中时的文字颜色

　　backgroundColorHexColor是

　　tab背景色

　　borderStyleString否blacktab边框的颜色， 仅支持 black/white

　　listArray是

　　tab的列表

　　list属*：

　　属*类型必填说明

　　pagePathString是关联的页面路径

　　textString是tab上按钮文字

　　iconPathString是图标图片路径，40kb以内

　　selectedIconPathString是选中图标图片路径，40kb以内

　　networkTimeout

　　设置网络请求超时时间

　　属*说明：

　　属*类型必填说明

　　requestNumber否wx.request的超时时间，单位ms

　　connectSocketNumber否wx.connectSocket的超时时间，单位ms

　　uploadFileNumber否wx.uploadFile的超时时间，单位ms

　　downloadFileNumber否wx.downloadFile的超时时间，单位ms

　　debug

　　 可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，信息包括：Page的注册，页面路由，数据更新，事件触发 。

　　微信小程序布局框架怎么开发?感谢大家的阅读，微信小程序布局框架开发步骤及所用到的微信小程序代码就介绍到这里了，希望以上小编整理的内容对大家会有帮助哦。请多关注微小乔。

　　微信小程序table布局怎么开发?

　　微信小程序页面排版怎么布局?

　　微信小程序卡片布局怎么做?