117.【微信小程序】

这篇具有很好参考价值的文章主要介绍了117.【微信小程序】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(一)、微信小程序概括

1.微信小程序简介

(1).小程序与普通网页开发的区别
  1. 运行环境不同: 网页运行在浏览器、小程序运行在微信
  2. 开发模式不同: 网页的开发模式: 浏览器+代码编辑器
    小程序的有自己的一套标准的开发模式
    (1). 申请小程序开发账户
    (2).安装小程序开发者工具
    (3).创建和配置小程序项目
  3. API不同:由于运行环境的不同,所以小程序种无法调用DOM和BOM的API。但是,小程序中可以调用微信环境模式的各种API

2.注册微信小程序账号

(1).注册小程序账号

官方网址: https://mp.weixin.qq.com/cgi-bin/wx
117.【微信小程序】
账号注册成功:
117.【微信小程序】

(2).获取小程序的AppID

117.【微信小程序】

3.安装微信开发者工具

(1).微信开发者工具的简介:

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

  1. 快速创建小程序项目
  2. 代码的查看编辑
  3. 对小程序功能进行调试
  4. 小程序的预览和发布
(2).微信开发者工具的下载

微信开发者工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

117.【微信小程序】
安装
117.【微信小程序】

4.创建第一个小程序

(1).创建小程序步骤

1. 点击"+"号按钮

117.【微信小程序】
2.创建项目
勾选不使用云服务、选用js
117.【微信小程序】

(2).开发者工具的功能介绍 ⭐

1.编译与预览
117.【微信小程序】
2.五大分区
117.【微信小程序】

(二)、微信小程序目录讲解

1.小程序代码的目录构成

(1).了解小程序的目录结构

117.【微信小程序】

(2).小程序页面的组成文件

小程序官方建议把所有小程序的页面,都存放在Pages目录中,以单独的文件夹存在,如图所示。
每一个页面都是有4个基本文件组成的:

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

117.【微信小程序】

2.四种JSON配置文件 ♻

JSON是一种数据格式,在实际开发中,JSON总是以配置文件的形式出现。小程序项目中也不列外;通过不同的 .json配置文件,可以对象名进行不同级别的配置

小程序项目中有4种配置JSON配置文件,分别是:

1. 项目根目录中的app.json 配置文件
2. 项目根目录中的peoject.config.json 配置文件
3. 项目根目录中的sitemap.json配置文件
4. 每个页面文件夹中的.json配置文件
(1). app.json (全局配置文件)

(app.json)当前小程序的全局配置,包括了小程序的所有路径、窗口外观、界面表现、底部tab等

{
  "pages":[  // 1.用来记录当前小程序所有页面的路径
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{ // 2.全局定义小程序所有页面的背景色、文字颜色等
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",  //3. 全局定义小程序组件所使用的样式版本
  "sitemapLocation": "sitemap.json"  // 4. 指明sitemap.json的位置
}

(2). peoject.config.json 项目配置文件

peoject.config.json 是项目配置文件,用来记录我们对小程序开发工具所做过的个性化配置,列如:

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {  //1. 保存了编译相关的配置
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "condition": false
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "wxee18f6535b4ea95c",  // 2. 账号AppID
  "projectname": "miniprogram-92", // 3. 项目名称
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}
(3). sitemap.json 文件 -索引优化

微信现已开发小程序内搜索,效果类似于PC网页的SEO。sitemap.json用来配置小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

{
  "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{  // 1.数组
  "action": "allow", // 3. 允许所有的页面
  "page": "*"  // 2.所有的页面
  }]
}

注意: sitemap的索引提示时默认开启的,如果需要关闭sitemap的索引提示,可在小程序项目配置文件 peoject.config.jsonsetting中的配置字段 checkSiteMapfalse

(4). 页面的.json配置文件

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

3.小程序页面的顺序和新增

(1).新建一个小程序页面

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

117.【微信小程序】

(2).修改项目首页

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

117.【微信小程序】

4.WXML模板 ♻

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

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

5. WXSS样式♻

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

(1).WXSS和CSS的区别
  1. 新增了rpx尺寸单位
    • CSS中需要手动进行像素单位换算,列如 rem
    • WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
  1. 提供了全局的样式和局部样式
    • 项目根目录中的app.wxss会作用所有小程序页面
    • 局部页面的.wxss样式仅对当前页面有效
  1. WXSS仅支持部分CSS选择器
    • 类选择器和id选择器
    • element 元素选择器
    • 并集选择器、后代选择器
    • ::after和::before等伪类选择器

6.三种JS逻辑交互♻

一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。列如: 响应用户的点击、获取用户的位置等等。

(1).app.js
  1. 是整个小程序项目的入口文件,通过调用==APP()==函数来启动整个小程序。
// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

(2).页面的.js文件
  • 是页面的入口文件,通过调用==Page()==函数来创建并运行页面。
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
(3).普通的.js文件
  • 普通的功能模块文件,用来封装公共的函数或属性供页面使用。
  • 比如utils下面的utils.js的格式化时间的功能。

117.【微信小程序】

(三)、小程序的宿主环境

1.什么是宿主环境

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

2.小程序的宿主环境

手机微信是小程序的宿主环境。小程序借助宿主环境提供的能力,可以完成许多网页无法完成的功能,列如:

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

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

4.通信模型 ⭐

(1).通信的主体

小程序中通信的主题是渲染层逻辑层,其中:

  1. WXML模板和WXSS样式工作在渲染层
  2. JS脚本工作在逻辑层
(2). 小程序的通信模型

小程序中的通信模型分为两部分:

  1. 渲染层和逻辑层之间的通信
  2. 逻辑层第三方服务器之间的通信。

5.运行机制 ⭐

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

6. view 组件 ⭐

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。挂房把小程序的组件分为了九大类、

1. 视图容器
2. 基础内容
3. 表单组件
4. 澳航组件
5. 媒体组件
6. mao地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问
(1). 常用的试图容器类组件
1.view组件
	(1).普通试图区域组件
	(2).类似于HTML中的div,是一个块级元素
	(3).常用来实现页面的布局效果
2.scroll-view
	(1).可滚动的试图区域
	(2).常用来实现滚动列表效果
3.swiper和swip-item
	(1).轮播图容器组件和轮播图item组件

1. ⭐view组件

如果想要文本垂直居中,那么就让块级(div)的高与text-height的像素大小一致。

list.wxml

<!--pages/list/list.wxml-->
设置三个div块级元素---

<view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

list.wxss 渲染

/* pages/list/list.wxss */
/* 对container1这个类选择器下的 view标签进行渲染 */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
/* 对container1这个类选择器下的 view标签的第一个子标签进行渲染 */
.container1 view:nth-child(1){
  background-color: aquamarine;
}
.container1 view:nth-child(2){
  background-color: rgb(81, 43, 172);
}
.container1 view:nth-child(3){
  background-color: rgb(211, 36, 167);
}
/* 对整个container1做渲染 */
.container1{
  /* 横向布局 */
  display: flex;
  /* 在每一个盒子旁边留有空白 */
  justify-content: space-around;
}

117.【微信小程序】

2. ⭐scroll-view 组件 (scroll)

我们如果要实现纵向滚动的话,我们需要进行五步操作。设置div块的目的是为了生成一个触发条件,当我们块级元素大于边框的时候,才会触发。
1.list.wxml

  1. 第一步:  我们要先添加上scroll-view标签
  2. 第二步: 我们设置允许y轴滚动 scroll-y。 scroll-x 允许x轴滚动
<!--pages/list/list.wxml-->
<!-- 
  1. 第一步:  我们要先添加上scroll-view标签
  2. 第二步: 我们设置允许y轴滚动 scroll-y。 scroll-x 允许x轴滚动

 -->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

2.list.wxss

