微信小程序开发起步

已于 2022-12-22 13:08:49 修改
阅读量412 收藏
点赞数
分类专栏： JavaScript 前端 文章标签： 微信小程序 小程序 微信
于 2022-12-11 23:30:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55909367/article/details/128280530
版权

微信小程序开发起步

一、微信小程序简介

（一）小程序与开发与网页开发的区别

  1. 运行环境不同
    网页运行在浏览器中
    小程序运行在微信环境中
  2. API不同
    由于运行环境不同，所以小程序中无法调用DOM和BOM的API
    但是小程序中可以调用微信环境提供的各种API，例如：
    地理定位
    扫码
    支付
  3. 开发模式不同
    网页的开发模式：浏览器+代码编辑器
    小程序：
    申请小程序开发账号
    安装小程序开发者工具
    创建和配置小程序项目

（二）获取AppID

  1. 注册小程序开发账号

    （1）使用浏览器打开http://mp.weixin.qq.com/ 点击立即注册

    （2）选择账号类型为微信小程序

    （3）填写信息进行注册

  2. 获取小程序的AppID

    （1）登录开发者平台

    （2）选择开发设置

    （3）复制AppID

（三）安装微信开发者工具

推荐下载和安装最新的稳定版的微信开发者工具，下载页面的链接：下载

  1. 安装完成后微信扫码登录即可
  2. 设置-外观 调整主题颜色
  3. 设置-编辑器-调整字号以及行距
  4. 设置-代理设置-不使用代理直连网络

（四）主界面组成部分

  1. 菜单栏

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hThxccs8-1670772554137)(E:\Huaqingyuanjian\WeChat\img\image-20221002130438226.png)]

  2. 工具栏

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-boY3Feuz-1670772554139)(E:\Huaqingyuanjian\WeChat\img\image-20221002130502604.png)]

  3. 模拟器

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fLr5QEQe-1670772554139)(E:\Huaqingyuanjian\WeChat\img\image-20221002130345140.png)]

  4. 代码编辑区

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A4x3KE3Y-1670772554139)(E:\Huaqingyuanjian\WeChat\img\image-20221002130411800.png)]

  5. 测试区

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l1pCDOe5-1670772554140)(E:\Huaqingyuanjian\WeChat\img\image-20221002130526035.png)]

  6. 资源管理区

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ue6BTzlF-1670772554140)(E:\Huaqingyuanjian\WeChat\img\image-20221002130612826.png)]

（四）创建第一个微信小程序

  1. 扫描二维码登录开发者工具
  2. 选择小程序
  3. 项目命名
  4. 选择开发目录
  5. 将AppID复制到对应位置
  6. 后端服务选择不使用云服务
  7. 模板选择为Javascript
  8. 点击确定生成小程序项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2puIDHA6-1670772554140)(E:\Huaqingyuanjian\WeChat\img\image-20221002130715524.png)]

至此，小程序创建完成

二、微信小程序文件构成

（一）基本组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47Ee1knS-1670772554140)(E:\Huaqingyuanjian\WeChat\img\image-20221002130832709.png)]

  1. pages用来存放所有小程序的页面
  2. utils用来存放工具性质的模块
  3. app.js小程序项目的入口文件
  4. app.json小程序项目的全局配置文件
  5. app.wxss小程序项目的全局样式文件
  6. project.config.json项目的配置文件
  7. sitemap.json用来配置小程序及其页面是否允许被微信索引

（二）页面组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-smU6rdAa-1670772554141)(E:\Huaqingyuanjian\WeChat\img\image-20221002131027722.png)]

  1. js文件 页面的脚本文件，存放页面的数据、事件处理函数等
  2. json文件 当前页面的配置文件，配置窗口的外观、表现等
  3. wxml文件 页面的模板结构文件
  4. wxss文件 当前页面的样式表文件

（三）JSON配置文件的作用

json是一种数据格式，在实际开发中，json总是以配置文件的形式出现
小程序中有4种json配置文件:

  • 项目根目录中的app.json配置文件
  • 项目根目录中的project.config.json配置文件
  • 项目根目录中的sitemap.json配置文件
  • 每个页面文件夹中的.json配置文件
1.app.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xs9y2MXD-1670772554141)(E:\Huaqingyuanjian\WeChat\img\image-20221002131316730.png)]

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

  • pages：用来记录当前小程序所有页面的路径
  • window：全局定义小程序所有页面的背景色、文字颜色
  • style：全局定义小程序组件所使用样式的版本
  • sitemapLocation： 用来指明sitemap.json的位置
2.project.config.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESJWX0ul-1670772554141)(E:\Huaqingyuanjian\WeChat\img\image-20221002131421342.png)]

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

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

  • projectname中保存的是项目名称

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

3.sitemap.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S6TwkNaO-1670772554142)(E:\Huaqingyuanjian\WeChat\img\image-20221002131622303.png)]

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

4.页面.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9czXMLen-1670772554142)(E:\Huaqingyuanjian\WeChat\img\image-20221002131738294.png)]

对本页面的窗口外观进行设置，页面中的配置项会覆盖app.json的window中的相同配置项

（四）新建小程序页面

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8uAYILKA-1670772554142)(E:\Huaqingyuanjian\WeChat\img\image-20221002132832775.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eH3t60XO-1670772554142)(E:\Huaqingyuanjian\WeChat\img\image-20221002132902457.png)]

（五）修改首页

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cFnqGgLJ-1670772554143)(E:\Huaqingyuanjian\WeChat\img\image-20221002133150954.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMpKhsDn-1670772554143)(E:\Huaqingyuanjian\WeChat\img\image-20221002133221342.png)]

（六）WXML

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

WXML与HTML的区别

  1. 标签名称不同
    • HTML(div span img a)
    • WXML(view text image navigator)
  2. 属性节点不同
    • HTML<a href="#"></a>
    • WXML<navigator url="/pages/home/home"></navigator>
  3. 提供了类似于Vue中的模板语法
    • 数据绑定
    • 列表渲染
    • 条件渲染

（七）WXSS

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

WXSS与CSS的区别

  1. 新增了rpx尺寸单位

    • css中需要手动进行像素单位换算，例如rem
    • wxss在底层支持新的尺寸单位rpx， 在不同大小的屏幕上小程序会自动进行换算

  2. 提供了全局样式和局部样式

    项目根目录中的app.wxss会作用于所有的小程序页面
    局部页面的.wxss样式仅对当前页面生效

  3. WXSS仅支持部分CSS选择器

    • class和id
    • element
    • 并集选择器 后代选择器
    • ::after和::before等伪类选择器

