绿色健康小清新

耐得住寂寞,守得住繁华

微信小程序

微信⼩程序介绍

微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现 了应⽤“触⼿可及”的梦想,⽤⼾扫⼀扫或搜⼀下即可打开应⽤

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.1. 注册账号

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

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

2.2. 获取APPID

由于后期调⽤微信⼩程序的接⼝等功能,需要索取开发者的⼩程序中的 APPID,所以在注册成功后,

可登录,然后获取APPID。

登录,成功后可看到如下界⾯

然后复制你的APPID,悄悄的保存起来,不要给别⼈看到😄

2.3. 开发⼯具

下载地址

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

第⼀个微信⼩程序

3.1. 打开微信开发者⼯具

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

3.2. 新建⼩程序项⽬

3.3. 填写项⽬信息

3.4. 成功

微信开发者⼯具介绍

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

⼩程序结构⽬录

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

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

5.1. ⼩程序⽂件结构和传统web对⽐

结构传统HTML微信小程序
结构HTMLWXML
样式CSSWXSS
逻辑JavascriptJavascript
配置JSON

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

5.2. 基本的项⽬⽬录

⼩程序配置⽂件

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

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

6.1. 全局配置app.json

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

1
2
3
4
5
6
7
8
9
10
11
12
{
 "pages":[
   "pages/index/index",
   "pages/logs/logs"
],
 "window":{
   "backgroundTextStyle":"light",
   "navigationBarBackgroundColor": "#fff",
   "navigationBarTitleText": "WeChat",
   "navigationBarTextStyle":"black"
}
}

字段的含义

  1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径,这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。

  2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊定义等。

  3. 完整的配置信息请参考 app.json配置

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。微信客户端 6.6.0
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为 px。 详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)

6.1.1. tabbar

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色,仅支持十六进制颜色
selectedColorHexColortab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColorHexColortab 的背景色,仅支持十六进制颜色
borderStylestringblacktabbar 上边框的颜色, 仅支持 black / white
listArraytab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
positionstringbottomtabBar 的位置,仅支持 bottom / top
custombooleanfalse自定义 tabBar,见详情

6.2. ⻚⾯配置page.json

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

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

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

6.3. sitemap 配置(自己看官方文档)

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

模板语法

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

7.1. 数据绑定

7.1.1. 普通写法

1
2
3
4
5
6
<!--
text相当于span,不会换行
view相当于div,会换行
-->
<view> {{ message }} </view>
<text>pages/demo01/demo01.wxml</text>
1
2
3
4
5
Page({
 data: {
   message: 'Hello MINA!'
}
})

7.1.2. 组件属性

1
<view id="item-{{id}}"> </view>
1
2
3
4
5
Page({
 data: {
   id: 0
}
})

7.1.3. 数据类型

