小程序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"
}
]
}
}
小程序mina框架与配置的更多相关文章
- 微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)
目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- 小程序第三方框架对比 ( wepy / mpvue / taro )(转)
文章转自 https://www.cnblogs.com/Smiled/p/9806781.html 众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程 ...
- 小程序第三方框架对比 ( wepy / mpvue / taro )
众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...
- (转)快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- 微信小程序目录结构与配置介绍
一.小程序结构目录 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 官网 1.1 ...
- 小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程
安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配 ...
- 基于mpvue搭建小程序项目框架
简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序 ...
- 微信小程序--代码构成---JSON 配置
在上一章中,我们通过开发者工具快速创建了一个 QuickStart 项目.你可以留意到这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 ...
随机推荐
- 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 ...
- JavaScript面向对象之Prototypes和继承
本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继 ...
- appium自动化测试(三)
一. 层级定位和list 先通过find_element_by_XXX找到父级元素webelement,再通过webelement.find_element_by_XXX寻找子元素 二. 滑动屏幕 滑 ...
- 卸载mac多余的音频驱动:internal audio driver corel painter
$ kextstat | grep corel 130 0 0xffffff7f81042000 0x4000 0x4000 com.corel.painter.PainterAudioDriver ...
- 【Python】小技巧
1. 退出python shell 在windows下,Ctrl + Z退出 在unix下,Ctrl + D退出
- 内存保护机制及绕过方法——利用未启用SafeSEH模块绕过SafeSEH
利用加载模块之外的地址绕过safeSEH 前言:文章涉及的概念在之前的文章中都有过详细的讲解 ⑴. 原理分析: 当程序加载进内存中后,处理PE文件(exe,dll),还有一些映射文件,safeSEH ...
- LeetCode OJ:Search for a Range(区间查找)
Given a sorted array of integers, find the starting and ending position of a given target value. You ...
- 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 ...
- react: navigator
1.page js import React from "react"; import {Link} from "react-router-dom"; impo ...
- L125
The United States Senate (参议院)has taken the first step toward ending President Barack Obama's health ...