小程序介绍

咋咋滴
245 阅读9分钟

一、介绍

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的

  • 开发模式不同
网页开发：
网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。
小程序：
小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。
  • 运行环境不同
网页开发
运行的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等
小程序开发
运行的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具
  • API不同
因为运行环境不同，小程序没有办法调用BOM和Dom的API
小程序可以调用微信环境提供的各种API
地理定位
扫码
支付

二、WXLL

1.什么是 WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作

用类似于网页开发中的 HTML。

2.WXML 和 HTML 的区别
1.标签名称不同
html（div span img a）
wxml （view text image navigator）
​
2.属性节点不同
<a href = "#">超链接为例</a>
<navigator url="/pages/home/home"></navigator>
​
3.提供了类似vue中的模版语法
数据绑定
列表渲染
条件渲染
3.WXSS(微信ss)和CSS的区别:

什么是 WXSS:

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

1.新增了rpx尺寸单位
css中需要手动进行像素单位换算 如rem
wxss在底层支持新的尺寸单位rpx 在不同大小的屏幕上小程序会自动进行换算
​
2.提供了全局的样式和局部样式
项目根目录中的app.wxss会作用于所有小程序页面
局部页面的.wxss样式仅对当前页面生效
​
3.wxss仅支持部分css选择器
.class和#id
element
并集选择器 后代选择器
::after  ::before等伪类选择器

三、小程序文件介绍

四种文件类型：

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

JSON配置：

app.json 根目录全局配置页面路径、界面表现、网络超时时间、底部 tab 等小程序的配置 app.json 
project.config.json 根目录 工具个性化的配置，可以copy到新环境还原个性化    开发者工具的配置
page.json   模块目录    单个页面展示效果的配置 页面配置

全局app.json文件

pages页面路径列表
window默认窗口表现
tabBar底部 tab 栏的表现
networkTimeout网络超时时间
debug是否开启 debug 模式

pages：

{
  "pages":[
    "pages/index/index",//页面路径列表
    "pages/logs/logs"
  ]
}

window:

navigationBarBackgroundColor导航栏背景颜色
navigationBarTextStyle导航栏标题颜色
navigationBarTitleText导航栏标题文字内容
navigationStyle导航栏样式
backgroundColor窗口的背景色
backgroundTextStyle下拉 loading 的样式

tabber:

color tab 上的文字默认颜色
selectedColor tab 上的文字选中时的颜色
backgroundColor tab 的背景色
list 最少2个、最多5个 tab
position tabBar的位置
pagePath 页面路径
text tab 上按钮文字

小程序组件介绍

一、组件的使用

1.创建组件

  1. 在项目的根目录中，鼠标右键，创建 components -> test 文件夹
  2. 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”
  3. 为新建的组件命名之后，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss
  4. 在.json文件中设置component: true

2.引入组件

  1. 在需要引用组件的页面中，找到页面的 .json 配置文件，新增usingComponents节点
  2. 在 usingComponents 中，通过键值对的形式，注册组件；键为注册的组件名称，值为组件的引用路径
usingComponents: {
    "组件名": "组件所在路径"
}
usingComponents: {
    "my-test": "/component/test/test"
}

3.使用组件

在页面的 .wxml 文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示到页面上

<组件名></组件名>
<my-test></my-test>

二、样式

  1. 组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效
  2. app.wxss 中的样式、组件所在页面的样式对自定义组件无效。
- 组件myCom的样式不会影响组件myText
- 组件myCom的样式不会影响小程序页面
- 小程序页面的样式不会影响组件myCom和组件myText

app.wxss中的全局样式对组件无效

只有class选择器有样式隔离的影响，id，标签，属性选择器不受样式隔离的影响,建议使用class选择器

三、methods

使用methods定义组件的事件处理函数

和页面不同，组件的事件处理函数，必须定义在 methods 节点中

// component/test/test.js
// 组件的方法列表
methods: {
    add() {
        this.setData({
            num: this.data.num + 1
        })
    }
}

四、data数据

1.组件
  1. 组件的json文件中需要声明 "component": true,
  2. 组件的 .js文件中调用Component() 函数
  3. 组件的事件处理函数需要定义到methods中

2.页面

  1. 页面的 .js中调用 Page()方法

3.在组件的.js文件中，要访问data中的数据，直接this.data.数据名称即可

在组件的.js文件中，要修改data中的数据，直接调用this.setData()即可

data: {
    num: 0
  },

五、properties

  1. 类似于 vue 组件中的 props，小程序组件中的 properties，是组件的对外属性，用来接收外界传递到组件中的数据* ,properties 的值是可读可写的 *
  2. 在小程序中，组件的 properties 和 data 的用法类似，它们都是可读可写的
  3. 和data的区别

data 更倾向于存储组件的私有数据

properties 更倾向于存储外界传递到组件中的数据

声明properties的两种方式

Component({
    properties: {
        // 完整的定义方式
        propA: {  // 属性名 
            type: String, // 属性类型 
            value: ''   // 属性默认值
        },
        propB: String  // 简化的定义方式
    }
})
type 的可选值为 Number，String、Boolean、Object、Array、null(表示不限制类型)

向组件传递properties的值

可以使用数据绑定的形式，向子组件的属性传递动态数据
!--pages/home/home.wxml-->
<view>
  <my-test msg="hello world2"></my-test>
  <my-test msg="{{ info }}"></my-test>