（八）js逻辑交互

小程序中的js文件分为三大类，分别是：

  1. app.js

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

  2. 页面的.js

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

  3. 普通的.js文件

    是普通的功能模块文件，用来封装公共的函数或属性供页面使用
    utils/utils.js

三、小程序的宿主环境

宿主环境指的是程序运行所必须依赖的环境，脱离了宿主环境的软件是没有任何意义的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XsXrPknI-1670772554143)(E:\Huaqingyuanjian\WeChat\img\image-20221002135459292.png)]

手机微信是小程序 的宿主环境
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc…

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

  1. 通信模型
  2. 运行机制
  3. 组件
  4. API

（二）通信模型

1.通信的主体

小程序中通信的主体是渲染层和逻辑层其中：

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

  • JS脚本工作在逻辑层

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-egpvg9Ou-1670772554143)(E:\Huaqingyuanjian\WeChat\img\image-20221002135916667.png)]

2.通信模型

通信模型分为两个部分，它们都是由微信客户端进行转发

  • 渲染层和逻辑层之间的通信

  • 逻辑层和第三方服务器之间的通信

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIfwPrh3-1670772554144)(E:\Huaqingyuanjian\WeChat\img\image-20221002140100535.png)]

（三）运行机制

1.启动过程
  1. 把小程序的代码包下载到本地
  2. 解析app.json全局配置文件
  3. 执行app.js小程序入口文件，调用App()创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成
2.页面渲染过程
  1. 加载解析页面的.json的配置文件
  2. 加载页面的.wxml模板和.wxss样式
  3. 执行页面的.js文件，调用Page()创建页面实例
  4. 页面渲染完成

（四）组件

1.分类

  • 视图容器

  • 基础内容

  • 表单组件

  • 导航组件

  • 媒体组件

  • map地图组件

  • canvas画布组件

  • 开放能力

  • 无障碍访问

2.视图容器组件

  • view

    普通视图区域，类似于HTML中的div，是一个块级元素，常用来实现页面的布局效果

    实现flex布局

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-As1UfmvP-1670772554144)(E:\Huaqingyuanjian\WeChat\img\image-20221002142036446.png)]

    <view class="fa">
	<view class="son box1"></view>
	<view class="son box2"></view>
	<view class="son box3"></view>
</view>

    .fa{
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	height: 20%;
}
.son{
	width: 30%;
	height: 100px;
}
.box1{
	background-color: blue;
}
.box2{
	background-color: rgb(255, 81, 0);
}
.box3{
	background-color: rgb(0, 255, 98);
}

  • scroll-view

    可滚动的视图区域，常用来实现滚动列表效果

    实现纵向滚动

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zMsfQbW4-1670772554144)(E:\Huaqingyuanjian\WeChat\img\image-20221002142441938.png)]

    <scroll-view class="fa" scroll-y>
   	<!--scroll-y	允许纵向滚动--> 
    <!--scroll-x	允许横向滚动--> 
	<view class="son box1">1</view>
	<view class="son box2">2</view>
	<view class="son box3">3</view>
</scroll-view>

    .fa{
	width: 200px;
	height: 200px;
}
.son{
	width: 100%;
	height: 200px;
}
.box1{
	background-color: blue;
}
.box2{
	background-color: rgb(255, 81, 0);
}
.box3{
	background-color: rgb(0, 255, 98);
}

  • swiper和swiper-item

    轮播图区域，轮播图容器组件和轮播图item组件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdDr9ra5-1670772554144)(E:\Huaqingyuanjian\WeChat\img\image-20221002143313425.png)]

    <swiper class="fa box">
	<swiper-item>
		<view class="son box1"></view>
	</swiper-item>
	<swiper-item>
		<view class="son box2"></view>
	</swiper-item>
	<swiper-item>
		<view class="son box3"></view>
	</swiper-item>
	<swiper-item>
		<view class="son box4"></view>
	</swiper-item>
</swiper>

    .box{
	width: 100%;
	height: 200px;
}
.son{
	width: 100%;
	height: 200px;
}
.box1{
	background-color: blue;
}
.box2{
	background-color: rgb(255, 0, 0);
}
.box3{
	background-color: rgb(251, 255, 0);
}
.box4{
	background-color: rgb(255, 0, 191);
}

    • swiper的常用属性

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2aZtx5x4-1670772554145)(E:\Huaqingyuanjian\WeChat\img\image-20221002144956865.png)]

      <swiper class="fa box" indicator-dots indicator-color="white" indicator-active-color="red" autoplay circular></swiper>
      属性类型默认值必填说明
      indicator-dotsbooleanfalse否是否显示面板指示点
      indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色
      indicator-active-colorcolor#000000否当前选中的指示点颜色
      autoplaybooleanfalse否是否自动切换
      currentnumber0否当前所在滑块的 index
      intervalnumber5000否自动切换时间间隔
      circularbooleanfalse否是否采用衔接滑动
3.基础内容组件

  • text

    文本组件，类似于HTML中的span标签，是一个行内元素
    通过selectable属性 实现长按选中文本内容的效果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gcxIMTDX-1670772554145)(E:\Huaqingyuanjian\WeChat\img\image-20221002145645319.png)]

    <text selectable>15655555555</text>

  • rich-text

    富文本组件，支持把HTML字符串渲染为WXML结构

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TnK4HbBg-1670772554145)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20221002150025913.png)]

    <rich-text nodes="<h1>hello world！</h1>"></rich-text>
4.其他常用组件

  • button

    按钮组件，通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

    • type

      设置按钮类型

    • size

      设置按钮大小

    • plain

      镂空按钮

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8EXjLlWk-1670772554145)(E:\Huaqingyuanjian\WeChat\img\image-20221002151043780.png)]

    <button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="default">默认大小按钮</button>
<button size="mini">小按钮</button>
<button size="mini">小按钮</button>
<button size="mini">小按钮</button>
<button plain>镂空按钮</button>

  • image

    图片组件，image组件默认宽度约为300px、高度约为240px

    • mode

      在组件中，可以通过node属性用来指定图片的裁剪和缩放模式

      合法值说明
      scaleToFill（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
      aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
      aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
      widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
      heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
      top裁剪模式，不缩放图片，只显示图片的顶部区域
      bottom裁剪模式，不缩放图片，只显示图片的底部区域
      left裁剪模式，不缩放图片，只显示图片的左边区域
      right裁剪模式，不缩放图片，只显示图片的右边区域

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0YFqFgHA-1670772554146)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20221002152308063.png)]

      <image></image>
