小程序模板網

小程序mina框架與配置

發(fā)布時間:2018-05-09 15:57 所屬欄目:小程序開發(fā)教程

小程序是采用MINA框架

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

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

Page({
    /**
     * 頁面的初始數(shù)據
     */
    data: helloData,
    changeName: function (e) {
        this.setData({
            name: 'MINA'
        })
    }
})

開發(fā)者通過框架將邏輯層數(shù)據庫中的name與視圖層的name進行了綁定,所以在頁面一打開的時候會顯示Hello WeChat 。

當點擊按鈕的時候,視圖層會發(fā)送changeName的事件給邏輯層,邏輯層找到對應的事件處理函數(shù)。

邏輯層執(zhí)行了setData的操作,將name從WeChat 變?yōu)?MINA,因為該數(shù)據和試圖層已經綁定了,從而視圖層會自動改變?yōu)镠ello MINA。

微信小程序不僅在底層架構的運行機制上做了大量的優(yōu)化,還在重功能(如page切換、tab切換、多媒體、網絡連接等)上使用接近于native的組件承載。所以微信小程序MINA有著接近原生App的運行速度,做了大量的框架層面的優(yōu)化設計,對Android端和iOS端做了高度一致的呈現(xiàn),并且準備了完備的開發(fā)和調試工具。

小程序配置

全局配置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"
            }
        ]
    }
  
}


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24414.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