1
2
3
4
5
6
7
8
9
10
11
12
data: {
msg: "hello mina",
num: 100,
isGril: false,
person: {
age: 74,
height: 145,
weight: 200,
name: "富婆"
},
ischecked: true
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--语法和thymeleaf类似-->
<!-- 字符串与花括号之间不要写空格 -->
<!--字符串-->
<view >{{msg}}</view>
<!-- 数字类型 -->
<view> {{num}}</view>
<!-- 布尔类型 -->
<view >{{isGril}}</view>
<!-- 对象类型 -->
<view >{{person.age}}</view>
<view >{{person.height}}</view>
<view >{{person.weight}}</view>
<view >{{person.name}}</view>

<!-- 在标签内使用 -->
<view data-num="{{num}}">自定义属性</view>

<!-- 使用布尔类型充当属性 -->
<view>
<text>请选择兴趣</text>
<checkbox checked="{{ischecked}}" id="fav">吉他</checkbox>
<checkbox id="area">动漫</checkbox>
</view>

7.2. 运算

7.2.1. 三元运算

1
2
3
4
<!--isGril为false,不隐藏-->
<view hidden="{{isGril ? true : false}}"> Hidden </view>
<!--偶数-->
<view >{{10%2==0?'偶数':'奇数'}}</view>

7.2.2. 算数运算

1
2
3
4
5
6
7
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
1
2
<!--result:3+3+d-->
<view> {{a + b}} + {{c}} + d </view>

7.2.3. 字符串运算

1
2
3
4
5
Page({
 data:{
   name: 'MINA'
}
})
1
<view>{{"hello" + name}}</view>

7.2.4. 注意

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

7.3. 列表渲染

7.3.1. wx:for

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

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

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

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

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

    1
    2
    list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
    wx:key="id"
  2. 保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。

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

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
list: [
{
id: 0,
name: "猪八戒"
},
{
id: 1,
name: "天蓬元帅"
},
{
id: 2,
name: "悟能"
}

],

list2: [1,2,3,"test"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--列表循环
wx:for="{{数组或者对象}}" wx:for-index="循环项的索引" wx:for-item="循环项的名称"
wx:key="唯一的值" 用来提高列表渲染的性能
- 绑定为字符串时,这个字符串一定是这个数组中的对象的唯一属性
- wx:key="*this",表示你的数组是一个普通的数组,*this表示是循环项
[1,2,3,4,5] [1,"22","dsa"]
注意:当嵌套循环时,wx:for-item和wx:for-index不能重名
默认不写的话,小程序也会帮我们自动把名称写上item和index
只有一层循环的话,wx:for-index和ex:for-item可以省略
-->
<view>
<view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
索引:{{index}}
--
值:{{item.name}}
</view>
<view wx:for="{{list2}}" wx:for-index="index" wx:for-item="item" wx:key="*this" >
索引:{{index}}
--
值:{{item}}
</view>
</view>

<!-- 对象循环
wx:for="{{数组或者对象}}" wx:for-index="对象的属性名称" wx:for-item="对象的属性的值"
-->
<view>
<view>对象循环</view>
<view wx:for="{{person}}" wx:for-index="field" wx:for-item="value" wx:key="age">
属性:{{field}}
---
值:{{value}}
</view>
</view>

7.3.2. block

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 
block
1. 占位符的标签
2. 写代码的时候,可以看到这标签的存在
3. 页面渲染,小程序会把它移除掉
-->
<view>
<block wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
索引:{{index}}
--
值:{{item.name}}
</block>
</view>

7.4. 条件渲染 (if和hidden)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- 
条件渲染
1.if,elif,else
wx:if="{{true/false}}"
2.hidden
hidden或者hidden=""

3.哪种场景用哪个
1. 当标签不是频繁的切换显示,优先使用wx:if
直接把标签从页面结构中给移除
2. 当标签频繁切换时显示时,优先使用hidden
通过添加样式的方式来切换显示 当显示时:
view[hidden] {
display: none;
}
-->

<view >
<view >条件渲染</view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>

<view wx:if="{{person.age>=50}}">婆婆</view>
<view wx:elif="{{person.age<50&&person.age>30}}">阿姨</view>
<view wx:else="{{person.age<=30}}">姐姐</view>

<view hidden >hidden</view>
<view hidden="{{true}}">hidden</view>
</view>

⼩程序事件的绑定

⼩程序中绑定事件,通过bind关键字来实现。如 bindtap,bindinput,bindchange

不同的组件⽀持不同的事件,具体看组件的说明即可。 官方文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  data: {
num: 20
},

//输入框的input事件的执行逻辑
handleInput(e){
console.log(e.detail.value);
this.setData({
num: e.detail.value
})
},

//添加事件点击事件
handletap(e){
//console.log(e.currentTarget.dataset.operation);
//获取自定义属性operation
const operation=e.currentTarget.dataset.operation;
this.setData({
num: this.data.num + operation
})
},

//测试target和currenttarget
testTarger(e){
console.log("----------------");
console.log("currenttarget:"+e.currentTarget.id);
console.log("taget:"+e.target.id);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 
1.需要给input标签添加绑定
关键字:bindinput
2.如何获取输入框的值
通过事件源对象来获取
e.detail.value 说明:额外的信息
3.把输入框的值赋值到data当中
this.setDate({
num: e.detail.value
})
注意:这个是实时进行监听的,当输入一个字符就会立马产生反应
4.绑定一个点击事件
bindtap
通过自定义属性的方式来传参
通过e.currentTarget.dataset.operation来获取
-->

<view>{{num}}</view>
<input type="test" bindinput="handleInput"> </input>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
<input type="test" bindinput="handleInput"> </input>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>

<view bindtap="testTarger" id="father">
father
<view id="child">
child
</view>
</view>
1
2
3
4
5
6
#target和currenttarget的比较结果
currenttarget:father
taget:father
----------------
currenttarget:father
taget:child
属性类型说明
typeString事件类型
timeStampInteger事件生成时的时间戳
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
markObject事件标记数据
detailObject额外的信息
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

target

触发事件的源组件。

属性类型说明
idString事件源组件的id
datasetObject事件源组件上由data-开头的自定义属性组成的集合

currentTarget

事件绑定的当前组件。

属性类型说明
idString当前组件的id
datasetObject当前组件上由data-开头的自定义属性组成的集合

dataset

在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。

在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。如:

  • data-element-type ,最终会呈现为 event.currentTarget.dataset.elementType横线会自动转为驼峰命名
  • data-elementType ,最终会呈现为 event.currentTarget.dataset.elementtype大写会自动转为小写

样式 WXSS

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

  • 响应式⻓度单位 rpx

  • 样式导⼊

9.1. 尺⼨单位

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

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议: 开发微信⼩程序时设计师可以⽤iPhone6(375*667) 作为视觉稿的标准。 (公式:750*元素的属性大小/page)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 
存在一个设计稿 宽度 414 或者 未知 page
设计稿中page存在一个元素,宽度为100px,现要求实现自适应

计算方法
page px = 750 rpx
1 px =750/page rpx
稿子:100 px=100 * 1 px = 750*100/page rpx

假设page=375
利用一个属性calc属性(css和wxss都支持)
1.750和rpx两边不要留空格
2.运算符的两边也不要留空格
*/

view{
/*width: 200rpx;*/
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
width: calc(750 * 100 / 375 rpx);
}

9.2样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

1
2
3
4
5
6
7
8
9
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}

9.3选择器

目前支持的选择器有(不支持通配符):

选择器样例样例描述
.class.intro选择所有拥有 class=“intro” 的组件
#id#firstname选择拥有 id=“firstname” 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容

9.4⼩程序中使⽤less

  1. 编辑器是 vscode

  2. 安装插件 easy less

  3. 在vs code的设置中加⼊如下,配置

    1
    2
    3
        "less.compile": {
    "outExt": ".wxss"
      }
  4. 在要编写样式的地⽅,新建 less ⽂件,如 index.less ,然后正常编辑即可。

常见主键

重点讲解⼩程序中常⽤的布局组件

view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。

10.1view

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

10.2 text

  1. ⽂本标签

  2. 只能嵌套text

  3. ⻓按⽂字可以复制(只有该标签有这个功能)

  4. 可以对空格 回⻋ 进⾏编码

属性类型默认值必填说明最低版本
selectablebooleanfalse文本是否可选1.1.0
spacestring显示连续空格1.4.0
decodebooleanfalse是否解码1.4.0

10.3 image

图⽚标签,image组件默认宽度320px、⾼度240px

属性类型默认值必填说明最低版本
srcstring图片资源地址1.0.0
modestringscaleToFill图片裁剪、缩放的模式1.0.0
webpbooleanfalse默认不解析 webP 格式,只支持网络资源2.9.0
lazy-loadbooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载1.5.0
show-menu-by-longpressbooleanfalse开启长按图片显示识别小程序码菜单2.7.0
binderroreventhandle当错误发生时触发,event.detail = {errMsg}1.0.0
bindloadeventhandle当图片载入完毕时触发,event.detail = {height, width}1.0.0
说明最低版本
scaleToFill缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变2.10.3
top裁剪模式,不缩放图片,只显示图片的顶部区域
bottom裁剪模式,不缩放图片,只显示图片的底部区域
center裁剪模式,不缩放图片,只显示图片的中间区域
left裁剪模式,不缩放图片,只显示图片的左边区域
right裁剪模式,不缩放图片,只显示图片的右边区域
top left裁剪模式,不缩放图片,只显示图片的左上边区域
top right裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right裁剪模式,不缩放图片,只显示图片的右下边区域
-------------本文结束感谢您的阅读-------------
六经蕴籍胸中久,一剑十年磨在手

欢迎关注我的其它发布渠道