微信小程序开发

1.小程序简介

• 小程序与普通网页的不同

  • 运行环境不同

    • 网页运作在浏览器中

    • 小程序运行在微信中

  • 开发模式不同

    • 网页的开发环境：浏览器+代码编辑器

    • 小程序有一套自己的标准开发模式：

      • 申请小程序开发账号

      • 安装小程序开发者工具

      • 创建和配置小程序项目

  • API不同

    • 由于运行环境的不同，小程序中无法调用DOM和BOM的API，但是，小程序中可以调用微信环境提供的各种API，例如地理定位，扫码，支付

2.第一个小程序

注册小程序开发账号

打开网站https://mp.weixin.qq.com/进行注册

获取小程序的AppID

小程序开发者工具

微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：

• 快速床架小程序项目

• 代码的查看和编辑

• 对小程序功能进行调试

• 小程序的预览和发布

3.小程序代码的构成

项目的基本组成结构

• pages文件夹用来存放所有小程序的页面

• utils文件夹用来存放工具性质的模块（例如：格式化时间的自地你一模块）

• app.js文件是小项目的入口文件

• app.json文件是小程序全局配置文件

• app.wxss文件是小程序项目的全局样式文件

• project.config.json文件是项目的配置文件

• sitemap.json文件是用来配置小程序极其页面是否允许被微信索引

小程序页面的组成部分

小程序官方建议把所有的小程序的页面存放在pages目录中，以单独的文件夹存在

其中每一个页面由4个基本文件组成：

• .js文件（页面的脚本文件，存放页面的数据、事件处理函数等）

• .json文件（当前页面的配置文件，配置窗口的外观、表现等）

• .wxml文件（页面的模板结构文件）

• .wxss文件（当前页面的样式表文件）

app.json文件

• app.json文件是小程序的全局配置文件，包括了小程序的所有页面路径， 窗口外观、界面表现、底部tab等

Demo项目里边的app.json配置内容如下：

对应的每一项的作用：

• pages：用来记录当前小程序页面的路径

• window：全局定义小程序所有页面的背景色、文字颜色等

• style：全局定义小程序组件所有使用的样式的版本

• sitemapLocation：用来指明sitemap.json的位置

project.config.json文件

• project.config.json是项目的配置文件，用来记录我们对小程序开发工具所做的个性化配置

• setting中保存了编译相关的配置

• projectname保存了项目的名称

• appid保存的是小程序的账号ID

sitemap.json文件

微信现在已开放小程序内的搜索，效果类似于网页的SEO，sitemap.json文件用来配置小程序页面是否允许微信索引

更改action的值为disallow则不允许微信索引，page表示要索引的页面

页面的.json配置文件

小程序中的每一个页面可以使用.json文件来对页面的窗口外观进行配置，页面中的配置项会覆盖app.json中的window中相同的配置项，例如：

新建小程序的页面

只需要在app.josn文件里的pages中新建页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件：

修改项目首页

• 只需要调整app.json中pages数组中的页面路径的前后顺序即可修改项目的首页。小程序会把排在第一位的页面当做项目的首页进行渲染

WXML模板

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML

WXML和HTML的区别

• 标签名称不同

  • HTML（div,span,img,a)

  • WXML(view,text,image,navigtor)

• 属性节点不同

  • <a href="">超链接</a>

  • navigator url="/page/home/home"></navigator>

• 提供了类似于Vue中的模板语法

  • 数据绑定

  • 列表渲染

  • 条件渲染

WXSS样式

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

WXSS和CSS的区别

• 新增了尺寸单位

  • CSS中需要手动进行像素单位换算，例如rem

  • WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

• 提供了全局样式和局部样式

  • 项目个目录下的app.wxss会作用于所有小程序页面

  • 局部页面的.wxss样式仅对当前页面生效

• WXSS仅支持部分CSS选择器

  • class选择器

  • id选择器

  • element选择器

  • 并集选择器

  • 后代选择器

  • ::after和::before等选择器

JS逻辑交互

小程序中的.js文件的分类

• app.js

  • 是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

• 页面的.js文件

  • 是页面的入口文件，通过调用Page()函数来创建并运行页面

• 普通的.js文件

  • 是普通的功能模块，用来封装公共的 函数或属性供页面使用

4.小程序的宿主环境

