微信小程序学习总结(一)

微信小程序学习总结(一)

微信小程序:
简称: 小程序,是一种不需要安装即可使用的应用
特点: 免安装 操作更接近原生APP 必须在微信中使用 不占内存 易传播
官方文档地址: https://developers.weixin.qq.com/miniprogram/dev/
一.小程序目录结构:

app.js 注册一个小程序
app.json 全局配置(窗口的表现, 网络超时时间, 页面路径)
app.wxss 设置微信小程序的全局样式
project.config.json 保存微信开发者工具的配置信息
pages 存放小程序所有页面,每个页面最多有4个文件

├── app.js     注册一个小程序
├── app.json   全局配置(窗口的表现, 网络超时时间, 页面路径...)  
├── app.wxss   设置微信小程序的全局样式 
├── pages      存放小程序所有页面,每个页面最多有4个文件
│   │── index
│   │   ├── index.wxml    页面结构
│   │   ├── index.js      页面逻辑
│   │   ├── index.json    页面配置
│   │   └── index.wxss    页面样式
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils                  存放工具函数, 用来代码复用
└── project.config.json    保存微信开发者工具的配置信息   

二.全局配置:

Pages 注册微信小程序的所有页面路径
tabBar 指定导航栏的表现
networkTimeout 设置各个网络请求的超时时间
debug 开启debug模式,可以打印调试信息
navigationStyle 设置导航栏标题颜色
enablePullDownRefresh 设置小程序全局和单个页面的下拉刷新表现
disableScroll 设置页面是否开启滚动

三.小程序开发框架

基本构成: WXML WXSS WXS javaScrip

1.WXML(Weixin Markup Language)
是框架设计的一套标签语言,结合组件,wxs和事件系统, 可以构建出页面的结构
<标签名 属性=""…>
注意: 标签必须闭合 属性大小写敏感
特性:
(1).数据绑定(Mustache)

// index.js
Page({
  data: {
    message: 'Hello World',
    theName: 'Tony',
    flag: false
  }
})

标签共同属性:

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

(2).列表渲染

  
    {{index}}:{{item.name}}
  

// index.js
Page({
  data: {
    items: [
      {name: '货物A'},
      {name: '商品B'},
      {name: '汽车C'}
    ]
  }
})

(3).条件渲染

今天吃什么?

  饺子


  米饭


  面

// index.js
Page({
  data: {
    eat: Math.floor(Math.random() * 3 + 1)
  }
})

(4).模板引用

   
      
      
      // index.js
      Page({
        data: {
          item: {
            name: '张三',
            phone: '132546874',
            address: "中国"
          }
        }
      })

name定义模板名称, is引用模板, 只能通过data向模板传入数据, ... 是扩展运算符,将data传给模板

文件引用 两种方式

  
  
  
  
  Hello, World
  

import将引用a.wxml中的template模板,如果模板里面还有模板,将不会被引用

  
  
  
  
  
  
    Hello World
  

include将引用除了template模板外的, 所有内容
2.WXSS(WeiXin Style Sheets)
是一套样式语言,用于描述WXML的组件样式
特点:
①尺寸单位: rpx 最终转换为rem
②样式导入
@import 外联样式导入

  
    Hello World
  
  /* index.wxss */
  @import './assets.wxss';
  .container {
    color: red;
  }
  /* assets.wxss */
  .container {
    border: 1px solid black;
  }

③内联样式

  Hello World!

// index.js
Page({
  data: {
    colorValue: 'red'
  }
})

④选择器

      选择器	               样例	             样例描述                            优先级
      .class	          .intro	          选择所有拥有 class="intro" 的组件    10
      #id	              #firstname	      选择拥有 id="firstname" 的组件       100
      element	          view	              选择所有 view 组件                   1
      element,element	  view, checkbox	  群组选择器                           1 
      ::after	          view::after	      在 view 组件后边插入内容                                
      ::before	          view::before	      在 view 组件前边插入内容
      !import  无穷大         内联样式  1000