1. ​​微信小程序介绍​​

小程序:微信小程序开发_json

微信⼩程序,简称⼩程序,英⽂名MMiinnii PPrrooggrraamm ,是⼀种不需要下载安装即可使⽤的应⽤,它实现

了应⽤“触⼿可及”的梦想,⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1.1. 为什么是微信小程序 ?


  1. 微信有海量用户,⽽且粘性很⾼,在微信⾥开发产品更容易触达用户;
  2. 推⼴app 或公众号的成本太⾼。
  3. 开发适配成本低。
  4. 容易⼩规模试错,然后快速迭代。
  5. 跨平台。

1.2. 微信小程序历史


  • 2016年1⽉11⽇,微信之⽗张⼩⻰时隔多年的公开亮相,解读了微信的四⼤价值观。张⼩⻰指出,越来越多产品通过公众号来做,因为这⾥开发、获取⽤⼾和传播成本更低。拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫「​微信⼩程序​」 需要注意的是,之前是叫做​应⽤号
  • 2016年9⽉21⽇,微信⼩程序正式开启内测。在微信⽣态下,触⼿可及、⽤完即⾛的微信⼩程序引起⼴泛关注。腾讯云正式上线微信⼩程序解决⽅案,提供⼩程序在云端服器的技术⽅案。
  • 2017年1⽉9⽇​,微信推出的“⼩程序”正式上线。“⼩程序”是⼀种⽆需安装,即可使⽤的⼿
    机“应⽤”。不需要像往常⼀样下载App,⽤⼾在微信中“⽤完即⾛”。

1.3. 疯狂的微信小程序


  1. 微信⽉活已经达到10.82亿。其中55岁以上的⽤⼾也达到6300万
  2. 信息传达数达到450亿,较去年增⻓18%;视频通话4.1亿次,增⻓100%
  3. ⼩程序覆盖超过200+⾏业,交易额增⻓超过6倍,服务1000亿+⼈次,创造出了5000亿+的商业价值

1.4. 还有其他的小程序 不容忽视


  1. ⽀付宝⼩程序
  2. 百度⼩程序
  3. QQ⼩程序
  4. 今⽇头条 + 抖⾳⼩程序

1.5. 体验

1.5.1. 官方微信小程序体验

​⼩程序⽰例源码​

1.5.2. 其他优秀的第三方小程序


  • 拼多多
  • 滴滴出⾏
  • 欢乐⽃地主
  • 智⾏⽕⻋票
  • 唯品会
  • 。。。

2. 环境准备

开发微信⼩程序之前,必须要准备好相应的环境

2.1. 注册账号


建议使用全新的邮箱,没有注册过其他小程序或者公众号的。


访问​​注册⻚⾯​​,耐⼼完成注册即可。

2.2. 获取APPID

由于后期调⽤微信⼩程序的接⼝等功能,需要索取开发者的⼩程序中的AAPPPPIIDD ,所以在注册成功后,可登录,然后获取APPID。​​登录​​,成功后可看到如下界⾯然后复制你的APPID,悄悄的保存起来,不要给别⼈看到是????????????。小程序:微信小程序开发_json_02

小程序:微信小程序开发_小程序_03

2.3. 开发⼯具

​开发工具​

小程序:微信小程序开发_小程序_04

微信⼩程序⾃带开发者⼯具,集 ​开发 预览 调试 发布​ 于⼀⾝的 完整环境。

但是由于编码的体验不算好,因此 建议使⽤ ​​vs code​​ + ​​微信小程序编辑工具​​ 来实现编码

​vs code​​ 负责敲代码, 微信编辑工具 负责预览

3. 第⼀个微信⼩程序

3.1. 打开微信开发者⼯具

注意 第⼀次登录的时候 需要扫码登录


3.2. 新建小程序项目

小程序:微信小程序开发_小程序_05

3.3. 填写项目信息

小程序:微信小程序开发_json_06

3.4. 成功

小程序:微信小程序开发_微信_07

4. 微信开发者工具介绍

详细的使⽤,可以查看​​官⽹​