宿主环境（host environment）指的是程序运行所在必须的依赖环境，例如Android和ios系统是两个不同的宿主环境，脱离了宿主环境的软件是没有任何意义的。

手机微信是小程序的宿主环境

小程序借助宿主环境提供的能力可以完成许多普通网页无法完成的功能

小程序宿主环境包含的内容

• 通信模型

• 运行机制

• 组件

• API

通信的主体

小程序中的主体是渲染层和逻辑层

• WXML模板和WXSS样式工作在渲染层

• js脚本工作在逻辑层

小程序的通信模型

• 渲染层和逻辑层之间的通信由微型客户端进行转发

• 逻辑层和第三发服务器之间的通信由微信客户端进行转发

小程序的运行机制

小程序启动过程

• 把小程序的代码包下载到本地

• 解析app.json全局配置文件

• 执行app.js小程序的入口文件，调用App()创建小程序实例

• 渲染小程序首页

• 小程序启动完成

小程序的页面渲染过程

• 加载解析页面的.json文件

• 加载页面的.wxml模板和.wxss样式

• 执行页面的.js文件，调用Page()创建页面实例

• 页面渲染完成

小程序组件分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出页面结构，官方把小程序的组件分为9大类：

• 视图容器

• 基础内容

• 表单组件

• 导航组件

• 媒体组件

• map地图组件

• canvas画布组件

• 开发能力

• 无障碍访问

常用的视图容器组件

• view

  • 普通的视图区域

  • 类似于HTML中的div，是一个块级元素

  • 常用来实现页面的布局效果

• scroll-view

  • 可滚动的视图区域

  • 常用来实现列表滚动效果

• swiper和swiper-item

  • 轮播图容器组件和轮播图item组件

view组件的基本使用

1
<view class="all">
2
  <view>
3
    1
4
  </view>
5
  <view>
6
    2
7
  </view>
8
  <view>
9
    3
10
  </view>
11
</view>

​x
1

2
.all{
3
  display: flex;
4
  justify-content: space-evenly;
5
}
6
.all view{
7
  width: 100px;
8
  height: 100px;
9
  background-color: chartreuse;
10
  display: flex;
11
  justify-content: center;
12
  align-items: center;
13
  border-radius: 5px;
14
}

效果——用法与css大多数是一致的，主要是每一个标签代表的内容不一样，就把view当做div来使用

1

scroll-view组件的基本使用

xxxxxxxxxx
11
1
<scroll-view class="scview" scroll-y> /*使用scroll-y就是规定了滚动的方向*/
2
  <view>
3
    A
4
  </view>
5
  <view>
6
    B
7
  </view>
8
  <view>
9
    C
10
  </view>
11
</scroll-view>

xxxxxxxxxx
17
1
.scview{
2
  width: 100%;
3
  height: 150px;
4
  margin-top: 10px;
5
  border: 1px solid red;
6
}
7
.scview view{
8
  width: 100px;
9
  height: 100px;
10
  background-color: red;
11
  border-radius: 10px;
12
  display: flex;
13
  justify-content: center;
14
  align-items: center;
15
  color: white;
16
  margin: 5px;
17
}

为了使用其滚动效果必须要设置宽高

swiper组件和swiper-item组件的基本使用

这两个组件的配合使用可以实现轮播图的效果

swiper常用的属性

xxxxxxxxxx
11
1
<swiper class="swipers" indicator-dots autoplay interval="2000" circular indicator-color="white" indicator-active-color="blue">
2
  <swiper-item>
3
    <image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?w=297&h=180&c=7&r=0&o=5&pid=1.7" mode=""/>
4
  </swiper-item>
5
  <swiper-item>
6
    <image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.jl4pPK40IUmDL_-Wu0yMqgHaEK?w=297&h=180&c=7&r=0&o=5&pid=1.7" mode=""/>
7
  </swiper-item>
8
  <swiper-item>
9
    <image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.7-6n_pwnAPz_IkgyRuRI2wHaEo?w=278&h=185&c=7&r=0&o=5&pid=1.7" mode=""/>
10
  </swiper-item>
11
</swiper>

xxxxxxxxxx
7
1
.swipers{
2
  width: 100%;
3
  margin: 5px;
4
}
5
.swipers image{
6
  width: 100%;
7
}

效果：

常用的基础内容组件

• text

  • 文本组件

  • 类似于HTML中的span标签，是一个行内元素