<!-- <image src="hero.jpg" mode="aspectFit"></image> -->
<!-- <image src="hero.jpg" mode="aspectFill"></image> -->
<!-- <image src="hero.jpg" mode="widthFix"></image> -->
<image src="hero.jpg" mode="heightFix"></image>

  • navigator

    导航组件，类似于HTML的a标签

（五）小程序API

1.分类
  • 事件监听API
  • 同步API
  • 异步API
2.事件监听API

我们约定，以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。

这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

wx.onCompassChange(function (res) {
  console.log(res.direction)
})
3.同步 API

我们约定，以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}
4.异步 API

大多数 API 都是异步 API，如 wx.request，wx.login 等。异步 API 返回 Promise，这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：

  • Object 参数说明

    参数名类型必填说明
    successfunction否接口调用成功的回调函数
    failfunction否接口调用失败的回调函数
    completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
    其他Any-接口定义的其他参数

  • 回调函数的参数

    success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段：

    属性类型说明
    errMsgstring错误信息，如果调用成功返回 ${apiName}:ok
    errCodenumber错误码，仅部分 API 支持，具体含义请参考对应 API 文档，成功时为 0。
    其他Any接口返回的其他数据

    异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值，可以用来实现更丰富的功能，如 wx.request，wx.connectSocket 等。

    wx.login({
  success(res) {
    console.log(res.code)
  }
})

// callback 形式调用
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})

// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))

  • 注意事项

    • 部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。
    • 当没有回调参数时，异步接口返回 promise。此时若函数调用失败进入 fail 逻辑， 会报错提示 Uncaught (in promise)，开发者可通过 catch 来进行捕获。
    • wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。

  • 云开发API

    开通并使用微信云开发，即可使用云开发API，在小程序端直接调用服务端的云函数。

    wx.cloud.callFunction({
  // 云函数名称
  name: 'cloudFunc',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
  success: function(res) {
    console.log(res.result) // 示例
  },
  fail: console.error
})

// 此外，云函数同样支持 promise 形式调用

微信小程序模板与配置

一、WXML模板语法

（一）数据绑定

1.数据绑定基本原则
  • 在data中定义数据
  • 在WXML中使用数据
2.在data中定义页面的数据

在页面对应的.js文件中，将数据定义到data中即可

Page({
    data:{
        //字符串类型的数据
        info:'init data',
        //数组类型的数据
        msgList:[{msg:'hello'},{msg:'world'}]
    }
})
3.Mustache语法格式

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-orpS0nwa-1670772554146)(E:\Huaqingyuanjian\WeChat\img\image-20221002214409017.png)]

4.Mustache语法的主要应用场景如下

  • 绑定内容

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWM7uZXi-1670772554146)(E:\Huaqingyuanjian\WeChat\img\image-20221002214409017.png)]

  • 绑定属性

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWYOPR1u-1670772554147)(E:\Huaqingyuanjian\WeChat\img\image-20221002215138218.png)]

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7ucjYIG-1670772554147)(E:\Huaqingyuanjian\WeChat\img\image-20221002220014219.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qnhKppWm-1670772554147)(E:\Huaqingyuanjian\WeChat\img\image-20221002220729988.png)]

（二）事件绑定

1.什么是事件
  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息，如 id, dataset, touches。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DUWkqL0-1670772554148)(E:\Huaqingyuanjian\WeChat\img\image-20221002224750639.png)]

2.小程序中常用事件
类型绑定方式描述
tapbindtap或bind:tap手指触摸后马上离开，类似click
inputbindinput或bind:input文本输入框事件
changebindchange或bind:change状态改变时的触发
3.事件对象的属性列表

当事件回调触发时，会收到一个event对象，它的详细属性如下：

属性类型说明
typeString事件类型
timeStampinteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件，当前顶留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息数组
4.target和currentTarget的区别

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

5.bindtap的语法格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KBrjx9n4-1670772554148)(E:\Huaqingyuanjian\WeChat\img\image-20221002225452717.png)]

<button bindtap="show">点我一下</button>

Page({
    ...,
    show(e){
		console.log('你点我干啥啊');
	},
    ...
})
6.在事件处理函数中为data中的数据赋值

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JP7jEOuX-1670772554148)(E:\Huaqingyuanjian\WeChat\img\image-20221002232016448.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJpbx4Dm-1670772554149)(E:\Huaqingyuanjian\WeChat\img\image-20221002231911365.png)]

<button type="primary" bindtap="add">点击+1</button>
<view>当前值：{{count}}</view>

Page({
    data: {
        count:0
    },

    add(e){
        this.setData({
            count:this.data.count+1
        })
    }
})
7.事件传参

小程序的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传参。

错误示范：

<button type="primary" bindtap="log(123)">点击</button>

可以通过为组件提供data-*自定义属性传参，其中*代表的是参数的名字：

<button bindtap="btnHanddle" data-info="{{2}}">事件传参</button>
  • info会被解析为参数的名字
  • 数字2会被解析为参数的值

在事件处理函数中，通过event.target.dataset.参数名就可以获得具体的参数值，这里的event.target.dataset是一个参数对象

Page({
    ...,
    btnHanddle(e){
		console.log(e.target.dataset.info);//2
	},
    ...
})
8.bindinput的语法格式

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yB9sJ6p2-1670772554149)(E:\Huaqingyuanjian\WeChat\img\image-20221002234700981.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zT4eSc9E-1670772554149)(E:\Huaqingyuanjian\WeChat\img\image-20221002234714730.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VF37aUef-1670772554149)(E:\Huaqingyuanjian\WeChat\img\image-20221002234728480.png)]

<input type="text" bindinput="inputHandler" />

Page({
    ...,
    inputHandler(e){
		console.log(e.detail.value);
	},
    ...
})
9.实现文本框和data之间的数据同步

实现步骤

  • 定义数据

    Page({
    data{
    	msg:'你好'
    }
})

  • 渲染结构

    <input value="{{msg}}" bindinput="inputHandler" />

  • 美化样式

    input{
	border: 1px solid #000;
	padding: 5px;
	margin: 5px;
	border-radius:3px
}

  • 绑定input事件处理函数

    Page({
    data: {
        msg:'你好'
    },

    inputHandler(e){
        this.setData({
            msg:e.detail.value
        })
    },
})

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edsiiMkj-1670772554150)(E:\Huaqingyuanjian\WeChat\img\image-20221003000219035.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bjwZvk7c-1670772554150)(E:\Huaqingyuanjian\WeChat\img\image-20221003000342061.png)]

