小程序进阶学习03

最新推荐文章于 2023-11-05 19:36:07 发布
最新推荐文章于 2023-11-05 19:36:07 发布
阅读量223 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44857287/article/details/109631575
版权

一、组件的使用

1.基础组件概念

1.1基础组件/拓展组件

​ 什么是组件：

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格一致的样式。
  • 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。
<tagname property="value">
Content goes here ...
</tagname>

注意：所有组件与属性都是小写，以连字符-连接

1.2公共属性

所有组件都具备这些属性：
id、class、style、hidden、data-*、 bind/catch

​

2.基础内容组件

1.text组件


<!-- 
  text 
  user-select  是否允许文本被 选中
  space  显示连续空格
  decode 是否解码
-->
<text user-select="{{ true }}" space="nbsp">hello         world</text>
<view></view>
<text decode="{{ true }}">hello &gt; world!</text>

2.icon组件

<!-- 
  icon
   type  图表的类型
   size   图标大小 默认是23
   color  颜色
 -->
 <icon type="download"></icon>
 <icon type="download" size="40"></icon>
 <icon type="download" size="40" color="red"></icon>

3.rich-text 富文本

​ 对比与vue中的v-html即可

1.字符串类型
<!-- 1.字符串形式 -->
<!-- <div><h2>我是H2标签</h2> </div>  -->
<rich-text nodes=" "></rich-text>
<rich-text nodes="<div><h2>我是H2标签</h2> </div>"></rich-text>
<rich-text nodes="{{ str }}"></rich-text>


2.数组类型

<!-- 2.数组的形式 -->
<!-- <h2 class="box">我是H2标签</h2> -->
<rich-text nodes="{{ arr }}"></rich-text>


// pages/page01/page01.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      str:"<h2>我是H2标签</h2>",
      // <h2 class="box">我是H2标签</h2> 
      arr:[
        {
          type:"node",  //是一个标签
          name:"h2",  // 标签的名字
          attrs:{  // 标签的属性
            class:"box"
          },
          children:[
            {
              type:"text",
              text:"我是H2标签-数组形式"
            }
          ]
        }
      ]
  },

  
})

3.视图容器

3.1 views视图容器

<view class="box" hover-class="active" hover-start-time="1000" hover-stay-time="5000">
</view>

3.2swiper/swiper-item滑块视图容器

（1）基础用法
<!-- 
  swiper  滑块视图容器
    默认的大小 width 整个100%  height  150px
    规定: swiper 的直接子元素，必须是swiper-item
   swiper-item默认的大小是 盛满整个swiper
-->
<swiper class="swiper"
  indicator-dots="{{ true }}"
  indicator-active-color="#fff"
  indicator-color="#000"
  autoplay="{{ true }}"
  interval="1000"
  circular="{{ true }}"
  vertical="{{false}}"
  display-multiple-items="1"
>
  <block wx:for="{{ imgs }}">
    <swiper-item>
      <image src="{{ item }}"></image>
    </swiper-item>
  </block>
</swiper>
（2）封装样式
<!-- 封装 -->
<view class="container">
  <!-- swiper图片内容 -->
  <swiper class="swiper"
    bindchange="_change"
    autoplay="{{ true }}"
    interval="1000"
    circular="{{ true }}"
  >
    <block wx:for="{{ imgs }}">
      <swiper-item>
        <image src="{{ item }}"></image>
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义dots -->
  <view class="custom-dots">
    <text class="{{ activeIndex == index ? 'active' : '' }}" wx:for="{{ imgs }}"></text>
  </view>

</view>

.swiper image{
  width: 100%;
  height: 150px;
}

.custom-dots text{
  display: inline-block;
  width: 10px;
  height: 5px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 10rpx;
}

