小程序是采用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. 使用springmvc报错Required int parameter 'age' is not present

    仔细检查jsp代码 <a href="springmvc/testRequestParam?username=atguigu$age=11">Test RequestP ...

  2. 完全卸载gitlab

    完全卸载删除gitlab 2017年5月29日 wuhao 暂无评论 4,089次浏览   完全卸载删除gitlab 1.停止gitlab   1 gitlab-ctl stop 2.卸载gitlab ...

  3. tsunami:一种基于UDP协议的快速传输

    一. 需求 最近在做数据库迁移,经常需要打包实例传输,传统scp感觉很慢. 二. 软件信息 1. 软件主页:http://tsunami-udp.sf.net/ 2. 软件安装:直接源码make &a ...

  4. while for if ---语句和编写计划任务

    关于while循环: while do done 例如 1.关于内存的实时操作: (1).vim a.sh (2).输入以下while循环 (3)../a.sh执行脚本 2.自加一的操作: (1).v ...

  5. HTTP metadata数据

    信息元位置 信息元名称 信息元ID 信息元描述 1 MetadataVersion 5000 Metadata版本号 当前版本号为1.0 2 MetadataID 1019 MetadataID 3 ...

  6. vue项目中报常见错误

    最近做项目,添加了less样式之后报错, 添加了如下样式: 报错如下图: 于是,就把相关的依赖也都安装了 以为这样会好使啦,后来发现原来是vue-style-loader的问题, 安装的vue-sty ...

  7. 【scala】可变与不可变的理解

    我们定义变量的时候分为var可变变量和val不可变变量. 我们使用容器的时候也分为可变容器和不可变容器. List和Tuple本身就是不可变的,set和map分为可变和不可变的,默认为不可变. 我们看 ...

  8. sql如何分组选择显示最新的一条数据

    怎样在数据库的一个表里筛选出每一人的时间最新的一条记录?用SQL语句 wenchuan408 wenchuan408    结帖率:100% sql数据库 yhh              name  ...

  9. 记录下httpclient 发送请求 服务端用@RequestBody 自动接收参数 报415

    注解是post方式,那么检查以下内容:1. 你是否用了post请求2. 请求是否发送了数据3. 请求内容格式需要是 application/json .jquery 设置 contentType,-- ...

  10. CSS: transitions

    CSS Transitions CSS transitions allows you to change property values smoothly (from one value to ano ...