小程序:微信小程序开发_json_08

5. 小程序结构目录

​⼩程序框架​​的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣ APP 体验的服务。

⼩程序框架提供了⾃⼰的视图层描述语⾔ ​​WXML​​ 和 ​​WXSS​​ ,以及 ​​JavaScript​​,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

5.1. 小程序文件结构和传统web对比

通过以上对⽐得出,传统web 是三层结构。⽽微信⼩程序 是四层结构,多了⼀层 配置.json

结构

传统web

微信小程序

结构

HTML

WXML

结构

CSS

WXSS

逻辑

Javascript

Javascript

配置

JSON

通过以上对⽐得出,传统web 是​​三层结构​​​。⽽微信⼩程序 是四层结构,多了⼀层 ​​配置.json​

5.2. 基本的项目目录

小程序:微信小程序开发_微信_09

6. 小程序配置文件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 ​​app.json​​​ 和 ⻚⾯⾃⼰的​​page.json​


注意:配置文件中不能出现注释


6.1 ​​全局配置app.json​

​app.json​​是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的 ​​app.json​​配置

小程序:微信小程序开发_微信_10

字段的含义


  1. pages 字段 ⸺ ⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序。⻚⾯定义在哪个⽬录。
    可以直接在pages下面新增新的一行,按Ctrl+s,开发助手会自动建立页面所有目录。
  2. window字段 ⸺ 定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等。
  3. 完整的配置信息请参考 ​​app.json配置​

6.1.1. ​​tabbar​

小程序:微信小程序开发_json_11

6.2. ​​页面配置 page.json​

这⾥的​​page.json​​其实⽤来表⽰⻚⾯⽬录下的​​page.json​​这类和⼩程序⻚⾯相关的配置。

开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等。

⻚⾯的配置只能设置​​app.json​​中部分​​window​​配置项的内容,⻚⾯中配置项会覆盖​​app.json​​的​​window​​中相同的配置项。

属性

类型

默认值

描述

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜⾊,如#000000

navigationBarTextStyle

String

white

导航栏标题颜⾊,仅⽀持black/white

navigationBarTitleText

String

导航栏标题⽂字内容

backgroundColor

HexColor

#ffffff

窗⼝的背景⾊

backgroundTextStyle

String

dark

下拉 loading 的样式,仅⽀持 dark/ light

enablePullDownRefresh

Boolean

false

是否全局开启下拉刷新。 详⻅​​Page.onPullDownRefresh​

onReachBottomDistance

Number

50

⻚⾯上拉触底事件触发时距⻚⾯底部距离,单位为px。 详⻅​​Page.onReachBottom​

disableScroll

Boolean

false

设置为​​true​​​则⻚⾯整体不能上下滚动;只在⻚⾯配置中有效,⽆法在中​​app.json​​设置该项

6.3. ​​sitemap 配置-了解即可​

⼩程序根⽬录下的​​sitemap.json​​⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。

7. 模板语法

WXML(WeiXin Markup Language)是框架设计的⼀套标签语⾔,结合​​基础组件​​​、​​事件系统​​,可以构建出⻚⾯的结构。

7.1. 数据绑定

7.1.1. 普通写法

<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})

7.1.2. 组件属性

<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})

7.1.3. bool类型

不要直接写​​checked="false"​​其计算结果是⼀个字符串

字符串和花括号之间一定不要有空格,否则会识别失败!

<checkbox checked="{{false}}"> </checkbox>

7.2. 运算

7.2.1. 三元运算

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

7.2.2. 算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})

7.2.3. 逻辑判断

<view wx:if="{{length > 5}}"> </view>

7.2.4. 字符串运算

<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})

7.2.5. 注意

花括号和引号之间如果有空格,将最终被解析成为字符串

7.3. 列表渲染

7.3.1. wx:for

项的变量名默认为 ​​item​​ ​​wx:for-item​​ 可以指定数组当前元素的变量名

下标变量名默认为 ​​index​​ ​​wx:for-index​​ 可以指定数组当前下标的变量名

​wx:key​​ ⽤来提⾼数组渲染的性能

