01【微信小程序】简介，项目结构，内容页面标签栏配置，逻辑与界面分离，数据绑定，列表渲染，事件冒泡，事件传参，单向数据流，条件渲染，

小程序

 

1，小程序简介：

不需要下载安装即可使用的应用，实现了“触手可及”的梦想，用户扫一扫或者搜一下即可下载

也体现了“用完即走”的理念，用户不关心是否安装太多应用的问题

微信布局：
不仅是聊天平台，更多是服务的平台：订机票，打车，订餐，但是一般还是会使用官方app，因为服务号不能满足用户的需求，所以有了应用号，但是后来改名叫小程序；因为在苹果上线的时候，里边有应用两个字，不符合规范

非技术层面：体验近乎于原生app，代替了服务号，在服务平台的一个布局

技术层面：传统开发模型，就要移动操作系统之上，直接开发应用程序；微信也是基于安卓或者IOS上的一个app, 微信本身的业务会变得很小，取而代之的是小程序代替了很大的部分，

混合式应用开发：通过web开发一些web应用程序，通过cordova/phoneGap等方式运行在安卓或者IOS平台

微信： 开发了应用程序 通过微信提供的平台，运行在iOS或者安卓上

 

小程序能做什么？

搭建开发环境 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

VScode 内核，和他很像

 

2. 小程序的项目结构：

1）首先，找到应用程序的配置文件app.json: 跟页面外观设置的一些变化；

• ‘’Pages’’ 几个页面
• “windows” 导航条，文字背景，文字，颜色等
• 打开开发文档，框架中，配置，有很多示例，可以参考

2）app.js 启动文件

3）app.wxss 样式文件： 全局样式，全局共享的

4）pages 文件夹

- index文件夹

       - index.js 完成页面的逻辑：功能实现等操作

       - index.wxml （weixin markup language）基于xml，必须有开始结束标签, 定义页面结构

        - index.wxss (weixin style sheet) 完全遵循css, 在单位这点比css高级(rpx),定义页面样式

- logs文件夹：

        - logs.json 实际上覆盖app.json中windows的定义一些选项; 这个文件可有可无

        - logs,wxss 可有可无

 

页面文件组成

 

3. 小程序下的配置

配置内容：app.json 指定项目信息，窗口颜色样式，tab栏的组成，

页面配置：page.json 会覆盖app.json中windows的内容，只是windows

标签栏的配置：app.json 下 tabBar 每个标签栏点击后的页面 ；tabBar 是一个对象，最重要的属性list:[是一个数组，指定tab栏中有多少个tab标签], 必须是两个或两个以上，五个以内的的成员才能体现出来

Sitemap 配置-了解： 小程序内搜索，建立索引，

 

4, 逻辑与界面分离结构

4.1 逻辑层：

       JS完成，业务数据供给界面，界面触发事件进行处理

• 逻辑层的JS文件：

-1，小程序不是运行在浏览器中，所以没有BOM（Windows）, DOM（document）对象

-2，小程序中有一些额外的成员：

App() 用于定义应用程序实例对象；

page() 用于定义页面对象；

getApp() 获取全局应用实例对象；

getCurrentPages() 用来获取当前页面的调用栈，越早访问历史栈在最底下（数组，最后一个就是当前页面）

wx 对象用来提供核心API

          -3。小程序的JS支持CommonJS规范的 ：文件和文件是如何相互组织和协调的

 

4.2 界面层：

    页面结构（WXML），页面样式（WXSS），展示逻辑层的数据

1) 数据绑定：

• 动态数据兼容到模板中，做一个界面上的呈现；
• Mustache语法（双大括号）{ { }} 将变量包裹起来

<!--index.wxml--> <view class="container"> <!--   the framework : make the developer follows the fixed regulation to write code     1,where is the data? [in the data attribute of the html page object ]   2,binding to where? [wherever you want just use mustache grammer{ {}}] -->   <!--{ {}} mustache grammer --> <text>{ {message}}</text> <text>{ {person.name}}</text>   <!-- you can output inner tag; or in the attribute of the tag  --> <view class="{ {viewClassName}}"></view>   <!-- you can also add to the inner class    mustache grammer { {}} use :   1,inner elements   2, attribute of the elements   3, can't use in tag name or attribute; just for value --> <view class="add { {viewClassName}}"></view>   <text>{ {'hello'}}</text> <text>{ {11111}}</text> <text>{ {1111 + 9999}}</text> <text>{ {100>50?'okay, you are right~':'sorry :D'}}</text>   <!-- checkbox add the checked='false' is also checked;  cause they think its a string; you need to use { {}} : if the grammer is under misunderstand situation use { {}} --> <checkbox checked="{ {false}}"></checkbox