小程序mina框架与配置



小程序是采用MINA框架

<!--demo.wxml-->
<view> Hello {{name}}</view>
<button bindtap="changeName">Click Me</button>

// demo.js
var helloData = {
    name: 'WeChat'
}

Page({
    /**
     * 页面的初始数据
     */
    data: helloData,
    changeName: function (e) {
        this.setData({
            name: 'MINA'
        })
    }
})

开发者通过框架将逻辑层数据库中的name与视图层的name进行了绑定，所以在页面一打开的时候会显示Hello WeChat 。
当点击按钮的时候，视图层会发送changeName的事件给逻辑层，逻辑层找到对应的事件处理函数。
逻辑层执行了setData的操作，将name从WeChat 变为 MINA，因为该数据和试图层已经绑定了，从而视图层会自动改变为Hello MINA。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重功能（如page切换、tab切换、多媒体、网络连接等）上使用接近于native的组件承载。所以微信小程序MINA有着接近原生App的运行速度，做了大量的框架层面的优化设计，对Android端和iOS端做了高度一致的呈现，并且准备了完备的开发和调试工具。
小程序配置
全局配置app.json
进行pages配置String Array，window配置Object，tabBar配置Object，networkTimeout配置Object，debug配Boolean置。

{
    "pages":[
 "pages/index/index",
 "pages/index/switch_shop",
 "pages/product/product",
 "pages/product/prolist",
 "pages/proinfo/proinfo",
 "pages/mine/mine",
 "pages/map/map",
 "pages/order/index",
 "pages/order/information",
 "pages/coupon/my_coupon",
 "pages/coupon/add_coupon",
 "pages/pay/pay",
 "pages/pay/pay_success",
 "pages/binds/tel",
 "pages/binds/change_tel",
 "pages/product_type/index",
 "pages/giftcard/my_giftcard",
 "pages/balance/my_balance",
 "pages/balance/add_balance",
 "pages/balance/balance_detail",
 "pages/invite/invite",
 "pages/sign/sign",
 "pages/sign/sign_record",
 "pages/present_card/card",
 "pages/present_card/rule"
    ],
    "window":{
        "navigationStyle":"default",
        "backgroundTextStyle":"dark",
        "navigationBarBackgroundColor": "#1b1a1f",
        "backgroundColor": "#f3f6f8",
        "navigationBarTitleText": "老板电器",
        "navigationBarTextStyle":"#FFFFFF",
        "enablePullDownRefresh": false
    },
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
    },
    "debug" : false,
    "tabBar"  : {
        "color"             : "#000000",
        "backgroundColor"   : "#FFFFFF",
        "borderStyle"       : "#C3C3C3",
        "selectedColor"     : "#ff8161",
        "list"  :   [
            {
                "pagePath"          : "pages/index/index",
                "text"              : "首页",
                "iconPath"          : "images/common/index.png",
                "selectedIconPath"  : "images/common/index-s.png"
            },
            {
                "pagePath"        : "pages/product_type/index",
                "text"            : "分类",
                "iconPath"        : "images/common/type.png",
                "selectedIconPath": "images/common/type-s.png"
            },
            {
                "pagePath"          : "pages/product/product",
                "text"              : "产品",
                "iconPath"          : "images/common/p.png",
                "selectedIconPath"  : "images/common/p-s.png"
            },
            {
                "pagePath"          : "pages/mine/mine",
                "text"              : "个人中心",
                "iconPath"          : "images/common/mine.png",
                "selectedIconPath"  : "images/common/mine-s.png"
            },
            {
                "pagePath"          : "pages/map/map",
                "text"              : "导航",
                "iconPath"          : "images/common/map.png",
                "selectedIconPath"  : "images/common/map-s.png"
            }
        ]
    }

}

作者：TBHacker
链接：小程序mina框架与配置-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处