​wx:key​​ 绑定的值 有如下选择

如果wx:key绑定一个普通的字符串,那么这个字符串名称肯定是循环数组中对象的唯一属性



string 类型,表⽰ 循环项中的唯⼀属性 如

list:[
{
id:0,
name:"炒饭"
},
{
id:1,
name:"炒面"
}
]
wx:key="id"


保留字 ​​*this​​ ,它的意思是 ​​item​​ 本⾝ ,​​*this​​ 代表的必须是 唯⼀的字符串和数组。
如果wx:key="​​*this​​",那么数组就是一个普通的数组,​​*this​​表示循环项

list:[1,2,3,4,5]
wx:key="*this"


  • 注意:当出现数组的循环嵌套的时候,尤其要注意,以下绑定的名称不要重名。​​vx:for-item​​​和​​vx:for-index​

  • 默认情况下,如果不写​​vx:for-item​​和​​vx:for-index​​,小程序也会把循环项的名称和索引的名称定义为item和index。如果只有一层循环的话,​​vx:for-item​​和​​vx:for-index​​可以不写。
  • 循环对象的时候,最好把item和index的名称都修改一下。
    ​vx:for-item="value",vx:for-index="key"​​ 代码:

<view wx:for="{{array}}" wx:key="id">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
id:0,
message: 'foo',
}, {
id:1,
message: 'bar'
}]
}
})

7.3.2. block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

7.4. 条件渲染

7.4.1. wx:if

在框架中,使⽤ ​​wx:if="{{condition}}"​​ 来判断是否需要渲染该代码块:

<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>

7.4.2. hidden

<view hidden="{{condition}}"> True </view>

类似 ​​wx:if​

频繁切换用 ​​hidden​

不常使用用 ​​wx:if​

8. 小程序的事件绑定

⼩程序中绑定事件,通过bind关键字来实现。如​​bindtap​​​、​​bindinput​​​、​​bindchange​​等不同的组件⽀持不同的事件,具体看组件的说明即可。

8.1. wxml

绑定事件

<input bindinput="handleInput" />

8.2. page

通过事件源对象可以获取输入框的值—e.detail.value

Page({
// 绑定的事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
}
})

8.3. 特别注意


  1. 绑定事件时不能带参数 不能带括号 以下为错误写法​​<input bindinput="handleInput(100)" /> ​
  2. 事件传值 通过标签⾃定义属性的⽅式 和 ​​value​​​​<input bindinput="handleInput" data-item="100" /> ​
  3. 事件触发时获取数据​​handleInput: function(e) { // {item:100} console.log(e.currentTarget.dataset) // 输入框的值 console.log(e.detail.value); } ​

9. ​​样式WXSS​​

WXSS( WWeeiiXXiinn SSttyyllee SShheeeettss )是⼀套样式语⾔,⽤于描述 ​​WXML​​ 的组件样式。与 CSS 相⽐,WXSS 扩展的特性有:


  • 响应式⻓度单位 ​​rpx​
  • 样式导⼊

9.1. 尺寸单位

​rpx​​(responsive pixel): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为​​750rpx​​。如在​​iPhone6​​ 上,屏幕宽度为​​375px​​,共有750个物理像素,则​​750rpx = 785px = 750物理像素​

即:​​1rpx = 0.5px= 1物理像素​

设备

rpx换算px(屏幕宽度/750)

px换算rpx(750/屏幕宽度)

iPhone5

1rpx=0.42px

1px=2.34rpx

iPhone6

1rpx=0.5px

1px=2rpx

iPhone6 Plus

1rpx=0.552px

1px=1.81rpx

建议: 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。

使⽤步骤:


  1. 确定设计稿宽度​​pageWidth​
  2. 计算⽐例​​750rpx = pageWidth px​​​,因此 ​​1px = 750rpx/pageWidth​
  3. 在less⽂件中,只要把设计稿中的​​px=>750/pageWidth rpx​​即可。

9.2. 样式导入

wxss中直接就⽀持,样式导⼊功能。

也可以和 less中的导⼊混⽤。

使⽤​​@import​​语句可以导⼊外联样式表,只⽀持​​相对路径​​。

⽰例代码:

/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}

