江苏建站公司有哪些-组件化开发,以一个自定模块

2021-04-13 16:16 jianzhan
--------

江苏建站公司有哪些

-------

自定组件我把它分为简易的三个流程, 1.建立组件 --- 2.编写组件  ---   3.启用,应用组件. 

第一步:建立组件

建立一个modal文档夹,里边包括 josn.wxml.wcss.js 四个文档,随后在josn里边加上  component :true (功效是申明这一组文档为自定组件)

 

第二步. 编写组件编码

在modal.wxml :

 view hidden= {{modalHidden}} 
  view  >

在modal.wxss:

.mask_layer {
 width: 100%;
 height: 100%;
 position: fixed;
 z-index: 1000;
left:0;top:0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
.modal_box {
 width: 76%;
 overflow: hidden;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 1001;
 background: #fafafa;
 margin: ⒂0px 12% 0 12%;
 border-radius: 3px;
 
.title {
 padding: 15px;
 text-align: center;
 background-color: gazure;
 
.content {
 overflow-y: scroll; /*超过父盒子高宽比可翻转*/
 
.btn {
 width: 100%;
 margin-top: 65rpx;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 box-sizing: border-box;
 background-color: white;
 
.cancel {
 width: 100%;
 padding: 10px;
 text-align: center;
 color: red;
 
.Sure {
 width: 100%;
 padding: 10px;
 background-color: gainsboro;
 text-align: center;
 
.modalMsg {
 text-align: center;
 margin-top: 45rpx;
 display: block;
}

在modal.js

Component({
 properties: {
 modalHidden: {
 type: Boolean,
 value: true
 }, //这里界定了modalHidden特性,特性值能够在组件应用时特定.写法为modal-hidden
 modalMsg: {
 type: String,
 value:    ,
 }
 },
 data: {
 // 这里是一些组件內部数据信息
 text:  text ,
 },
 methods: {
 // 这里置放自定方式
 modal_click_Hidden: function () {
 this.setData({
 modalHidden: true,
 })
 },
 // 明确
 Sure: function () {
 console.log(this.data.text)
 }
 }
})


第三步, 应用组件

 

这里我是在 pages/index/index 网页页面启用 pages/modal/modal 自定组件

最先在index.json中开展引入表明, 这里是设定自定组件的标识名和引入相对路径

{
  usingComponents : {
  modal :  ../modal/modal 
 }
}


随后在index.wxml启用组件

 !-- 启用modal组件 -- 
 modal modal-hidden= {{is_modal_Hidden}}  modal-msg= {{is_modal_Msg}} / 

在index.js关联数据信息,

Page({
 data: {
 is_modal_Hidden:false,
 is_modal_Msg: 我是一个自定组件 
 }
})

实际效果图:



 

假如需要查询更为详尽的文本文档,能够在官方文本文档查询, 详细地址为:  debug/wxadoc/dev/ponent/





迅速建网站 网站制作 企业网站建设 小程序开发设计 常州企业网站建设 常州商城构建 ---------

江苏建站公司有哪些

------------