（四）条件渲染

1.wx:if/wx:elif/wx:else

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块，同样可以使用wx:elif="{{condition}}"和wx:else来进行条件判断，要注意的是wx:else不需要加条件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JV2x20js-1670772554150)(E:\Huaqingyuanjian\WeChat\img\image-20221003130321985.png)]

<view wx:if="{{gender===1}}">男</view>
<view wx:elif="{{gender===2}}">女</view>
<view wx:else>保密</view>

Page({
    ...,
    data: {
        gender:2
	},
    ...
})
2.结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，但<block>只起到了包裹作用，不会被渲染出来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6amAvksX-1670772554150)(E:\Huaqingyuanjian\WeChat\img\image-20221003131136288.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kF9vL11d-1670772554151)(E:\Huaqingyuanjian\WeChat\img\image-20221003131309582.png)]

<block wx:if="{{type === 1}}">
	<view>123</view>
	<view>123</view>
	<view>123</view>
</block>

Page({
    ...,
    data: {
        type:2
	},
    ...
})
3.hidden

直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ffiZRQA-1670772554151)(E:\Huaqingyuanjian\WeChat\img\image-20221003131916891.png)]

<view hidden="{{type}}">条件为false的时候显示</view>

Page({
    ...,
    data{
    	type:false
	},
    ...
})
4.**wx:if和hidden的对比

  • 运行方式不同

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

    • hidden以切换样式的方式，控制元素的显示与隐藏

  • 使用建议

    • 频繁切换时，建议使用hidden
    • 控制条件复杂时，建议使用wx:if

（五）列表渲染

1.wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，索引使用index表示，每一项使用item表示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0HKkJhk9-1670772554151)(E:\Huaqingyuanjian\WeChat\img\image-20221003133456763.png)]

<view wx:for="{{array}}">
	索引是{{index}},当前项是{{item}}
</view>

Page({
    ...,
    data{
    	array:['小米','华为','苹果','三星']
	},
    ...
})
2.手动指定索引和当前项的变量名
  • 使用wx:for-index可以指定当前循环项的索引的变量名
  • 使用wx:for-item可以指定当前项的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itx">
	索引是{{idx}},当前项是{{itx}}
</view>
3.wx:key的使用

在小程序实现列表渲染时，建议为渲染的列表指定唯一的key值，从而提高渲染效率

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

Page({
    ...,
    data{
    	userList:[
    		{id:1,name:'小红'},
            {id:2,name:'小王'},
            {id:3,name:'小张'}
    	]
	},
    ...
})

二、WXSS模板样式

（一）什么是WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

（二）WXSS与CSS的关系

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

  • 尺寸单位，rpx
  • 样式导入，@import

（三）rpx

1.什么是rpx尺寸单位

rpx（responsive pixel）是微信小程序独有的，用来解决屏幕适配的尺寸单位，可以根据屏幕宽度进行自适应。

2.rpx的实现原理

由于不同设备的屏幕大小不同，为了实现屏幕的自动适配，rpx把所有的设备屏幕，在宽度上等分为750份（即当前屏幕的总宽度为750px）。

  • 在较小的设备上，1rpx所代表的宽度较小
  • 在较小的设备大，1rpx所代表的宽度较大
3.rpx和px的单位换算

在 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 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

（四）样式导入

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

/*common.wxss*/
.small-p{
    padding:5px;
}

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

（五）全局样式和局部样式

1.全局样式

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

2.局部样式

在 page 的 .wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

注意

  • 当局部样式和全局样式冲突时，局部会覆盖全局
  • 当局部样式权重大于/等于全局样式的权重时，才会覆盖全局的样式

三、全局配置

（一）全局配置文件及常用配置项

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，文件内容为一个 JSON 对象，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

1.pages

记录当前小程序所有页面的存放路径

2.window

全局设置小程序窗口的外观

3.tabBar

设置小程序底部的tabBar效果

4.style

是否启用新版组件

（二）window

1.小程序窗口的组成部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EdGF0aCA-1670772554151)(E:\Huaqingyuanjian\WeChat\img\image-20221003142427545.png)]

2.了解window节点常用的的配置项
属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black / white
navigationBarTitleTextstringweixin导航栏标题文字内容
navigationStylestringdefault导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色，仅 iOS 支持
backgroundColorBottomstring#ffffff底部窗口的背景色，仅 iOS 支持
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离，单位为 px。
3.设置导航栏的标题

步骤

  • app.json->window->navigationBatTitleText

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOE6QOWY-1670772554152)(E:\Huaqingyuanjian\WeChat\img\image-20221003143315502.png)]

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"black"
  },
4.设置导航栏的背景色

步骤

  • app.json->window->navigationBatBackgroundColor

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eJFQUiUE-1670772554152)(E:\Huaqingyuanjian\WeChat\img\image-20221003143620648.png)]

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"black"
  },

注意：只能使用十六进制数来表示颜色

5.设置导航栏色标题颜色

步骤

  • app.json->window->navigationBarTextStyle

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VcVjM4hB-1670772554152)(E:\Huaqingyuanjian\WeChat\img\image-20221003151300617.png)]

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"white"
  },

注意：只有black和white两个值可选

6.全局开启下拉刷新功能

步骤

  • app.json->window->enablePullDownRefresh

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ShpF8HcU-1670772554152)(E:\Huaqingyuanjian\WeChat\img\image-20221003151757172.png)]

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true
  },
7.设置下拉刷新时的窗口的背景色

步骤

  • app.json->window->backgroundColor

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjtDWD3t-1670772554153)(E:\Huaqingyuanjian\WeChat\img\image-20221003152306017.png)]

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor": "#bababa"
},

注意：只能使用十六进制数来表示颜色

8.设置下拉刷新时loading的样式

步骤

  • app.json->window->backgroundTextStyle

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ivf3vT1n-1670772554153)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20221003152740528.png)]

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "自定义文本",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor": "#bababa"
},

注意：只有dark和light两个值可选

9.设置上拉触底的距离

上拉触底：通过手指在屏幕上的上拉滑动操作，从而加载更多的数据的行为

步骤

  • app.json->window->onReachBottomDistance

注意：默认为50px，没有特殊需求就不要修改

（三）tabBar

1.什么是tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

  • 底部tabBar
  • 顶部tabBar

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6XLSNciZ-1670772554153)(E:\Huaqingyuanjian\WeChat\img\image-20221003153647775.png)]