9.3. 选择器

特别需要注意的是 ⼩程序 不⽀持通配符 ​​*​​ 因此以下代码⽆效!

*{
margin:0;
padding:0;
box-sizing:border-box;
}

⽬前⽀持的选择器有:

选择器

样例

样例描述

.class

.intro

选择所有拥有 class=“intro” 的组件

#id

#firstname

选择拥有 id="firstname"的组件

element

view

选择所有 view 组件

element,element

view,checkbox

选择所有⽂档的 view 组件和所有的 checkbox 组件

nth-child(n)

view:nth-child(n)

选择某个索引的标签

::after

view::after

在 view 组件后边插⼊内容

::before

view::before

在 view 组件前边插⼊内容

9.4. 小程序中使用less

原⽣⼩程序不⽀持less,其他基于⼩程序的框架⼤体都⽀持,如​​wepy​​​, ​​mpvue​​​, ​​taro​​​等。但是仅仅因为⼀个​​less​​功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现



编辑器是 ​​vs code​



安装插件 ​​easy less​小程序:微信小程序开发_微信_12



在​​vs code​​的设置中加⼊如下,配置
小程序:微信小程序开发_微信_13



在要编写样式的地⽅,新建 ​​lexx​​⽂件,如 ​​index.lese​​然后正常编辑即可。



10. ​​常见组件​​

重点讲解⼩程序中常⽤的布局组件​​view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox​​。等

10.1. ​​view​

代替 原来的 ​​div​​ 标签

<view hover-class="h-class">
点击我试试
</view>

10.2. ​​text​


  1. ⽂本标签
  2. 只能嵌套text
  3. ⻓按⽂字可以复制(只有该标签有这个功能)
  4. 可以对空格 回⻋ 进⾏编码

属性名

类型

默认值

说明

selectable

Boolean

false

文本是否可选

decode

Boolean

false

是否解码

10.2.1 代码

<text selectable="{{false}}" decode="{{false}}">
普&nbsp;通
</text>

10.3. ​​image​


  1. 图⽚标签,image组件默认宽度320px、⾼度240px
  2. ⽀持懒加载

属性名

类型

默认值

说明

src

String

图片资源地址

mode

String

‘scaleToFill’

图片裁剪、缩放的模式

lazy-load

Boolean

false

图片懒加载

mode​ 有效值:

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

模式

说明

缩放

scaleToFill

不保持纵横⽐缩放图⽚,使图⽚的宽⾼完全拉伸⾄填满 image 元素

缩放

aspectFit

保持纵横⽐缩放图⽚,使图⽚的⻓边能完全显⽰出来。

缩放

aspectFill

保持纵横⽐缩放图⽚,只保证图⽚的短边能完全显⽰出来。

缩放

widthFix

宽度不变,⾼度⾃动变化,保持原图宽⾼⽐不变

裁剪

top

不缩放图⽚,只显⽰图⽚的顶部区域

裁剪

bottom

不缩放图⽚,只显⽰图⽚的底部区域

裁剪

center

不缩放图⽚,只显⽰图⽚的中间区域

裁剪

left

不缩放图⽚,只显⽰图⽚的左边区域

裁剪

right

不缩放图⽚,只显⽰图⽚的右边区域

裁剪

top left

不缩放图⽚,只显⽰图⽚的左上边区域

裁剪

top right

不缩放图⽚,只显⽰图⽚的右上边区域

裁剪

bottom left

不缩放图⽚,只显⽰图⽚的左下边区域

裁剪

bottom right

不缩放图⽚,只显⽰图⽚的右下边区域

10.4. ​​swiper​


微信内置轮播图组件


小程序:微信小程序开发_json_14

默认宽度 100% ⾼度 150px

属性名

类型

默认值

说明

indicator-dots

Boolean

false

是否显⽰⾯板指⽰点

indicator-color

Color

rgba(0, 0, 0, .3)

指⽰点颜⾊

indicator-active-color