• rich-text

  • 富文本组件

  • 支持HTML字符串渲染成WXML结构

text组件的基本使用

• 通过text组件的selectable属性，实现长按文本选中文本内容的效果

需要注意的是在小程序里面只有text组件支持长按文本选中操作

xxxxxxxxxx
1
1
<view selectable>长按选择文字</view>

rich-text组件的基本使用

• 通过rich-text组件的nodes属性，可以把HTML字符串渲染成对应的UI结构：

xxxxxxxxxx
3
1
<rich-text nodes="<h1 style='color:red'>这就是街舞</h1>">
2
  
3
</rich-text>

其他常用的组件

• button

  • 按钮组件

  • 功能比HTML中的button按钮丰富

  • 通过open-type属性可以调用微信提供的各种功能（转发、获取用户授权等）

• image

  • 图片组件

  • image组件的默认宽度为300px，高度为240px

• navigator

  • 页面导航组件

  • 类似于HTML中的a链接

button组件的基本使用

image组件的基本使用

image是有默认尺寸的，就算不给它图片地址，它也会占用空间

image组件的mode属性

• image组件的mode属性用来指定图片的裁剪和缩放模式，常用mode属性值如下

小程序API的分类

小程序官方把API分为3类：

• 事件监听API

  • 特点：以on开头，用来监听某些事件的触发

  • 举例：wx.onWindowResize(function callback)监听窗口的尺寸变化事件

• 同步API

  • 特点：以Sync结尾的API 都是同步API，同步API的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常

  • 举例：wx.setStorageSync(‘key’,’value)向本地存储中写入内容

• 一步API

  • 特点：类似jQuery中的$.ajax(options)函数，需要通过success、fail、complete接受调用的结果

  • 举例：wx.request()发起网络数据的请求，通过success回调函数接受数据

5.协同工作和发布

权限管理需求

小程序的开发流程：

成员管理的两个方面

小程序的上线发布

一个小程序的发布上线一般要经过上传代码->提交审核->发布这三个步骤

模板与配置

• 能使用WXML模板语法来渲染页面结构

• 能够使用WXSS样式美化页面结构

• 能够使用app.json对小程序进行全局配置

• 能够使用page.json对小程序页面进行个性化配置

• 能够知道发起网络数据请求

WXML模板语法

数据绑定

数据绑定的基本原则

• 在data中定义数据

• 在WXML中使用数据

在data中定义页面的数据

在页面对应的.js文件中，把数据定义在data对象中即可：

xxxxxxxxxx
5
1
Page({
2
    data:{
3
        name:"李白"
4
    }
5
})

Mustache语法格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来，语法格式：

xxxxxxxxxx
1
1
<view>{{name}}</view>

Mustache语法的应用场景

• 绑定内容

  • 前面已经演示过了

• 绑定属性

  xxxxxxxxxx
  5
  1
  Page({
  2
      data:{
  3
          imgSrc:"https://www.baidu.com"
  4
      }
  5
  })
  

  xxxxxxxxxx
  1
  1
  <image src="{{}}"></image>
  

   

• 运算（三元运算、算数运算）

xxxxxxxxxx
6
1
Page({
2
    data:{
3
        a:6,
4
        b:4
5
    }
6
})

xxxxxxxxxx
2
1
<text>{{a+b}}</text>
2
<text>{{a>5?"yes":"no"}}</text>

事件绑定

时间是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层的行为反馈到逻辑业务的处理

小程序中常用的事件

事件对象的属性列表

当事件回调触发的时候，会收到一个实践对象event，它的属性：

target和currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件

bindtap的语法格式

在小程序中是通过tap来实现点击事件（即触摸事件），类似于HTML里的click事件，其语法格式如下：

• 通过bindtap，可以为组件绑定tap事件

  xxxxxxxxxx
  1
  1
  <button type="default" bindtap="bindtapcont">触摸事件</button>
  

• 在页面的js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写为e）来接收“

  xxxxxxxxxx
  8
  1
  Page({
  2
      data:{
  3
          
  4
      },
  5
      bindtapcont(e){
  6
          console.log(e)
  7
      }
  8
  })
  

在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法可以给页面data中的数据重新赋值

xxxxxxxxxx
1
1
<button bindtap="onAdd">点击+1</button>