注意：

  • 只能配置最少2个、最多5个 tab页签
  • 渲染顶部tabBar时，不显示icon，只显示文本
2.tabBar的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCZphHNA-1670772554153)(E:\Huaqingyuanjian\WeChat\img\image-20221003153920948.png)]

  • backgroundColor：背景颜色
  • selectedIconPath：选中时的图片路径
  • borderStyle：上边框颜色
  • iconPath：未选中时的图片路径
  • selctedColor：文字选中时的颜色
  • color：未选中时的文字颜色
3.tabBar节点配置
属性类型必填默认值描述
colorHexColor是tab 上的文字默认颜色，仅支持十六进制颜色
selectedColorHexColor是tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColorHexColor是tab 的背景色，仅支持十六进制颜色
borderStylestring否blacktabbar 上边框的颜色， 仅支持 black / white
listArray是tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
positionstring否bottomtabBar 的位置，仅支持 bottom / top
customboolean否false自定义 tabBar，见详情
4.每一个tab项的配置
属性类型必填说明
pagePathstring是页面路径，必须在 pages 中先定义
textstring是tab 上按钮文字
iconPathstring否图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPathstring否选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OACJxyFm-1670772554154)(E:\Huaqingyuanjian\WeChat\img\image-20221003155002050.png)]

"tabBar": {
		"list": [{
			"pagePath": "pages/index/index",
			"text": "test"
		},
		{
			"pagePath": "pages/test/test",
			"text": "index"
		}]
	},
5.配置tabBar

步骤

  • 下载图片资源
  • 新建对应页面
  • 配置tabBar

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uIAtQq4c-1670772554154)(E:\Huaqingyuanjian\WeChat\img\image-20221003160644116.png)]

"tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "index",
        "iconPath": "/image/002-book.png",
        "selectedIconPath": "/image/001-open-book.png"
    },{
        "pagePath": "pages/test/test",
        "text": "test",
        "iconPath": "/image/003-home.png",
        "selectedIconPath": "/image/004-home-1.png"
    },{
        "pagePath": "pages/logs/logs",
        "text": "log",
        "iconPath": "/image/005-user.png",
        "selectedIconPath": "/image/006-account.png"
    }],
    "backgroundColor":"#babbbb",
    "color": "#000000",
    "selectedColor": "#ffffff",
    "borderStyle": "white"
},

注意：有关tabBar的页面要放到Page页面的最前面

四、页面配置

（一）页面配置的作用

.json 文件来对本页面的窗口外观、页面效果等表现进行配置。

（二）页面配置和全局配置的关系

小程序中，app.json中window的节点，可以配置全局小程序中的每个页面的窗口表现。

如果某些页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件就可以实现这种需求

注意：当某些页面配置与全局配置冲突时，以页面配置为准

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgtjyCkn-1670772554154)(E:\Huaqingyuanjian\WeChat\img\image-20221003163132100.png)]

{
	"usingComponents": {},
	"navigationBarBackgroundColor": "#ff00ff",
	"backgroundColor": "#00ff00"
}
属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStylestringwhite导航栏标题颜色，仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式，仅支持 dark / light
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离，单位为px。

五、网络数据请求

（一）小程序中网络数据请求的限制

处于安全性方面的考虑，小程序官方对数据接口做出了如下两个限制

  1. 只能请求HTTPS类型的接口
  2. 必须将接口的域名添加到信任列表中，使用前要先添加进来

（二）配置request合法域名

需求：在自己的小程序中，希望请求https://www.escook.cn/域名下的接口

步骤

  • 小程序后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttNTN7iS-1670772554154)(E:\Huaqingyuanjian\WeChat\img\image-20221003181619696.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OXluRvRy-1670772554155)(E:\Huaqingyuanjian\WeChat\img\image-20221003181701379.png)]

注意

  1. 域名只支持HTTPS协议
  2. 域名不能使用IP或者localhost
  3. 域名必须经过ICP备案
  4. 服务器域名一个月内最多可以申请修改5次

（三）发起GET请求

调用微信小程序提供的wx.request()方法，可以发起GET请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0EYpb32-1670772554155)(E:\Huaqingyuanjian\WeChat\img\image-20221003191510907.png)]

Page({
	...,
	getInfo(e){
		wx.request({
			url: 'https://www.escook.cn/api/get',
			method: 'GET',
			data:{
				name:'zs',
				age:20
			},
			success:(res)=>{
				console.log(res.data);
			}
		})
	},
	...
})

（四）发起POST请求

调用微信小程序提供的wx.request()方法，可以发起POST请求

Page({
	...,
	getInfo(e){
		wx.request({
			url: 'https://www.escook.cn/api/get',
			method: 'POST',
			data:{
				name:'zs',
				age:20
			},
			success:(res)=>{
				console.log(res.data);
			}
		})
	},
	...
})

（五）页面刚刚加载时请求数据

需要在页面的onLoad事件中调用获取数据的函数

onLoad(options) {
    this.getInfo()
  },

(六)跳过request合法域名校验

如果后端只提供了http的接口，暂时没有提供https协议的接口，可以选择不校验合法域名选项，跳过合法域名校验。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FUwHDShp-1670772554155)(E:\Huaqingyuanjian\WeChat\img\image-20221003191712782.png)]

注意：只在项目开发和调试阶段 才能使用

（七）关于跨域和Ajax的说明

小程序中不存在跨域问题，Ajax技术的核心是依赖于浏览器 中的XMlHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做发起ajax请求，而是叫做发起网络数据请求。

六、本地生活案例

（一）实现效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CUi71feS-1670772554155)(E:\Huaqingyuanjian\WeChat\img\image-20221003192226248.png)]

（二）实现步骤

1.新建项目并梳理结构
"pages":[
    "pages/index/index",
    "pages/test/test",
    "pages/logs/logs"
],
2.配置导航栏效果
"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2d476c",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle":"white"
},
3.配置tabBar效果
"tabBar": {
	"list": [{
			"pagePath": "pages/index/index",
			"text": "首页",
			"iconPath": "/image/002-book.png",
			"selectedIconPath": "/image/001-open-book.png"
		},
		{
			"pagePath": "pages/test/test",
			"text": "消息",
			"iconPath": "/image/003-home.png",
			"selectedIconPath": "/image/004-home-1.png"
		},
		{
			"pagePath": "pages/logs/logs",
			"text": "联系我们",
			"iconPath": "/image/005-user.png",
			"selectedIconPath": "/image/006-account.png"
		}]
},
4.实现轮播图效果
<swiper autoplay indicator-dots indicator-color="white" indicator-active-color="#666666" circular>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/1.jpg"></image></swiper-item>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/2.jpg"></image></swiper-item>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/3.jpg"></image></swiper-item>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/4.jpg"></image></swiper-item>
    <swiper-item><image class="swiper-img"mode="aspectFill" src="/image/5.jpg"></image></swiper-item>