.container1{
3.  /* 整个大盒子全部包裹着 */
  border: 1px solid red;
4.  /* 设置整个大盒子的宽度 */
  width: 100px;
5.  /* 设置整个大盒子的高度 */
  height: 120px;
}
/* pages/list/list.wxss */
/* 对container1这个类选择器下的 view标签进行渲染 */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
/* 对container1这个类选择器下的 view标签的第一个子标签进行渲染 */
.container1 view:nth-child(1){
  background-color: aquamarine;
}
.container1 view:nth-child(2){
  background-color: rgb(81, 43, 172);
}
.container1 view:nth-child(3){
  background-color: rgb(211, 36, 167);
}
/* 对整个container1做渲染 */
.container1{
  /* 整个大盒子全部包裹着 */
  border: 1px solid red;
  /* 设置整个大盒子的宽度 */
  width: 100px;
  /* 设置整个大盒子的高度 */
  height: 120px;
}

117.【微信小程序】

⭐3. swiper和swiper-item组件的基本使用

1.设置三个轮播图
list.wxml

<!--pages/list/list.wxml-->
<!-- 
  设置三个轮播图 indicator-dots->展示圆点的 autoplay interval="3000"->自动播放 circular-》循环
 -->
<swiper class="container1" indicator-dots autoplay interval="3000" circular>
  <swiper-item>A</swiper-item>
  <swiper-item>B</swiper-item>
  <swiper-item>C</swiper-item>
</swiper>

list.wxss


/* 对container1这个类选择器下的 swiper-item标签的第N个子标签进行渲染 */
.container1 swiper-item:nth-child(1) {
  background-color: aquamarine;
  height: 100%;
  line-height: 150PX;
  text-align: center;
}

.container1 swiper-item:nth-child(2) {
  background-color: rgb(29, 233, 56);
  height: 150px;
  line-height: 150PX;
  text-align: center;
}

.container1 swiper-item:nth-child(3) {
  background-color: rgb(194, 224, 19);
  height: 150px;
  line-height: 150PX;
  text-align: center;
}

/* 对整个container1做渲染 */
.container1 {
  height: 150px;
}

117.【微信小程序】

(2). 常用的基础内容组件

1. text

    • 文本组件
    • 类似于HTML中的span标签,是一个行内元素
  1. rich-text
    • 富文本组件
    • 支持把HTML字符串渲染为WXML结构

⭐4.1.text组件的基本使用

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

list.wxml

一定要加上 selectable 或 user-select这个属性、否则不会支持。
<!--pages/list/list.wxml-->
<view>
  手机号支持长按选中效果 user-select->新版 selectable->已经废弃
  <text user-select>18844129422</text>
</view>

117.【微信小程序】

  1. rich-text 组件的基本使用

通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构
list.wxml

<view>
  手机号支持长按选中效果 user-select->新版 selectable->已经废弃
  <text user-select>18844129422</text>
</view>

<rich-text nodes="<h1 style='color:red'>您好</h1>"/>

117.【微信小程序】

(3).其他常用组件
  1. button
  • 按钮组件
  • 功能比HTML中的button按钮丰富
  • 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户权限、授权用户)

2. image

  • 图片组件
  • image组件默认宽度约为 300 px、高度约240px
  1. navigator (导航栏)

1 按钮组件

list.wxml

<!--pages/list/list.wxml-->
<!-- 主题按钮 type -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>
  -----------------------------------------------------
</view>
<!-- size="mini" 小型按钮 -->
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>
  -----------------------------------------------------
</view>
<!-- plain 镂空按钮-->
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

117.【微信小程序】

2 图片自适应

list.wxml

<!--pages/list/list.wxml-->
<!--  aspectFill-> 完整显示图片但边框可能会留白。aspectFill填充整个区域但图片可能会发生裁剪。
      widthFix-> 图片会完整的显示出来,但图片的高度会被修改。 heightFix 长度不变,宽度自适应。
-->
<image src="" />
<image src="/images/1.jpg" mode="heightFix"></image>

list.wxss


/* 对container1这个类选择器下的 swiper-item标签的第N个子标签进行渲染 */
image{
  /* width: 100%; */
  border: 1px solid rebeccapurple;
}

117.【微信小程序】

7.小程序API概述 ⭐

小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,列如: 获取用户的信息、本地存储、支付功能等。

(1).小程序API的三大分类
  1. 事件监听API
  • 特点: 以on开头,用来监听某些事件的触发
  • 举例:wx.onWindowResize 监听窗口尺寸变化的事件
  1. 同步API
  • 特点:1 以Sync结尾的API都是同步API
  • 特点2: 同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
  • 举列: wx.setStorageSync像本地存储写入内容。
  1. 异步API
  • 特点: 类似于JQuery中的 $.ajax(options)函数,需要通过success、fail、complete调用的结果。
  • 举列: wx.request() 发起网络数据请求,通过success回调函数接受数据。

8.小程序协同工作

(1).连接权限管理需求

在中大型的公司李,人员的分工非常仔细: 同一个小程序项目,一般会有不同岗位、不同角色的员工同时参与设计与开发

在处于管理需要,我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分,使他们能够高效的进行协同工作。

117.【微信小程序】

(2).小程序成员管理

117.【微信小程序】

(3).开发者的权限说明
  1. 开发者权限: 可使用小程序开发者工具及对小程序的功能进行代码开发。
  2. 体验者权限: 可使用体验版小程序
  3. 登入权限: 可登入小程序管理后台,无需管理员确认。
  4. 开发设置: 设置小程序服务器域名、消息推送及扫描普通连接二维码打开小程序。
  5. 腾讯云管理: 云开发管理

117.【微信小程序】

(4).小程序的版本
  1. 软件开发过程中的不同版本

在软件开发过程中,根据时间节点的不同,会产生不同的软件版本。

  1. 开发者编写代码的同时,对项目代码进行自测(开发版本)
  2. 直到程序达到了一个稳定可以验的状态时,开发者把体验版本给产品经理和测试人员进行体验测试
  3. 最后修复完程序的Bug后,发布正式版供外部用户使用。

2.小程序的版本

117.【微信小程序】

9.小程序发布上线

(1).一个小程序的发布上线的整体步骤

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

(2).上传代码与获取小程序二维码
  1. 点击开发者工具顶部工具栏中的"上传"按钮。
  2. 填写版本号及项目备注。
    117.【微信小程序】

获取小程序的二维码位置:https://mp.weixin.qq.com/wxamp/home/guide?token=1261075385&lang=zh_CN

(四)、小程序-模板与配置

1.WXML模板语法- (数据绑定)

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

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

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

把data中的数据绑定到页面进行渲染,使用Mustache语法(双大括号)将变量包起来即可。

<view>{{要绑定的数据名称}}</view>

list.js

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world'
  },

})

list.wxml

<!--pages/list/list.wxml-->
<view>{{info}}</view>

117.【微信小程序】

(4).Mustache 语法的应用场景

Mustacher 语法的主要应用场景如下:

  • 绑定内容: 直接写Mustache语法即可
  • 绑定属性: 在小程序中不需要像Vue使用 v- 了。直接写Mustache就行
  • 运算(三元运算符、算数运算符)

list.wxml

<!--pages/list/list.wxml-->
<view>----------------------绑定内容:--------------------</view>
<view>绑定内容: {{info}}</view>
<view>----------------------绑定属性:--------------------</view>
<image src="{{ImagSrc}}" mode="widthFix"></image>
<view>----------------------绑定三元:--------------------</view>
<view>{{random>5 ? '结果大于5' : '结果小于5'}}</view>
<view>----------------------算法运算:--------------------</view>
<view>{{random*100}}</view>

lists.js

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world',
    ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46',
    random: Math.random()*10
  },
})

117.【微信小程序】

2.WXML模板语法-(事件绑定)

event:

(1).什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

(2).小程序常用的事件
  1. tap类型: 手指触摸后马上离开,类似于HTML的click事件。 绑定方式:bindtap或bind:tap。
  2. input类型: 文本框的输入事件。绑定方式: bininput或bind:input
  3. change类型: 状态改变时触发。bindchange或bind:change。

当事件回调触发的时候,会收到一个事件对象event,他的详细属性如下表所示。