xxxxxxxxxx
10
1
Page({
2
    data:{
3
        num:2
4
    },
5
    onAdd(){
6
        this.setData({
7
            num:this.data.num+1
8
        })
9
    }
10
})

事件传参

小程序中的事传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数，例如小面的代码将不能正常工作:

xxxxxxxxxx
1
1
<button bindtap="Add(123)">点击</button>

因为小程序会把bindtap的属性值统一当做事件名称来处理，相当于要调用一个名称为Add(123)的事件处理函数。

可以为组件提供data-参数名自定义属性传参，实例：

xxxxxxxxxx
1
1
<button bindtap="Add()" data-n="{{num}}">点击</button>

• n被解析成参数的名字

• 数值2会被解析为参数的值

在事件处理函数中，通过event.target.dataset.参数名即可得到具体的参数的值

xxxxxxxxxx
7
1
data:{
2
  num:18  
3
},
4
Add(e){
5
    console.log(e.target.dataset)
6
    console.log(e.target.dataset.n)
7
}

bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

xxxxxxxxxx
1
1
<input bindinput="input"></input>

通过e.detail.value来获取输入的值

xxxxxxxxxx
6
1
Page({
2
    data:{},
3
    input(e){
4
        console.log(e.detail.value)
5
    }
6
})

WX：if条件渲染

在小程序中，使用wx:if=“{{condition}}”来判断是否需要渲染该代码块

xxxxxxxxxx
1
1
<view wx:if="{{condition}}">true</view>

也可以使用wx:elif和wx:eles来添加判断

xxxxxxxxxx
3
1
<view wx:if="{{a>=1}}">yes</view>
2
<view wx:elif="{{a<1}}">no</view>
3
<view wx:eles>no and yes</view>

xxxxxxxxxx
5
1
Page({
2
    data:{
3
        a:1
4
    }
5
})

hidden的使用

在小程序中，直接使用hidden=“{{condition}}”也能控制元素的显示与隐藏

xxxxxxxxxx
1
1
<view hidden="{{}}">条件为true隐藏，false显示</view>

wx:if和hidden的对比

• 运行方式不同

  • wx:if以动态创建和移出元素的方式，控制元素的展示和隐藏

  • hidden以切换元素的样式（display:none/block）控制元素的显示和隐藏

• 使用建议

  • 频繁切换时使用hidden

  • 控制条件比较复杂就使用wx:if

WX:for列表渲染

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法：

xxxxxxxxxx
3
1
<view wx:for="{{arr}}">
2
{{index}}:{{item}}
3
</view>

默认情况下，当前循环项的索引用index表示，当前循环项用item表示

手动指定索引和当前项的变量名

• 使用wx:for-index可以指定当前循环项的索引的变量名

• 使用wx:for-item可以指定当前项的变量名

xxxxxxxxxx
3
1
<view wx:for="{{arr}}" wx:for-index="id" wx:for-item="i">
2
    {{id}}:{{i}}
3
</view>

WX:key的使用

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例：

xxxxxxxxxx
1
1
<view wx:for="{{arr}}" wx:key="id">{{item,name}}</view>

xxxxxxxxxx
9
1
Page({
2
    data:{
3
        arr:[
4
            {id:1,name:"李白"},
5
            {id:2,name:"杜甫"},
6
            {id:3,name:"白居易"}
7
        ]
8
    }
9
})

WXSS模板样式

wxss具有大部分css的特性，同时，wxss还对css进行了扩充以及修改，以适应微信小程序的开发

与css相比，wxss拓展的特性：

• rpx尺寸单位

  • rp x是微信小程序中独有的，用来解决屏适配

  • rpx的实现原理：鉴定不同设备屏幕的不同，为了实现自适应适配屏幕，rpx把所有的设备屏幕在宽度上等分为750份（即当前屏幕的总宽度为750rpx）

  • 会导致在较小的屏幕上1rpx代表的宽度较小，在较大的屏幕上1rpx代表的宽度较大

• @import样式导入

  • 样式导入

样式导入

使用WXSS提供的@import语法，可以导入外联的样式表

@import的语法格式

@import后需要导入的外联样式表的相对路径，用;表示语句结束

该文件是写在WXSS里的

xxxxxxxxxx
1
1
@import "common.wxss";

全局样式和局部样式

全局样式

定义在app.wxss中的样式为全局样式，作用在每一个页面中

局部样式

全局配置

页面配置

网络数据请求