.container{
  position: relative;
}
.container .custom-dots{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.container .active{
  border: 1px solid #f00;
}

// page02.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      imgs:[
        "/imgs/1.jpg",
        "/imgs/2.jpg",
        "/imgs/3.jpg",
      ],
      activeIndex:0, //默认是第一张图片
  },
  _change(e){
    console.log(e)
    // detail获取值，是当前组件私有的事件
    let activeIndex = e.detail.current;
    this.setData({
      activeIndex
    })
  }
})

3.3scroll-view可滚动视图区域

(1)竖向滚动

y：

1.给scroll-view加固定的高度

2.scroll-y 为真

<scroll-view class="box" scroll-y="{{ true }}">
    <view class="red">red</view>
    <view class="green">green</view>
    <view class="blue">blue</view>
</scroll-view>

 .red{
  width: 300px;
  height: 300px;
  background-color: red;
}
.green{
  width: 300px;
  height: 300px;
  background-color: green;
}
.blue{
  width: 300px;
  height: 300px;
  background-color: blue;
}

.box{
  height: 400px;
  width: 300px;
}
(2)横向滚动

​ X:

1.scroll-x 为真

2.给子元素设置行内的块状效果，父元素不能换行

<scroll-view class="box" scroll-x="{{ true }}">
    <view class="red">red</view>
    <view class="green">green</view>
    <view class="blue">blue</view>
    <view>删除</view>
</scroll-view>

.red{
  width: 300px;
  height: 100px;
  background-color: red;
}
.green{
  width: 300px;
  height: 100px;
  background-color: green;
}
.blue{
  width: 300px;
  height: 100px;
  background-color: blue;
}

.box{
  height: 100px;
  width: 100%;
  white-space: nowrap;  //   父元素不能换行
}

.box view{
  display: inline-block;  // 子元素行内块状元素
}
(3)demo
<!-- 案例 -->
<view class="category">
    <!-- 一级分类 -->
    <scroll-view class="category-l" scroll-y="{{ true }}">
      <block wx:for="{{ firstCate }}">
        <view bindtap="_active" data-id="c{{ index}}">
          {{ item.name }}
        </view>
      </block>
    </scroll-view>
    <!-- 二级分类 -->
    <scroll-view  class="category-r" scroll-y="{{ true }}" scroll-into-view="{{cateid}}"> 
      <block wx:for="{{ secondCate }}" wx:for-item="val">
        <view class="father" id="c{{ index }}">
           <block wx:for="{{ val }}">
             <view>
                {{ item.name }}
             </view>
           </block>
        </view>
      </block>
    </scroll-view>
</view>

/* 案例 */
.category{
  display: flex;
  height: 280px;
}

.category-l{
  flex: 1;
  /* border: 1px solid #f00; */
  height: 100%;
}
.category-r{
  flex: 3;
  height: 100%;
}

.category-l  view{
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  line-height: 40px;
  text-align: center;
}

.father{
  width: 100%;
  height: 160px;
  background-color: lightcoral;
  margin-bottom: 10px;
}

page({
	data:{
	 	cateid:"c0",
	 	firstCate:[
            {id:"c01",name:"电视"},
            {id:"c02",name:"手机"},
            {id:"c03",name:"电脑"},
            {id:"c04",name:"冰箱"},
            {id:"c05",name:"洗衣机"},
            {id:"c06",name:"空调"},
            {id:"c07",name:"热水箱"},
            {id:"c08",name:"热水器"},
          ],
         secondCate:[
            [
              {id:"u01",name:"小米电视"},
              {id:"u02",name:"海尔电视"},
              {id:"u03",name:"华为电视"},
            ],
            [
              {id:"u01",name:"小米手机"},
              {id:"u02",name:"海尔手机"},
              {id:"u03",name:"华为手机"},
            ],
        ]
	},
	_active(e){
     let cateid = e.currentTarget.dataset.id;
     console.log(cateid)
    this.setData({
      cateid,
    })
  }
})

4.表单组件

4.1input组件

type： 键盘类型 默认 text 文本输入

双向数据绑定：

​ vue 中 v-model

​ 小程序： model:属性

