#小程序# 一些项目开发总结&知识点

#小程序# 一些项目开发总结&知识点

（1）如何新创建一个页面？
（温馨提示：就是需要进行点击跳转的页面，才需要在app.js里面进行配置路由，其他不用！！）
只需要在配置文件中（app.json）加入这个页面路径的地址，
就会自动生成对应的文件夹以及文件夹下相对应的js/json/wxml/wxss基本文件

（2）默认首页

（3）页面样式
页面配置文件中的配置项会覆盖app.json的window中相同的配置项
例如：全局window的文字颜色为红色，指定页面window的文字颜色为蓝色，最终页面呈现效果为蓝色

（4）页面跳转
redirectTo：关闭当前页(卸载)，跳转到指定页

navigateTo：保留当前页(隐藏)，跳转到指定页

switchTab：只能用于跳转到tabbar页面，并关闭其他非tabbar页面,tabbar之间做切换

（5）如何使用父子组件

在父组件的xx.json里面

{
  "usingComponents": { 
    "sales": "/pages/sales/sales"  //加上子组件的路径
  }
}

在父组件的xx.wxml里面 ，加入子组件的标签名

<!--pages/cart/cart.wxml-->
<scroll-view scroll-y="true" >
<view class="cart-pc"><image src="/assets/barbar/img/index2.jpg" mode="widthFix" ></image></view>
<view class="cart-pc"><image src="/assets/barbar/img/index1.jpg" mode="widthFix" ></image></view>
<sales></sales> //这个就是子组件的标签名
</scroll-view>

（6）小程序目录结构解析

（7）框架组件

7-1）view： 相当于div
hover-class:按住的样式类

7-2）scroll-view ：可滚动视图区域
scroll-x 允许可视化区域横向滚动,
scroll-x=“true”，默认不允许横向滚动 （就是左右滚动）
首先设置滚动方向为scroll-x=“true”,
然后在设置white-space为nowrap不换行，
最后需要将容器中包裹的标签的display设置为inline-block

<scroll-view scroll-x="true" style="width:100px; white-space:nowrap;height:100px;">
<view class="gray" style="display:inline-block; width:100px; height:100px; background:gray "></view>
<view class="red" style="display:inline-block; width:100px; height:100px; background:red "></view>
<view class="green" style="display:inline-block; width:100px; height:100px; background:green "></view>
<view class="yellow" style="display:inline-block; width:100px; height:100px; background:yellow "></view>
<view class="blue" style="display:inline-block; width:100px; height:100px;background:blue"></view>
</scroll-view>

scroll-y 允许可视化区域纵向滚动,scroll-y=“true”，
默认不允许纵向滚动 （就是上下滚动）

只需要在view里面加入mode=“widthFix” 就可以让图片的宽度与屏幕宽度一致， 高度自适应

<scroll-view scroll-y="true" >
<view class="cart-pc"><image src="/assets/barbar/img/index1.jpg" mode="widthFix" ></image></view>
<view class="cart-pc"><image src="/assets/barbar/img/index2.jpg" mode="widthFix" ></image></view>
</scroll-view>

7-3）轮播图：swiper
微信小程序轮播图实现
微信小程序的轮播图可以用官方给的swiper组件。
下图是官方给出的swiper属性，截取了比较常用的一些属性。

swiper使用

微信小程序的.wxml文件中：

 <swiper indicator-dots="{{indicatorDots}}" 
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true"> 
     
    <block wx:for="{{imageList}}" wx:key="imageList.url" > 
        <swiper-item> 
            <image src="{{item.url}}" class="slide-image" /> 
        </swiper-item> 
     </block> 
</swiper>

.js文件中  

 data: {
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 1000,
    imageList:[
       {"url":"../../../static/image/1.jpg"},
       { "url": "../../../static/image/2.png" },
       { "url": "../../../static/image/3.jpg" },   这个就是要加入的图片，到时候网络请求时，进行切换
}

7-4）在设置页面的时候，需要在最大的盒子里面，设置宽度为750rpx
然后里面的盒子和 图片，也是需要设置宽度为750rpx

7-5)基础组件
icon:图标组件
progress:进度条
rich-text:富文本
text:文本
button：按钮
checkbox:多选组件
checkbox-group:多项选择器组件
label:用来改进表单组件的可用性。
使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch。
form组件

7-6）wxml
数据绑定
使用双大括号将变量进行包裹，一般可以绑定内容和组件属性，还可以把数据绑定用在控制语句中

<view>{{message}}</view>

<view wx:if="{{condition}}"></view>

7-7）
列表渲染
wx:for

wx:for-item=“itemname”：可以指定数组当前元素的变量名
wx:for-index=“dex”：可以指定数组当前下标的变量名

条件渲染
wx:if

wx:elif
wx:else

7-8）wxss

尺寸单位
所有的设备屏幕宽度都为750rpx,可以实现对任意屏幕大小的设备进行自适应布局
如果手机底部按键会有遮挡的话，只需要使用padding-bottom:env 来告诉微信进行自动适配

盒子模型
元素有块级元素和行内元素，元素的显示方式是由display属性控制，通过margin和padding来确定盒子的位置
块元素
行内元素
行内块元素

浮动和定位

浮动
清除浮动
只需要用到clear属性
在需要浮动的那个块元素的下面，增加一个块元素（view），设置样式，clear:both; height:0;
因为块元素的宽度会继承父级，所以不用设置，然后加上以后，就会把盒子顶下去，从而清除浮动塌陷

两点需要注意：
（1）清除浮动的元素本身不能为浮动元素
（2）清除浮动的元素必须是块级元素

<view style="border:1px; border-style:solid">块级元素</view>
<view style="border:1px; border-style:solid；float:left">浮动元素</view>
<view style="clear:both; height:0"></view>
<view style="border:1px; border-style:solid">块级元素</view>

定位
相对定位
绝对定位
固定定位

弹性布局
flex布局的元素大小是可伸缩的，可根据需要扩展尺寸来填满可用空间
display:flex
flex-direction （元素布局方向）
justify-content（对齐方式）

7-9）如何引入Vant Weapp这个UI库
（1）在项目文件夹里，按照shift+右键，选择“Windonw PowerShell”


（2）npm install 一下
（3）npm init
（4） npm i @vant/weapp -S --production
（5）将 app.json 中的 “style”: “v2” 去除，
小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
（6）就可以正常使用了
温馨提示：一些组件里面是包含多个插件的，这个时候应该将多个插件的路径全部加入

（7）每一个插件都有相应的类名，所以可以通过它的类名进行修改样式