Color

#000000

当前选中的指⽰点颜⾊

autoplay

Boolean

false

是否⾃动切换

interval

Number

5000

⾃动切换时间间隔

circular

Boolean

false

是否循环轮播

10.4.1. swiper

滑块视图容器。

10.4.2. swiper-item


滑块


默认宽度和⾼度都是100%

10.5. ​​navigator​


导航组件 类似超链接标签


属性名

类型

默认值

说明

target

String

self

在哪个⽬标上发⽣跳转,默认当前⼩程序,可选值self/miniProgram

url

String

当前⼩程序内的跳转链接

opentype

String

navigate

跳转⽅式

open-type 有效值:

说明

navigate

保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到 tabbar ⻚⾯

redirect

关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到 tabbar ⻚⾯。

switchTab

跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯

reLaunch

关闭所有⻚⾯,打开到应⽤内的某个⻚⾯

navigateBack

关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 ​​getCurrentPages()​​ 获取当前的⻚⾯栈,决定需要返回⼏层

exit

退出⼩程序,target="miniProgram"时⽣效

10.6 ​​rich-text​


富文本标签


可以将字符串解析成 对应标签,类似 vue中 ​​v-html​​ 功能

小程序:微信小程序开发_小程序_15

代码

// 1 index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
// index.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello&nbsp;World!'
}]
}]
},
tap() {
console.log('tap')
}
})

10.6.1. nodes属性

​nodes​​​ 属性⽀持 ​​字符串​​​ 和 ​​标签节点数组​

属性

说明

类型

必填

备注

name

标签名

string

⽀持部分受信任的 HTML 节点

attrs

属性

object

⽀持部分受信任的属性,遵循 Pascal 命名法

children

⼦节点列表

array

结构和 nodes ⼀致

⽂本节点:type = text

属性

说明

类型

必填

备注

text

⽂本

string

⽀持entities


  • nodes不推荐使⽤ String 类型,性能会有所下降。
  • rich-text 组件内屏蔽所有节点的事件。
  • attrs 属性不⽀持 id ,⽀持 class 。
  • name 属性⼤⼩写不敏感。
  • 如果使⽤了不受信任的 HTML 节点,该节点及其所有⼦节点将会被移除。
  • img 标签仅⽀持⽹络图⽚。

10.7 ​​button​

小程序:微信小程序开发_json_16

<button
type="default"
size="{{defaultSize}}"
loading="{{loading}}"
plain="{{plain}}"
>
default
</button>

属性

类型

默认值

必填

说明

size

string

default

按钮的⼤⼩

type

string

default

按钮的样式类型

plain

boolean

false

按钮是否镂空,背景⾊透明

disabled

boolean

false

是否禁⽤

loading

boolean

false

名称前是否带 loading 图标

formtype

string

⽤于组件,点击分别会触发 组件的submit/reset 事件

opentype

string

微信开放能⼒

size 的合法值

说明

default 默认⼤⼩

mini ⼩尺⼨

type 的合法值

说明

primary

绿⾊

default

⽩⾊

warn

红⾊

form-type 的合法值

说明

submit

提交表单

reset

重置表单

open-type 的合法值

说明

contact

打开客服会话,如果⽤⼾在会话中点击消息卡⽚后返回⼩程序,可以从bindcontact 回调中获得具体信息,​​具体说明​

share

触发⽤⼾转发,使⽤前建议先阅读​​使⽤指引​

getPhoneNumber

获取⽤⼾⼿机号,可以从bindgetphonenumber回调中获取到⽤⼾信息,​​具体说明​

getUserInfo

获取⽤⼾信息,可以从bindgetuserinfo回调中获取到⽤⼾信息

launchApp

打开APP,可以通过app-parameter属性设定向APP传的参数​​具体说明​

openSetting

打开授权设置⻚

feedback

打开“意⻅反馈”⻚⾯,⽤⼾可提交反馈内容并上传​​⽇志​​​,开发者可以登录​​⼩程序管理后台​​后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

