插槽是用来写我们自己的特定的内容
先来看看我们写的组件
index.wxml
<view class="inner">
{{innerText}}--{{propA}}--{{propB}}
<view wx:for="{{ list }}" wx:key="index">{{item.name}}==</view>
<view class="card-header" wx:if="{{useHeader}}">用组件中的</view>
<slot wx:else name="header"></slot>
</view>
这个里面有一些值是需要父组件传进来的， innerText，propA，propB，list，useHeader，所以我们需要在js文件中定义
index.js
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: "default value",
},
propA: {
type: String,
value: "defaultA",
},
propB: {
type: String,
value: "defaultB",
},
list: {
type: Array,
value: [],
},
useHeader: {
type: Boolean | String,
value: true,
},
},
data: {
// 这里是一些组件内部数据
},
methods: {
// 这里是一个自定义方法
customMethod: function () {},
},
});
又因为我们定义的是一个组件，需要在json中标识这是一个组件
index.json
{
"component": true
}
最后就是样式了
index.wxss
.inner {
color: red;
}
接下来父组件中引入子组件，看一下是怎么引入
然后就可以使用base-test组件了
呈现的效果如何呢？
在父组件中传入了5个值 ，都会显示在页面上
如果你不想用组件中的插槽怎么办？将useHeader的值改为false即可
注意，一个组件中先要有一个匿名插槽，再设置具名插槽
组件中如果要使用多具名插槽的话，一定要记得开启这个属性
界面交互
wx.showModal
wx.showLoading
bind:click不起作用？？bindtap可以
这是因为用了van-button，用了vant框架中的按钮组件，自带事件
项目中封装了van-btn，使用组件base-button
<base-button bind:click="testShowModal">测试ShowModal</base-button>base-button组件封装
<van-button
color="{{!plain ? bgColor : color}}"
loading-text="{{loadingText}}"
plain="{{plain}}"
round="{{round}}"
loading="{{loading}}"
open-type="{{openType}}"
disabled="{{disabled}}"
custom-style="{{customStyle}};width:{{width}};height:{{height}};color:{{color}};border:{{!round ? 'none' : ''}}"
block="{{block}}"
custom-class="button-custom-class {{!round ? 'default-border-radius' : ''}}"
bind:opensetting="opensetting"
bind:getphonenumber="getphonenumber"
bind:contact="contact"
bind:getuserinfo="getuserinfo"
bind:click="click"
catch:tap
>
<cl-icon wx:if="icon" name="{{icon}}" size="24rpx;"></cl-icon>
<slot name="icon"></slot>
<slot></slot>
</van-button>
--------------------下面是模态对话框的使用--------------------------------------------------
wx.showModal({
title: "提示",
content: "是否全部退回，该订单采购流程将被终止！",
success(res) {
console.log("成功");
//if (res.confirm) {
// that.setData({
// showRejectPopup: true,
// });
//}
},
});---------------------------------------结束--------------------------------------------------------
------------------------下面是 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框--------
wx.showLoading({
title: "加载中123",
mask: true,
});-------------------------------结束----------------------------------------------------------------------------------------
系统
wx.getSystemInfo 只有在app.js中用到了，获取设备型号等信息
路由
wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。wx.switchTab，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.redirectTo({
url: "/pages/login/index",
});
wx.navigateTo({
url: "/components/bus-search/index",
success: ({ eventChannel }) => {
// console.log(values);
// eventChannel.emit("onSetValue", { values, value, filterItem, placeholder });
},
// events: {
// success({ values, value, text }) {
// than.setData({
// searchText: text,
// });
// than.handleEvent("change", {
// detail: value,
// });
// },
// },
});媒体
图片 wx.previewImage 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作
testpriveImage() {
wx.previewImage({
urls: [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic182.nipic.com%2Ffile%2F20180921%2F10673188_200815472084_2.jpg&refer=http%3A%2F%2Fpic182.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648015005&t=0fde902d792600eae911d19a3848e093",
],
});
},
session.js封装了 wx.getStorageSync，wx.setStorageSync等