属性		类型			说明
type 		 String			事件类型
timeStamp 	 Integer		也买你打开到触发事件所经过的毫秒数
target		 Object			出发时间的组件的一些属性值集合
currentTarget Object		当前组件的一些属性值集合
detail		Object			额外的信息
touches		Array			触发事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array 		触摸事件,当前变化的触摸点信息的数组。
(2).target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件
117.【微信小程序】
点击内部的按钮时,点击事件以冒泡的方式向外扩展,也会触发外层的view的tap事件函数,此时对于外层的view来说:

  • e.target指向的是触发事件的源头组件,因此,e.target是内部的按钮组件。
  • e.currentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件。
(5).bindtap的语法格式及传参

1. 绑定按钮的事件

在小程序中,不存在HTML中的onclik鼠标点击事件,而是通过tap事件来响应用户的触摸行为。

  1. 通过bindtap,可以为组件绑定tap触摸事件,语法如下:

  2. 通过页面的.js文件中对应的事件处理函数,事件形参event(一般简写为e)来接受。

lists.wxml

绑定->bindtap="btnTapHandler"
<button type="primary" bindtap="btnTapHandler">按钮</button>
<!--pages/list/list.wxml-->
<view>
<button type="primary" bindtap="btnTapHandler">按钮</button>
</view>

<view style="background-color: aquamarine;">
  你好压
</view>

list.wxss

  // 定义按钮的事件处理函数
  btnTapHandler(){
    console.log('s')
  },
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world',
    ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46',
    random: Math.random()*10
  },
  // 定义按钮的事件处理函数
  btnTapHandler(){
    console.log('s')
  },
})

117.【微信小程序】

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

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

<!--pages/list/list.wxml-->

<button type="primary" bindtap="Count">点我+1</button>
<text>{{count}}</text>

list.wxss

  Count(){
    this.setData({
      count:this.data.count+1
    })
  },
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world',
    ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46',
    random: Math.random()*10,
    count:0
  },
// 定义自增
  Count(){
    this.setData({
      count:this.data.count+1
    })
  },

})

117.【微信小程序】

3. 事件传参

小程序中的事件传参比较特殊,不能再绑定事件的同时为事件处理函数传递参数。因为小程序会把bindtap的属性值,统一当作事件名称来处理,相当于调用一个事件名为: xxx 的事件。

微信小程序为组件提供 data-*自定义属性传参,其中*代表的是参数的名字

在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值。

lists.wxml

info->参数名 2->传给事件的值
data-info="{{2}}"  
<!--pages/list/list.wxml-->
<!-- "{{2}}"->传递到Js的类型是数字  "2"->传递过去的类型是字符串 -->
<button type="primary" bindtap="Count" data-info="{{2}}">点我传参</button>
{{count}}

lists.js

  Count(e){  // 进行接受且修改的操作
    this.setData({
      count:this.data.count=e.target.dataset.info
    })
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world',
    ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46',
    random: Math.random()*10,
    count:0
  },
  // 定义按钮的事件处理函数
  btnTapHandler(e){
    console.log(e)
  },
  Count(e){
    console.log(e)
    console.log(this)
    this.setData({
      count:this.data.count=e.target.dataset.info
    })
  },
})

117.【微信小程序】
this获取data区域的值
117.【微信小程序】
event获取事件传递过来的值

117.【微信小程序】

(6).bindinput的语法格式
  1. 绑定Input

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

  1. 通过 bindinput,可以为文本框输入事件。
  2. 在页面的.js文件中定义事件处理函数。e.detail.value拿到文本框的值

list.wxml

<!--pages/list/list.wxml-->
<input bindinput="InputHandler" />

list.js

  // 定义文本框的事件处理函数
  InputHandler(e){
    console.log(e)
    console.log(e.detail.value)
  },
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world',
    ImagSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc6a96b0f-346b-4143-9ffa-e9c34e6addfd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687336373&t=7b75824da83e2df0440da3bd9137dd46',
    random: Math.random()*10,
    count:0
  },
  // 定义文本框的事件处理函数
  InputHandler(e){
    console.log(e)
    console.log(e.detail.value)
  },
})

117.【微信小程序】
event获取前端传递过来的值
117.【微信小程序】

2. 实现文本框和data之间的数据同步

实现步骤:

  1. 定义数据
Page({
  data: {
    msg:'你好'
  },
})
  1. 渲染结构
<!--pages/list/list.wxml-->
<input bindinput="InputHandler" value="{{msg}}"/>
  1. 美化样式
input{
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}
  1. 绑定input事件处理函数
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:'你好'
  },
  // 定义文本框的事件处理函数
  InputHandler(e){
    console.log('event',e)
      console.log('this',this)
      this.setData({
        msg:e.detail.value
      })
      console.log(this.data.msg)
  },
})

117.【微信小程序】

3.WXML模板语法- (条件渲染)

(1).wx:if初步介绍

在小程序中,使用 wx:if="{{flag}}"来判断是否需要渲染该代码块。

也可以使用wx:elif和wx:else来添加else判断。
lists.wxml

<!--pages/list/list.wxml-->
<view wx:if="{{type==1}}"></view>
<view wx:elif="{{type==2}}"></view>
<view wx:else>保密</view>

lists.js

// pages/list/list.js
Page({
  data: {
   type:3
  },

})

117.【微信小程序】

(2).结合block标签使用 wx:if

如果要一次控制多个组件的展示与隐藏,可以使用一个block标签将多个组件包装起来,并在block标签上使用wx:if控制属性。注意block并不是一个组件,他只是一个包裹性质的容器,不会再页面中做任何渲染。
換個説法就是說 不會占用我們的空間位置。

<!--pages/list/list.wxml-->
<block wx:if="{{true}}">
  <view></view>
  <view></view>
  <view>保密</view>
</block>

117.【微信小程序】

(3).hidden初步使用

在小程序中,直接使用 hidden="{{flag}}"也能控制元素的演示与隐藏。

<!--pages/list/list.wxml-->
<view hidden="{{flag}}">条件为true的时候隐藏元素,否则显示</view>

117.【微信小程序】

(4).wx:if与hidden的对比
  1. 运行方式不同:
    • wx:if以动态创建和移除元素的方式,控制元素的展示与隐藏。(移除)
    • hidden以切换样式的方式 (display: none/block),控制元素的显示与隐藏(类似于 v-show)
    1. 使用建议
    • 频繁的切换时,建议使用hidden
    • 控制条件比较复杂,可以使用 wx:if

4.WXML模板语法 - (列表渲染)

(1).wx:for基本使用

通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构。

<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}">
  索引: {{index}},item值是:{{item}}
</view>

默认情况下,当前循环项的索引用index表示当前循环项用item表示
117.【微信小程序】

(2).手动指定索引和当前项的变量名
  • 使用wx:for-index可以指定循环项的索引的变量名。
  • 使用wx:for-item 可以指定当前项的变量名。

假如说制定完名字之后,下面的数据一定要使用命名之后的名字。否则为空

<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}" wx:for-index="Index" wx:for-item="Item">
  索引: {{Index}},item值是:{{Item}}
</view>

117.【微信小程序】

(3). wx:key的使用

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

list.wxml

<!--pages/list/list.wxml-->
<view wx:for="{{arr}}" wx:key="id">
    {{item.id}} - {{item.name}}
</view>

lists.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
   arr:[
     {id:'001',name:'小明'},
     {id:'002',name:'小红'},
     {id:'003',name:'小黑'},
    ]
  },
 }]

117.【微信小程序】

5.WXSS模板样式-(RPX)

(1).什么是WXSS

WXSS是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS。CSS与WXSS的关系是交集。WXSS扩展的特性是:

  • rpx 尺寸单位
  • @impory 样式导入
(2).什么是rpx尺寸单位

rpx(resonsive pixel) 是微信小程序独有的,用来解决屏幕适配的尺寸单位

小程序在不同的设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。

  1. rpx与px之间的单位换算

在iphone6上,屏幕的宽度为375px,共有750个物理像素点,等分为750rpx。

750rpx=375px=750物理像素点
1px=0.5px=1物理像素点

在开发小程序的额时候,设计师可以用iphone6作为视觉稿的标准

6.WXSS 模板样式 - (Import)

使用WXSS通过的 @import 语法,可以导入外联的样式表。