<view class="container">
  <view class="title">
    请填写一下信息
  </view>
  <view class="name">姓名：</view>
  <input class="username" bindinput="_input" placeholder="输入姓名" type="text" />

  <view class="name">联系方式:</view>
  <input class="username" model:value="{{ val }}" type="number" placeholder="输入联系方式" type="text" />

  <view class="name">密码:</view>
  <input class="username" maxlength="5" password type="number" placeholder="输入密码" type="text" />
</view>

<button bindtap="_search">搜索</button>

<view class="container">
  <form bindsubmit="_formSubmit">
    <view class="title">
      请填写一下信息
    </view>
    <view class="name">姓名：</view>
    <input class="username" name="username" bindinput="_input" placeholder="输入姓名" type="text" />

    <view class="name">联系方式:</view>
    <input class="username" name="phone" model:value="{{ val }}" type="number" placeholder="输入联系方式" type="text" />

    <view class="name">密码:</view>
    <input class="username" name="pass" maxlength="5" password type="number" placeholder="输入密码" type="text" />
    <view class="name">您的性别是:</view>
    <radio-group bindchange="_radioChange" name="sex">
      <radio value="m" checked>男</radio>
      <radio value="w" color="red">女</radio>
      <radio value="n">保密</radio>
    </radio-group>
    <view class="name">您的爱好是:</view>
    <checkbox-group bindchange="_checkboxChange" name="hobby">
      <checkbox value="游戏">游戏</checkbox>
      <checkbox value="睡觉">睡觉</checkbox>
      <checkbox value="吃饭" checked>吃饭</checkbox>
      <checkbox value="学习" color="red">学习</checkbox>
    </checkbox-group>
    <view class="name">您是否同意我们联系您本人:</view>
    <!-- <switch bindchange="_switchChange" type="switch"></switch> -->
    <switch name="isAgree" bindchange="_switchChange" type="checkbox"></switch>
    <view>您的地址是：{{ region }}</view>
    <picker mode="region" bindchange="_pickerChange" name="region">
      选择：
    </picker>
    <button type="primary" form-type="submit" size="default">提交</button>
    <button type="warn" form-type="reset" size="default">重置</button>
  </form>
</view>

// pages/page03/page03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:"",
    val:"",
    region:[],
  },
  // 键盘输入
  _input(e){
    // console.log(e.detail.value)
    // this.data.msg = e.detail.value
    // this.data.val = e.detail.value
    this.setData({
      val:e.detail.value
    })
  },
  // 搜索
  _search(){
    // console.log(this.data.msg)
    // 发起数据请求
    console.log(this.data.val)
  },
  // 单选按钮发生改变
  _radioChange(e){
    console.log(e)
  },
  // 多选按钮
  _checkboxChange(e){
    console.log(e)
  },
  // 开关选择器
  _switchChange(e){
    console.log(e)
  },
  _pickerChange(e){
    // console.log(e)
    this.setData({
      region:e.detail.value
    })
  },
  // 表单提交
  _formSubmit(e){
    console.log(e)
  }
  
})

注意事项：

  1. 表单提交， 使用form， 给button设置 form-type属性， 值是submit 是提交，值为reset时候是重置
  2. 当点击按钮的时候，会触发 form表单的 bindsubmit及bindreset事件
  3. 做表单提交，要加name作为key

5.导航组件

5.1组件navigator

url： 跳转的地址
target： 跳转的方式  self  miniprogram
open-type：如何跳转
	navigate： 
		保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
	redirect：
		关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
	
	switchTab：
		跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
	
	reLaunch：
		关闭所有页面，打开到应用内的某个页面
	navigateBack：
		关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层


<navigator
  target="self"
  open-type="navigate"
  url="../page03/page03"
>
  <button>跳转page03-navigate</button>
</navigator>
<navigator
  target="self"
  open-type="redirect"
  url="../page03/page03"
>
  <button>跳转page03-redirect</button>