open-type 的 contact的实现流程


  1. 将⼩程序 的​​appid​​​由测试号改为 ⾃⼰的​​appid​
  2. 登录​​微信⼩程序官⽹​​,添加 客服 – 微信
  3. 为了⽅便演⽰,⾃⼰准备了两个账号

  1. 普通⽤⼾ A
  2. 客服-微信 B

  1. 就是⼲!

10.8. ​​icon​

属性

类型

默认值

必填

说明

type

string

icon的类型,有效值:success, success_no_circle,info, warn, waiting, cancel, download, search,clear

size

number/string

23

icon的⼤⼩

color

string

icon的颜⾊,同css的color

小程序:微信小程序开发_微信_17

代码

<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
}
})

10.9 ​​radio​


可以通过 color属性来修改颜色


小程序:微信小程序开发_json_18

需要搭配 ​​radio-group​​ ⼀起使⽤

10.10 ​​checkbox​


可以通过 color属性来修改颜色


小程序:微信小程序开发_小程序_19

需要搭配 ​​checkbox-group​​ ⼀起使⽤

11. ​​自定义组件​​


类似vue或者react中的自定义组件


⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

11.1. 创建⾃定义组件

类似于页面,一个自定义组件由 ​​json​​ ​​wxml​​ ​​wxss​​ ``js 4个文件组成

可以在微信开发者⼯具中快速创建组件的⽂件结构

小程序:微信小程序开发_微信_20

在⽂件夹内 ​​components/myHeader​​ ,创建组件 名为 ​​myHeader​

小程序:微信小程序开发_微信_21

11.1.1. 声明组件

⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明

myHeader.json

{
"component": true
}

11.1.2. 编辑组件

同时,还要在组件的 ​​wxml​​ ⽂件中编写组件模板,在 ​​wxss​​ ⽂件中加⼊组件样式

​slot​​ 表⽰插槽,类似vue中的slot​​myHeader.wxml​

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
<slot></slot>
</view>

在组件的 wwxxssss ⽂件中编写样式


注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。


myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}

11.1.3. 注册组件

在组件的 ​​js​​ ⽂件中,需要使⽤ ​​component()​​来注册组件,并提供组件的属性定义、内部数据和⾃定义⽅法

myHeader.js

Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
// 期望要的数据是 string类型
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})

11.2. 声明引⼊⾃定义组件

⾸先要在⻚⾯的 ​​json​​ ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

{
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"my-header":"/components/myHeader/myHeader"
}
}

11.3. ⻚⾯中使⽤⾃定义组件

<view>
<!-- 以下是对一个自定义组件的引用 -->
<my-header inner-text="Some text">
<view>用来替代slot的</view>
</my-header>
</view>

11.4. 其他属性

11.5. 定义段与⽰例⽅法

​component​​​构造器可⽤于定义组件,调⽤​​component​​构造器时可以指定组件的属性、数据、⽅法等。

定义段

类型

是否必填

描述

properties

Object Map

组件的对外属性,是属性名到属性设置的映射表,参⻅下⽂

data

Object

组件的内部数据,和 ​​properties​​⼀同⽤于组件的模板渲染

observers

Object

组件数据字段监听器,⽤于监听 properties 和 data 的变化,参⻅ ​​数据监听器​

methods

Object

组件的⽅法,包括事件响应函数和任意的⾃定义⽅法,关于事件响应函数的使⽤,参⻅ ​​组件事件​

created

Function

组件⽣命周期函数,在组件实例刚刚被创建时执⾏,注意此时不能调⽤ sseettDDaattaa ,参⻅ ​​组件⽣命周期​

attached

Function

组件⽣命周期函数,在组件实例进⼊⻚⾯节点树时执⾏,参⻅ ​​组件⽣命周期​

ready

Function

组件⽣命周期函数,在组件布局完成后执⾏,参⻅ ​​组件⽣命周期​

moved

Function

组件⽣命周期函数,在组件实例被移动到节点树另⼀个位置时执⾏,参⻅ ​​组件⽣命周期​

detached

Function

组件⽣命周期函数,在组件实例被从⻚⾯节点树移除时执⾏,参⻅ ​​组件⽣命周期​