(1).@import 的语法格式

@import后根需要导入的外联样式表的绝对路径,用 ; 表示语句结束。

commons/common.wxss

/* 定义一个公共样式表 */
.username{
  color: red;
}

lists.wxss 引入外部样式,但是假如内部也有同名样式的话,就会覆盖掉外部的

@import "/commons/conmon.wxss"

.username{
  color: aqua;
}

lists.wxml

<!--pages/list/list.wxml-->
<view>
  <text class="username">{{msg}}</text>
</view>

117.【微信小程序】

7.WXSS模板样式-(CSS)

(1).全局样式

定义在app.wxss中的样式为全局样式,作用域每一个页面。
app.wxss: 我们给全局view标签设置一个样式

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: aquamarine;
}

test.wxml

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text>

<view>
  hello jsxs
</view>

117.【微信小程序】

(2).局部样式

页面的 .wxss文件中定义的样式为局部样式,只作用于当前页面。

  1. 假如一个页面又存在全局样式和局部样式的时候,那么局部样式就会覆盖掉全局样式。
  2. 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局样式

8.全局配置- (导航栏和tabBar)

(1).全局配置文件及常用的配置项

小程序根目录下的 app.json文件时小程序的全局配置文件。常用的配置项如下:

  1. pges
  • 记录当前小程序所有页面的存放路径
  1. window
  • 全局设置小程序窗口的外观
  1. tabBar
  • 设置小程序底部的 tabBar效果
  1. style
  • 使用使用新版的组件样式
(2).全局配置-window

window 主要时配置顶部导航栏和导航栏背景色的配置。

117.【微信小程序】

  1. window节点中常用的配置项

117.【微信小程序】
1.修改导航栏的标题

app.json->window->navigationBarTitleText

"navigationBarTitleText": "金橘社区",

117.【微信小程序】
2.导航栏的背景色:只能支持16进制的颜色
app.json->window->navigationBarBackgroundColor
117.【微信小程序】
3.导航栏的标题颜色: 只要black和white
app.json->window->navigationBarTextStyle
117.【微信小程序】
4.全局开启下拉刷新功能: 默认没有开启下拉刷新,真机上不会自动关闭
app.json->window->enablePullDownRefesh的值设置为 true
117.【微信小程序】
5.设置下拉刷新时窗口的背景色 指定时 16进制
app.json->window->backgroundColor

117.【微信小程序】
6.下拉刷新的时候样式
app.json->window->backgroundTextStyle
117.【微信小程序】
7.设置上拉触底的距离: 就是我们的下拉滑块距离底部还有多长加载数据。默认是50
app.json->window->onReachBottomDistance
117.【微信小程序】
app.json

  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "金橘社区",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  },
(3).全局配置-tabBar

tarBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。

  1. 底部tabBar
  2. 顶部tabBar

注意:

  • tabBar中只能配置最少两个、最多五个tab页签。
  • 当渲染顶部tabBar的时候,不显示icon,只显示文本。

1. tabBar的6个组成部分

117.【微信小程序】

2. tabBar节点的配置项

117.【微信小程序】

  1. 每个tab项的配置选项

117.【微信小程序】
app.json

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/test/test",
        "text": "测试"
      }
    ]
  },

117.【微信小程序】

  1. 配置tabBar

实现步骤:

  1. 拷贝图标资源。
  • 把资料目录中的images文件夹,拷贝到小程序项目根目录中。
  • 将需要用到的小图标分为3组,每组两个:
    • 图片名称包含-active的是选中转换的图标。
    • 图片名称中不包含- active的是默认图标。
  1. 新建3个对应的tab页面。
  2. 配置tab的对应选项。

1. 打开app.json配置文件,和pages、window评级,新增 toBar 节点。
2. tabBar节点中,新增list数组,这个数组中存放的是每个tab项的配置对象
3. 在list数组中,新增每一个tab项的配置对象。对象的属性包括如下:
	(1).pagePath: 指定当前tab对应的页面路径 (必填)
	(2).text指定当前tab上按钮的文字(必填)
	(3).iconPath指定当前tab未选中时候的图片路径(可选)
	(4).selectdIconPath: 指定但钱tab被选中后高亮的图片路径(可选)

app.json

{
  "pages":[
      "pages/home/home",  
      "pages/message/message", 
      "pages/contact/contact"  
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "金橘社区",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  },
  "tabBar": {
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/index-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "信息",
      "iconPath": "images/mail.png",
      "selectedIconPath": "images/mail-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "电话",
      "iconPath": "images/phone.png",
      "selectedIconPath": "images/phone-active.png"
    }
  ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

117.【微信小程序】

9.页面配置 -(导航栏和tabBar)

(1).页面配置文件的作用

小程序中每个页面都有自己的 .json配置文件,用对当前页面的窗口外观、页面效果等进行配置。

页面配置只需要在一个对象中,直接编写属性就可以了
117.【微信小程序】

(2).页面配置文件中

这里完全和全局配置一样
117.【微信小程序】

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff0000"
}

10.网络数据请求-(Get和Post和Ajax)

(1).小程序中网络数据请求的两大限制

处于安全方面的考虑,小程序官方对数据接口的请求做出了两个限制。

  1. 只能请求HTTPS类型的接口。
  2. 必须将接口的域名添加到信任列表中。

117.【微信小程序】

(2).配置request合法域名
https://applet-base-api-t.itheima.net

配置步骤: 登入微信->微信小程序 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名
117.【微信小程序】
注意事项:

  1. 域名只支持https协议。
  2. 域名不能使用IP地址或Localhost。
  3. 域名必须经过ICP备案。
  4. 服务器域名一个月内最多可以申请5次修改。
(3).发起GET请求

调用威胁你小程序提供的wx.request()方法,可以发起Get数据请求

<!--pages/home/home.wxml-->
<text>首页</text>

<button type="primary" bindtap="getInfo">发起Get请求</button>
  getInfo(){
    wx.request({
      url: 'https://www.escook.cn/api/get',  // 1.路径
      method:'GET', // 2.请求方式
      data:{ // 3.发送到服务器的数据
        name:'zs',
        age:20
      },
      success:(resp)=>{ // 4.成功之后的结果数据
          console.log(resp)
      }
    })
  },

117.【微信小程序】
117.【微信小程序】

(4).发起Post请求

wxml

<button type="primary" bindtap="postInfo">发起Post请求</button>

js

  postInfo(){
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method:'POST',
      data:{
        name:'jsxs',
        age:33
      },
      success:(resp)=>{
        console.log(resp)
      }
    })
  },

117.【微信小程序】

(5).在页面刚加载时请求数据

在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数。

117.【微信小程序】

(6).跳过request合法域名校验

如果后端程序员仅仅提供了http协议的接口,暂时没有提供https协议的接口
此时为了不能耽误开发的进度,我们可以在微信开发者工具中,临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书,选项,跳过request合法域名的校验。

117.【微信小程序】
注意:
跳过request合法域名校验的选项,仅限在开发与调试阶段使用

(7).关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序不存在跨域的问题

Ajax技术的核心时依赖于浏览器的XMLHttpRequest这个对象,由于小程序的宿主环境时微信客户端而不是电脑,所以小程序中不能叫做 “发起Ajax请求”,而是叫做 “发起网络数据请求”

11.本地生活-案列

(1).实现步骤
  1. 新建项目并梳理项目结果
  2. 配置导航栏效果 (Window)
  3. 配置tabBar效果 (tarBar)
  4. 实现轮播图 (swiper)
  5. 实现九宫格 ()
(2).新建项目并梳理 (app.json)

1.关闭调试窗口的热重载警告
117.【微信小程序】
2.在app.json新建三个文件页面 (app.json)

