小程序是采用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"
}
]
} }

小程序mina框架与配置的更多相关文章

  1. 微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)

    目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...

  2. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  3. 小程序第三方框架对比 ( wepy / mpvue / taro )(转)

    文章转自  https://www.cnblogs.com/Smiled/p/9806781.html 众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程 ...

  4. 小程序第三方框架对比 ( wepy / mpvue / taro )

      众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...

  5. (转)快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  6. 微信小程序目录结构与配置介绍

    一.小程序结构目录 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 官网 1.1 ...

  7. 小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程

    安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配 ...

  8. 基于mpvue搭建小程序项目框架

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序 ...

  9. 微信小程序--代码构成---JSON 配置

    在上一章中,我们通过开发者工具快速创建了一个 QuickStart 项目.你可以留意到这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 ...

随机推荐

  1. No toolchains found in the NDK toolchains folder for ABI with prefix

    通过Android Studio 的Sdk Manager安装NDK,安装完之后编译失败,报错信息如下: No toolchains found in the NDK toolchains folde ...

  2. JavaScript面向对象之Prototypes和继承

    本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继 ...

  3. appium自动化测试(三)

    一. 层级定位和list 先通过find_element_by_XXX找到父级元素webelement,再通过webelement.find_element_by_XXX寻找子元素 二. 滑动屏幕 滑 ...

  4. 卸载mac多余的音频驱动:internal audio driver corel painter

    $ kextstat | grep corel 130 0 0xffffff7f81042000 0x4000 0x4000 com.corel.painter.PainterAudioDriver ...

  5. 【Python】小技巧

    1. 退出python shell 在windows下,Ctrl + Z退出 在unix下,Ctrl + D退出

  6. 内存保护机制及绕过方法——利用未启用SafeSEH模块绕过SafeSEH

    利用加载模块之外的地址绕过safeSEH 前言:文章涉及的概念在之前的文章中都有过详细的讲解 ⑴.  原理分析: 当程序加载进内存中后,处理PE文件(exe,dll),还有一些映射文件,safeSEH ...

  7. LeetCode OJ:Search for a Range(区间查找)

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  8. LeetCode OJ:Three Sum(三数之和)

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  9. react: navigator

    1.page js import React from "react"; import {Link} from "react-router-dom"; impo ...

  10. L125

    The United States Senate (参议院)has taken the first step toward ending President Barack Obama's health ...