微信小程序介绍
注册账号
建议使用全新的邮箱,没有注册过其他小程序或者公众号的。
访问注册页面,耐心完成注册即可。
获取 APPID
由于后期调用微信小程序的接口等功能,需要索取开发者的小程序中的APPID
,所以在注册成功后,可登录,然后获取 APPID。
登录,成功后可看到如下界面
然后复制你的 APPID,悄悄的保存起来,不要给别人看到 😄。
开发工具
微信小程序自带开发者工具,集 开发 预览 调试 发布 于一身的 完整环境。
但是由于编码的体验不算好,因此 建议使用 vs code
+ 微信小程序编辑工具
来实现编码
vs code
负责敲代码,微信编辑工具
负责预览
第一个微信小程序
打开微信开发者工具
新建小程序项目
填写项目信息
成功
微信开发者工具介绍
详细的使用,可以查看官网
小程序结构目录
小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
小程序框架提供了自己的视图层描述语言 WXML
和 WXSS
,以及 JavaScript
,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
小程序文件结构
结构 | 微信小程序 |
---|---|
结构 | WXML |
样式 | WXSS |
逻辑 | Javascript |
配置 | JSON |
基本的项目目录
小程序配置文件
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json
和 页面自己的 page.json
注意:配置文件中不能出现注释
全局配置 app.json
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json
配置
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
字段的含义
pages
字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window
字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。完整的配置信息请参考 app.json 配置
tabbar 页面底部导航
"tabBar": {
"list": [
{
"pagePath": "pages/index/index", //跳转的路径
"text": "首页", //名称
"iconPath": "./tabs/tab_home_nor@3x.png", // 图标
"selectedIconPath": "./tabs/tab_home_fill@3x.png" //选中的图标
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "./tabs/tab_classify_nor.png",
"selectedIconPath": "./tabs/tab_classify_fill@3x.png"
},
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "./tabs/tab_cart_nor@3x.png",
"selectedIconPath": "./tabs/tab_cart_fill@3x.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "./tabs/tab_my_nor@3x.png",
"selectedIconPath": "./tabs/tab_my_fill@3x.png"
}
]
},
页面配置 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 中设置该项 |
模板语法
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
数据绑定
普通写法
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
组件属性
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
bool 类型
不要直接写 checked="false",其计算结果是一个字符串
<checkbox checked="{{false}}"> </checkbox>
运算
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
逻辑判断
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
列表渲染
wx:for
项的变量名默认为 item
wx:for-item
可以指定数组当前元素的变量名
下标变量名默认为 index
wx:for-index
可以指定数组当前下标的变量名
wx:key
用来提高数组渲染的性能
<view wx:for="{{array}}" wx:key="{{item}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
block
渲染一个包含多节点的结构块 block 最终不会变成真正的 dom 元素
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
条件渲染
wx:if
在框架中,使用 wx:if="{{condition}}"
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
hidden
<view hidden="{{condition}}"> True </view>
类似 wx:if
频繁切换 用 hidden
不常使用 用 wx:if
小程序事件的绑定
小程序中绑定事件,通过 bind 关键字来实现。如 bindtap
bindinput
bindchange
等
wxml
<input bindinput="handleInput" />
page
Page({
// 绑定的事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
}
})
特别注意
绑定事件时不能带参数 不能带括号 以下为错误写法
<input bindinput="handleInput(100)" />
事件传值 通过标签自定义属性的方式 和
value
<input bindinput="handleInput" data-item="100" />
事件触发时获取数据
handleInput: function(e) { // {item:100} console.log(e.currentTarget.dataset) // 输入框的值 console.log(e.detail.value); }
样式 WXSS
与 CSS 相比,WXSS 扩展的特性有:
- 响应式长度单位
rpx
- 样式导入
尺寸单位
rpx
(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx
。如在 iPhone6
上,屏幕宽度为375px
,共有 750 个物理像素,则750rpx = 375px = 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 作为视觉稿的标准。
使用步骤:
- 确定设计稿宽度 pageWidth
- 计算比例
750rpx = pageWidth px
,因此1px=750rpx/pageWidth
。 - 在 less 文件中,只要把设计稿中的
px
=>750/pageWidth rpx
即可。
样式导入
wxss 中直接就支持,样式导入功能。
也可以和 less 中的导入混用。
使用@import
语句可以导入外联样式表,只支持相对路径。
示例代码:
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
选择器
特别需要注意的是 小程序 不支持通配符 *
因此以下代码无效!
*{
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 组件前边插入内容 |
小程序中使用 less
原生小程序不支持less
,其他基于小程序的框架大体都支持,如wepy
,mpvue
,taro
等。但是仅仅因为一个 less 功能,而去引入一个框架,肯定是不可取的。因此可以用以下方式来实现
编辑器是
vscode
安装插件
easy less
在 vs code 的设置中加入如下,配置
"less.compile": { "outExt": ".wxss" }
在要编写样式的地方,新建
less
文件,如index.less
,然后正常编辑即可。
常见组件
view
代替 原来的 div
标签
<view hover-class="h-class">
点击我试试
</view>
text
- 文本标签
- 只能嵌套 text
- 长按文字可以复制(只有该标签有这个功能)
- 可以对空格 回车 进行编码
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
selectable | Boolean | false | 文本是否可选 |
decode | Boolean | false | 是否解码 |
代码
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
image
- 图片标签,image 组件默认宽度 320px、高度 240px
- 支持懒加载
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | 不缩放图片,只显示图片的右下边区域 |
swiper
微信内置轮播图组件
默认宽度 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 | s 是否循环轮播 |
swiper
滑块视图容器。
swiper-item
滑块
默认宽度和高度都是 100%
navigator
导航组件 类似超链接标签
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
target | String | self | 在哪个目标上发生跳转,默认当前小程序,可选值 self/miniProgram |
url | String | 当前小程序内的跳转链接 | |
open-type | String | navigate | 跳转方式 |
open-type 有效值:
值 | 说明 |
---|---|
navigate | 保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面 |
redirect | 关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面。 |
switchTab | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 |
reLaunch | 关闭所有页面,打开到应用内的某个页面 |
navigateBack | 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层 |
exit | 退出小程序,target="miniProgram"时生效 |
rich-text
富文本标签
可以将字符串解析成 对应标签,类似 vue 中 v-html
功能
代码
// 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.png" 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 World!'
}]
}]
},
tap() {
console.log('tap')
}
})
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
标签仅支持网络图片。
button
<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 图标 |
form-type | string | 否 | 用于 ](https://developers.weixin.qq.com/miniprogram/dev/component/form.html) 组件,点击分别会触发 [ 组件的 submit/reset 事件 |
|
open-type | 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 | 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 |
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 |
radio
需要搭配 radio-group 一起使用
checkbox
需要搭配 checkout-group 一起使用
自定义组件
类似 vue 或者 react 中的自定义组件
小程序允许我们使用自定义组件的方式来构建页面。
创建自定义组件
类似于页面,一个自定义组件由
json
wxml
wxss
js
4 个文件组成
可以在微信开发者工具中快速创建组件的文件结构
在文件夹内components/myHeader
,创建组件 名为 myHeader
声明组件
首先需要在组件的 json
文件中进行自定义组件声明
myHeader.json
{
"component": true
}
编辑组件
同时,还要在组件的 wxml
文件中编写组件模板,在 wxss
文件中加入组件样式
slot
表示插槽,类似 vue 中的 slot
myHeader.wxml
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
<slot></slot>
</view>
在组件的 wxss
文件中编写样式
注意:在组件 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。
myHeader.wxss
/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}
注册组件
在组件的 js
文件中,需要使用 Component()
来注册组件,并提供组件的属性定义、内部数据和自定义方法
myHeader.js
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
// 期望要的数据是 string类型
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
声明引入自定义组件
首先要在页面的 json
文件中进行引用声明。还要提供对应的组件名和组件路径
index.wxml
{
// 引用声明
"usingComponents": {
// 要使用的组件的名称 // 组件的路径
"my-header":"/components/myHeader/myHeader"
}
}
页面中使用自定义组件
<view>
<!-- 以下是对一个自定义组件的引用 -->
<my-header inner-text="Some text">
<view>用来替代slot的</view>
</my-header>
</view>
其他属性
定义段与示例方法
Component
构造器可用于定义组件,调用Component
构造器时可以指定组件的属性、数据、方法等。
定义段 | 类型 | 是否必填 | 描述 |
---|---|---|---|
properties | Object Map | 否 | 组件的对外属性,是属性名到属性设置的映射表,参见下文 |
data | Object | 否 | 组件的内部数据,和 properties 一同用于组件的模板渲染 |
observers | Object | 否 | 组件数据字段监听器,用于监听 properties 和 data 的变化,参见 数据监听器 |
methods | Object | 否 | 组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见 组件事件 |
created | Function | 否 | 组件生命周期函数,在组件实例刚刚被创建时执行,注意此时不能调用 setData ,参见 组件生命周期 |
attached | Function | 否 | 组件生命周期函数,在组件实例进入页面节点树时执行,参见 组件生命周期 |
ready | Function | 否 | 组件生命周期函数,在组件布局完成后执行,参见 组件生命周期 |
moved | Function | 否 | 组件生命周期函数,在组件实例被移动到节点树另一个位置时执行,参见 组件生命周期 |
detached | Function | 否 | 组件生命周期函数,在组件实例被从页面节点树移除时执行,参见 组件生命周期 |
组件-自定义组件传参
- 父组件通过属性的方式给子组件传递参数
- 子组件通过事件的方式向父组件传递参数
过程
- 父组件 把数据
{{tabs}}
传递到 子组件的tabItems
属性中 - **父组件 **监听
onMyTab
事件 - 子组件 触发
bindmytap
中的mytap
事件- 自定义组件触发事件时,需要使用
triggerEvent
方法,指定事件名
、detail
对象
- 自定义组件触发事件时,需要使用
- 父 -> 子 动态传值
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');
}
}
})
小结
- 标签名 是 中划线的方式
- 属性的方式 也是要中划线的方式
- 其他情况可以使用驼峰命名
- 组件的文件名如
myHeader.js
的等 - 组件内的要接收的属性名 如
innerText
- 组件的文件名如
- 更多。。
小程序生命周期
分为应用生命周期和页面生命周期
关于小程序前后台的定义和小程序的运行机制,请参考运行机制章节。
应用生命周期
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
onLaunch | function | 否 | 监听小程序初始化。 | |
onShow | function | 否 | 监听小程序启动或切前台。 | |
onHide | function | 否 | 监听小程序切后台。 | |
onError | function | 否 | 错误监听函数。 | |
onPageNotFound | function | 否 | 页面不存在监听函数。 |
页面生命周期
属性 | 类型 | 说明 |
---|---|---|
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 时触发 |
页面生命周期图解
结尾希望大家看了本篇文章都有收获 ...
关注【前端知识小册】,第一时间获取前端优质文章!