</swiper>
5.实现九宫格效果
<view class="nineG">
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
    <view class="gg"><image class="nieG-img" src="/image/003-home.png"></image><text>美食</text></view>
</view>
6.实现推荐
<view class="mid">
    <view class="mid-box1">
        <text>商家推荐</text>
    </view>
    <view class="mid-box2">
        <text>商家推荐</text>
    </view>
</view>
6.实现图片布局
/**index.wxss**/
swiper{
    width: 750rpx;
    height: 300rpx;
}

.swiper-img{
    width: 750rpx;
    height: 300rpx;
}
.nineG{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
    height: 550rpx;
}

.nineG .nieG-img{
    width: 60rpx;
    height: 60rpx;
    margin: 10rpx 85rpx;
}

.nineG .gg{
    width: 250rpx;
    height: 184rpx;
    padding: 20rpx 0;
    border: 1px solid #aaaaaa;
    text-align: center;
}

.mid{
    display: flex;
    justify-content: space-around;
    width: 750rpx;
    height: 200rpx;
    margin: 30rpx 0;
}
.mid-box1,
.mid-box2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350rpx;
    height: 200rpx;
    border-radius: 10px;
}

.mid-box1{
    background-color: #f16191;
}

.mid-box2{
    background-color: #93bde1;
}

视图与逻辑

一、页面导航

（一）什么是页面导航

页面导航指的是页面之间的相互跳转，在浏览器中实现方法，<a></a>和window.location.href

（二）小程序中实现页面导航的两种方式

1.声明式导航
  • 在页面上声明一个<navigator>导航组件
  • 通过点击<navigator>组件实现页面的跳转
2.编程式导航
  • 调用小程序的API，实现页面的跳转

（三）声明式导航

1.导航到tabBar页面

tabBar页面是被配置的tabBar页面

在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

  • url表示要跳转的页面的地址，必须以/开头
  • open-type表示跳转的方式，必须为switchTab
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
2.导航到非tabBar页面

tabBar页面是未被配置成tabBar页面

在使用<navigator>组件跳转到指定的非tabBar页面时，需要指定url属性和open-type属性，其中：

  • url表示要跳转的页面的地址，必须以/开头
  • open-type表示跳转的方式，必须为navigate
<navigator url="/pages/test/test" open-type="navigate">跳转到test页面</navigator>
<!--open-type可以不写-->
<navigator url="/pages/test/test" >跳转到test页面</navigator>
3.后退导航

如果要后退到上一个页面或者多级页面，则需要指定open-type属性和delta属性，其中：

  • open-type表示跳转的方式，必须为navigateBack，表示要进行后退导航
  • delta的值必须为数字，表示要后退的层级
<navigator open-type="navigateBack" delta="1">后退</navigator>
<navigator open-type="navigateBack">后退</navigator>

注意：如果是后退一级，delta="1"可以省略

（四）编程式导航

1.导航到tabBar页面

调用wx.switchTab(Object,Object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：

属性类型必填说明
urlstring是需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
<button bindtap="gotoMessage">跳转到message页面</button>

Page({
    ...,
    gotoMessage() {
        wx.switchTab({
            url: '/pages/message/message',
        })
	},
    ...
})
2.导航到非tabBar页面

调用wx.navigateTo(Object,Object)方法，可以跳转到非tabBar页面。其中Object参数对象的属性列表如下：

属性类型必填说明
urlstring是需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
eventsObject否页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
<button bindtap="gotoMessage">跳转到message页面</button>

Page({
    ...,
    gotoMessage() {
        wx.navigateTo({
            url: '/pages/message/message',
        })
	},
    ...
})
3.后退导航

调用wx.navigateBack(Object object)方法，可以返回上一页或多级页面，其中Object参数对象的属性列表如下：

属性类型默认值必填说明
deltanumber1否返回的页面数，如果 delta 大于现有页面数，则返回到首页。
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）
<button bindtap="gotoMessage">返回一级</button>

Page({
    ...,
    gotoMessage() {
        wx.navigateBack()
	},
    ...
})

（五）导航传参

1.声明式导航传参

navigator组件的url属性用来指定将要跳转的页面路径，同时，路径后面还可以携带参数

  • 参数与路径之间用?分割
  • 参数键与值之间用=相连
  • 不同参数之间用&分割
<navigator url="/pages/test/test?name=zs&age=20" open-type="navigate">跳转到test页面</navigator>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-crG1aaYv-1670772554156)(E:\Huaqingyuanjian\WeChat\img\image-20221004140316208.png)]

2.编程式导航传参

调用wx.navigateTo(Object,Object)方法跳转页面时，也可以携带参数

<navigator bindtap="gotoInfo">跳转到info页面</navigator>

Page({
    ...,
    gotoInfo() {
        wx.navigateTo({
          url: '/pages/info/info?name=ls&age=55',
        })
  	},
    ...
})
3.在onLoad中接收导航参数

通过声明式导航传参和编程式导航传参所携带的参数，可以直接在onLoad事件中使用options直接获取到

Page({
    data:{
        query:null
    }
    ...,
    onLoad(options) {
    	console.log(options)
        this.setData({
          query: options
        })
  	},
    ...
})

二、页面事件

（一）下拉刷新事件

1.什么是下拉刷新

下拉刷新时移动端的专有名词，指的是通过手指在屏幕上的下拉动作从而重新加载页面数据的行为。

2.启用下拉刷新

启用下拉刷新的效果

  • 全局开启下拉刷新

    在app.json的window节点中，将enablePullDownRefresh设置为true

  • 局部开启下拉刷新

    在页面的.json配置文件中，将enablePullDownRefresh设置为true

3.配置下拉刷新窗口的样式

在全局或页面的.json配置文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新的窗口样式，其中：

  • backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
  • backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light
4监听下拉刷新事件

使用onPullDownRefresh来监听下拉刷新事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujrNN47B-1670772554156)(E:\Huaqingyuanjian\WeChat\img\image-20221004145134618.png)]

Page({
    ...,
    onPullDownRefresh:function(){
    	console.log("触发了下拉刷新事件")
	},
     ...
})

下拉刷新，值重置为0

<button bindtap="add" type="primary" >count++</button>
<view>{{count}}</view>

{
	"usingComponents": {},
	"enablePullDownRefresh": true,
	"backgroundTextStyle": "dark",
	"backgroundColor":"#fefefe"
}

Page({
    data:{
        count:0
    },
    add(){
        this.setData({
            count : this.data.count+1
        })
	},
    onPullDownRefresh(){
		this.setData({
            count:0
        })
    }
})
5.停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动关闭loading效果，调用wx:stopPullDownRefresh()就可以停止下拉刷新效果啦

Page({
    ...,
     onPullDownRefresh(){
		this.setData({
            count:0
        })
    	wx:stopPullDownRefresh()
    },
    ...
})

（二）上拉触底事件

1.什么是上拉触底

上拉触底时移动端的专有名词，指的是通过手指在屏幕上的上拉动作从而加载更多的页面数据的行为。

2.监听页面的上拉触底事件

通过onReachBottom()函数即可监听到当前页面的上拉触底事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVXKfC28-1670772554156)(E:\Huaqingyuanjian\WeChat\img\image-20221004155351698.png)]

Page({
    onReachBottom(){
        console.log('触发了上拉触底事件')
    }
})
3.配置上拉触底的距离

上拉触底距离是指触发上拉触底事件时，滚动条距离页面底部的距离

可以在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离，小程序默认的距离是50px，实际开发中可以根据自己的需求改变这个默认值。

4.上拉触底案例

实现步骤

  • 定义获取随机颜色的方法

  • 在页面中加载获取初始数据

  • 渲染UI结构并美化页面效果

    <view wx:for="{{colorList}}" class="view-item" wx:key="index" style="background-color: rgb({{item}});">{{item}}</view>

    .view-item{
	height: 300rpx;
	border: 1px solid #000;
}

  • 在上拉触底事件调用获取随机颜色的方法

  • 添加loading提示效果

  • 对上拉触底进行节流处理

完整代码

Page({
  data: {
		colorList:[],
		isLoading:false
	},
	getColor(){
		this.setData({
			isLoading:true
		})
		wx:wx.showLoading({title: '数据加载中'})
		wx.request({
			url: 'https://www.escook.cn/api/color',
			method: 'get',
			success: (result) => {
				let res = result.data.data;
				this.setData({
					colorList:[...this.data.colorList,...res]
				})
				console.log(res);
			},
			fail: (res) => {},
			complete: (res) => {
				this.setData({
					isLoading:false
				})
				wx:wx.hideLoading()
			},
		})
	},
  onLoad(options) {
		this.getColor();
	},
	onReachBottom(){
		if(this.data.isLoading){
			return
		}else{
			this.getColor()
		}
	}
})

案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERcbMzgF-1670772554156)(E:\Huaqingyuanjian\WeChat\img\image-20221004173540443.png)]

（三）扩展

自定义编译模式

通过自定义编译模式，经过编译后就能直接跳转到我们想看到的页面，而不是初始页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9kdttEn-1670772554157)(E:\Huaqingyuanjian\WeChat\img\image-20221004183758343.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wi5LJ07l-1670772554157)(E:\Huaqingyuanjian\WeChat\img\image-20221004183937223.png)]

三、生命周期

（一）什么是生命周期

生命周期是指一个对象创建、运行、销毁的整个过程，强调的是一个时间段

  • 小程序的启动，表示生命周期的开始
  • 小程序的关闭，表示生命周期的结束

（二）生命周期的分类

1.应用生命周期
  • 小程序的启动、运行、销毁
2.页面生命周期
  • 整个页面的加载、渲染、销毁

应用的生命周期比较大，它包含了各个页面的生命周期

（三）什么是生命周期函数

生命周期函数：是小程序框架体提供的内置函数，会伴随生命周期，自动按次序执行

作用：允许程序员在特定的时间点，执行某些特定的操作，例如在页面刚加载的时候，可以在onLoad生命周期函数中初始化页面数据

注意：生命周期强调的是一个时间段，而生命周期函数强调的是一个时间点

（四）生命周期函数的分类

1.应用的生命周期函数
  • 小程序从启动、允许、销毁期间依次调用的那些函数
2.页面的生命周期函数
  • 每个页面从加载、渲染、销毁期间依次调用的那些函数

（五）应用的生命周期函数

小程序的应用生命周期函数需要在app.js中进行声明

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   * 本地存储
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

（六）页面声明周期函数

小程序的应用生命周期函数需要在页面的.js中进行声明

Page({

  /**
   * 监听页面数据加载，一个页面只调用一次
   */
  onLoad: function (options) {
    
  },

  /**
   * 监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 监听页面初次渲染完成，一个页面只调用一次
   */
  onReady: function () {
    
  },
    
  /**
   * 监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 监听页面卸载，一个页面只调用一次
   */
  onUnload: function () {
    
  }
})

四、WXS脚本

（一）什么是WXS脚本

WXS是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。

（二）WXS的应用场景

WXML无法调用在页面的.js中定义的函数，但是，WXML中可以调用WXS中定义的函数。因此，小程序中WXS的典型应用就是过滤器。

（三）WXS和JS的关系

WXS和JS是两种完全不同的语言

1.WXS有自己的数据类型
  • number
  • string
  • boolean
  • object
  • function
  • array
  • date
  • regxp
2. WXS不支持ES6以上的语法形式
  • 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
  • 支持：var、普通的function
3.WXS遵循CommonJ规范
  • module对象
  • require()函数
  • module.exports对象

（四）基本用法

1.内嵌WXS脚本

WXS代码可以编写在WXML文件的<WXS>标签内，就像JS代码可以写在<script>标签内一样

WXML文件中的每一个<wxs></wxs>标签，必须提供一个module属性，用来指定当前的WXS的模块名，方便再WXML中访问模块中的成员

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
	//将文本转为大写形式
    module.exports.toUpper = function(str){
    	return str.toUpperCase()
    }
</wxs>
2.定义外联的WXS脚本

WXS代码还可以编写在以.WXS为后缀的文件内，就像JS代码可以写在.js为后缀的文件中

function toLower(str){
	return String.toLowerCase();
}
module.exports = {toLower:toLower};
3.使用外联的WXS脚本

在WXML中引入外联的WXS脚本，必须为<wxs>标签添加module和src属性，其中：

  • module指定模块的名称
  • src指定要引入的脚本路径，且必须是相对路径
<view>{{m2.toUpper(username)}}</view>
<wxs module="m2" src="../../utils/tools.wxs"></wxs>

