微信小程序

一,wxml

参考文档

wxml(WeiXin MarKup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面结构

1,数据绑定

wxml中动态数据结构来自对应页面的data

1,简单的数据绑定

数据绑定使用Mustache语法(双大括号)将变量包起来

案例demo

index1.js

// pages/index1/index1.js
Page({/*** 页面的初始数据*/data: {message:'hello world!!!',age:18,isCn:true,fruit:{name:'苹果',area:'烟台'}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index1.wxml

<!--pages/index1/index1.wxml-->
<text>简单的数据绑定</text>
<view><view>字符串类型:{{message}}</view><view>数组:{{age}}</view><view>布尔类型:{{isCn}}</view><view>渲染对象:{{fruit.name}}==========>{{fruit.area}}</view></view>
案例代码下载地址

2,给组件的属性赋值

案例demo

index2.js

// pages/index2/index2.js
Page({/*** 页面的初始数据*/data: {id:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index2.wxml

<!--pages/index2/index2.wxml-->
<text>给组件的属性赋值</text>
<view id='item-{{id}}'>给view的id属性赋值  
</view>
案例Demo代码下载地址

3,关键字(需要写在双大括号里面)

true:boolean类型的true,代表真值

false:boolean类型的false,代表假植

注意:在微信小程序中不要直接写checked=‘false’,这样的计算结果是一个字符串转成Boolean类型后代表真值

案例Demo

index2.wxml

<!--pages/index2/index2.wxml-->
<text>给组件的属性赋值</text>
<view id='item-{{id}}'>给view的id属性赋值  
</view>
<text>关键字</text>
<view><checkbox checked='{{true}}'>读书  </checkbox><checkbox checked='{{false}}'>玩游戏</checkbox>
</view>
案例Demo代码下载地址

4,运算

可以在{{}}内进行简单的运算,支持的有如下几种方式:

  1. 三元运算
  2. 算数运算
  3. 逻辑判断
  4. 字符串运算
  5. 数据路径运算
案例Demo

index3.js

// pages/index3/index3.js
Page({/*** 页面的初始数据*/data: {flag:false,a:1,b:2,c:3,length:10,msg:'张三',obj:{key:'hello'},names:['李四','王五']},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index3.wxml

<!--pages/index3/index3.wxml-->
<text>三元运算符</text>
<view hidden='{{flag?true:false}}'>是否被隐藏
</view>
<text>算数运算</text>
<view>{{a+b}}+{{c}}
</view>
<text>逻辑判断</text>
<view wx:if='{{length>5}}'>{{length}}
</view>
<text>字符串运算</text>
<view>hello,{{msg}}
</view>
<text>数据路径运算</text>
<view>{{obj.key}}
</view>
<view>{{names[0]}}
</view>
案例Demo代码下载地址

2,列表渲染

wx:for

  1. 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染改组件
  2. 默认数据的当前项目的下标变量名为index
  3. 数组当前项的变量默认为item
  4. 使用wx:for-item可以指定数组当前元素的变量名
  5. 使用wx:for-index可以指定数组当前下标的变量名
  6. wx:for-key:增加查询效率的
案例Demo

index4.js

// pages/index4/index4.js
Page({/*** 页面的初始数据*/data: {names:['张三','李四','王五'],students:[{name:'冷锋',age:18},{name:'龙小云',age:20}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index4.wxml

<!--pages/index4/index4.wxml-->
<text>渲染数组</text>
<view wx:for='{{names}}' wx:for-key='{{index}}'>{{index}}==========>{{item}}
</view>
<text>修改默认的item和index</text>
<view wx:for='{{names}}' wx:for-item='name' wx:for-index='id' wx:for-key='{{id}}'>{{id}}==========>{{name}}
</view>
<text>渲染对象数组</text>
<view wx:for='{{students}}' wx:for-key='{{index}}'>{{index}},{{item.name}},{{item.age}}
</view>
<text>字符串</text>
<view wx:for='array'>{{item}}
</view>
案例Demo代码下载地址

3,条件渲染

1,wx:if/wx:elif/wx:else

在框架中使用wx:if=""来判断是否需要渲染该代码块

2,block wx:if

因为wx:if是一个控制属性需要将它添加到一个标签上,如果要一次判读多个组件标签可以是一个标签将多个组件包装起来,并在上边使用wx:if控制属性

注意:并不是一个组件,它仅仅是一个包装元素,不会再页面中做任何渲染,只接受控制属性

案例Demo

index5.js

// pages/index5/index5.js
Page({/*** 页面的初始数据*/data: {score:90,classId:1},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index5.wxml

<!--pages/index5/index5.wxml-->
<text>条件渲染:</text>
<text>\n成绩结果:</text>
<view><view wx:if='{{score>90}}'>优秀  </view><view wx:elif='{{score>80}}'>良好</view><view wx:elif='{{score>=60}}'>中等</view><view wx:else>不及格</view>
</view>
<text>block包装元素的使用</text>
<view><block wx:if="{{classId==1}}"><text>班级编号1的学生</text><view>张三</view><view>李四</view></block><block wx:if="{{classId==2}}"><text>班级编号2的学生</text><view>张三2</view><view>李四2</view></block>
</view>
案例Demo代码下载地址

3,wx:if VS hidden

因为wx:if之中的模板也可能包括数据绑定,所以当wx:if的条件值切换时框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或者重新渲染

同时wx:if也是惰性的,如果在初始渲染条件为false框架什么也不做,在条件第一次变成真的时候才开始局部渲染

相比之下,hidden就简单的多,组件始终会被渲染只是简单的控制显示与隐藏

一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗,因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好

4,模板

wxml提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用

1,定义模板

使用name属性作为模板名字,然后在内定义代码片段

2,使用模板

使用is属性声明需要使用的模板,然后将模板所需要的data传入

3,模板的作用域

模板拥有自己的作用域,不能使用data传入的数据以及模板定义文件中定义模板

案例Demo

index.js

// pages/index6/index6.js
Page({/*** 页面的初始数据*/data: {student:{name:'张三',age:18}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.wxml

<!--pages/index6/index6.wxml-->
<text>模板</text>
<template name="studenInfo">{{student.name}},{{student.age}}
</template><view><template is='studenInfo' data='{{student}}'></template>
</view>

案例Demo代码下载地址

5,引用

wxml提供两种文件引用方式import和include

1,import

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

案例Demo

index7.js

// pages/index7/index7.js
Page({/*** 页面的初始数据*/data: {student:{name:'张三',age:18}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.wxml

<!--pages/index7/index7.wxml-->
<text>使用import引入index6的模板</text>
<import src="../index6/index6"/>
<view><template is="studenInfo" data="{{student}}"/>
</view>
案例Demo代码下载地址
2,import作用域

import有作用域的概念,即只会import目标文件中定义template而不会import目标文件import的template

如:c import B, B import A 在C中可以使用B定义的template,在B中可以使用A定义的template,但是c不能使用A定义的template

3,include

include可以将目标文件除了外整个代码引入,相当于是拷贝到include位置

案例Demo

header.wxml

<text>头部</text>

index8.wxml

<!--pages/index8/index8.wxml-->
<text>pages/index8/index8.wxml</text>
<include src="header.wxml"/>
案例Demo代码下载地址

二,wxss

wxss(WeiXin Style Sheets)是一套样式语言,用于描述wxml的组件样式

wxss用来决定wxml的组件应该怎么显示

为了适应广大的前端爱好者,wxss具有css大部分特性同时为了更适应开发微信小程序,wxss对css进行了扩充以及修改

与css相比,wxss扩展的特性有:

  1. 尺寸单位
  2. 样式导入

一,尺寸单位

参考文档

rpx(responsive pixel)响应像素:可以根据屏幕宽度进行自适应,规定屏幕宽度为750px,如在iphone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,1rpx=0.5px=1物理像素

在这里插入图片描述

建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准

二,样式导入

1,@import

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径用;表示语句结束

2,内联样式

框架组件上支持使用style,class属性来控制组件的样式

style:静态的样式统一写到class中,style接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染进度

class:用于指定样式规则,其属性值是样式规则中,类选择器名(样式类名)的集合,样式类名不需要带上. 样式类名之间用空格分隔

案例Demo

style文件:

common.wxss

view{padding:20rpx;margin:0rpx;
}
pages文件:

index1.wxss

/* pages/index1/index1.wxss */
@import "../../style/common.wxss";
.con{font-size:40rpx;border:1px solid red;
}

index1.js

// pages/index1/index1.js
Page({/*** 页面的初始数据*/data: {color:"blue"},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index1.wxml

<!--pages/index1/index1.wxml-->
<text>pages/index1/index1.wxml</text>
<view class="con" style="color:{{color}};">内容
</view>

案例Demo下载地址

三,选择器

1,目前支持的选择器有:

在这里插入图片描述

2,全局样式与局部样式

定义在app.wxss中的样式为全局样式,作用于每一个页面.

在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器.

案例Demo

style文件

common.wxss

view{padding:20rpx;margin:0rpx;
}
pages文件

index2.wxss

/* pages/index2/index2.wxss */
@import "../../style/common.wxss";
.nav{height:70rpx;line-height:70rpx;background-color:skyblue;
}
.nav text{font-size:35rpx;width:130rpx;display:inline-block;
}
.nav .first{padding-left:50rpx;
}
.nav text:hover{color:orangered;
}

index2.wxml

<!--pages/index2/index2.wxml-->
<view class="nav"><text class="first" >首页</text><text >分类</text><text >资讯</text><text >购物车</text><text >我的</text>
</view>

案例Demo下载地址

三,组件

参考文档

1,介绍

小程序提供了丰富的基础组件给开发者,开发者可以像搭建积木一样组合各种组件拼合成自己的小程序,就像HTML的div,p等标签一样,在小程序里面,你只需要在wxml文件中写上对应的组件标签名字就可以把该组件显示在界面上

2,分类

  1. 视图容器
  2. 基础内容
  3. 表单组件
  4. 导航
  5. 媒体组件
  6. 地图
  7. 画布
  8. 开放能力
  9. 原生组件说明
  10. 无障碍访问
  11. 导航栏
  12. 页面属性配置节点

3,视图容器

1,view

1.1作用

页面中一块区域,类似与HTML当中的div

1.2属性

在这里插入图片描述

1.3案例

home.json

{"usingComponents": {},"backgroundTextStyle":"light","navigationBarBackgroundColor": "#CCFFCC","navigationBarTitleText": "积惠多商城","navigationBarTextStyle":"black"
}

home.wxml

<view><view hover-class="hClass">商城订单</view><view hover-class="hClass">我的推广</view><view hover-class="hClass">我的积分</view><view hover-class="hClass">会员信息</view>
</view>

home.wxss

/* pages/home/home.wxss */
.hClass{color: orangered;
}
1.4案例代码下载地址

2.swiper

2.1定义

滑块视图容器,其中只可放置swiper-item组件,否则导致未定义的行为

2.2属性

属性参考文档

2.3案例

home.json

{"usingComponents": {},"backgroundTextStyle":"light","navigationBarBackgroundColor": "#CCFFCC","navigationBarTitleText": "积惠多商城","navigationBarTextStyle":"black"
}

home.wxml

<view class="sw"><swiper autoplay interval="1000" circular indicator-dots indicator-active-color="#FF9900"><swiper-item><image src="../../img/banner1.jpg"/></swiper-item><swiper-item><image src="../../img/banner2.jpg"/></swiper-item><swiper-item><image src="../../img/banner3.jpg"/></swiper-item></swiper>
</view>

home.wxss

/* pages/home/home.wxss */
.sw{margin: 10rpx;
}
2.4案例代码下载地址

4,基本内容

text

1.1定义

显示普通的文本

1.2属性

在这里插入图片描述

1.3案例

home.json

{"usingComponents": {},"backgroundTextStyle":"light","navigationBarBackgroundColor": "#CCFFCC","navigationBarTitleText": "积惠多商城","navigationBarTextStyle":"black"
}

home.wxml

<view class="sw"><swiper autoplay interval="1000" circular indicator-dots indicator-active-color="#FF9900"><swiper-item><image src="../../img/banner1.jpg"/></swiper-item><swiper-item><image src="../../img/banner2.jpg"/></swiper-item><swiper-item><image src="../../img/banner3.jpg"/></swiper-item></swiper>
</view>
<view class="nav"><text class="first">商城订单</text><text>我的推广</text><text>我的积分</text><text>会员信息</text>
</view>

home.wxss

/* pages/home/home.wxss */
.sw{margin: 10rpx;
}
.nav text{display: inline-block;width: 23%;text-align: center;
}
.nav text:hover{color: orangered;
}
.nav .first{padding-left: 15rpx;
}
1.4案例代码下载地址

5,媒体组件

1,image

1.1定义

图片标签,支持jpg,png,svg,webp,gif等格式,2.3.0起支持云文件Id

小提示:

image组件默认宽度300px,高度240px

image组件中二维码/小程序码图片不支持长按识别,仅在wx:previewimage中支持长按识别

1.2属性

属性参考文档

1.3案例

home.json

{"usingComponents": {},"backgroundTextStyle":"light","navigationBarBackgroundColor": "#CCFFCC","navigationBarTitleText": "积惠多商城","navigationBarTextStyle":"black"
}

home.wxml

<view class="sw"><swiper autoplay interval="1000" circular indicator-dots indicator-active-color="#FF9900"><swiper-item><image src="../../img/banner1.jpg"/></swiper-item><swiper-item><image src="../../img/banner2.jpg"/></swiper-item><swiper-item><image src="../../img/banner3.jpg"/></swiper-item></swiper>
</view>
<view class="nav"><text class="first">商城订单</text><text>我的推广</text><text>我的积分</text><text>会员信息</text>
</view>
<view  class="product"><view> <image src="../../img/pro1.jpg"></image><text>\n榨汁机</text><text class="price">\n¥1690</text></view><view><image src="../../img/pro2.jpg"></image><text>\n铂金对戒</text><text class="price">\n¥4690</text></view><view><image src="../../img/pro3.jpg"></image><text>\n沙金手链</text><text class="price">\n¥2690</text></view><view><image src="../../img/pro4.jpg"></image><text>\n鲜花</text><text class="price">\n¥200</text></view>
</view>

home.wxss

/* pages/home/home.wxss */
.sw{margin: 10rpx;
}
swiper image{width: 100%;
}
.nav text{display: inline-block;width: 23%;text-align: center;
}
.nav text:hover{color: orangered;
}
.nav .first{padding-left: 15rpx;
}
.product{margin-top: 40rpx;
}
.product view{display: inline-block;margin-left: 10rpx;
}
.product image{width: 350rpx;height: 350rpx;display: inline-block;
}
.product .price{color: crimson;
}
1.4案例下载地址

2,video

2.1定义

播放视频

2.2属性

属性参考文档

2.3案例

home.json

{"usingComponents": {},"backgroundTextStyle":"light","navigationBarBackgroundColor": "#CCFFCC","navigationBarTitleText": "积惠多商城","navigationBarTextStyle":"black"
}

home.wxml

<view class="sw"><swiper autoplay interval="1000" circular indicator-dots indicator-active-color="#FF9900"><swiper-item><image src="../../img/banner1.jpg"/></swiper-item><swiper-item><image src="../../img/banner2.jpg"/></swiper-item><swiper-item><image src="../../img/banner3.jpg"/></swiper-item></swiper>
</view>
<view class="nav"><text class="first">商城订单</text><text>我的推广</text><text>我的积分</text><text>会员信息</text>
</view>
<view  class="product"><view> <image src="../../img/pro1.jpg"></image><text>\n榨汁机</text><text class="price">\n¥1690</text></view><view><image src="../../img/pro2.jpg"></image><text>\n铂金对戒</text><text class="price">\n¥4690</text></view><view><image src="../../img/pro3.jpg"></image><text>\n沙金手链</text><text class="price">\n¥2690</text></view><view><image src="../../img/pro4.jpg"></image><text>\n鲜花</text><text class="price">\n¥200</text></view>
</view>
<view class="vi"><video autoplay loop src="https://yhp.pg024.com/Upload/video/3974E3A4021644F9234C2B04F911D3C9.mp4"></video>
</view>

home.wxss

/* pages/home/home.wxss */
.sw{margin: 10rpx;
}
swiper image{width: 100%;
}
.nav text{display: inline-block;width: 23%;text-align: center;
}
.nav text:hover{color: orangered;
}
.nav .first{padding-left: 15rpx;
}
.product{margin-top: 40rpx;
}
.product view{display: inline-block;margin-left: 10rpx;
}
.product image{width: 350rpx;height: 350rpx;display: inline-block;
}
.product .price{color: crimson;
}
.vi video{width: 100%;
}
2.4案例代码下载地址

6,导航

1,navigator

1.1作用

页面链接

1.2属性参考文档
1.3案例

home.json

{"usingComponents": {},"backgroundTextStyle":"light","navigationBarBackgroundColor": "#CCFFCC","navigationBarTitleText": "积惠多商城","navigationBarTextStyle":"black"
}

home.wxml

<view class="sw"><swiper autoplay interval="1000" circular indicator-dots indicator-active-color="#FF9900"><swiper-item><image src="../../img/banner1.jpg"/></swiper-item><swiper-item><image src="../../img/banner2.jpg"/></swiper-item><swiper-item><image src="../../img/banner3.jpg"/></swiper-item></swiper>
</view>
<view class="nav"><navigator class="first" style="margin:0px;display:inline-block" url="../index/index"> 商城订单</navigator><text>我的推广</text><text>我的积分</text><text>会员信息</text>
</view>
<view  class="product"><view> <image src="../../img/pro1.jpg"></image><text>\n榨汁机</text><text class="price">\n¥1690</text></view><view><image src="../../img/pro2.jpg"></image><text>\n铂金对戒</text><text class="price">\n¥4690</text></view><view><image src="../../img/pro3.jpg"></image><text>\n沙金手链</text><text class="price">\n¥2690</text></view><view><image src="../../img/pro4.jpg"></image><text>\n鲜花</text><text class="price">\n¥200</text></view>
</view>
<view class="vi"><video autoplay loop src="https://yhp.pg024.com/Upload/video/3974E3A4021644F9234C2B04F911D3C9.mp4"></video>
</view>

home.wxss

/* pages/home/home.wxss */
.sw{margin: 10rpx;
}
swiper image{width: 100%;
}
.nav text{display: inline-block;width: 23%;text-align: center;
}
.nav text:hover{color: orangered;
}
.nav .first{padding-left: 15rpx;
}
.product{margin-top: 40rpx;
}
.product view{display: inline-block;margin-left: 10rpx;
}
.product image{width: 350rpx;height: 350rpx;display: inline-block;
}
.product .price{color: crimson;
}
.vi video{width: 100%;
}
1.4案例下载地址

七,自定义组件

从小程序基础库版本1.6.3开始,小程序支持简洁的组件化编程,所有自定义组件相关特性都需要基础库版本1.6.3或更高

开发者可以将页面内的功能模板抽象成自定义组件,以便在不同的页面中重复使用,也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护,自定义组件在使用时与基础组件非常相似

1,创建自定义组件

类似于页面,一个自定义组件有json,wxml,wxss,js4个文件组成,在微信开发者工具中创建目录components,在components中创建目录MyHeader,在MyHeader中在添加组件MyHeader

目录结构:

在这里插入图片描述

2,声明组件

在MyHeader.json文件中进行自定义组件声明,讲component字段设置位true

{"component": true,"usingComponents": {}
}

3,编辑组件

类似于页面,自定义组件拥有自己的wxml模板和wxss模板

3.1组件模板

组件模板的写法与页面模板相同,组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上

在组件模板中可以提供节点,用于承载组件引用时提供的子节点

组件模板MyHeader.wxml文件内容

<view class="wrapper"><view>这里是组件的内容节点</view><slot></slot>
</view>

自定义组件样式MyHeader.wxss

/* components/MyHeader/MyHeader.wxss */
.wapper{font-size: 50rpx;
}

注意:在组件wxss中不能使用id选择器,属性选择器和标签选择器

3.2在页面模板中引入自定义组件

在模板中引用到的自定义组件及其对应的节点名需要在页面模板的json文件中显示定义,否则会被当做一个无意义的节点,除此之外,节点名也可以被声明为抽象节点

index.json

{"usingComponents": {"header-tag":"../../components/MyHeader/MyHeader"}
}

index.wxml

<!--index.wxml-->
<view><view><header-tag innerText="页面模板传递数据"><view>这里是插入到组件slot节点</view></header-tag></view>
</view>
3.3模板数据绑定

MyHeader.js

// components/MyHeader/MyHeader.js
Component({/*** 组件的属性列表*/properties: {innerText:{type:String,value:''}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})

MyHeader.wxml

<view class="wrapper"><text>{{innerText}}</text><view>这里是组件的内容节点</view><slot></slot>
</view>

index.json

{"usingComponents": {"header-tag":"../../components/MyHeader/MyHeader"}
}

index.wxml

<!--index.wxml-->
<view><view><header-tag innerText="页面模板传递数据"><view>这里是插入到组件slot节点</view></header-tag></view>
</view>

4,案例代码下载地址

查看全文
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!

相关文章

  1. CentOS7下安装jdk8

    1:将在windows上下载好的jdk1.8通过rz命令上传到linux指定的文件夹下,/usr/software:2:在software目录下解压压缩包3:删除安装包,将解压后的文件夹移到/usr/local下(软件一般都安装在这里),并改名为java84:将jdk路径加入环境变量中,使用vim /etc/profile命令修改环境变…...

    2024/3/14 10:08:11
  2. 四十九1

    轮播图 (“尚硅谷”中的通过改变偏移的方法完成轮播图) HTML(需完成窗口div(outer)和图片放置div(imgList),outer大小为图片大小+边距, imgList大小为所投图片相加总和(需加上图片之间的间距)。 navDiv为图片上的导航条) css(各部分需开启定位,outer需使用 (ove…...

    2024/3/20 0:01:10
  3. 香菇土豆炖鸡

    文章目录1.准备食材2.流程3.卖家秀 1.准备食材 鸡腿两个 干香菇一碗 青红椒适量 土豆两个 姜葱蒜适量 2.流程 1.起锅烧油 2.冰糖炒出香油色 3.下鸡块翻炒 4.加料 三勺料酒 两勺生抽 一勺老抽 一勺蚝油 5.下菜 葱姜蒜 土豆 香菇 加水漫过 6. 大火烧开 去沫 加盖转中小火 7.加上青…...

    2024/3/14 4:38:53
  4. 01.ShardingSphere笔记

    #1.分库分表的概念#1.1.垂直分表概念:就是把一个表里的字段,分成多个表进行存储,比如一个学生表,有姓名,性别,年龄,年级,班级等信息。那么进行垂直分表的概念就是把学生表中的姓名,性别,年龄分成了一个表,年级,班级等信息又分成了另外一个表。思考这样做的好处:1.…...

    2024/3/14 4:38:47
  5. Android JNI 示例

    Android JNI 示例 https://github.com/android/ndk-samples/tree/master/hello-jni/ 2020年6月6日...

    2024/3/24 6:22:44
  6. PageHelper不同版本的不同配置

    pagehelper5.0使用的拦截器是PageInterceptor,pagehelper4.0使用的拦截器是PageHelper; 而且5.0的版本去除了sqlsource模块的好几个类OrderByStaticSqlSource、PageSqlSource、PageRawSqlSource、PageStaticSqlSource、PageDynamicSqlSource、PageProviderSqlSource,pagehel…...

    2024/3/14 10:08:04
  7. STM32 F103 PWM定时器实验

    实验目的 通过上一张的学习,我们知道知道STM32的通用定时器和高级定时器拥有PWM输出功能,本章我们将利用TIM3的CH3通道输出波形,数据手册请参看第14章中的相关内容。 实验简介 脉宽调制器(PWM),是英文“Pulse Width Modulation”的缩写,简称脉宽调制,是利用微处理器的数…...

    2024/3/14 10:07:58
  8. Flutter学习笔记09:Dart接口

    接口定义了一组对象可用的方法。Dart没有声明接口的语法。类声明本身就是Dart中的接口。类应该使用implements关键字来实现接口。实现类必须复写已实现接口的所有功能的具体实现。换句话说,类必须重新定义它希望实现的接口中的每个函数。 定义的接口: class InterfaceClass{v…...

    2024/3/26 11:41:10
  9. 为什么要学习Vue——前端框架角度

    1 什么是框架 框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架。前者是从应用方面而后者是从目的方面给出的定义。 可以说,一个框架是一个可复用的设计构件,它规定了应用的体…...

    2024/3/14 0:52:41
  10. leetcode 45 Jump Game II 详细解答

    leetcode 45 Jump Game II 详细解答 从下标 index 走出的范围最大值 max_index,那从当前 index 到 max_index就是一步,所以需要记录 max_index代码如下:...

    2024/3/14 0:52:41
  11. Web安全漏洞与渗透测试 1.1 初探安全

    Web安全漏洞与渗透测试 1.1 安全初探...

    2024/3/14 0:52:38
  12. js学习-CSS3中的动画效果

    一、transition方法 transition: ; -moz-transition: ; -webkit-transition: ; -o-transition: ; 1、transition: property duration timing-function delay 如transition-property: all (无论是颜色还是大小、长宽都可以同时改变) / none (无改变) / property(单…...

    2024/3/14 0:52:37
  13. Revit二次开发_打开与关闭插件功能页(Tab)的可见性

    偶尔会写一些关于Revit的教程,为了避免产生疑惑,截图的时候一般展示原始的Revit界面。不想看到插件的功能页的话可以把插件的注册文件移走,避免插件加载,但这个方法相对来说还是有点繁琐,所以直接用API在Revit里进行tab页的显示与隐藏。要对tab进行管理的话,需要引用AdWi…...

    2024/3/14 10:08:03
  14. Log[SpringMVC_01]_20.06.06

    第一章 SpringMVC的基本概念 1.1 先导概念 1.1.1 三层架构1.1.2 MVC设计模型 M:Model 模型 JavaBean(将请求封装到JavaBean,与业务层交互) V:View 视图 JSP/HTML(响应转发给JSP,展示给用户) C:Controller 控制器 Servlet(接收请求) 1.2 SpringMVC概述 SpringM…...

    2024/3/29 0:23:44
  15. Linux Centos 7、Oracle Linux R6修改主机名称

    Oracle Linux R6修改主机名称一、临时修改,改完即生效hostname 你要修改的主机名称hostname testname查看当前主机名称hostname注意:重启后失效,将变为原来的主机名称[root@oraclelinux ~]# hostname testname [root@oraclelinux ~]# hostname testname二、永久修改,改完要…...

    2024/3/14 10:08:06
  16. openssl1.1.1安装错误

    今天从openssl1.1.0升到1.1.1 open1.1.1安装成功后,执行openssl产生错误 ./openssl: relocation error: ./openssl: symbol EVP_mdc2 version OPENSSL_1_1_0 not defined in file libcrypto.so.1.1 with link time reference 用ldd /usr/local/bin/openssl命令查到openssl 的依…...

    2024/3/14 10:07:56
  17. centos7 安装 mysql5.7

    如何是64位,请下载64位安装包,32请下载32位安装包下载地址:https://dev.mysql.com/downloads/然后直接使用linux命令下载到linxu指定文件夹下:wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.25-linux-glibc2.12-x86_64.tar.gz百度云盘链接: https://pan.b…...

    2024/3/14 10:07:52
  18. 点击当前添加到数组,再次点击移除

    let text = $(this).text(); let ind = vals.indexOf(text); if (ind === -1) {vals.push(text); } else {vals.splice(ind, 1); }...

    2024/3/14 10:07:51
  19. 哈希表的散列线性探测排序问题

    哈希表的散列线性探测排序问题 题目:给定一组查找关键字(19,14,23,1,65,20,84,27,55,11,10,79) 哈希函数为:H(key)=key % 13, 哈希表长为m=15,设每个记录的查找概率相等。请画出按照线性探测再散列处理冲突得到的哈希表(给出求解过程),并计算查找成功和查找失败时的平均查…...

    2024/3/14 10:07:59
  20. [STL]算法

    《STL源码剖析》 1 sort()STL提供的各种算法中,sort()是最复杂庞大的。这种算法接受两个RandomAcessIterators(随机存取迭代器),然后将区间内的所有元素以渐增的方式从小到大排列。sort()算法适用于vector和deque。 STL的sort算法,在数据量大的是采用quick sort,分段递归…...

    2024/3/19 23:55:19

最新文章

  1. 前端学习<二>CSS基础——09-CSS案例讲解:博雅互动

    前言 CSS已经学了一些基础内容了&#xff0c;我们来讲解一个小案例吧。以博雅互动的官网首页举例。 版心 首页的版心如下&#xff1a; 这里我们要普及一个概念&#xff0c;叫“版心”。版心是页面中主要内容所在的区域。 比如说&#xff0c;网站左上角的logo&#xff0c;设计…...

    2024/3/29 17:11:57
  2. 梯度消失和梯度爆炸的一些处理方法

    在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言&#xff0c;在此感激不尽。 权重和梯度的更新公式如下&#xff1a; w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...

    2024/3/20 10:50:27
  3. Matlab从入门到精通课程

    教程介绍 MATLAB是美国MathWorks公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人&#xff0c;控制系统等领域。 学习地址 链接&#xff1a;https://pan.baidu.com/s/1PxGarBwQusMzwPVqcE…...

    2024/3/29 7:35:17
  4. ping 通ip,ping 不通域名

    在linux 系统中&#xff0c;ping 通ip,ping 不通对应的域名时&#xff0c;可直接修改系统配置文件 vi /etc/hosts 加入 ip 域名...

    2024/3/29 1:32:10
  5. 【外汇早评】美通胀数据走低,美元调整

    原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...

    2024/3/27 10:21:24
  6. 【原油贵金属周评】原油多头拥挤,价格调整

    原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...

    2024/3/24 20:11:25
  7. 【外汇周评】靓丽非农不及疲软通胀影响

    原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...

    2024/3/29 2:45:46
  8. 【原油贵金属早评】库存继续增加,油价收跌

    原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...

    2024/3/29 16:26:39
  9. 【外汇早评】日本央行会议纪要不改日元强势

    原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...

    2024/3/29 5:19:52
  10. 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响

    原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...

    2024/3/28 17:01:12
  11. 【外汇早评】美欲与伊朗重谈协议

    原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...

    2024/3/29 11:11:56
  12. 【原油贵金属早评】波动率飙升,市场情绪动荡

    原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...

    2024/3/29 1:13:26
  13. 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试

    原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...

    2024/3/29 8:28:16
  14. 【原油贵金属早评】市场情绪继续恶化,黄金上破

    原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...

    2024/3/29 7:41:19
  15. 【外汇早评】美伊僵持,风险情绪继续升温

    原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...

    2024/3/24 20:11:18
  16. 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势

    原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...

    2024/3/29 9:57:23
  17. 氧生福地 玩美北湖(上)——为时光守候两千年

    原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...

    2024/3/29 0:49:46
  18. 氧生福地 玩美北湖(中)——永春梯田里的美与鲜

    原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...

    2024/3/24 20:11:15
  19. 氧生福地 玩美北湖(下)——奔跑吧骚年!

    原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...

    2024/3/27 7:12:50
  20. 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!

    原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...

    2024/3/24 20:11:13
  21. 「发现」铁皮石斛仙草之神奇功效用于医用面膜

    原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...

    2024/3/26 11:21:23
  22. 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者

    原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...

    2024/3/28 18:26:34
  23. 广州械字号面膜生产厂家OEM/ODM4项须知!

    原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...

    2024/3/28 12:42:28
  24. 械字号医用眼膜缓解用眼过度到底有无作用?

    原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...

    2024/3/28 20:09:10
  25. 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...

    解析如下&#xff1a;1、长按电脑电源键直至关机&#xff0c;然后再按一次电源健重启电脑&#xff0c;按F8健进入安全模式2、安全模式下进入Windows系统桌面后&#xff0c;按住“winR”打开运行窗口&#xff0c;输入“services.msc”打开服务设置3、在服务界面&#xff0c;选中…...

    2022/11/19 21:17:18
  26. 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。

    %读入6幅图像&#xff08;每一幅图像的大小是564*564&#xff09; f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...

    2022/11/19 21:17:16
  27. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...

    win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面&#xff0c;在等待界面中我们需要等待操作结束才能关机&#xff0c;虽然这比较麻烦&#xff0c;但是对系统进行配置和升级…...

    2022/11/19 21:17:15
  28. 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...

    有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows&#xff0c;请勿关闭计算机”的提示&#xff0c;要过很久才能进入系统&#xff0c;有的用户甚至几个小时也无法进入&#xff0c;下面就教大家这个问题的解决方法。第一种方法&#xff1a;我们首先在左下角的“开始…...

    2022/11/19 21:17:14
  29. win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...

    置信有很多用户都跟小编一样遇到过这样的问题&#xff0c;电脑时发现开机屏幕显现“正在配置Windows Update&#xff0c;请勿关机”(如下图所示)&#xff0c;而且还需求等大约5分钟才干进入系统。这是怎样回事呢&#xff1f;一切都是正常操作的&#xff0c;为什么开时机呈现“正…...

    2022/11/19 21:17:13
  30. 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...

    Win7系统开机启动时总是出现“配置Windows请勿关机”的提示&#xff0c;没过几秒后电脑自动重启&#xff0c;每次开机都这样无法进入系统&#xff0c;此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一&#xff1a;开机按下F8&#xff0c;在出现的Windows高级启动选…...

    2022/11/19 21:17:12
  31. 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...

    有不少windows10系统用户反映说碰到这样一个情况&#xff0c;就是电脑提示正在准备windows请勿关闭计算机&#xff0c;碰到这样的问题该怎么解决呢&#xff0c;现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法&#xff1a;1、2、依次…...

    2022/11/19 21:17:11
  32. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...

    今天和大家分享一下win7系统重装了Win7旗舰版系统后&#xff0c;每次关机的时候桌面上都会显示一个“配置Windows Update的界面&#xff0c;提示请勿关闭计算机”&#xff0c;每次停留好几分钟才能正常关机&#xff0c;导致什么情况引起的呢&#xff1f;出现配置Windows Update…...

    2022/11/19 21:17:10
  33. 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...

    只能是等着&#xff0c;别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚&#xff0c;只能是考虑备份数据后重装系统了。解决来方案一&#xff1a;管理员运行cmd&#xff1a;net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...

    2022/11/19 21:17:09
  34. 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?

    原标题&#xff1a;电脑提示“配置Windows Update请勿关闭计算机”怎么办&#xff1f;win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢&#xff1f;一般的方…...

    2022/11/19 21:17:08
  35. 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...

    关机提示 windows7 正在配置windows 请勿关闭计算机 &#xff0c;然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;关机提示 windows7 正在配…...

    2022/11/19 21:17:05
  36. 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...

    钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...

    2022/11/19 21:17:05
  37. 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...

    前几天班里有位学生电脑(windows 7系统)出问题了&#xff0c;具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面&#xff0c;长时间没反应&#xff0c;无法进入系统。这个问题原来帮其他同学也解决过&#xff0c;网上搜了不少资料&#x…...

    2022/11/19 21:17:04
  38. 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...

    本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法&#xff0c;并在最后教给你1种保护系统安全的好方法&#xff0c;一起来看看&#xff01;电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中&#xff0c;添加了1个新功能在“磁…...

    2022/11/19 21:17:03
  39. 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...

    许多用户在长期不使用电脑的时候&#xff0c;开启电脑发现电脑显示&#xff1a;配置windows更新失败&#xff0c;正在还原更改&#xff0c;请勿关闭计算机。。.这要怎么办呢&#xff1f;下面小编就带着大家一起看看吧&#xff01;如果能够正常进入系统&#xff0c;建议您暂时移…...

    2022/11/19 21:17:02
  40. 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...

    配置windows update失败 还原更改 请勿关闭计算机&#xff0c;电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;配置windows update失败 还原更改 请勿关闭计算机&#x…...

    2022/11/19 21:17:01
  41. 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...

    不知道大家有没有遇到过这样的一个问题&#xff0c;就是我们的win7系统在关机的时候&#xff0c;总是喜欢显示“准备配置windows&#xff0c;请勿关机”这样的一个页面&#xff0c;没有什么大碍&#xff0c;但是如果一直等着的话就要两个小时甚至更久都关不了机&#xff0c;非常…...

    2022/11/19 21:17:00
  42. 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...

    当电脑出现正在准备配置windows请勿关闭计算机时&#xff0c;一般是您正对windows进行升级&#xff0c;但是这个要是长时间没有反应&#xff0c;我们不能再傻等下去了。可能是电脑出了别的问题了&#xff0c;来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...

    2022/11/19 21:16:59
  43. 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...

    我们使用电脑的过程中有时会遇到这种情况&#xff0c;当我们打开电脑之后&#xff0c;发现一直停留在一个界面&#xff1a;“配置Windows Update失败&#xff0c;还原更改请勿关闭计算机”&#xff0c;等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢&#xff0…...

    2022/11/19 21:16:58
  44. 如何在iPhone上关闭“请勿打扰”

    Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...

    2022/11/19 21:16:57