{
  "pages":[
      "pages/home/home",
      "pages/message/message",
      "pages/contact/contact"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

117.【微信小程序】

(3).配置导航栏 (app.json)
{
  "pages":[
      "pages/home/home",
      "pages/message/message",
      "pages/contact/contact"
  ],
  "window":{
    "backgroundTextStyle":"dark",  // 下拉的圆点样式
    "navigationBarBackgroundColor": "#2b4b6b", //导航栏的颜色
    "navigationBarTitleText": "本地生活",  // 导航栏的文字
    "navigationBarTextStyle":"white", //导航栏文字的颜色
    "backgroundColor": "#efefef", // 下拉的背景色
    "enablePullDownRefresh": true //是否下拉
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

(4).配置底部tabBar (app.json)

先将我们的icon图片复制到项目中,然后编写tabBar

{
  "pages":[
      "pages/home/home",
      "pages/message/message",
      "pages/contact/contact"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活", 
    "navigationBarTextStyle":"white",
    "backgroundColor": "#efefef",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/index-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "images/mail.png",
      "selectedIconPath": "images/mail-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系",
      "iconPath": "images/phone.png",
      "selectedIconPath": "images/phone-active.png"
    }
  ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

117.【微信小程序】

(5).实现轮播图获取后端地址值
  1. 获取轮播图接口的地址
// GET
https://applet-base-api-t.itheima.net/slides

home.js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 存放轮播图的数组
    swiperList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 1. 挂载请求轮播图的图片
      this.getSwiperList()
  },
  // 获取轮播图数据的方法
  getSwiperList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method:'GET',
      success:(resp)=>{
        console.log(resp)
        this.setData({
          swiperList:resp.data
        }) 
      }
    })
  },
})

117.【微信小程序】

(6).实现轮播图展示页面

每个对象下面有两个属性: 一个是 id 另一个是 image
117.【微信小程序】
home.wxml: 我们需要使用Mustach语法

<!--pages/home/home.wxml-->
<!-- 轮播图的区域  第一个属性是: 小圆点。第二个属性是 循环-->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

home.wxss

/* pages/home/home.wxss */
swiper{
  height: 350rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}

117.【微信小程序】

(7).实现九宫格效果
https://applet-base-api-t.itheima.net/categories

home.js: 挂载九宫格的数据

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 存放轮播图的数组
    swiperList:[],
    // 存放九宫格
    gridList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 1. 挂载请求轮播图的图片
      this.getSwiperList()
      // 2.挂载九宫格图片
      this.getGridList()
  },
  // 获取轮播图数据的方法
  getSwiperList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method:'GET',
      success:(resp)=>{
        console.log('轮播图->',resp)
        this.setData({
          swiperList:resp.data
        }) 
      }
    })
  },
  getGridList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method:'GET',
      success:(resp)=>{
        console.log('九宫格->',resp)
          this.setData({
            gridList:resp.data
          })
      }
    })
  },
  })

117.【微信小程序】
home.wxml

<!--pages/home/home.wxml-->
<!-- 轮播图的区域 -->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="gird-list">
<view class="gird-item" wx:for="{{gridList}}" wx:key="id">
  <image src="{{item.icon}}"></image>
  <text>{{item.name}}</text>
</view>
</view>

home.wxss

.gird-item{
  /* background-color: rgb(10, 10, 10); */
  width: 33.3%;
  height: 200rpx;
  /* 横向布局 */
  display: flex;
  /* 让文本纵向布局 */
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 边框颜色 */
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  /* 盒子 */
  box-sizing: border-box;
}

.gird-list{
  /* 展示在一行 */
  display: flex;
  /* 假如一行盛不下,允许换行 */
  flex-wrap: wrap;
}
.gird-item image{
  width: 60rpx;
  height: 60rpx;
}
.gird-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}

117.【微信小程序】

(五)、小程序-视图与逻辑

1.页面导航 (导航传参-接参)

(1).什么是页面导航

页面导航指的是页面之间的相互跳转。列如: 浏览器中是实现页面导航的方式有如下两种:

  1. < a> 链接
  2. location.href
(2).小程序中实现页面导航的两种方式
  1. 声明式导航
    • 在页面上声明一个< navigator>导航组件。
    • 通过点击< navigator>组件实现页面跳转。
  1. 编程式导航
    • 调用小程序的导航API,实现页面的跳转。.

2.页面导航-声明式导航 (只写文件名即可)

(1).导航到tabBar页面

tabBar页面指的是被配置为 tabBar的页面。

使用< navigator>组件跳转到指定的tabBar页面时,需要指定url属性open-type属性;其中:

  • url 表示需要跳转的页面的地址,必须为 /开头。
  • open-type 表示跳转的方式,必须为 switchTab
<!-- 1.这里的url我们必须要以 / 开头 -->
<navigator url="/pages/message/message" open-type="switchTab">导航到信息页面</navigator>

117.【微信小程序】

(2).导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面。

使用< navigator>组件跳转到普通的非tabBar页面时,则需要指定url属性和open-type属性,其中:

  • url 表示要跳转的页面的地址,必须以 / 开头
  • open-type 表示跳转的方式,必须为 navigate

home.wxml

<!--pages/home/home.wxml-->
<text>首页</text>

<!-- 1.这里的url我们必须要以 / 开头 -->
<navigator url="/pages/info/info" open-type="navigate">导航到非tabBar页面</navigator>
<navigator url="/pages/info/info">导航到非tabBar页面</navigator>

117.【微信小程序】
注意: 为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略。

(3).后退导航

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

  • open-type 的值必须是: navigatBack,表示要进行后退导航。
  • delta的值必须是数字,表示要后退的层级。

info.wxml

<!--pages/info/info.wxml-->
<text>pages/info/info.wxml</text>
<view>资料</view>

<navigator open-type="navigateBack" delta="1">点我回退上一级</navigator>
<navigator open-type="navigateBack">点我回退上一级</navigator>

注意: 为了简便,如果只是后退到上一页面,则可以省略 delta属性,因为其默认值就是1。

3.页面导航-编程式导航 (只写文件名即可)

(1).导航到tabBar页面 (wx.switchTab(Object))

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

属性 类型 是否必须 说明
url string 必填 需要跳转的tabBar页面的路,路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功,失败都会执行)

home.js
1.我们只需要指定url即可,切url的文件只需要指定文件的名字即可不需要文件后缀

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  gotMessage(){
    // 1.我们只需要指定url即可,切url的文件只需要指定文件的名字即可不需要文件后缀。
    wx.switchTab({
      url: '/pages/contact/contact'
    })
  }
})

home.wxml

<!--pages/home/home.wxml-->
<text>首页</text>

<!-- 1.这里的url我们必须要以 / 开头 -->
<navigator url="/pages/message/message" open-type="switchTab">导航到tabBar页面</navigator>
<view>------------------------------------------------------</view>
<navigator url="/pages/info/info" open-type="navigate">导航到非tabBar页面</navigator>
<navigator url="/pages/info/info">导航到非tabBar页面</navigator>
<view>------------------------------------------------------</view>
<navigator open-type="navigateBack" delta="1"></navigator>
<view>------------------------------------------------------</view>
<button bindtap="gotMessage" type="primary">跳转到Message页面</button>

117.【微信小程序】

(2).导航到非tabBar页面 (wx.navigateTo(Object))

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

属性 类型 是否必选 说明
url string 是 需要跳转到非tabBar的页面。其中Object参数对象的属性列表
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功,失败都会执行)

home.js
1.我们只需要指定url即可,切url的文件只需要指定文件的名字即可不需要文件后缀。

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  gotMessage(){
    // 1.我们只需要指定url即可,切url的文件只需要指定文件的名字即可不需要文件后缀。
    wx.switchTab({
      url: '/pages/contact/contact'
    })
  },
  gotInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },
})

home.wxml

<button bindtap="gotInfo" type="primary">跳转到非tabBar页面</button>

117.【微信小程序】

(3).后退导航

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

属性 类型 是否必选 说明
delta number 否 返回的页面数,如果delta大于现有页面,则返回到首页
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功,失败都会执行)

info.js

// pages/info/info.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  //  1.返回上一级
  goBack(){
    wx.navigateBack({
      delta:1
    })
  },
})

info.wxml

<!--pages/info/info.wxml-->
<text>pages/info/info.wxml</text>
<view>资料</view>

<navigator open-type="navigateBack" delta="1">点我回退上一级</navigator>
<navigator open-type="navigateBack">点我回退上一级</navigator>

