小程序:微信小程序开发

admin2024-10-07  27

1. 微信小程序介绍

小程序:微信小程序开发,小程序:微信小程序开发_json,第1张
微信⼩程序,简称⼩程序,英⽂名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. 官方微信小程序体验

⼩程序⽰例源码
小程序:微信小程序开发,小程序:微信小程序开发_json_02,第2张

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

  • 拼多多
  • 滴滴出⾏
  • 欢乐⽃地主
  • 智⾏⽕⻋票
  • 唯品会
  • 。。。
2. 环境准备

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

2.1. 注册账号

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

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

2.2. 获取APPID

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

2.3. 开发⼯具

开发工具
小程序:微信小程序开发,小程序:微信小程序开发_小程序_05,第5张
微信⼩程序⾃带开发者⼯具,集 开发 预览 调试 发布 于⼀⾝的 完整环境。
但是由于编码的体验不算好,因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码
vs code 负责敲代码, 微信编辑工具 负责预览

3. 第⼀个微信⼩程序

3.1. 打开微信开发者⼯具

注意 第⼀次登录的时候 需要扫码登录
小程序:微信小程序开发,小程序:微信小程序开发_微信_06,第6张

3.2. 新建小程序项目

小程序:微信小程序开发,小程序:微信小程序开发_缩放_07,第7张

3.3. 填写项目信息

小程序:微信小程序开发,小程序:微信小程序开发_ico_08,第8张

3.4. 成功

小程序:微信小程序开发,小程序:微信小程序开发_缩放_09,第9张

4. 微信开发者工具介绍

详细的使⽤,可以查看官⽹
小程序:微信小程序开发,小程序:微信小程序开发_json_10,第10张

5. 小程序结构目录

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣ APP 体验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔ WXMLWXSS ,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

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

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

结构 传统web 微信小程序
结构 HTML WXML
结构 CSS WXSS
逻辑 Javascript Javascript
配置 JSON

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

5.2. 基本的项目目录

小程序:微信小程序开发,小程序:微信小程序开发_微信_11,第11张

6. 小程序配置文件

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

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

6.1 全局配置app.json

app.json是当前⼩程序的全局配置,包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的 app.json配置
小程序:微信小程序开发,小程序:微信小程序开发_缩放_12,第12张
字段的含义

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

6.1.1. tabbar

小程序:微信小程序开发,小程序:微信小程序开发_ico_13,第13张

6.2. 页面配置 page.json

这⾥的page.json其实⽤来表⽰⻚⾯⽬录下的page.json这类和⼩程序⻚⾯相关的配置。
开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等。
⻚⾯的配置只能设置app.json中部分window配置项的内容,⻚⾯中配置项会覆盖app.jsonwindow中相同的配置项。

属性 类型 默认值 描述
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绑定一个普通的字符串,那么这个字符串名称肯定是循环数组中对象的唯一属性

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

    list:[
    	{
    		id:0,
    		name:"炒饭"
    	},
    	{
    		id:1,
    		name:"炒面"
    	}
    ]
    wx:key="id"
    
  2. 保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。
    如果wx:key="*this",那么数组就是一个普通的数组,*this表示循环项

    list:[1,2,3,4,5]
    wx:key="*this"
    
  • 注意:当出现数组的循环嵌套的时候,尤其要注意,以下绑定的名称不要重名。vx:for-itemvx:for-index
  • 默认情况下,如果不写vx:for-itemvx:for-index,小程序也会把循环项的名称和索引的名称定义为item和index。如果只有一层循环的话,vx:for-itemvx: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关键字来实现。如bindtapbindinputbindchange等不同的组件⽀持不同的事件,具体看组件的说明即可。

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,其他基于⼩程序的框架⼤体都⽀持,如wepympvuetaro等。但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现

  1. 编辑器是 vs code

  2. 安装插件 easy less
    小程序:微信小程序开发,小程序:微信小程序开发_小程序_14,第14张

  3. vs code的设置中加⼊如下,配置
    小程序:微信小程序开发,小程序:微信小程序开发_小程序_15,第15张

  4. 在要编写样式的地⽅,新建 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

微信内置轮播图组件

小程序:微信小程序开发,小程序:微信小程序开发_缩放_16,第16张
默认宽度 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 功能

小程序:微信小程序开发,小程序:微信小程序开发_ico_17,第17张
代码

// 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

小程序:微信小程序开发,小程序:微信小程序开发_缩放_18,第18张

<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
  4. 就是⼲!

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

小程序:微信小程序开发,小程序:微信小程序开发_json_19,第19张
代码

<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属性来修改颜色

小程序:微信小程序开发,小程序:微信小程序开发_缩放_20,第20张
需要搭配 radio-group ⼀起使⽤

10.10 checkbox

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

小程序:微信小程序开发,小程序:微信小程序开发_ico_21,第21张

需要搭配 checkbox-group ⼀起使⽤

11. 自定义组件

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

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

11.1. 创建⾃定义组件

类似于页面,一个自定义组件由 json wxml wxss ``js 4个文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构

小程序:微信小程序开发,小程序:微信小程序开发_缩放_22,第22张
在⽂件夹内 components/myHeader ,创建组件 名为 myHeader
小程序:微信小程序开发,小程序:微信小程序开发_json_23,第23张

11.1.1. 声明组件

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

{
	"component": true
}

11.1.2. 编辑组件

同时,还要在组件的 wxml ⽂件中编写组件模板,在 wxss ⽂件中加⼊组件样式
slot 表⽰插槽,类似vue中的slotmyHeader.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. 页面生命周期图解

小程序:微信小程序开发,小程序:微信小程序开发_ico_24,第24张

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

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

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

  4. 输入框绑定事件bindinput

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

    e.detail.value
    
  6. 给data中赋值,类似于react中的状态机。

    this.setData({
    	值:新值
    })
    
  7. 按钮绑定事件bindtap。无法在小程序的事件中直接传参,需要通过自定义属性的方式来传递参数。可以在事件源中获取自定义属性。
    小程序:微信小程序开发,小程序:微信小程序开发_微信_25,第25张

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

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

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

  11. 常用标签/组件
    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:复选框

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!