微信小程序07-开发进阶

零、文章目录

微信小程序07-开发进阶

1、案例：自定义标签栏

（1）案例分析

• 需求：通过前面的学习，我们知道微信小程序的底部标签栏可以在app.json全局配置文件中通过添加tabBar配置项的属性来实现。但是在实际开发中，底部标签栏会有不同的需求，例如需要设计更美观的样式或者需要添加更多的功能，此时就需要自定义标签栏。

（2）知识储备-创建自定义组件

• 自定义组件

  • 在实际开发中，可能会遇到多个页面中有相同功能区域的情况。例如，多个页面中都有搜索栏。如果为每个页面复制同一份代码，会造成代码冗余，而且不利于后期代码维护。此时，开发者可以将页面内的重复部分封装成自定义组件，以便于在不同的页面中重复使用，从而有助于代码维护。
  • 一个自定义组件是由JSON、JS、WXML和WXSS这4个文件组成的，自定义组件的组成文件通常存放在项目的components目录中，并且为了保证目录结构的清晰，通常会将不同的组件放在不同的子目录下。

• 创建自定义组件

  • ①打开微信开发者工具，创建一个新项目或打开现有项目。

  • ②在项目的根目录中右键单击，选择“新建文件夹”，然后输入新文件夹的名称“components”，按回车键确认。

  • ③在components文件夹上右键单击，选择“新建文件夹”，然后输入新文件夹的名称“test”，按回车键确认。

  • ④在test文件夹上右键单击，选择“新建Component”，然后输入组件的名称“test”，按回车键确认。确认后，微信开发者工具会自动生成组件的JS、JSON、WXML和WXSS文件。

  • 组件和页面的JS与JSON文件区别如下

    • ①组件的JSON文件中需要声明component属性，将属性值设为true，表示它是一个组件，而页面的JSON文件不需要添加该属性。

    • ②组件的JS文件中调用的是Component()函数，而页面的JS文件调用的是Page()函数。

    • ③组件的事件处理函数需要定义到methods中，页面的事件处理函数需要定义在Page({})中。

（2）知识储备-使用自定义组件

• 自定义组件创建完成后，在使用自定义组件之前，首先要引用自定义组件，需要提供每个自定义组件的标签名和对应自定义组件的文件路径。

• 自定义组件的引用方式分为局部引用和全局引用

  • 在页面的JSON文件中引用自定义组件的方式称为局部引用，局部引用的自定义组件只能在当前被引用的页面内使用；
  • 在app.json全局配置文件中引用组件的方式称为全局引用，全局引用的自定义组件可以在每个页面中使用。

• 局部引用

  • 在pages/index/index.json文件中添加引用自定义组件的代码

  "usingComponents": {"test": "/components/test/test"
  }
  

  • 在pages/index/index.wxml文件中通过<test>标签使用自定义组件

  <test></test>
  

• 全局引用

  • 全局配置文件app.json文件中添加引用自定义组件的代码

  "usingComponents": {"test": "/components/test/test"
  }
  

  • 在pages/index/index.wxml文件中，通过<test>标签使用组件

  <test></test>
  

（2）知识储备-用自定义组件渲染标签栏

• 微信小程序允许开发者使用自定义组件渲染标签栏，这样开发者就能自定义标签栏的显示效果，并且可以为自定义标签栏添加功能。

• 首先在app.json文件中配置两个页面

"pages": ["pages/home/home","pages/message/message"
],

• 然后在app.json文件的tabBar配置项中添加"custom": true开启自定义标签栏

"tabBar": {"custom": true,"list": [{"pagePath": "pages/home/home"}, {"pagePath": "pages/message/message"}]
} 

• 在项目根目录下创建名称为custom-tab-bar的文件夹，并在该文件夹中创建名称为index的组件，最后使用自定义组件的方式编写index组件即可。

（2）知识储备-Vant Weapp组件库