</view>
// pages/home/home.js
data: {
    info: "我是定义在data中的数据"
}
在定义 properties 时，属性名采用驼峰写法（propertyName）；
在 wxml 中，指定属性值时，则对应使用连字符写法（property-name=“attr value”），
应用于数据绑定时，采用驼峰写法（attr="{{propertyName}}"）

组件内修改properties

小程序中，properties 的值是可读可写的，它的用法与 data 几乎一致，因此可以通过 setData 修改 properties 中任 何属性的值

<!--component/test/test.wxml-->
<button bindtap="updateProperties">修改propeoties属性</button>
// component/test/test.js
updateProperties() {
    // 获取 properties中的值：this.properties.msg
    console.log(this.properties.msg)
    // 修改 properties中的值
    this.setData({
        msg: 'info'
    })
}

六、数据监听器

  • 数据监听器可以用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。

  • 基本使用方法

    语法格式：

    Component({
    observers: {
        '字段A, 字段B': function(字段A的新值，字段B的新值) {
            // do something
        }
    }
})

监听子数据字段语法

监听子数据字段的变化

数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 setData 最多触发每个监听器一次

observers: {
    // 如果obj这个对象改变了，数据监听器会响应；如果obj中a的值发生改变了，数据监听器也会响应
    'obj.a'(newValue) {
        // do something
        // newValue: 变化以后的新值
    },
    'arr[1]'(newValue) {
        // do something
        // newValue: 变化以后的新值
    }
}
Component({
    data: {
        arr: [1, 2, 3, 4]
    },
    
    // 数据监听器
    observers: {
        //如果arr这个数组改变了，数据监听器会响应；如果arr中某一个值发生改变了，数据监听器也会响应
        'arr[2]'(newValue) {
            console.log('改变了')
            console.log(newValue)
        }
    }
})

使用通配符**监听所有子数据字段的变化

如果需要监听所有子数据字段的变化，可以使用通配符 **

observers: {
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    }
}

七、插槽

  • 在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构

  • 默认情况下，一个组件的 wxml 中只能有一个slot。需要使用多 slot 时，可以在组件 js 中声明启用

  • 注意：小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽

  • // // component/test/test.js
Component({
    // 配置多个插槽的使用
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    }
})

  • 可以在组件的 wxml 中使用多个 slot 标签，以不同的 name 来区分不同的插槽

    <!--component/test/test.wxml-->
<view>
    <!-- 插槽的占位符 -->
    <slot />
    <view>············</view>
    <slot name="body2" />
    <view>············</view>
    <slot name="body3" />
</view>

    使用时，用 slot 属性来将节点插入到不同的 slot 中

    <!--pages/home/home.wxml-->
<my-test>
    <view>body1</view>
    <view slot="body2">body2</view>
    <view slot="body3">body3</view>
</my-test>

组件间的通信

组件之间的三种基本通信方式

WXML 数据绑定：用于父组件向子组件的指定属性传递数据，仅能设置 JSON 兼容数据

1.在父组件的子组件当中绑定子组件要接收的属性，值为要传递的值

<!--component/test/test.wxml-->
<my-test msg="{{ info }}"></my-test>
Page({
    // 页面的初始数据
    data: {
        info: "我是定义在data中的数据"
    }
})

2.在子组件中通过properties属性中定义要接收的属性

// component/test/test.js
Component({
    // 接收对外传递过来的数据
      properties: {
        msg: { // 接收的数据
          type: String, // 数据类型
          value: 'hello world' // 数据的默认值
        }
      }
})

3.渲染数据

<!--component/test/test.wxml-->
<view>{{ msg }}</view>

2.事件：用于子组件向父组件传递数据，可以传递任意数据

3.通过 this.selectComponent 方法获取子组件实例对象来直接访问组件的任意数据和方法

this.selectComponent使用

在小程序的组件中，调用 this.selectComponent(string)，可以返回指定组件的实例对象

父组件的 .js 文件中，可以调用 selectComponent 函数并指定 id 或 class 选择器，获取子组件对象

通过class或id给组件取个名字

 <my-test class="my-test" id="mtTest" msg="{{ info }}"></my-test>

在onLoad生命周期函数中，通过selectComponent获取组件实例

Page({
    // 生命周期函数--监听页面加载
    onLoad: function (options) {
        // 获取组件
        const component = this.selectComponent('.my-test');
        console.log(component.data.arr)
    }
})

通过事件监听实现向父组件传值

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件

步骤：

在子组件中，通过triggerEvent('自定义事件的名称', 要传递的值)方法派发一个自定义事件

<!--component/test/test.wxml-->
<button bindtap="addNum">数字+1</button>
methods: {
    addNum() {
        // 1.在子组件中通过triggerEvent，派发一个自定义事件
        this.triggerEvent('addNum', { num: 10 })
    }
}

在父组件中，绑定子组件派发过来的自定义事件

<!--pages/home/home.wxml-->
<view>
  <my-test bind:addNum="addNum"></my-test>
  <view>{{ num }}</view>
</view>

定义事件处理函数，通过ev.detail来接收子组件传递过来的值

Page({
    addNum(ev) {
        // 通过ev.detail来接收子组件传递过来的值
        //console.log(ev.detail)
        this.setData({
            num: this.data.num + ev.detail.num
        })
    }
})

avatar
文章
阅读
粉丝