</navigator>
<navigator
  target="self"
  open-type="switchTab"
  url="../index/index"
>
  <button>跳转index-switchTab</button>
</navigator>
<navigator
  target="self"
  open-type="reLaunch"
  url="../page03/page03"
>
  <button>跳转index-reLaunch</button>
</navigator>

5.2路由api

<!-- 使用api进行跳转 -->

    <button bindtap="_toPage03" type="warn">路由跳转api</button>

 _toPage03(){
    // 使用api进行跳转
    // wx.navigateTo({
    //   url: '../page03/page03',
    // })

    // wx.redirectTo({
    //   url: '../page03/page03',
    // })

    wx.switchTab({
      url: '../index/index',
      success(res){
        console.log(res)
      }
    })
  }

5.3传递参数/接收参数

1.传递参数
<navigator
  target="self"
  open-type="navigate"
  url="../page03/page03?id=100&name=lisi"   //在url地址上进行拼接
>
  <button>跳转page03-navigate</button>
</navigator>


js文件：
let name="admin",age=30;
wx.navigateTo({
	url: `../page03/page03?name=${name}&age=${age}`,
})


2.接收参数

	在目标页面，onLoad生命周期函数中，进行获取参数
     onLoad(option){
        console.log(option)
      },

特殊情况：
	switchTab  不能携带参数

5.4跳转到其他小程序

<navigator target="miniProgram" app-id="wx8fc369471215e8ae" >
  <button>跳转到其他小程序</button>
</navigator>

二、模块化操作

1.commonjs规范

模块文件：config.js


const  url="http://localhost";
const  port = 3000;

// commonjs

module.exports = {
  url,port
}

页面的js文件

// pages/page04/page04.js
// commonjs导入
let  config = require('../../utils/config');
console.log(config)

2.ES6规范

模块文件：

const  url="http://localhost";
const  port = 3000;
// es6

// export {
//   url,port
// }

export  default {
  url,port
}

页面js

// es6 导入
// import {url,port}  from  "../../utils/config"

import  config   from  "../../utils/config"