<view>----------------------------------</view>
<button type="primary" bindtap="goBack">点我返回上一级</button>

117.【微信小程序】

4.页面导航 - 导航传参

(1).声明式导航传参

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

  • 参数于路径之间使用? 分隔。
  • 参数键于参数值用=相连。
  • 不同参数用 & 分隔。

当有参数传递的时候,会自动调用

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

声明式导航传参

<navigator url="/pages/info/info?name=jsxs&age=20" open-type="navigate">声明式导航到 info 页面</navigator>

117.【微信小程序】

(2).编程式导航传参

调用 wx.nagvigateTo(Object) 方法跳转页面时,也可以携带参数,代码实列如下:
home.wxml

<!--pages/home/home.wxml-->
<text>首页</text>

<!-- 1.这里的url我们必须要以 / 开头 -->

<navigator url="/pages/info/info?name=jsxs&age=20" open-type="navigate">声明式导航到 info 页面</navigator>

<button type="default" bindtap="toInfo">编程式导航到 info</button>

home.js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  toInfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=jsxs1&age=12',
    })
  }
})

117.【微信小程序】

(3).在onLoad中接受导航参数

通过声明式导航传参编程式导航传参所携带的参数,可直接在onLoad事件中直接获取到.
home.wxml

<navigator url="/pages/info/info?name=jsxs&age=20" open-type="navigate">声明式导航到 info 页面</navigator>

info.js : onLoad函数是微信自带的,我们通过这个函数进行获取上个页面传递过来的数据

// pages/info/info.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      name:'',
      age:''
  },
  //  1.返回上一级
  goBack(){
    wx.navigateBack({
      delta:1
    })
  },
  goHome(){
    wx.switchTab({
      url: '/pages/home/home',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log('options->',options)
    this.setData({
      name:options.name,
      age:options.age
    })
  },

})

info.wxml

<!--pages/info/info.wxml-->
<text>pages/info/info.wxml</text>
<view>资料</view>
<view>----------------------------------</view>
<button type="default" bindtap="goHome">点击我回主页</button>
<view>
  <text>{{name}}</text>
  <hr/>
  <text>{{age}}</text>
</view>

117.【微信小程序】

5.页面事件-下拉刷新

(1).什么是下拉刷新

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

(2).全局刷新和局部刷新
  1. 全局开启下拉刷新。
    • 在app.json的window节点中,将enablePullDownRefresh设置为true。
  1. 局部开启下拉刷新。
    • 在xxxx.json的window节点中,将enablePullDownRefresh设置为true。

xxx.json的页面下开启下拉

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}
(3).监听页面的下拉刷新事件 ⭐

监听下拉刷新的事件: 当下拉的时候会自动调用

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

messages.wxml

<!--pages/message/message.wxml-->
<text>信息</text>

<button type="default" bindtap="addCount">+1</button>
<view>
<text>总数: {{count}}</text>
</view>

messages.js

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    count:0
  },
  addCount(){
    console.log('this->',this)
    this.setData({
      count:this.data.count+1
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
      this.setData({
        count:0
      })
  },
})

117.【微信小程序】

(4).停止下拉刷新的操作
  // 当数据重置成功之后,调用此函数,关闭下拉刷新的效果
  wx.stopPullDownRefresh()

info.js

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    count:0
  },
  addCount(){
    console.log('this->',this)
    this.setData({
      count:this.data.count+1
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
      this.setData({
        count:0
      })
      // 当数据重置成功之后,调用此函数,关闭下拉刷新的效果
      wx.stopPullDownRefresh()
  },
})

117.【微信小程序】

6.页面事件-上拉触底事件

(1). 什么是上拉触底

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为(相当于分页)。

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

在页面的 .js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件。

当页面到达底部50px的时候,会自动触发

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  )
  },

注意: 当我们已经处于请求下一个页面的时候,不能让用户再次上拉请求。我们要设置一个限制请求的过程。

(3).配置上拉触底距离

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

7.页面事件-上拉触底案列

(1).案列实现的步骤
  1. 定义获取随机颜色的方法。
  2. 在页面加载时获取初始化数据。
  3. 渲染UI结构并美化页面效果。
  4. 在上拉触底时调用获取随机颜色的方法
  5. 添加Loading提示效果
  6. 对上拉触底进行节流处理
(2).获取一个随机颜色
// pages/contact/contact.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      colorList:[]
  },
  getColors(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color', //url
      method:'GET',  // 方式
      success:(resp)=>{  // 成功回调
        console.log('随机颜色->',resp.data.data)
        this.setData({
          colorList:[...this.data.colorList,...resp.data.data]  // 把新增的数据汇总到一起,并不是替换
        })
        console.log(this.data.colorList)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  }
})

117.【微信小程序】

(3).渲染UI结构并美化页面效果

contact.wxml

<!--pages/contact/contact.wxml-->
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">
{{item}}
</view>
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">
{{item}}
</view>

contact.wxss

/* pages/contact/contact.wxss */
.num-item{
  border: 1px solid red;
  border-radius: 8rpx;
  line-height: 200rpx;
  text-align: center;
}

117.【微信小程序】

(4).在上拉触底时调用获取随机颜色的方法

contact.js

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },
// pages/contact/contact.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      colorList:[]
  },
  getColors(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color', //url
      method:'GET',  // 方式
      success:(resp)=>{  // 成功回调
        console.log('随机颜色->',resp.data)
        this.setData({
          colorList:[...this.data.colorList,...resp.data.data]  // 把新增的数据汇总到一起,并不是替换
        })
        console.log(this.data.colorList)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

117.【微信小程序】

(5).设置节流的操作

我们查看微信API找到微信官方提供的 加载接口
这个Loading不会自动的关闭,只有我们手动关闭
117.【微信小程序】
基本思路: 我们只需要在调用方法的成功之前,一直处于加载的页面。然后成功的时候把加载的页面给关闭了,就是限流成功!!

// pages/contact/contact.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      colorList:[],
      count:0
  },
  getColors(){
    // 1.这里还没有进入成功的页面。
      wx.showLoading({
        title: '正在努力加载数据中...',
        mask:true
      })
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color', //url
      method:'GET',  // 方式
      success:(resp)=>{  // 成功回调
        console.log('随机颜色->',resp.data)
        this.setData({
          colorList:[...this.data.colorList,...resp.data.data]  // 把新增的数据汇总到一起,并不是替换
        })
        console.log(this.data.colorList)
      },
      complete:()=>{
         // 关闭加载的操作
        wx.hideLoading()
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },

})

117.【微信小程序】

8.自定义编译模式

(1).添加自定义编译模式

如何配置自定义编译模式: 1.点击普通编译。2.点击自定义编译。3.修改参数
117.【微信小程序】

(2).如何删除自定义编译模式

如何删除自定义的模板
117.【微信小程序】

(五)、生命周期

117.【微信小程序】

1.什么是生命周期

生命周期 是指一个对象从 创建-》运行-》销毁的整个阶段,强调的是一个时间段。列如:

  • 张三出生,表示生命周期的开始
  • 张三离世,表示生命周期的结束

2.声明周期的分类

在小程序中,生命周期分为两类

  1. 应用生命周期
    • 特指小程序从启动 -> 运行 -> 销毁的过程
  1. 页面生命周期
    • 特指小程序中,每个页面的加载 -> 渲染 -> 销毁的过程

其中,页面的声明周期范围比较少,应用程序的生命周期范围比较大。应用生命周期包含页面生命周期。

3.什么是生命周期函数

生命周期函数: 是有小程序框架提供的内置函数,会伴随着生命周期,自动依次执行。

生命周期函数的作用: 允许程序员在特定的事件点,执行某些特定的操作。列如: 在页面钢架在的时候,可以在onLoad生命周期函数中初始化页面的数据。

生命周期强调的是时间段,生命周期函数强调的是时间点

4.生命周期函数的分类

小程序中的生命周期函数分为两类,分别是:

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

5.应用的生命周期函数 ⭐

小程序的应用生命周期函数需要在app.js中进行声明:
app.js: 1.小程序初始化完成。2.前台到后台<->后台到前台

