微信小程序

一、项目、配置简介

1、目录文件介绍

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

1、wxml设置数据和js修改数据 this.setData()

2、点击事件 bindtap

wxml

html 复制代码
<view> Hello {{name}}! </view>
  <button bindtap="changeName"> Click me! </button>
</view>

js

java 复制代码
Page({

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

3、注册小程序

4、behaviors

5、Componet控件

6、路由;页面跳转

7、 模块化 module.exports

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

html 复制代码
<view wx:for="{{array}}">{{item}}</view>

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

10、模版 <template>

html 复制代码
<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. is="staffName" is说明模版是哪一个 data中 ... 不能少

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

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

css 复制代码
/* pages/test/test.wxss */
.normalPadding{
  margin-top: 10px;
  margin-left: 50px;
  color: #d61aaa;
}
html 复制代码
<text class="normalPadding">WXSS样式测试</text>

12、选择器

13、事件绑定

1)bindtap 不拦截传递

  1. 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、Component 构造器

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

javascript 复制代码
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) {

    }
  }

})

8、组件间通信与事件 triggerEvent

为自定义组件设置触发事件

page中使用自定义控件并监听'myevent'事件

page中处理事件响应

相关推荐
流口水的兔子2 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记2 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481214 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero6 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠7 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu17 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun1 天前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序