微信小程序学习笔记（一）

在一个小程序中，一共有四种类型的文件：

.json后缀的JSON配置文件：用于配置属性

.wxml后缀的WXML模板文件：用于描述页面结构

.wxss后缀的WXSS样式文件：用于描述页面的样子

.js后缀的JS脚本逻辑文件：用来处理页面和用户的交互

 

小程序工程目录：

pages文件夹：用于存放小程序页面的代码，每个页面为一个文件夹，文件夹名称即为页面名称，文件夹下为该页面的全部代码，共四个文件来描述这个页面，且四个文件名称均与页面名称相同。

utils文件夹：仅有一个js文件，用于存放公共的js代码，方便在不同页面调试。

images文件夹：通常手动创建，用于存放小程序使用到的全部静态图片。

app.js/json/wxss：分别为项目全局的js（全局数据和动作）、json（全局配置）、wxss（全局样式），可以再页面中直接使用或访问、

project.config.json：项目配置文件，通常不需要程序员改动

 

Json配置

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等

pages字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录

window字段：定义小程序所有页面顶部背景颜色，文字颜色定义。

project.config.json 个性化配置

page.json页面配置，独立定义每个页面的一些属性

Json语法：key-value形式，被包在一个大括号中{}，json文件无法使用注释

 

wxml学习（具体看小程序文档）

<view></view>

<!--page/html/html.wxml-->

<input />输入框

wxml设置属性：<关键词 属性名称="属性值">

<view class='demoview'></view>视图容器

<scroll-view scroll-y style='height:200px;'></scroll-view>视图滚动容器

<text class="txt"></text>

<button type="default" bindtap="default"></button>表单

<input maxlength="10" placeholder="最大输入长度"/>

<image src=""></image>

 

数据绑定：通过{{}}的语法把变量绑定到界面上。

使用方法：

wxml文件：在标签内容或者属性中使用：{{变量名}}

js文件：对该变量进行定义

 

使用位置：

内容：<view>{{message}}</view>

组件属性（需要在双引号之内）：<view id="item-{{id}}"></view>

控制属性（需要在双引号之内）：<view wx:if="{{condition}}"></view>

关键字：<checkbox checked="{{false}}"></checkbox> 布尔类型