小程序是采用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. 关于VirtualBox在桥接模式下无法联网解决方案

    关于VirtualBox在桥接模式下无法联网 解决方案VirtualBox与笔记本无线网卡桥接 如果重新开机连接不上,可能需要重新共享一下,(重新给桥接网卡分配与当前物理机IP在同一局域网段的IP) ...

  2. mysql学习笔记(Centos下rpm编译配置+远程访问)

    新工作以来,博主感觉天天都很忙,博客已经好久没有写了 从昨天开始弄centos服务器中搭建mysql5.6,由于yum最新版本只有5.1的所以折腾到现在 首先看看是否已安装过其他版本的mysql [r ...

  3. 分分享知识-快乐自己: @Component注解的使用

    @controller 控制器(注入服务) 用于标注控制层,相当于struts中的action层 @service 服务(注入dao) 用于标注服务层,主要用来进行业务的逻辑处理 @repositor ...

  4. 用phpexcel插件导出excel2003

    ob_end_clean();//清空缓冲区并关闭输出缓冲(清除脏数据). header('Content-Type:application/vnd.ms-execel'); header('Cont ...

  5. IOS-MapKit

    一.MapKit框架的使用 MapKit框架使用须知 MapKit框架中所有数据类型的前缀都是MK MapKit有一个比较重要的UI控件 :MKMapView,专门用于地图显示   跟踪显示用户的位置 ...

  6. .html() .text() .val() 的区别

    .html()用为读取和修改元素的HTML标签(包括其Html标签) .text()用来读取或修改元素的纯文本内容 (包括其后代元素) .val()用来读取或修改表单元素的value值.(只能用于表单 ...

  7. MySQL Multi-Range Read

    MySQL 5.6版本提供了很多性能优化的特性,其中之一就是 Multi-Range Read 多范围读(MRR) , 它的作用针对基于辅助/第二索引的查询,减少随机IO,并且将随机IO转化为顺序IO ...

  8. 使用Jenkins自动编译我的 java 项目 git maven jenkins

    之前的项目已经将jenkins部署好,现在添加maven项目 准备工作 安装插件 Git plugin Publish Over SSH 全局设置  key: 是 linux服务器的私钥 Global ...

  9. H264子宏块的划分有哪些?

    每个分割或子宏块都有一个独立的运动补偿.每个 MV 必须被编码.传输,分割的选择也需编 码到压缩比特流中.对大的分割尺寸而言,MV 选择和分割类型只需少量的比特,但运动补偿残差 在多细节区域能量将非常 ...

  10. OLE剪切板与拖拽

    https://www.xuebuyuan.com/1074399.html https://blog.csdn.net/uda1985/article/details/6179801