（五）WXS的特点

1.不能作为组件的回调

WXS的典型应用场景就是过滤器，经常配合Mustache语法进行使用，但是在WXS中定义的函数不能作为组件事件的回调函数

2.隔离性

WXS和JS的运行环境是相互隔离的

  • WXS中不能调用JS中定义的函数
  • WXS中不能调用小程序提供的API
3.性能好
  • 在IOS设备上，小程序内的WXS会比JS代码块2-20倍
  • 在Android设备上，二者的运行效率无差异
我不要折耳根
关注
专栏目录
微信小程序-起步
weixin_45732235的博客
06-25 2533
微信小程序学习第一天笔记
Dcloud开发引用第三方sdk的app小程序扫盲---连接wifi
EK306的博客
12-05 767
现在跳转到新页面中，需要在新页面初始化时就把传进来的参数获得。这里可以使用mui.plusready()来获取 mui.plusReady(function() { var self = plus.webview.currentWebview(); document.getElementById("wifiname").value = self.wifiname;
uniapp 小程序运行报错plus...
cc蒲公英的博客
06-03 547
uniapp 小程序运行报错plus...
微信小程序组件库 `miniprogram-component-plus` 使用教程
gitblog_00998的博客
08-15 511
微信小程序组件库 miniprogram-component-plus 使用教程 项目地址:https://gitcode.com/gh_mirrors/mi/miniprogram-component-plus 1. 项目的目录结构及介绍 miniprogram-component-plus/ ├── components/ │ ├── componentA/ │ │ ├── com...
微信小程序之提高应用速度小技巧
热门推荐
wetest_tencent的博客
03-10 3万+
小程序科普类的文章已经很多了，今天这里讲的是针对小程序的优化方法，可以有效提高小程序的响应速度和用户体验。当然，开发体验也提高不少。
uni-app 1、app-plus的使用，#ifdef MP只兼容小程序
weixin_42861240的博客
12-27 2万+
最近开始查看uni-app的一些项目，在pages.json里面发现app-plus。百度了下看见一些网友的解释是app跟h5端执行，小程序则不执行（只测试过微信小程序，据说其他小程序也不执行）。代码如下 { "path": "pages/index/index", "style": { // #ifdef MP /* 微信小程序/支付宝小程序/百度小程序/头条...
微信小程序起步项目.zip
01-09
这个"微信小程序起步项目.zip"文件显然包含了创建和开发微信小程序所需的一些基础资源和教程，帮助开发者快速入门。 小程序的设计理念是简洁高效，它融合了HTML5网页的便捷性和原生应用的功能性。开发者可以利用...
基于微信小程序的点餐系统设计与实现开题报告.docx
06-06
4. **易于开发维护**：微信小程序的开发环境友好，支持云开发功能，便于开发者进行版本迭代和系统维护。 #### 三、技术要点与实现路径 - **前端技术**：采用微信小程序框架进行界面设计和功能实现，确保用户体验...
微信小程序月运动步数小程序+SpringBoot版源码.zip
05-18
这个项目对于学习微信小程序开发和SpringBoot应用构建具有很高的参考价值，尤其适合进行毕业设计、期末大作业或课程设计的实践练习。 微信小程序是一种轻量级的应用开发平台，它允许开发者在无需安装的情况下，为...
支付宝小程序卡包开发（流程+详细案例+商户会员卡）
金蕊泛流霞
06-09 1万+
首先先让大家看看开发出来的卡是什么样子的如下： 开发出来是这个效果，其中包括步骤如下： 快速接入 第一步：创建小程序 要在您的小程序内使用 商户会员卡功能，您需要首先完成 开发者入驻 并 创建小程序 。 第二步：添加功能 在小程序详情页的功能列表中添加“商户会员卡”和“支付宝卡包”两个功能包，如下图所示： 配置参数 获取方式/示例值 URL（支付宝网关（固定）） https://openapi.alipay.com/gateway.do APPID（APPID 即创建应用后生成）
小程序基础知识点
weixin_43323097的博客
08-17 622
小程序基础知识点
小程序基础入门(黑马学习笔记)
小白的博客
06-06 3155
权当学习笔记吧
uniapp+vue加油服务系统 微信小程序
qq2295116502的博客
11-05 889
基于微信小程序的加油服务系统设计为微信小程序和后台管理两个服务端，并对此设计相应的功能模块如下：后台管理模块：（1）系统管理模块：对小程序的系统页面进行管理。（2）用户管理模块：系统对用户角色、权限和信息进行管理。（3）订单管理模块：系统详细跟踪每笔订单的进度，帮助商家了解最近订单成交状况。（4）加油站管理模块：对所有加油站的各项信息进行管理。（5）新闻管理模块：对小程序发布的新闻信息进行管理。小程序端管理模块：（1）用户注册登录模块：用户注册为用户并登录小程序；
微信小程序寓言童话创作APP设计与实现
qq2295116502的博客
11-05 265
本文通过对现有寓言童话创作APP的调研和分析，取其精华去其糟粕，遵循软件工程方法进行系统分析、总体设计和详细设计，最终设计开发基于Android的寓言童话创作APP。本系统分为管理员、作者、用户三种用户。管理员用户可以通过本系统进行寓言童话管理、用户管理、审批作品管理。用户可以通过本系统进行题目的查询、登录、阅读寓言童话等内容。1.系统登录登录过程是通过web服务器，在后台的数据库通过用户名称密码进行査询。有该注册用户方可使用该系统。2.信息查询。
微信小程序的汽车维修预约管理系统
最新发布
qq2295116502的博客
11-05 123
系统功能简述前台用于实现用户在页面上的各种操作，同时在个人中心显示各种操作所产生的记录：后台用于实现对用户信息，零件，维修订单，车辆信息，汽修店信息，预约信息，用户评论的管理功能。前台功能（1）用户评论：用户可以对已进行维修的汽修店进行评论（2）用户定位：显示当前用户位置，并将附近的汽修店推荐给用户。（3）用户预约：在汽修店详情页面上，通过点击页面下方的预约按钮，然后在弹出的页面上输入对应的信息，然后点击提交按钮即可。后台功能。
微信小程序生成二维码
等,一起的博客
10-30 1172
h5/微信小程序生成二维码
入门指南：微信小程序开发
"微信小程序介绍-起步" 微信小程序是一种轻量级的应用形式，它介于传统网页应用和原生移动应用之间。小程序运行在微信提供的封闭环境中，而不是在开放的浏览器中，这使得它们能获得更接近原生应用的性能和用户体验...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值