11.6. 组件-自定义组件传参


  1. ⽗组件通过属性的⽅式给⼦组件传递参数
  2. ⼦组件通过事件的⽅式向⽗组件传递参数

11.6.1. 过程


  1. ⽗组件 把数据 ​​{{tabs}}​​传递到 ⼦组件的 ​​tabItems​​ 属性中
  2. ⽗组件 监听 ​​onMyTab​​ 事件
  3. ⼦组件 触发 ​​bindmytap​​ 中的 ​​mytap​​ 事件
    ①. ⾃定义组件触发事件时,需要使⽤ ​​triggerEvent​​ ⽅法,指定事件名、​​detail​​ 对象
  4. ⽗ -> ⼦ 动态传值 ​​this.selectComponent("#tabs")​

父组件代码

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
内容-这里可以放插槽
</tabs>
// page.js
data: {
tabs:[
{name:"体验问题"},
{name:"商品、商家投诉"}
]
},
onMyTab(e){
console.log(e.detail);
},

子组件代码

// com.wxml
<view class="tabs">
<view class="tab_title" >
<block wx:for="{{tabItems}}" wx:key="{{item}}">
<view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
</block>
</view>
<view class="tab_content">
<slot></slot>
</view>
</view>
// com.js
Component({
properties: {
tabItems:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleItemActive(e){
this.triggerEvent('mytap','haha');
}
}
})

11.7. 小结


  1. 标签名 是 中划线的⽅式
  2. 属性的⽅式 也是要中划线的⽅式
  3. 其他情况可以使⽤驼峰命名
    ①. 组件的⽂件名如​​myHeader.js​​的等
    ②. 组件内的要接收的属性名 如​​innerText​
  4. ​更多。。​

12. 小程序生命周期

分为应⽤⽣命周期和⻚⾯⽣命周期


关于小程序前后台的定义和小程序的运行机制,请参考运行机制章节。


12.1. ​​应⽤⽣命周期​

属性

类型

默认值

必填

说明

​onLaunch​

function

监听⼩程序初始化。

​onShow​

function

监听⼩程序启动或切前台。

​onHide​

function

监听⼩程序切后台。

​onError​

function

错误监听函数。

​onPageNotFound​

function

⻚⾯不存在监听函数。


  1. onLaunch:应用第一次启动的时候,就会执行。可用于获取用户的个人信息等。
  2. onShow:应用被用户看到的时候调用,对应用的数据或者界面效果重置
  3. onHide:应用被隐藏时候调用,可暂停或清除定时器
  4. onError:应用的代码发生了报错的时候会触发,再应用发生代码报错的时候,手机用户错误信息,通过异步请求,将错误信息发送到后台。
  5. onPageNotFound:页面找不到就会触发,页面第一次启动的时候,如果找不到第一个入口页面,才会触发。如果页面不存在了,通过js的方式重新跳转页面,重新跳转到备用首页。

12.2. ​​页面生命周期​

属性

类型

说明

​data​

Object

⻚⾯的初始数据

​onLoad​

function

⽣命周期回调—监听⻚⾯加载

​onShow​

function

⽣命周期回调—监听⻚⾯显⽰

​onReady​

function

⽣命周期回调—监听⻚⾯初次渲染完成

​onHide​

function

⽣命周期回调—监听⻚⾯隐藏

​onUnload​

function

⽣命周期回调—监听⻚⾯卸载

​onPullDownRefresh​

function

监听⽤⼾下拉动作

​onReachBottom​

function

⻚⾯上拉触底事件的处理函数

​onShareAppMessage​

function

⽤⼾点击右上⻆转发

​onPageScroll​

function

⻚⾯滚动触发事件的处理函数

​onResize​

function

⻚⾯尺⼨改变时触发,详⻅ 响应显⽰区域变化

​onTabItemTap​

function

当前是 tab ⻚时,点击 tab 时触发

12.3. 页面生命周期图解

小程序:微信小程序开发_微信_22

13. 知识点



字符串和花括号之间一定不要有空格,否则会识别失败!



