微信小程序

最新推荐文章于 2024-03-03 17:32:22 发布

真·晃过天空

最新推荐文章于 2024-03-03 17:32:22 发布

阅读量150

点赞数

分类专栏：前端高级篇前端实战 demo 文章标签：小程序

本文链接：https://blog.csdn.net/weixin_42111228/article/details/87720688

版权

前端实战 demo 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端高级篇

3 篇文章 0 订阅

订阅专栏

初识小程序

微信小程序

在小程序中有四种文件

.json后缀的JSON配置文件
.wxml后缀的WXML模版文件
.wxss后缀的WXSS样式文件
.js后缀的JS脚本逻辑文件

app.json 是小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

wxss具有css的大部分特性，小程序在wxss也做一些扩充和修改。仅仅支持部分css选择器。

考虑到手机的宽度和设备像素比，采用一些技巧来换算一些像素单位。新尺寸单位rpx。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

对于JS的内容不做详解：毕竟运用才是最重要的:(简单提几点)

WXS函数响应事件（不是很懂后面研究），

事件的绑定与冒泡:绑定的写法同组件属性，以key与value的形式。

key以bind或catch开头跟上类型，常用的有bindtap、catchtouchstart。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

dataset：在组件中可以定义数据，这些数据将会通过事件传递给SERVICE.
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>
Page({
  bindViewTap(event) {
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})
创建自定义组件:

自定义的组件也是由以上四个文件组成。

首先需要在json文件中进行自定义组件声明（将component 设置为 ' true'）:
{

    "component":true

}
在wxml编写模版，wxss写样式。

<view class="inner">
    {{innerText}}
</view>
<slot><slot/>


.inner{
    color:red;
}
在其js文件中，需要Component()来注册组件，提供属性定义，内部数据，自定义方法。

组件的属性值和内部数据将用于组件wxml的渲染，属性值可由外部导入。

注册组件实例
Component({
    properties:{
//在此定义属性，其值在组件使用时指定

    innerText:{
    type:String,
    value:'defalt value',
    }

},
    data:{
//内部数据
},
    methods:{
//自定义方法
    customMethod(){}
}


})
使用组件

先在页面的json文件中进行引用声明。

提供每个组件的标签名和对应的文件路径

在你要引入组建的那个文件的json里
{
"usingComponents":{
    "component-tag-name":"XX/XX/XX/component"//自定义组件的路径
}

}
笔记
pages下面是所有项目展示子页面
app.后缀名主项目的文件
utils项目所公有的工具

布局
相对定位和绝对定位浮动布局 flex布局也叫弹性布局（子元素的float clear vertical-align 属性都会失效）



flex-direction:决定主轴的方向（内容的排列方向）
flex-wrap:默认情况下，内容都在一行，如果排不下决定是否换行
flex-flow:以上两种方法的简写
justify-content:定义内容在主轴上的对齐方式
align-items:定义内容在交叉轴上对齐的方式
align-content:多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


<view class='list'>

   <view class='item'>

       <text>1</text>

   </view>

   <view class='item'>

   <text>2</text>

   </view>

   <view class='item'>

   <text>3</text>

</view>

   <view class='item'>

<text>4</text>

   </view>

   <view class='item'>

   <text>5</text>

   </view>

</view>
.list{
//容器属性
display:flex;
flex-direction:row;

默认为横向布局 row-reverse 横向镜像
flex-direction:column;纵向布局
column纵向镜像
flex-wrap:wrap;
nowrap//默认没有换行
wrap-reverse//换行返序

justify-content:center;居中对齐
flex-end;主轴终点对齐
flex-start;主轴起始对齐
space-around;分散对齐，边上有留白
space-between;边上没有留白

align-items:baseline文字基线对齐;flex-end 交叉轴底部对齐 flex-start交叉轴头部对齐 center中部对齐 stretch 拉伸将盒子拉伸撑满容器

//项目属性
针对每一个项目个体

.item{
order:1;/order属性可以改变盒子的位置，值越小越靠前，默认值为0/
flex-grow:1;/flex-grow对容器没有沾满的空间进行分配,默认值为零，不放大，剩余空间分为一份，当前这个项目放大占据这一整份/

/*flex-shrink:2;*/0表示不进行缩放，1就是1:1缩放，其他没有设置的盒子在剩余的空间内等比例缩放/

flex-basis:40%;/属性定义了再分配多余空间之前，项目占据的主轴空间length/auto 默认*/
align-self:flex-end;/对单个项目进行位置的设置/
}
}

小程序组件的应用

底部导航栏
"tabBar": {
"list": [
{
"pagePath": "pages/changpin/changpin",
"text": "联系",
"iconPath": "images/message.png",
"selectedIconPath": "images/message-fill.png"
},
{
"pagePath": "pages/discover/discover",
"text": "发现",
"iconPath": "images/eye.png",
"selectedIconPath": "images/eye-fill.png"
},
{
"pagePath": "pages/location/location",
"text": "位置",
"iconPath": "images/location.png",
"selectedIconPath": "images/location-fill.png"
},
{
"pagePath": "pages/user/user",
"text": "个人",
"iconPath": "images/user.png",
"selectedIconPath": "images/user_1.png"
}
],
"color": "#000000",
"selectedColor": "#000000"
}

<view>
<swiper autoplay='true' indicator-dots='true' indicator-color='white' indicator-active-color='black' duration='1500' interval='3000' circular='true'>
<swiper-item class='box'>
<image class='banner' src='../../images/1.jpg'></image>
</swiper-item>
<swiper-item class='box'>
<image class='banner' src='../../images/3.jpg'></image>
</swiper-item>
</swiper>
<text class='mainTitle'>爱是永恒</text>
<view class='subTitle fontSize16'>
<text class='command'>系列推荐</text>
<text class='more'>更多</text>
</view>

<view class='content fontSize16'>
<view wx:for='{{array}}' wx:key='*this' class='content-item borderBule'>
<image src='{{item.src}}'></image>
<text class='content-item-text'>{{item.message}}</text>
</view>
</view>
</view>

事件的使用方式
在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

事件分类
事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

事件绑定和冒泡

key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

事件的捕获
捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

使用wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

使用小组件模版
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}" />
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
<view>odd</view>
</template>
<template name="even">
<view>even</view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>
模板的作用域
模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

import
import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：


<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />