小程序的代码结构

文件类型

app.js
用于注册微信小程序应用类似JavaScript
app.json
微信小程序的全局配置信息
app.wxss
微信小程序的样式类似于CSS
index.wxml
微信小程序页面显示类似于HTML
project.config.json

文件夹

pages
用于存放页面文件
utils.js
工具函数

基本结构

app 全局配置	Window 窗口配置	page 页面配置
Pages 所有页面	navigationBarBackgroundColor 导航栏背景颜色	disbleScroll 设置小程序是否开启滚动
tabBar 设置tab栏	navigationBarTextStyle 导航栏标题颜色等样式
networkTimeout 设置各个网络的超时时间	navigationBarTitleText 标题文字内容
debug 打印调试信息	backgroundColor 窗口背景颜色
	backgroundTextStyle 窗口下拉时文字内容样式
	onReachBoottomDistace 下拉全局样式
	enablePullDownRefresh 下拉全局样式

微信小程序开发框架--基本构成

WXML WXSS WXS JavaScript

微信小程序开发框架--WXML

WXML(WeiXin Markup Language)

是框架设计的一套标签语言，结合组件、WXS和事件系统，可以构建出页面的结构
语法：

<标签名 属性名="属性1" 属性名="属性名2" ...>
       ...
</标签名>

WXML四个语言特性

数据绑定、列表渲染、条件渲染、模板引用

WXML数据绑定

<!--index.wxml-->
<view>
    <text>{{message}}</text>
</view>

//index.js
Page({
    data: {
          message: "Hello,world"
            }
})

属性绑定

<!--index.wxml-->
<view>
 <text data-name="{{theName}}"></text>
</view>

//index.js
Page({
    data: {
          theName: "Jack"
            }
})

运算符绑定

<view hidden="{{flag ? true : false}}">
      Hidden
</view>

Page({
    data: {
          flag : false
            }
})

微信小程序开发框架--属性

属性名	类型	描述	注解
id	String	组件唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的WXSS中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	所有组件默认显示
bind* / catch*	EventHandler	组件的事件	详见事件

微信小程序开发框架--列表渲染

<view>
      <block wx:for={{items}}" wx:for-item="item" wx:key="index">
            <view>{{index}}:{{item.name}}</view>
      </block>
</view>

Page({
      data: {
          items: [
                  {name: "商品A"},
                  {name: "商品B"},
                  {name: "商品C"},
                  {name: "商品D"}
              ]    
      }
})

微信小程序开发框架--条件渲染

<view>今天吃什么</view>
<view wx:if={{ condition === 1 }}>
饺子
</view>
<view wx:elif={{ condition === 2 }}>
米饭
</view>
<view wx:else>
面食
</view>

Page({
    data: {
          //Math.random()生成一个0——1的浮点随机数
          //Math.floor()向下取浮点数的整数
          condition: Math.floor(Math.random()*3+1)
}
})

微信小程序开发框架--模板引用

<template name="tempItem">
    <view>
            <view>收件人：{{name}}</view>
            <view>联系方式：{{phone}}</view>
            <view>地址：{{address}}</view>
     </view>
</template>
<template is="temoltem" data="{{...item}}"></template>

Page({
    data:{
          item: {
                name: "张三",
                phone: "18888888888"  ,
                address: "中国"
      }
      }
})