• Vant Weapp组件库

  • 在微信小程序实际开发中，内置的组件经常无法满足需求，手动编写自定义组件又会花费大量的时间，此时可以使用市场上成熟的开源组件库，提高开发效率。
  • Vant Weapp是有赞前端团队开发的一套开源的微信小程序UI组件库，其界面风格统一、功能齐全，受到广泛关注。Vant Weapp组件库提供了一整套UI基础组件和业务组件，能够快速搭建出风格统一的页面。
  • 若要在微信小程序中使用Vant Weapp组件库，需要利用Node.js提供的npm命令将Vant Weapp组件库安装到项目中，并在项目中进行一些配置。

• 具体的使用步骤如下

  • ①在微信开发者工具中创建一个新的微信小程序项目，项目名称为“Vant”。
  • ②打开命令提示符，切换工作目录到本项目的根目录，然后在命令提示符中执行以下命令，生成package.json文件。

  npm init -y
  

  • ③在命令提示符中执行以下命令，安装Vant Weapp包。

  npm install @vant/weapp@1.10.4 -S –production
  

  • ④修改app.json全局配置文件，将里面的"style": "v2"配置项删除，该配置项表示使用微信小程序的新版基础组件样式，删除该配置项表示使用旧版基础组件样式。Vant Weapp组件库需要覆盖基础组件样式才能生效，由于新版基础组件样式难以覆盖，可能会出现样式混乱的问题，所以应使用旧版基础组件样式。
  • ⑤构建npm。微信小程序不能直接使用npm安装的包，需要将npm安装的包转换成微信小程序可以使用的包，具体方法是在微信开发者工具的菜单栏中执行“工具”→“构建npm”命令。
    • miniprogram_npm是构建npm完成后的包的存放目录
    • node_modules是npm安装的包的存放目录。

  

• 代码演示button组件使用

  • 在app.json文件或页面的JSON文件的usingComponents配置项中引入button组件，以app.json文件为例。

  "usingComponents": {"van-button": "@vant/weapp/button/index"
  }
  

  • 在pages/index/index.wxml文件中使用button组件。

  <van-button type="primary">按钮</van-button>
  

（3）案例实现

• 准备工作

  • ①创建项目。在微信开发者工具中创建一个新的微信小程序项目，项目名称为“自定义标签栏”，模板选择“不使用模板”。
  • ②安装Vant Weapp组件库。根据知识储备中的步骤进行安装。
  • ③创建images文件夹。复制需要的图片素材进去，该文件夹保存了自定义标签栏的图片。

• 项目初始化

  • ①创建自定义组件。在项目根目录下创建custom-tab-bar文件夹，然后在custom-tab-bar文件夹中创建index组件。
  • ②编写全局配置文件app.json。

  {"pages": ["pages/home/home","pages/message/message","pages/contact/contact"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "自定义标签栏","navigationBarTextStyle": "black"},"tabBar": {"custom": true,"list": [{"pagePath": "pages/home/home"}, {"pagePath": "pages/message/message"}, {"pagePath": "pages/contact/contact"}]},"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index"},"sitemapLocation": "sitemap.json"
  }
  

  • ③编写3个页面中的内容。以pages/home/home页面为例，编写pages/home/home.wxml文件。

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

• **实现标签栏页面布局：**在custom-tab-bar/index.wxml文件中实现页面布局

<!--components/custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange"><van-tabbar-item wx:for="{{ list }}" wx:key="index" name="{{ item.name }}"><image slot="icon" src="{{ item.iconPath }}" mode="aspectFit" style="width: 30px; height: 18px;" /><image slot="icon-active" src="{{ item.selectedIconPath }}" mode="aspectFit" style="width: 30px; height: 18px;" />{{ item.text }}</van-tabbar-item>
</van-tabbar>

