• 小程序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"
                }
            ]
        }
      
    }
  • 相关阅读:
    使用MulticastSocket实现多点广播(实现多人聊天室)
    双目相机标定以及立体测距原理及OpenCV实现
    opencv5-objdetect之级联分类器
    OpenCV人脸识别--detectMultiScale函数
    简单eclipse配置opencv的方法
    Struts2之Action的配置
    Struts2入门
    用户管理系统网站框架改进之MVC模式
    Tomcat中设置数据源和连接池
    JSP第一个实例之用户管理系统
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/8987350.html
Copyright © 2020-2023  润新知