// app.js
App({

  /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {
    // 1.这个函数通常用于初始化数据的.....
    console.log('小程序初始化完成.. app.js')
  },

  /**
   * 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) {
    console.log('从桌面到了小程序')
  },

  /**
   * 当小程序从前台进入后台,会触发 onHide
   */
  onHide: function () {
    console.log('从小程序到了桌面')
  },

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

6.页面的声明周期函数

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

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: { },

  /**
   * 生命周期函数--监听页面加载,一个页面只调用一次⭐⭐(挂载)
   */
  onLoad(options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成⭐⭐(初次渲染成功时)
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示⭐
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏⭐
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载只用一次⭐()
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作⭐(下拉)
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数⭐(上拉)
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {}
})

(六)、WXS脚本

1.WXS脚本-概述

(1).什么是WXS

WXS(WeXin Script)是小程序独有的一套脚本语言,结合WXML可以构建页面的结构。

(2).WXS的应用场景

wxml中无法调用在页面的.js中定义的函数,但是,wxml中可以调用wxs中定义的函数。因此,小程序中wxs的典型应用场景就是 "过滤器"

(3).WXS和JavaScript的关系

虽然WXS的语法类似于JavaScript,但是WXS和JavaScript是完全不同的两种语言

  1. WXS有自己的数据结构。
    • number数值类型、string 字符串数据类型、boolean布尔类型、objet对象类型。
    • function函数类型、array数组类型、data日期类型、regexp正则
  1. WXS不支持类似于ES6及以上的语法形式。
    • 不支持: let、const、解析复制、展开运算符、箭头函数、对象属性简写、etc
    • 支持: var定义变量、普通function函数等类似于ES5的语法…
  1. WXS遵循CommnJS规范。
    • module 对象
    • require()函数
    • module.exports对象: 主要作用就是共享出去..(类似于Vue)
(4).基本步骤
------定义和配置wxs过滤器
1.设置wxs的普通函数
2.将这个函数return出去
3.将这个过滤器共享出去: module.exports.函数名


2.内嵌WXS脚本

wxs代码可以编写在wxml文件中的< wxs>标签内,就像javascript代码可以编写在html文件中的< script>标签内一样。

wxm文件中的每个< wxs>< /wxs>标签,必须提供module属性,用来指定当前wxs的模块名称,方便再wxml中访问模块中的成员。

(1).利用wxs实现过滤大写

内嵌的时候 module属性一定要写,并且一定要return。
message.wxml

1. 定义 
module.exports.wxml调用得到方法名=function(形参){
	return 形参.toUpperCase() ->转换为大写的脚本
}

<wxs module="m1">
  module.exports.toUpper=function(str){
      return str.toUpperCase()
  }
</wxs>

2.使用 module.方法名(data区域的值)
<!--pages/message/message.wxml-->

<view>小写: {{username}}</view>

<view>过滤: {{m1.toUpper(username)}}</view>
<!-- 1.设置大写的过滤器方法 -->
<wxs module="m1">
  module.exports.toUpper=function(str){
      return str.toUpperCase()
  }
</wxs>

117.【微信小程序】

3.外嵌WXS脚本

wxs 代码还可以编写在以 .wxs为后缀名的文件内,就像javaScript代码可以编写在以.js为后缀名的文件中一样。

(1).利用wxs过滤为小写
  1. 配置wxs脚本

在utils包中创建tools.wxs

// 1.将字符串转换为小写的方法 ->一定要return
function toLower(str){
 return  str.toLowerCase()
}
// 2. 将这个方法共享出去 ->一定要共享出去
module.exports={`在这里插入代码片`
  toLower:toLower
}
  1. 使用外观的wxs脚本

在wxml中引入外联的wxs脚本时,必须为< wxs>标签添加module和src属性,其中:

  • module 用来指定模块的名称
  • src用来指定要引入的脚本的路径,其必须是相对路径

``

<!--pages/message/message.wxml-->

<view>小写: {{username}}</view>

<view>过滤为大写: {{m1.toUpper(username)}}</view>

<view>
  国家: {{country}}
</view>

<view>
  过滤为小写: {{m2.toLower(country)}}
</view>
<!-- 2.外嵌WXS -->
<wxs src="../../utils/tools.wxs" module="m2"></wxs>
<!-- 1.设置大写的过滤器方法 -->
<wxs module="m1">
  module.exports.toUpper=function(str){
      return str.toUpperCase()
  }
</wxs>

117.【微信小程序】

4.WXS脚本-WXS的特点

(1).与JavaScript不同

为了降低wxs(WeiXin Script)的学习成本,wxs语言在设计时借鉴了JavaScript的语法,但本质上,wxs和JavScript是完全不同的两种语言

(2).不能作为组件的事件回顾

wxs典型的应用场景就是: 过滤器,经常配合Mustache语法进行使用。

<view>过滤: {{m1.toUpper(username)}}</view>

但是,在wxs中定义的函数不能作为组件的事件回调函数。下面是错误的

<button bindtap="m2.toUpper"></button>
(3).隔离性

隔离性指的是 wxs的运行环境和其他JavaScript代码是隔离的。

  1. wxs不能调用js中定义的函数
  2. wxs不能调用小程序提供的API
(4).性能好
  1. 在IOS设备上,小程序内的WXS会比JavaScript代码快2 -20 倍。
  2. 在安卓的设备上,二者的运行效率无差异。

5.本地生活案列 -> (商店详情页面)

(1).给每一个图标都修改为导航栏

home.wxml

非编程式导航->我们这里直接在url的路径里面写Mustache语法。
<navigator class="gird-item" wx:for="{{gridList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}" >
  <image src="{{item.icon}}"></image>
  <text>{{item.name}}</text>
</navigator>
<!--pages/home/home.wxml-->
<!-- 轮播图的区域 -->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="gird-list">
<!-- Mustach语法可以拼接传参 -->
<navigator class="gird-item" wx:for="{{gridList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}" >
  <image src="{{item.icon}}"></image>
  <text>{{item.name}}</text>
</navigator>
</view>

<!-- 图片区域 -->

<view class="img-box">
  <image src="" mode=""/>
</view>
(2).给导航栏动态设置标题

117.【微信小程序】

shoplist.wxml

  • 为什么不在onLoad()这个钩子函数中,进行标题设置呢。因为onRead()函数是在小程序生命周期中担任页面渲染成功后的操作,所以我们需要在小程序渲染成功之后,再去自定义修改页面。这样的话需要onLoad()携带的参数需要转存储到data区域。onRead()通过转存储后的数据进行操作
// pages/shoplist/shoplist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    params:''   // 页面传递过来的参数
  },

  onLoad(options) { // 1.这里接受到上一个页面传递过来的参数
    this.setData({
      params:options
    })
  },

  onReady() {  // 2.这里小程序初次渲染成功,我们在这里添加自己的渲染
    console.log('商店链表的this->',this)
    wx.setNavigationBarTitle({ // 3.因为这里我们接收不到onLoad的参数,所以onLoad需要转存储到data区域
      title: this.data.params.title,
    })
  }
})

117.【微信小程序】

(3).列表页面的API接口

以分页的形式,加载指定分类下商铺列表的数据:

  1. 接口地址
这里面的cate_id是动态参数,表示分类的id
https://applet-base-api-t.itheima.net/categories/:id/shops
  1. 请求方式
    • GET请求
  1. 请求参数
    • _page 标签请求第几页的数据。
    • _limit表示煤业请求多少条数据。
(4).完善下拉触底和上拉刷新

我们在下拉触底的时候,要注意节流。并且假如页面的总数到达最后一页了,我们需要制止继续网络请求的操作。

1.上拉触底
 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.page*this.data.pageSize>=this.data.total){
      this.setData({
        IsNoPage:true
      })
      return wx.showToast({
        title: '最后一页了',
        icon:'error'
      })
    }
    this.setData({
      page:this.data.page+1
    })
    this.getShopList()
  },
  2.下拉刷新
(1).设置出下拉刷新的操作->并设置样式
"enablePullDownRefresh": true
wx.stopPullDownRefresh()
(2).重置data区域的值 -> 页码 和 shopList