• 实现标签栏页面逻辑

  • 在custom-tab-bar/index.js文件中编写标签栏逻辑。

  // components/custom-tab-bar/index.js
  Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {active: 'home',list: [{// "pagePath": "/pages/home/home","text": "首页","iconPath": "/images/tabs/home.png","selectedIconPath": "/images/tabs/home-active.png","name": "home"}, {// "pagePath": "/pages/message/message","text": "消息","iconPath": "/images/tabs/message.png","selectedIconPath": "/images/tabs/message-active.png","name": "message"}, {"pagePath": "/pages/contact/contact","text": "联系我们","iconPath": "/images/tabs/contact.png","selectedIconPath": "/images/tabs/contact-active.png","name": "contact"}]},/*** 组件的方法列表*/methods: {onChange({ detail }) {wx.switchTab({url: `/pages/${ detail }/${ detail }`,})}}  
  })
  

  • 在pages/home/home.js文件的Page({})中编写onShow()函数，将该页面对应的标签项激活。

  onShow: function () {this.getTabBar().setData({active: 'home'})
  }, 
  

  • 在pages/message/message.js文件的Page({})中编写onShow()函数，将该页面对应的标签项激活。

  onShow: function () {this.getTabBar().setData({active: 'message'})
  }, 
  

  • 在pages/contact/contact.js文件的Page({})中编写onShow()函数，将该页面对应的标签项激活。

  onShow: function () {this.getTabBar().setData({active: 'contact'})
  }, 
  

• 页面实现效果

2、案例：电影列表

（1）案例分析

• 需求：电影列表”微信小程序用于展示正在热映的电影。
• “电影列表”微信小程序利用WeUI组件库实现页面效果，页面顶部有一个标签栏，标签栏中有3个标签项，分别是“正在热映”“搜索”“分类”，当用户点击其中一个标签项时，就会跳转到对应的标签页。
• 页面顶部的标签栏使用了WeUI组件库中的tab和navbar组件。
  • “正在热映”标签页使用了WeUI组件库中的panel组件；
  • “搜索”标签页使用了WeUI组件库中的searchbar组件；
  • “分类”标签页使用了WeUI组件库中的grid组件。

（2）知识储备-WeUI组件库

• 在微信小程序开发中，经常会遇到多人协作开发的情况，不同开发者的风格不同，很难做到风格统一。微信官方设计团队为微信移动Web开发量身设计了一套与微信原生视觉体验一致的组件库——WeUI，该组件库可以让用户的使用感知更加统一。

• 在微信小程序中引入WeUI组件库有两种方式

  • 通过useExtendedLib扩展库引入WeUI组件库：app.json文件中的useExtendedLib配置项用于添加扩展库，通过这种方式引入的组件将不会计入代码包大小。在app.json文件中添加配置。

    "useExtendedLib": {"weui": true
    },
    

  • 通过npm构建的方式引入WeUI组件库

    • ①打开命令提示符，切换工作目录到当前项目的根目录，然后在命令提示符中执行如下命令，生成package.json文件。

    npm init -y
    

    • ②安装WeUI组件库。在项目根目录下执行以下命令进行安装。

    npm install weui-miniprogram@1.2.3 --save
    

    • ③构建npm。打开微信小程序开发工具，在菜单栏中执行“工具”→“构建npm”命令，构建完成后会在项目根目录生成miniprogram_npm文件夹。
    • ④在项目的app.wxss文件中引入WeUI组件库

    @import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
    

• WeUI组件库中的组件有两种类型

  • 一种是直接通过class样式类使用的组件
  • 另一种是需要在页面的JSON文件或app.json文件中引入的组件。
  • 关于这些组件的详细用法可以参考WeUI官方文档。

• 代码演示使用dialog弹窗组件

  • 在pages/index/index.json文件中引入dialog弹窗组件。

  {"usingComponents": {"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"}
  }
  

  • 在pages/index/index.wxml文件中使用dialog弹窗组件。

  <!--index.wxml-->
  <mp-dialog title="微信小程序" show="{{ show }}" bindbuttontap="tapDialogButton" buttons="{{ buttons }}"><view>好好学习，天天向上！！！</view>
  </mp-dialog>
  

  • 在pages/index/index.js文件中编写页面逻辑。

  // index.js
  Page({data: {show: true,buttons: [{text: '取消'},{text: '确认'}]},tapDialogButton: function (e) {console.log(e.detail)this.setData({show: false})}
  })
  

（2）知识储备-navigator组件

• navigator组件

  • 在HTML中，<a>标签可以实现页面间的跳转。
  • 在WXML中，navigator组件常用于实现页面之间的跳转。

  <navigator>navigator组件</navigator>
  

  • navigator组件的常用属性如下。

  

  • navigator组件的open-type属性用于指定跳转方式，常用的open-type合法值如下。
    • 跳转tabBar页面，必须设置open-type属性值为switchTab；
    • 跳转非tabBar页面且保留当前页面，设置open-type属性值为navigate时open-type属性可以省略。

  

• 代码演示

  • 创建pages/index/index和pages/detail/detail这两个页面。
  • 在pages/index/index.wxml文件中添加navigator组件，实现点击“跳转到详情页”的时候进行页面跳转。

  <navigator url="/pages/detail/detail?id=1" open-type="navigate">跳转到详情页</navigator>
  

  • 在pages/detail/detail.js文件的onLoad()函数中输出options参数的值。

  onLoad: function(options) {console.log(options)
  }
  

（3）案例实现

• 准备工作

  • ①创建项目。在微信开发者工具中创建一个新的微信小程序项目，项目名称为“电影列表”，模板选择“不使用模板”。
  • ②配置页面。本项目中的页面文件如下。

  

  • ③配置导航栏。在pages/index/index.json文件中配置页面导航栏。
  • ④配置样式和图片。在pages/index/index.wxss文件中配置样式，在images文件夹中放入图片素材。
  • ⑤通过useExtendedLib扩展库的方式引入WeUI组件库，在全局配置文件app.json中添加配置

  "useExtendedLib": {"weui": true
  } 
  

  

• **实现标签栏页面结构：**在pages/index/index.wxml文件中编写页面结构。

<!--index.wxml-->
<view class="page" data-weui-theme="{{ theme }}" data-weui-mode="{{ mode }}"><view class="page__bd" style="height: 100%;"><view class="weui-tab"><!-- 标签栏 --><view class="weui-navbar"><block wx:for="{{ tabs }}" wx:key="index"><view aria-selected="{{ activeIndex == index ? true: false }}" id="{{ index }}" class="weui-navbar__item {{ activeIndex == index ? 'weui-bar__item_on' : '' }}" aria-role="tab" bindtap="tabClick">{{ item }}</view></block></view><!-- 正在热映 --><view id="panel1" aria-labelledby="tab1" class="weui-tab__panel" aria-role="tabpanel" hidden="{{ activeIndex != 0 }}"><include src="tab1.wxml" /></view><!-- 搜索 --><view id="panel2" aria-labelledby="tab2" class="weui-tab__panel" aria-role="tabpanel" hidden="{{ activeIndex != 1 }}"><include src="tab2.wxml" /></view><!-- 分类 --><view id="panel3" aria-labelledby="tab3" class="weui-tab__panel" aria-role="tabpanel" hidden="{{ activeIndex != 2 }}"><include src="tab3.wxml" /></view></view></view>
</view>

• **实现“正在热映”标签页页面结构：**在pages/index/tab1.wxml文件中编写页面结构。

<view class="page__hd"><view class="page__title">电影列表</view>
</view>
<view class="page__bd"><view class="weui-panel weui-panel_access"><view class="weui-panel__bd"><navigator wx:for="{{ contents }}" wx:key="index" aria-labelledby="js_p1m1_bd" class="weui-media-box weui-media-box_appmsg" url="../test/test"><view aria-hidden="true" class="weui-media-box__hd"><image class="weui-media-box__thumb" src="{{ item.poster }}" /></view><view aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd"><text class="weui-media-box__title">{{ item.title }}</text><view class="weui-media-box__desc">{{ item.article }}</view></view></navigator></view><view class="weui-panel__ft"><navigator class="weui-cell weui-cell_active weui-cell_access weui-cell_link" url="../index/index"><text class="weui-cell__bd">查看更多</text><text class="weui-cell__ft"></text></navigator></view></view>
</view>

• **实现“搜索”标签页页面结构：**在pages/index/tab2.wxml文件中编写搜索框的页面结构。

<view class="page__bd"><view class="weui-search-bar {{ inputShowed ? 'weui-search-bar_focusing' : '' }}" id="searchBar"><form class="weui-search-bar__form" aria-role="combobox" aria-haspopup="true" aria-expanded="{{ inputVal.length > 0 ? 'true' : 'false' }}" aria-owns="searchResult"><view class="weui-search-bar__box"><i class="weui-icon-search"></i><input aria-controls="searchResult" type="text" class="weui-search-bar__input" placeholder="搜索" value="{{ inputVal }}" focus="{{ inputShowed }}" bindinput="inputTyping" /><view aria-role="button" aria-label="清除" class="weui-icon-clear" wx:if="{{ inputVal.length > 0 }}" bindtap="clearInput"></view></view><label class="weui-search-bar__label" bindtap="showInput"><i class="weui-icon-search"></i><span class="weui-search-bar__text">搜索</span></label></form><view aria-role="button" class="weui-search-bar__cancel-btn" bindtap="hideInput">取消</view></view>
</view>
<view class="page__bd page__bd_spacing"><view class="weui-flex"><view class="weui-flex__item"><view class="placeholder">英雄儿女</view></view></view><view class="weui-flex"><view class="weui-flex__item"><view class="placeholder">大国工匠</view></view><view class="weui-flex__item"><view class="placeholder">大国重器</view></view></view><view class="weui-flex"><view class="weui-flex__item"><view class="placeholder">长津湖</view></view><view class="weui-flex__item"><view class="placeholder">集结号</view></view><view class="weui-flex__item"><view class="placeholder">红海行动</view></view></view>
</view>

• **实现“分类”标签页页面结构：**在pages/index/tab3.wxml文件中编写页面结构。

<view class="weui-grids"><navigator class="weui-grid" aria-role="button" url="../index/index" wx:for="{{ grids }}" wx:key="index"><view class="weui-grid__icon"><image src="../../images/icon_tabbar.png" /></view><view class="weui-grid__label">{{ item }}</view></navigator>
</view>

• **实现页面逻辑：**在pages/index/index.js文件中实现页面逻辑。

// index.js
Page({data: {activeIndex: 0,tabs: ['正在热映', '搜索', '分类'],contents: [{title: '英雄儿女',article: '该影片讲述了多位英雄人物的故事，其中有浴血奋战的志愿军英模。',poster: '/images/1.jpg',}, {title: '大国工匠',article: '这部影片讲述了不同岗位劳动者用自己的灵巧双手，匠心筑梦的故事。',poster: '/images/2.jpg',}, {title: '我和我的祖国',article: '该影片取材新中国成立以来经历的无数个历史性经典瞬间，讲述普通人与国家之间息息相关密不可分的动人故事。',poster: '/images/3.jpg',}],inputShowed: false,inputVal: '',grids: ['爱情', '剧情', '喜剧', '家庭', '动画', '文艺', '都市', '动作', '科幻']},tabClick: function (e) {this.setData({activeIndex: e.currentTarget.id})},inputTyping: function(e) {this.setData({inputVal: e.detail.value})},showInput: function () {this.setData({inputShowed: true})},hideInput: function () {this.setData({inputVal: '',inputShowed: false})},clearInput() {this.setData({inputVal: ''})},})

• 页面实现效果