console.log(config)
// console.log(url,port)
不断进阶学习者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app开发教程之swiper组件使用教程
码奴一只猿
05-26 1万+
Uniapp是一款跨平台的开发框架，可以用于开发微信小程序、H5、App等多种应用。其中，swiper组件是一种非常常用的组件，可以实现轮播图、图片滑动等效果。本文将详细介绍如何在Uniapp中使用swiper组件。
【uni-app】swiper 实现纵向轮播，且支持鼠标滚轮滚动翻页
sayyy的专栏
09-03 2279
前言 swiper 实现纵向轮播，且支持鼠标滚轮滚动翻页 操作方法（亲测可用） https://www.w3h5.com/post/607.html
uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
weixin_51002293的博客
11-05 4237
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
uni-app 中 swiper 轮播图高度自适应
UserGuan的博客
09-04 7761
2、swiper 标签存在默认高度是 height: 150px；高度无法实现由内容撑开，在默认情况下，图片的高度显示总是 150px。1、在每次滑动切换的时候，动态地获取 swiper-item 内部的 DOM 的元素的高度。1、首先 swiper 标签的宽度是 width: 100%2、将获取的高度动态设置给 swiper 元素。
【uniapp+vue3】scroll-view实现纵向自动滚动及swiper实现纵向自动滚动
花椒和蕊的博客
10-31 3872
scroll-view本身不支持自动滚动，通过scroll-top属性控制滚动，但是不可以循环滚动。使用swiper组件实现很简单，封装下即可用，且支持衔接滑动。
2022升级-《慕慕到家》家政小程序组件化进阶实战
06-22
《慕慕到家》家政小程序组件化进阶实战是一门专为IT专业人士设计的课程，专注于提升开发者在家政服务领域的小程序开发能力。2022年的新升级版课程，旨在帮助学员掌握最新的开发技术和实践策略，以适应快速变化的...
小程序从基础到进阶开发PDF文档
07-18
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的、无需下载安装即可使用的应用...文档中的实例代码将帮助读者更好地理解和实践这些知识，是学习微信小程序开发的宝贵资源。
基于微信小程序的智能化学习平台.zip
02-24
适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究...
LiveChart进阶版学习
04-08
《LiveChart进阶版学习深度解析》 在数据可视化领域，LiveChart是一个备受开发者青睐的库，它使得创建动态、交互式的图表变得简单易行。本文将深入探讨LiveChart的进阶特性，帮助你充分利用这一工具，提升项目的...
基于原生小程序实现的借书小程序
最新发布
06-28
【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：基于原生小程序实现的借书小程序，纯静态页面，效果展示： ...
【uniapp小程序开发】—— 组件封装之【自定义轮播图】
热门推荐
qq_49002903的博客
09-11 6万+
小程序项目实战——封装自定义轮播图组件，确定不来看看吗？
uniapp 实现图片自动纵向轮播
qq_45729353的博客
05-19 1575
✴️大家好,我是陌寒，好久不见 ✴️如果对你有帮助就给我点个赞吧，这样我们就互不相欠了 ✴️星光不负赶路人，所有的幸运都来自于坚持不懈的努力，大家一起加油吧 问题:uniapp 实现图片自动纵向轮播 直接上代码 <template> <view class="login-box" v-show="iSif"> <view class="broadcastTopBtm" :style="'height:'+height+'rpx;--scrollHeight--:'
uni-app 之 scroll-view和swiper
jun_tong的博客
09-04 1391
uni-app 之 scroll-view和swiper
使用uniapp的swiper组件做一个轮播图
qq_69893769的博客
08-16 232
【代码】使用uniapp的swiper组件做一个轮播图。
uniapp - 使用 ＜scroll-view＞ 内置组件，实现容器 “横向 / 纵向“ 区域内滚动功能（详细示例教程）
王佳斌
04-01 3299
uniapp scroll-view 区域滚动无效，uniapp横向滚动，uniapp scroll-view 横向纵向设置无效，uniapp scroll-view 详细使用教程，uniapp 区域滚动组件如何使用，uniapp scroll-view 去掉滚动条，uniApp 和微信小程序 scroll-view 实现区域滚动，uniapp使用scroll-view，uniapp横向滚动(scroll-view)，uniapp如何实现横向纵向滚动，uniapp scroll-view 区域滚动如何去掉滚
vue3.0 + ts + vite 创建的uni-app封装swiper组件
前端
05-25 1507
通过vue3.0 + ts + vite 创建uni-app做小程序开发，封装swiper使用
uniAPP view 和 swiper
Bi-Hu的博客
09-17 251
view 看做一个div 即可 属性说明 属性名类型默认值说明 hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档...
uni-app 利用 scroll-view 和 swiper 制作 顶部导航条 （可复用）
ZkD953的博客
10-08 2万+
&lt;view class="body-view"&gt; &lt;scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft"&gt; &lt;block v-for="(menuTab,index) in menuTabs" :key="index&
关于uniapp使用swiper及swiper-iteam及scroll-view上下滑动及宽高问题（一）
SupAack的博客
02-18 1万+
在uniapp中使用swiper必须要设置高度，一般都是动态设置。 一种是 高度 * 数量，这里不做详解。 另一种是 swiper + scroll-view 组合，获取系统高度 在此高度中滑动，这里要说的就是第二种。 swiper 绑定一个高度 在swiper-iteam下嵌套scroll-view,并设置scroll-view的高度为100% .scrol{ height: 100%;...
微信小程序开发学习路线
03-29
微信小程序开发是一种基于微信平台的应用开发方式，它可以在微信中直接运行，无需下载...6. 持续学习和进阶：随着对小程序开发的熟悉程度提升，可以学习一些高级的开发技术，如小程序的性能优化、自定义组件开发等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值