小程序进阶学习03

一、组件的使用

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
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值