如果wx:key绑定一个普通的字符串,那么这个字符串名称肯定是循环数组中对象的唯一属性



如果wx:key="*this",那么数组就是一个普通的数组,*this表示循环项



输入框绑定事件​​bindinput​



获取输入框值
通过事件对象获取

e.detail.value


给data中赋值,类似于react中的状态机。

this.setData({
值:新值
})


按钮绑定事件​​bindtap​​。无法在小程序的事件中直接传参,需要通过自定义属性的方式来传递参数。可以在事件源中获取自定义属性。
小程序:微信小程序开发_小程序_23



小程序中不需要主动引入样式文件。



将页面中元素的单位改为rpx,可以实现不同屏幕宽度自动发生变化。
利用​​calc​​属性,设置rpx。
① 750和rpx之间不要留空格
② 运算符的两边不要留空格
小程序:微信小程序开发_json_24



wxss引入的代码通过@import引入,路径只支持相对路径。



常用标签/组件
① ​​view​​:相当于​​div​​标签

② ​​text​​:相当于​​span​​标签


  1. 只有​​text​​标签可以实现长按文字复制
  2. ​text​​标签内只能嵌套​​text​​标签
  3. ​selectable​​属性控制文本是否可选
  4. ​decode​​属性控制是否解码,可以识别空格回车等字符。

③ ​​image​​:图片


  1. 图片默认320 * 240
  2. mode决定图片内容如何和宽高适配
  3. 小程序中图片默认支持懒加载,lazy-load会自己判断当图片出现在视口上下三屏的高度内,小程序就会自动加载图片

④ ​​swiper​​:自带轮播图


  1. 轮播图外层容器 swiper
  2. 每一个轮播项swiper-item
  3. swiper标签存在默认样式,width:100% height:150px,swiper高度无法实现由内容撑开
  4. 先找出原图的宽度和高度。等比例的给swiper定宽度和高度。例如:原图宽度和高度 1125*352 px ,​​swiper宽度 / swiper高度 = 原图宽度 / 原图高度​​。→ ​​swiper高度 = swiper宽度 * 原图高度 / 原图宽度​​ → height = 100vw * 352 / 1125

⑤ ​​navigator​​:导航标签


  1. 块级元素 默认会换行 可以直接加宽度和高度
  2. target:要跳转到当前的小程序 还是其他的小程序页面
  3. url:要跳转的页面路径。放绝对路径 相对路径均可
  4. open-type:跳转方式

⑥ ​​rich-text​​:解析html标签

⑦ ​​button​​:按钮
open-type:


  1. contact:直接打开客服对话功能,需要在微信小程序的后台配置
  2. share:转发当前的小程序到微信朋友中,不支持把小程序转发到朋友圈中
  3. getPhoneNumber:获取当前用户的手机号码信息,结合一个事件使用。不是企业的小程序账号,没有权限使用该类型获取用户手机号码。需要绑定一个事件​​bindgetphonenumber​​,在事件的回调函数中,通过参数获取信息。获取到信息后,已经加密过。需要用户自己搭建小程序后台服务器,需要在后台服务器中进行解析
  4. getUserInfo:获取当前用户的个人信息。受用方法类似获取用户的手机号码,可以直接获取,不存在加密的字段
  5. launchApp:在小程序当中直接打开app。需要先在app中通过app的某个链接打开小程序,在小程序中再通过这个功能重新打开app
  6. openSetting:打开小程序内置的授权页面。授权页面中,只会出现用户曾经点击过的权限
  7. feedback:打开小程序内置的意见反馈界面

⑧ ​​icon​​:字体图标

⑨ ​​radio​​:单选radio标签 必须和父元素 radio-group 搭配使用,value 选中的单选框的值,绑定bindchange事件可以监听变化。

⑩ ​​checkbox​​:复选框



自定义组件
父组件(界面)向子组件 传递数据 通过标签属性的方式来传递
子组件调用父组件事件方法:this.triggerEvent(“父组件自定义事件的名称”,要传递的参数)
slot插槽可以用来传递标签