微信小程序框架解析

微信小程序框架（Vue.js）

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生

APP 体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言

WXML 和 WXSS，以及基于 JavaScript

的逻辑层框架，并在视图层与逻辑层间提供了数据竖稿迅传输和事件系统，让开发者能够专注于数据与逻辑。

在刚接触微信小程序的时候，就是官方提供的这个框架，敬禅其实该框架的思想和vue还是有相似之处，正所谓万变不离其宗。只不过这个框架就是直接使用微信小程序所需要的wxml、wxss等文件，而其他框架最终打包生成的文件才是官方所需要的。所以我建议就是初学者，还是可以先使用或学习下该余此框架，更能直接的了解小程序和学习。所以初学者值得推荐。

官网： https://mp.weixin.qq.com

微信小程序的优势：

一是微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户；

二是推广app 或公众号的成本太高。

三是开发适配成本低。

四是容易小规模试错，然后快速迭代。

五是跨平台。

登陆成功：

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 普通快速启动项目 里边的 app.json 配置.

字段的含义

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

页搜返面的配置只能设置 app.json 中部分 window 配置项的内容乎谨，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

WXML（WeiXin Markup Language）是框世顷饥架设计的一套标签语言，结合 基础组件 、 事件系统 ，可以构建出页面的结构。

.wxml文件下

.js文件Page模块下

不要直接写 checked="false"，其计算结果是一个字符串

ps:花括号和引号之间如果有空格，将最终被解析成为字符串.

项的变量名默认为 itemwx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

配合 wx:for 使用，用于提高效率。建议写上。

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

1.基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2.属性类型

<ul>

<li>Boolean布尔值组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属李弊散性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number数字1

, 2.5</li>

<li>String字符串"string"</li>

<li>Array数组[ 1, "string" ]</li>

<li>Object对象{ key: value } </li>

<li>EventHandler事件处理函数名"handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any任意属性</li>

</ul>

3.共同属性类型哪氏

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选卜兄择器, switch 开关选择器, label 标签.

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片， video 视频

** 地图 **

map 地图

画布Canvas

canvas 画布

flex: vt.折曲，使收缩； vi.玩去，收缩

---