微信小程序_代码007

本文介绍: 1、目录文件介绍2、wxml 设置数据和js 修改数据3、点击事件 wxml<view&g t; Hel lo {{name}}! </vi ew&g t; <button bind t ap=”c hang eNa m e“&g t; Clic k m e! </button></v iew>jsPa g e({ ch angeNa m e(){ th i s.setData({ name:’MINA’ }) }..

一、项目、配置 简介

1、目录 文件 介绍

二、小程序 框架：逻辑层、视图层

1、wxml 设置 数据和js 修改 数据 th i s.setData()

2、点击事件 bindtap

wxml

<view> Hello {{name}}! </view>
  <button bindtap="changeName"> Click me! </button>
</view>

Page({

  changeName(){
    this.setData({
      name:'MINA'
    })
  }
})

3、注册 小程序

4、beh av io rs

5、Componet 控件

6、路由；页面 跳转

7、模块化 module.exports

8、列表 渲染：for 循环 wx:for

<view wx:for="{{array}}">{{item}}</view>

9、条件渲染 wx:if wx:elif wx:else

10、模版 <template>

<template name="staffName">
  <view>
    firstName:{{firstName}} ,  lastName:{{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

1) <template name=”staffName”> staffName 模板名， firstName:{{firstName}} , lastName:{{lastName}} 模版输出内容： firstName:xxx , lastName:xxx

2) i s=”staffName” is说明模版是哪一个 data中 … 不能少

3）js中按照模版输出语句传入参数即可

11、wxss(css) 布局 控件 属性：宽高、边距、颜色、大小等 , 控件中引用 class=”xxx“

/* pages/test/test.wxss */
.normalPadding{
  margin-top: 10px;
  margin-left: 50px;
  color: #d61aaa;
}

<text class="normalPadding">WXSS样式测试</text>

12、选择器

13、事件绑定

1）bindtap 不拦截传递

2) catchtap 拦截传递

3）mut-bind 互斥事件绑定

14、事件对象

15、数据双向 绑定 input ：多用于 输入框

16、组件 属性

17、获取 界面 节点 信息

18、小程序随屏幕 旋转

19、动画

三、小程序运行时

1、小程序 生命周期

2、重启 策略

3、被销毁数据保存

4、小程序 手动 更新

四、自定义 组件

1、创建 自定义 组件

新建组件文件夹；新建 component；

其他文件 json中引用

布局中使用

2、组件模版

单slot 节点

多slot 节点用 name区分

3、组件 样式

4、组件样式隔离

5、外部样式引用

作用是统一样式，所有组件或page都可以直接使用，方便修改

新建外部组件

wxss 定义外部样式

需要使用的自定义组件中添加外部样式

自定义组件使用外部样式进行布局

Page中使用组件，并且使用外部样式

到这儿你可能发现外部样式并没有效果，赋值未成功，需要在app.wxss中引用你使用到的外部样式

6、引用页面 ‘~ ‘或父组件样式 ‘^’

7、Comp onent 构造器

Comp onent 构造器可用于定义组件，调用 Comp onent 构造器时可以指定组件的属性、数据、方法等。

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})