shoplist.js

// pages/shoplist/shoplist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    params:'',   // 页面传递过来的参数
    shopList:[], // 查询到的数据列表
    page:1, // 页数
    pageSize:10, //一页几条
    total:0, // 总共多少条
    IsNoPage:false
  },

  onLoad(options) { // 1.这里接受到上一个页面传递过来的参数
    // 1.将参数转存储到data区域
    this.setData({
      params:options
    })
    // 2.调用网络请求
    this.getShopList()
  },
  getShopList(){ // 通过网络请求获取列表
    wx.showLoading({
      title: '正在加载',
      mask:true
    })
          wx.request({
      // 这里我们动态传参-? 需要用到模板字符串和${}
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.params.id}/shops`,
      method:'GET',
      data:{
        _page:this.data.page, //传递页面的参数
        _limit:this.data.pageSize  // 传递页面的条数
      },
      success:(resp)=>{
        console.log('商店列表resp->',resp)
        this.setData({
          shopList:[...this.data.shopList,...resp.data],  // 链表新数据和旧数据都要
          total:resp.header['X-Total-Count']-0  //赋值总条数并转换为数字
        })
      },
      complete:()=>{
        wx.hideLoading();
      }
    })
  },

  onReady() {  // 2.这里小程序初次渲染成功,我们在这里添加自己的渲染
    console.log('商店链表的this->',this)
    wx.setNavigationBarTitle({ // 3.因为这里我们接收不到onLoad的参数,所以onLoad需要转存储到data区域
      title: this.data.params.title,
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      page:0
    })
    wx.stopPullDownRefresh()
    this.getShopList()
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.page*this.data.pageSize>=this.data.total){
      this.setData({
        IsNoPage:true
      })
      return wx.showToast({
        title: '最后一页了',
        icon:'error'
      })
    }
    this.setData({
      page:this.data.page+1
    })
    this.getShopList()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

117.【微信小程序】

(5).利用wxs过滤手机号

将手机格式过滤为 xxx-xxxx-xxxx。
tools.wxs

function spiltPhone(str){
    if(str!==null){
      // 假如是座机原样输出
      if(str.length!==11){return str}
      // 假如是手机号
      var arr=str.split('')  //根据'' 分割
      arr.splice(3,0,'-') // 在数组的第三个索引位置,删除0个元素,添加成-
      arr.splice(8,0,'-')// 在数组的第八个索引位置,删除0个元素,添加成-
      return arr.join('') // 将数组用''拼凑成字符串
  }
}
// 2. 将这个方法共享出去
module.exports={
  spiltPhone:spiltPhone
}

shoplist.wxml

<wxs module="phone" src="../../utils/tools.wxs"></wxs>
<!--pages/shoplist/shoplist.wxml-->

<wxs module="phone" src="../../utils/tools.wxs"></wxs>

<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.images[0]}}" mode=""/>
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话:{{phone.spiltPhone(item.phone)}}</text>
    <text>地址:{{item.address}}</text>
    <text>营业时间:{{item.businessHours}}</text>
  </view>
</view>

<block wx:if="{{IsNoPage}}" class="tip">
  <text>没有数据了...</text>
</block>

shoplist.wxss文章来源地址https://www.toymoban.com/news/detail-461566.html


/* 1.整体布局  */
.shop-item{
  /* 页面左右布局 */
  display: flex;
  /* 内边距整体移动一点 */
  padding: 15rpx;
  /* 边框 */
  border: 1px solid #efefef;
  /* 外边距 */
  margin: 15rpx;
  border-radius: 8rpx;
  /* 盒子阴影 */
  box-shadow: 1rpx 1rpx 15rpx #dddddd;
}
/* 2.图片布局 */
.thumb image{
  width: 250rpx;
  height: 250rpx;
  /* 去掉图片之间的间距 */
  display: block;
  /* 右边距加点 */
  margin-right: 10rpx;
}
/* 3.文本布局 */
.info{
  /* 里面的元素,左右布局->目的是分行 */
  display: flex;
  /* 上下垂直布局->在分行的基础上 */
  flex-direction: column;
  /* 在以上的基础上上文本分散垂直对齐 */
  justify-content: space-around;
  font-size: 24rpx;
}
/* 加粗文本标题 */
.info text:nth-child(1){
  font-weight: bold;
}

到了这里,关于117.【微信小程序】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/qq_69683957/article/details/130794560

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

领支付宝红包 赞助服务器费用

相关文章

  • 生成普通的微信小程序二维码

    2024年02月14日
    浏览(10)
  • 微信小程序之普通页面跳转到tabBar页面

    前言 最近在做一个投稿小程序,主要功能是作者可以在微信小程序登录,注册,然后登陆进入主页面,可以投递稿件以及浏览自己已投递的稿件,和个人中心等主要功能,做的比较简单,因为本人对于小程序是一个初学者。 遇到的问题 登录页面不是tabBar页面,只是一个普通

    2024年02月08日
    浏览(15)
  • 微信小程序扫描普通二维码跳转到小程序指定页面

    二维码就相当于是一个链接 相当于我们点击一个链接跳转到另一个页面 只不过这里是扫码的形式 1、首先我们需要在微信公众平台的开发管理——开发设置,找到(扫普通链接二维码打开小程序),点击添加,会出现下面的页面,配置好之后点击保存就行了 2、配置好之后我

    2024年02月11日
    浏览(12)
  • 微信小程序生态4-扫普通二维码进入小程序、打开短链接进入小程序

    微信小程序生态1-初识小程序 微信小程序生态2-创建一个微信小程序 微信小程序生态3-微信小程序登录流程设计 微信小程序生态4-扫普通二维码进入小程序、打开短链接进入小程序 微信小程序生态5-微信公众号扫码登录PC端网页 微信小程序生态6-微信公众号授权登录(适用于H

    2024年02月02日
    浏览(12)
  • 微信小程序后台:解决微信扫普通链接地址无法跳转到体验版微信的问题,配置普通链接二维码规则解释和理解

    一、现象与原因 最近突然发现微信管理平台中,设置好的普通二维码连接跳转到体验版小程序的功能,没有区分体验版和生产版,全部到生产环境的小程序了。 这现象,跟我以前理解的可不一样,可能会出生产的事故,马上仔细研究了研究。 研究发现,“扫普通链接二维码

    2024年02月15日
    浏览(14)
  • 微信小程序——小程序跳转外部网页

    1.进行小程序与微信公众号的关联操作 2.引导小程序关注公众号,并进入公众号首页。 3.在公众号首页菜单栏里添加外网链接。

    2024年02月08日
    浏览(14)
  • 微信小程序 - 打开跳转 H5 网页链接(小程序内打开网页)

    本文将从 0 到 1,一步步拆分,详细介绍如何实现该功能。 这种需求在小程序中很常见,如下图所示: 首先,需要有一个页面,并且在 app.json → page[] 中正常注册,它用于承载 webview 组件。 在 page 目录新建一个页面(与创建普通页面方法一致),如下图所示: 设置 webview 页

    2023年04月08日
    浏览(6)
  • 微信小程序内嵌H5网页

    1.登录微信公众平台,选择对应的小程序进入(个人类型的小程序暂不支持使用) 2.在小程序后台左侧菜单选择“开发”–“开发管理”–“开发设置”–“业务域名”–“添加”–扫码进入,点击“下载检验文件”下载到电脑本地,提供给小程序开发运营者进行配置,将文

    2024年02月11日
    浏览(9)
  • 微信小程序如何跳转到网页

    微信小程序可以使用 wx.navigateToMiniProgram 方法实现跳转到其他小程序,但是跳转到网页需要使用 wx.navigateTo 方法,并将所跳转的地址写在URL参数中。 例如,跳转到百度的网页可以使用以下代码: 其中,URL参数后面可以带上查询参数,如: 这样就可以在百度上搜索“小程序”

    2024年02月04日
    浏览(16)
  • uniapp 微信小程序 内嵌H5网页办法

    2024年01月20日
    浏览(9)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包